Crear un calendario de eventos Elementor con FooEvents (2024)

Cómo, Marketing, Actualizaciones / 1 de enero de 2024 / Por Robin Pietersen

En este tutorial, le mostraremos cómo añadir un calendario de eventos Elementor usando FooEvents en 2024. Los calendarios mostrarán múltiples eventos que se muestran en varias pestañas utilizando diferentes modos de visualización.

Paso 1: Instalar los plugins Elementor y FooEvents Calendar

Primero tendrá que asegurarse de que dispone del Elementor instalado. Puede encontrarlo en wordpress.org e instalado directamente desde la sección de plugins de su sitio web.

Inicie sesión en el panel de administración de WordPress y vaya a Plugins > Añadir nuevo. A continuación, busque Elementor e instale el Creador de sitios web Elementor plugin.

A continuación, busque FooEvents e instale el Calendario de actos de FooEvents FooEvents ofrece dos formas de crear eventos en tu sitio WordPress. La primera opción es añadir los detalles del evento a un post o página estándar de WordPress utilizando la función Calendario FooEvents plugin. Esto se hace al editar el post o página. El plugin FooEvents Calendar añade un formulario básico de configuración de eventos en la parte inferior de los post, páginas y tipos de post personalizados. Usando este formulario, puedes establecer la fecha y hora del evento. Una vez establecidos, se mostrarán en los calendarios generados por el plugin de calendario FooEvents.

La segunda opción, más sofisticada, es utilizar la función FooEvents para WooCommerce Plugin y extensiones para añadir funcionalidad de eventos y venta de entradas a sus productos WooCommerce. FooEvents para WooCommerce permite vender un número ilimitado de entradas directamente desde su sitio web, así como gestionar los registros de entrada utilizando la aplicación gratuita FooEvents Check-ins apps. En FooEvents Reservas también se puede utilizar para vender acceso a franjas horarias reservables, lo que se ilustrará más adelante en este tutorial.

Una vez que haya configurado algunos eventos de prueba, pase al siguiente paso.

Paso 2: Crear una nueva página

Crea una nueva página y establece el título de la página. A continuación, dirígete al constructor de páginas Elementor pulsando el botón Editar con Elementor botón.

Paso 3: Añadir el elemento Elementor Tabs

Una vez cargada la página, añade un elemento Pestañas a la sección principal de la página. Por defecto, Elementor creará dos pestañas de muestra. Elimina la segunda pestaña y expande las opciones de edición de la primera pestaña.

Paso 4: Añadir un calendario de eventos Elementor usando FooEvents

Modifique la primera pestaña y cambie el título a "Todos", antes de añadir la pestaña FooEvents Calendario shortcode a la sección de contenido de la ficha.

[fooevents_calendar id="1"]

Al añadir varios calendarios a una página, es importante especificar un ID único para cada calendario (por ejemplo, id="1″). A continuación, puede previsualizar el calendario, que mostrará todos los eventos que tengan lugar en el mes en curso.

Paso 5: Añadir un calendario para categorías de eventos específicas

A continuación, duplica la pestaña que acabamos de crear y cambia el título a actividades. Este calendario debe mostrar todos los eventos que son actividades. Al crear eventos utilizando el plugin FooEvents para WooCommerce, puedes organizar los eventos utilizando la función de categorías de WooCommerce. Para esta demo, hemos añadido el tour en autobús a la categoría de actividades. Usando el parámetro include_cat del shortcode, podemos filtrar el calendario para mostrar sólo los eventos que han sido categorizados como actividades. También podemos duplicar este proceso para los eventos categorizados como "Conferencias".

[fooevents_calendar id="2″ include_cat="actividades"]

Paso 6: Añadir calendarios para periodos de tiempo específicos

Cree un calendario que sólo muestre los eventos que tienen lugar en el día actual del calendario utilizando el parámetro defaultview con el valor establecido como listday. También puede utilizar este parámetro en combinación con otros parámetros como el parámetro include_cat si es necesario. Siga el mismo proceso y cree una pestaña de vista Semana en la que especifiquemos la vista por defecto como listSemana. Esta vista mostrará todos los eventos que tienen lugar en la semana actual.

Crear una pestaña de vista de mes que muestre todos los eventos que tienen lugar en el mes de calendario actual utilizando listMonth y el parámetro defaultdate para especificar qué mes mostrar. Crear una pestaña para mostrar todos los eventos que tienen lugar en el año en curso utilizando el valor listYear.

[fooevents_calendar id="3″ defaultview="listDay"]

Paso 7: Añadir un Calendario para Eventos Repetidos Específicos

Cree un calendario para eventos específicos que se repiten. Por ejemplo, el recorrido en autobús utiliza el plugin de reservas FooEvents y se repite en varias franjas horarias y fechas. Puede crear un calendario que sólo muestre estas franjas horarias especificando el ID del producto. Todo lo que tendrá que hacer es obtener el ID, crear una pestaña llamada Bus Tour y establecer el ID del producto para el parámetro de entrada. El calendario sólo mostrará las reservas para este evento.

Ya está. Ahora ya sabes cómo utilizar FooEvents y Elementor para añadir calendarios de eventos a tu sitio web que muestren múltiples eventos en varias pestañas utilizando varios modos de visualización. Cada uno de estos calendarios puede ser filtrado utilizando una serie de parámetros shortcode. Puede obtener más información visitando el centro de ayuda de FooEvents y accediendo a la sección calendario shortcodes ayuda doc.

Puede que también le interese este contenido de nuestro socio FooSales WooCommerce POS:

Suscríbase a nuestro boletín

Sea el primero en recibir actualizaciones de productos y ofertas especiales