Producto destacado de Divi: Calendario de eventos Divi

Divi Events Calendar combina el poder del complemento The Events Calendar y Divi Builder, lo que le permite mostrar y diseñar eventos en su sitio web con la funcionalidad completa y la personalización que viene con el creador visual de Divi. Este producto agrega nuevos módulos a Divi Builder. Puede agregar páginas de eventos, calendarios, carruseles, feeds, filtros y entradas a sus diseños y personalizar completamente el diseño de cada módulo.

Si está cansado de sentirse limitado por las opciones de personalización del complemento Calendario de Eventos, o si está buscando una excelente manera de administrar y mostrar información de eventos en su sitio web con la total flexibilidad de diseño de Divi, el Calendario de Eventos Divi puede ser simplemente la solución. En esta publicación, veremos el Calendario de eventos Divi para ayudarlo a decidir si es el producto adecuado para usted.

¡Empecemos!

Instalación del calendario de eventos Divi

Divi Events Calendar funciona con el complemento gratuito de eventos de WordPress, The Events Calendar. Primero, asegúrese de que el complemento esté instalado y activado en su sitio web.

Para instalar el Calendario de eventos Divi, navegue hasta la página del complemento y haga clic en Agregar nuevo. Haga clic en Elegir archivo, seleccione el archivo del complemento .ZIP de su computadora y luego haga clic en Instalar ahora. Una vez que el complemento esté instalado, haga clic en activar.

Calendario de eventos Divi

El complemento agrega siete nuevos módulos al constructor Divi que funcionan junto con el Calendario de eventos para mostrar información de eventos en su sitio web. Echemos un vistazo a cada uno de los módulos.

Calendario de eventos

El módulo de calendario de eventos muestra un calendario de todos sus eventos. Así es como se ve el módulo de calendario antes de cualquier personalización adicional. Las pestañas en la parte superior derecha le permiten cambiar entre diferentes vistas del calendario. Los detalles del evento aparecen en una tarjeta al pasar el mouse y la página del evento se abre al hacer clic.

Configuración de contenido

Ahora, echemos un vistazo a la configuración del módulo.

Contenido

En la pestaña de contenido, puede seleccionar el tipo de eventos a mostrar, la cantidad de eventos por día, elegir limitar la carga de eventos pasados ​​o futuros después de una cierta cantidad de meses y limitar el rango de navegación.

También puede optar por mostrar u ocultar eventos cancelados o pospuestos, eventos virtuales, eventos híbridos o eventos recurrentes, lo que le brinda mucho control sobre lo que se muestra.

Puntos de vista

En la pestaña de vistas, puede configurar la vista de calendario predeterminada, establecer el rango de vista de lista, elegir mostrar u ocultar miniaturas en el calendario y seleccionar qué vistas están disponibles.

Además, puede configurar el orden en que se muestran los eventos del mismo día, configurar el formato de hora, mostrar u ocultar la hora del evento para diferentes tipos de eventos, deshabilitar ciertos días de la semana y configurar el día en que comienza la semana.

Detalles

La pestaña de detalles es donde puede controlar qué detalles del evento se muestran. Aquí hay una lista de los detalles que puede mostrar u ocultar: información sobre herramientas, imagen, título, fecha, hora, hora de finalización, zona horaria, lugar, ubicación, dirección, coma después de la dirección, localidad, coma después de la localidad, estado, coma después estado, código postal, coma después del código postal, país, coma después del país, organizador, precio, categoría, sitio web y extracto. Además, puede configurar el formato de fecha y hora y elegir mostrar el código postal antes de la localidad.

Enlaces

La pestaña de enlaces le brinda cierto control sobre cómo se vinculan los elementos del calendario. Puede habilitar o deshabilitar los enlaces de la página de un solo evento, o puede optar por reemplazarlos con un enlace personalizado o redirigir a un sitio web. También puede habilitar o deshabilitar enlaces de categorías, enlaces de organizadores y enlaces de lugares, y puede elegir si alguno de estos enlaces se abre en la misma ventana o en una nueva pestaña.

Configuración de diseño

En la pestaña de diseño, puedes modificar el aspecto de casi todos los aspectos del módulo de calendario de eventos. Hay configuraciones de diseño para modificar el texto del encabezado, los días de la semana, los días del calendario, los eventos, las miniaturas en los días del calendario, los botones de navegación, los botones de vista, la información sobre herramientas, la imagen de detalles, el texto de las etiquetas de detalles, el texto del título de detalles, el texto de detalles, el texto de extracto de detalles. y, por supuesto, muchas de las configuraciones de diseño predeterminadas de Divi, como tamaño, espaciado, borde, sombra de cuadro, filtros, transformación y animación. Las amplias opciones de diseño disponibles con este módulo facilitan la personalización del calendario para que coincida con el diseño de su sitio web.

Carrusel de Eventos

El módulo Carrusel de eventos agrega un carrusel con información de eventos a la página. Esta es una excelente manera de mostrar múltiples eventos en una página en un formato condensado. Así es como se ve el módulo sin ninguna personalización del diseño.

Ahora, echemos un vistazo a la configuración del módulo.

Configuración de contenido

Primero, exploremos la pestaña de contenido.

Contenido

En la configuración de contenido, puede habilitar o deshabilitar el contenido del evento dinámico. Si está habilitada, esta función le permite colocar el módulo en un diseño de Divi Theme Builder y mostrar dinámicamente categorías de eventos para la categoría o página actual. También puede modificar la cantidad de eventos y las categorías mostradas, personalizar el formato de fecha y hora y la duración del extracto, establecer el número de compensación de eventos y elegir mostrar solo eventos pasados.

Elementos

La pestaña de elementos es donde puede seleccionar los elementos que se muestran en el carrusel. Puede habilitar o deshabilitar lo siguiente: imagen destacada, título, fecha, hora, zona horaria, lugar, ubicación, organizador, precio, categoría, sitio web, extracto, botón de más información, preposiciones y divisores, y detalles del evento.

Opciones de carrusel

Puede mostrar u ocultar flechas y puntos de navegación en la pestaña de opciones del carrusel. También puede habilitar o deshabilitar el arrastre del mouse y el arrastre táctil.

Botón Más información y mensaje Sin resultados

El botón de más información y la configuración de mensajes sin resultados le permiten controlar el texto que se muestra.

Configuración de diseño

En la pestaña de diseño, puede cambiar el diseño del diseño, eventos, imagen, carrusel, texto del título, texto de detalles, texto de extracto y botón de más información, así como el tamaño, espaciado, borde, sombra del cuadro, filtros, etc. opciones de transformación y animación.

Noticias de eventos

Este módulo agrega una fuente de eventos a la página. Así es como se ve sin ninguna personalización del diseño.

En la configuración del módulo, puede personalizar el contenido y el diseño del feed de eventos. Vamos a ver.

Configuración de contenido

Primero, veamos la configuración en la pestaña de contenido.

Contenido

Aquí puede configurar el tipo de eventos que se muestran en el feed. Puede elegir entre todos los eventos, eventos dinámicos, eventos relacionados, eventos destacados o una selección de eventos personalizados.

Aquí puede establecer el estado de los eventos (futuro, pasado o ambos), el punto de corte para los eventos en curso, el orden de los eventos y el recuento de eventos. Puede especificar el estado de los eventos (próximo, anterior o ambos), el punto límite para los eventos en curso, el orden de los eventos y la cantidad de eventos que se mostrarán. Puede ocultar eventos cancelados y pospuestos, virtuales, híbridos o recurrentes en el feed, limitar la cantidad de eventos recurrentes que se muestran y establecer un número de compensación de eventos.

Elementos

En las opciones de elementos, puedes mostrar u ocultar la imagen y el título destacados.

Disposición

En la configuración de diseño, puede cambiar entre el diseño de cuadrícula, el diseño de lista o el diseño de portada. Con el diseño de cuadrícula, puede seleccionar entre 1 y 4 columnas.

Aquí está el diseño de la lista. Puede cambiar el tipo de lista, elegir entre 1 o 2 columnas y habilitar o deshabilitar la visualización de los eventos por mes con encabezados.

Este es el diseño de la portada. Utiliza la imagen destacada del evento como fondo y presenta la información del evento arriba. Puede elegir entre 1 y 4 columnas.

Cuadro de llamada

El cuadro de llamada es donde se puede mostrar la información de fecha y hora, a la izquierda de la imagen en este diseño. Puede optar por mostrar u ocultar el cuadro de llamada. También puede optar por mostrar u ocultar la fecha, mes, día de la semana, año y hora. Para cada elemento que habilite, puede especificar el formato de fecha.

Detalles

En la pestaña de detalles, puede mostrar u ocultar los siguientes elementos del evento: fecha, fechas de varios días, fecha de finalización, hora, hora de finalización, zona horaria, lugar, ubicación, dirección, coma después de la dirección, localidad, coma después de la localidad, estado, coma después del estado, código postal, coma después del código postal, país, coma después del país, organizador, precio, categoría, sitio web y extracto.

Extracto

Aquí puede mostrar u ocultar el extracto, mostrar la descripción o el extracto y establecer la longitud del extracto.

Botón Más información

En la configuración del botón de más información, puede cambiar el texto del botón y elegir mostrar u ocultar el botón.

Paginación

Aquí puede habilitar o deshabilitar la paginación y configurar el tipo de paginación.

Mensaje sin resultados

La pestaña de mensaje sin resultados es donde puede configurar el texto que aparece cuando no se pueden mostrar resultados.

Enlaces

La pestaña de enlaces es donde puede elegir qué elementos están vinculados y cómo se comportan los elementos vinculados. Puede configurar el enlace de la página del evento, hacer que se pueda hacer clic en todo el evento, habilitar enlaces de categoría, organizador y lugar, y configurar el enlace del sitio web.

Conexión

Finalmente, en la pestaña de conexión, puede agregar una palabra clave que conectará el módulo de alimentación a otro módulo. Por ejemplo, puede usar esto para conectar el módulo de feed al módulo de filtro de eventos, de modo que pueda filtrar los eventos que se muestran en el feed. Tenga en cuenta que el ID de conexión solo es necesario si hay varios módulos de filtrado de eventos y de alimentación de eventos en la página. Si solo hay uno de cada, el filtro se conectará al módulo de alimentación automáticamente. Cubriremos el módulo de filtro de eventos en detalle a continuación.

Configuración de diseño

En la pestaña de diseño, tienes control total sobre el diseño del feed de eventos. Puede modificar los eventos, la imagen, los detalles, la leyenda, el texto del título, el texto de detalles, el texto de las etiquetas de detalles, el texto del extracto, la fecha de la leyenda, el mes, el día de la semana, el año y el texto de la hora, el texto del mensaje sin resultados, el botón de más información, cargue más paginación de botones, paginación paginada, paginación numérica, tamaño, espaciado, borde, sombra de cuadro, filtros, transformación y animación.

Filtro de eventos

Echemos un vistazo al módulo de filtro de eventos. Puede utilizar este módulo para filtrar otros módulos de Divi Events Calendar, modificando el contenido mostrado. Actualmente, este módulo solo funciona con el módulo Fuente de eventos, pero el autor del complemento ha indicado que próximamente será compatible con el módulo Calendario de eventos. Aquí está el módulo Filtro de eventos en la parte frontal, con el filtro de rango de fechas seleccionado, filtrando el contenido del módulo Fuente de eventos a continuación.

Echemos un vistazo más de cerca a la configuración del módulo.

Configuración de elementos de filtro

Los elementos de filtro le permiten filtrar el contenido que se muestra en el módulo Fuente de eventos de diferentes maneras. Cada elemento de filtro se agrega como un elemento secundario dentro de la configuración del módulo Filtro de eventos, y cada elemento de filtro tiene su propia página de configuración.

Hay 16 filtros diferentes que puedes agregar al módulo: búsqueda, recurrente, categoría, etiqueta, organizador, lugar, ciudad, país, estado/provincia, ubicación, costo, año, mes, día, estado, hora, rango de fechas, orden. por y futuro/pasado.

Dentro de la configuración de filtro de cada elemento, puede establecer el tipo de filtro, la etiqueta y elegir mostrar eventos relevantes futuros, pasados ​​o ambos. Dependiendo del tipo de filtro que elija, se pueden mostrar opciones adicionales, como método de selección (elementos únicos o múltiples), mostrar/ocultar un ícono desplegable, mostrar elementos desplegables alfabéticamente y criterios de búsqueda.

Muchos de los tipos de filtros se pueden hacer de ancho completo en la configuración de diseño, como se ve aquí con el filtro de búsqueda.

También puede personalizar las opciones de diseño del texto del filtro, el tamaño, el espaciado, el borde y la sombra del cuadro para cada elemento del filtro, lo que permite una gran flexibilidad de diseño. En el siguiente ejemplo, agregué un ícono desplegable al filtro Organizador.

Configuración de contenido

De vuelta en la pestaña de contenido de la configuración del módulo de filtro de eventos, puede configurar la conexión al módulo de filtro en la pestaña de contenido. Esto solo es necesario si tiene más de un conjunto de módulos de filtrado de eventos y fuente de eventos en la misma página. También puede establecer un color de fondo para el filtro.

También en la pestaña de contenido está la configuración de diseño. Actualmente, el diseño horizontal es el único diseño disponible. Sin embargo, el autor del complemento ha dicho que hay planes para agregar un diseño vertical.

Configuración de diseño

En la pestaña de diseño de la configuración del módulo de filtro de eventos, puede modificar el diseño de todo el diseño del filtro. Puede personalizar los estilos de los filtros, filtros activos, menú desplegable de filtros, texto desplegable de filtros, filtros de colapso, botón de búsqueda de filtros, tamaño, espaciado, borde, sombra de cuadro, transformación y animación.

Una opción notable aquí son los filtros de colapso. Con esta configuración, puede mostrar una opción de "ocultar filtros" que le permite mostrar u ocultar los filtros de la vista. También puede habilitar esta opción de forma predeterminada.

Página de eventos

El módulo de página de eventos le permite personalizar completamente el aspecto de las páginas de eventos al permitirle mostrar dinámicamente elementos de eventos y crear diseños de páginas de eventos personalizados con Divi Theme Builder. Puede crear diseños de Theme Builder utilizando el módulo Página de eventos, lo que le brinda total flexibilidad de diseño.

Ejemplos de diseño de página de eventos

Primero, voy a crear una plantilla Divi Theme Builder para todos los eventos.

En la plantilla del creador de temas, agregué un módulo de imagen que está configurado para mostrar dinámicamente la imagen destacada de la publicación, un módulo de título de publicación dinámico y el módulo de página de eventos.

Así es como se ve este diseño básico en la parte frontal, sin ningún estilo.

Si bien este diseño básico es excelente, el poder del módulo de página de eventos radica en la capacidad de usar varios módulos de página de eventos juntos para crear diseños únicos y más interesantes. En la pestaña de detalles de la configuración del módulo, puede habilitar o deshabilitar cualquiera de los elementos. Con solo habilitar uno o un par de elementos en cada módulo, puede colocarlos en todo su diseño de diferentes maneras. A continuación se muestra un ejemplo de un diseño más complejo que utiliza varios módulos de página de eventos.

Y aquí está el esquema de diseño en Divi Theme Builder. Como puede ver, hay varios módulos de página de eventos en este diseño que agregan diferentes detalles del evento a la página.

Aquí hay un vistazo más de cerca al módulo de la página del evento que muestra la hora y la fecha en la parte superior del diseño. En la configuración de detalles de este módulo, solo se han habilitado los módulos de hora y fecha.

Configuración de contenido

En la pestaña de contenido del módulo Página del evento, puede habilitar los detalles que desea mostrar.

Contenido

En contenido, puede habilitar la descripción del evento. En las opciones de avisos, puede habilitar diferentes avisos que aparecen según el estado o tipo del evento.

Detalles

En detalles, puede habilitar o deshabilitar lo siguiente: fecha, hora, hora de finalización, zona horaria, ubicación, lugar, teléfono del lugar, ubicación del lugar, organizador, teléfono del organizador, correo electrónico del organizador, sitio web del organizador, precio, categoría, etiquetas, sitio web, preposiciones y divisores, y extracto. También puede apilar detalles de eventos, habilitar etiquetas/íconos y apilar etiquetas/íconos.

mapas de Google

En la pestaña Google Maps, puede habilitar el enlace de Google Maps, habilitar Google Map y agregar su clave API de Google Maps.

Eventos virtuales

En la pestaña Eventos virtuales, puede habilitar enlaces a una reunión de Zoom, una reunión de Webex, un video en vivo de Facebook o un video en vivo de YouTube. También puede cambiar el texto del botón del evento virtual.

Añadir al calendario

La configuración de Agregar al calendario le permite habilitar el botón y modificar el texto del botón que se muestra.

Enlace

En la pestaña Enlace, puede configurar cómo aparece el enlace del sitio web y cambiar el destino del enlace para diferentes elementos del evento. También puede personalizar el Fondo y la etiqueta de Administrador en la configuración debajo de esto.

Configuración de diseño

En la pestaña de diseño, puedes personalizar completamente el aspecto de cada elemento. Puede modificar la configuración de diseño para lo siguiente: aviso de evento pasado, aviso de estado de evento, texto de descripción, texto de detalles, texto de etiquetas de detalles, mapa, botón Agregar al calendario, enlaces Agregar al calendario, botón de evento virtual, tamaño, espaciado, borde, sombra de cuadro, filtros, transformación y animación.

Eventos Suscríbete

El módulo de suscripción a eventos es un módulo simple que le permite agregar un botón de suscripción al calendario a su diseño. Al pasar el mouse, el botón muestra varios métodos diferentes para suscribirse al calendario de eventos, incluidos iCal, Google Calendar, Outlook, archivos .ics y más.

Este módulo no viene con muchas opciones adicionales, pero puedes diseñar completamente el botón usando la opción de estilos personalizados en la pestaña de diseño.

Entrada para eventos

El módulo Entradas para eventos funciona con el complemento gratuito Entradas para eventos del complemento Calendario de eventos para mostrar entradas y secciones de confirmación de asistencia en las páginas de su evento. En la configuración del contenido del módulo, puede habilitar entradas para eventos, confirmación de asistencia al evento, confirmaciones de usuario, pago y un mensaje de éxito.

El autor del complemento ha indicado que este módulo es nuevo y tiene funciones limitadas en este momento; sin embargo, esperan agregar configuraciones de diseño en el futuro. Por ahora, así es como aparece la sección Confirmar asistencia en una de las páginas del evento.

Comprar Calendario de Eventos Divi

El calendario de eventos Divi está disponible en Divi Marketplace. Cuesta $45 por uso ilimitado del sitio web y 1 año de soporte y actualizaciones. El precio también incluye una garantía de devolución de dinero de 30 días.

Pensamientos finales

Divi Events Calendar reúne la funcionalidad del complemento The Events Calendar y la flexibilidad de diseño de Divi Builder en un complemento que facilita la visualización de eventos en su sitio web y el diseño de los módulos para que coincidan con el diseño de su sitio web. Cada módulo es fácil de usar y configurar, y la mayoría de ellos tienen opciones de diseño integrales que puede utilizar para crear hermosos diseños de páginas de eventos. Si está buscando una excelente manera de mostrar eventos en su sitio y al mismo tiempo tener control total sobre el diseño usando Divi, este puede ser un gran producto para usted.

¡Nos encantaría saber de usted! ¿Has probado el Calendario de eventos Divi? ¡Cuéntanos lo que piensas al respecto en los comentarios!