Creación de impresionantes plantillas de tipo de publicación personalizadas para eventos con Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo crear impresionantes plantillas de tipo de publicación personalizadas para eventos con Divi utilizando el paquete de diseño de Meetup gratuito. Este tutorial de casos de uso es posible gracias a la función de soporte de tipo de publicación personalizada de Divi Builder, una de las actualizaciones recientes de Divi. Vamos a crear una plantilla que coincidirá con el paquete de diseño de Meetup. Después de crear esta plantilla, podrá reutilizarla para todos los eventos que comparte en su sitio web.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final en diferentes tamaños de pantalla.

Instalar el complemento del calendario de eventos

Vaya a Complementos y agregue uno nuevo

Para agregar tipos de publicaciones personalizadas de eventos a nuestro sitio web, usaremos el complemento Calendario de eventos. Este es un complemento gratuito que puede encontrar yendo a su panel de control de WordPress> Complementos> Agregar nuevo> Buscando el complemento del calendario de eventos .

Activar complemento

Una vez que haya instalado el complemento, asegúrese de activarlo de inmediato para que pueda comenzar a usarlo.

Cambiar la configuración del personalizador de temas

Cambiar tipografía

Ahora, antes de crear un evento, comencemos por entender bien los fundamentos de nuestro sitio web. Abra su Personalizador de temas yendo a su panel de WordPress> Apariencia> Personalizar . Navegue a la tipografía de su sitio web yendo a Configuración general> Tipografía a continuación . Una vez que esté allí, aplique la siguiente configuración:

• Tamaño del texto del cuerpo: 16
• Altura de la línea del cuerpo: 1,9
• Fuente de encabezado: Roboto

La configuración del calendario de eventos

El complemento Calendario de eventos también tiene algunas de sus propias configuraciones en el Personalizador de temas. Regrese al menú principal de su Personalizador de temas> El calendario de eventos> Tema general> Y use los siguientes colores:

• Color de acento: # 06c8ff
• Color destacado destacado: # 06c8ff

Regrese a la configuración de El calendario de eventos> Tema general y use el mismo color '# 06c8ff' para todas las opciones que pueda encontrar allí.

Agregar un evento nuevo

Agregar nuevo evento

Ahora estamos listos para crear un nuevo evento. Para hacerlo, vaya a su panel de WordPress> Eventos> Agregar nuevo . Una vez que haya agregado un nuevo evento, asegúrese de darle un título también.

Agregar detalles del evento

Continúe ingresando los detalles de su evento. Esto incluye:

• Hora Fecha
• Localización
• Organizadores
• Sitio web del evento
• Costo del evento

Agregar imagen destacada

Agrega una imagen destacada a tu evento también. Más adelante en esta publicación, eliminaremos esto de la interfaz, pero aún lo necesitaremos para compartir en redes sociales.

Cambiar la configuración de la página Divi

En la esquina derecha de su evento, verá la configuración de la página Divi. Allí, elimine la barra lateral seleccionando 'Sin barra lateral' para el Diseño de página.

Publicar evento

Ahora estamos listos para comenzar a trabajar en la interfaz. Anímate y publica tu evento.

Este es el diseño de página predeterminado sin haber habilitado Visual Builder:

Abrir la página de destino de Meetup y guardar elementos de diseño

Localizar y guardar fila en la biblioteca Divi

Trabajar de manera eficiente es más importante que trabajar duro. Es por eso que vamos a ahorrarnos algo de tiempo y esfuerzo al reutilizar elementos del paquete de diseño de Meetup. Comience abriendo la página de destino con Visual Builder de Divi. Luego, ubique la siguiente fila en su página y guárdela en su Biblioteca Divi:

Localizar y guardar la sección en la biblioteca Divi

También necesitaremos la siguiente sección, así que sigue adelante y guarda esta también:

Comience a crear una plantilla de tipo personalizado de evento

Agregue líneas de código CSS personalizadas para que coincidan con el paquete de diseño de Meetup

Podemos usar Visual Builder para páginas de eventos, pero desafortunadamente, no podemos usarlo en todas partes. Para asegurarnos de que todo esté en línea con el paquete de diseño de Meetup, vamos a agregar algunas líneas de código CSS por adelantado:

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

Cambiar a Visual Builder

¡Ahora podemos cambiar para usar Visual Builder en nuestro evento!

Agregar una nueva sección

Imagen de fondo

Verá que ya hay una sección presente en la página. Ese es el lugar de la página que podemos modificar. Comience abriendo la configuración de la sección y agregue la imagen de fondo ' bg-4.png '. Puede encontrar esta imagen en su biblioteca multimedia si ya ha subido el paquete de diseño de Meetup a su sitio web. Junto con la imagen de fondo, use la siguiente configuración:

• Tamaño de la imagen de fondo: tamaño real
• Posición de la imagen de fondo: abajo a la derecha

Espaciado

Abra la configuración de Espaciado de su sección a continuación y agregue '100px' al margen superior.

Frontera

También estamos creando este tipo de efecto de línea de tiempo para nuestra plantilla. Vaya a la configuración de Borde y agregue el siguiente borde izquierdo:

• Ancho del borde izquierdo: 7px
• Color del borde izquierdo: # 8301e9

Agregar una nueva fila

Estructura de la columna

Ahora que hemos terminado de modificar la configuración de la sección, podemos comenzar a agregar nuestras filas. Agregue una nueva fila con la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de su fila y habilite la opción 'Completar esta fila' en la configuración de Tamaño. Esto es algo que haremos para cada una de las filas dentro de este diseño.

Agregar módulo de texto a la fila

Dimensionamiento

A continuación, agregue un módulo de texto con una descripción de su evento, pase a la configuración de tamaño y use el siguiente ancho:

• Escritorio: 47%
• Tableta y teléfono: 100%

Importar fila guardada

Justo debajo de la fila que ha agregado, siga adelante e importe la fila que ha guardado en su Biblioteca Divi.

Dimensionamiento

Necesitaremos modificar algunas cosas sobre esta fila, comenzando con la configuración de Tamaño. Habilite la opción 'Hacer esta fila de ancho completo'.

Eliminar el módulo de texto del cuerpo y el módulo de botones

A continuación, elimine el párrafo del Módulo de texto y el Módulo de botones en la primera columna.

Clonar módulo de texto y eliminar tamaño

Continúe y clone el Módulo de texto en su primera fila y colóquelo en la primera columna de su nueva fila. Abra la configuración de Tamaño a continuación y elimine el Ancho personalizado para el escritorio.

Importar sección guardada

¡Terminamos de modificar la primera sección! Continúe e importe la sección que ha guardado a continuación.

Añadir borde

También estamos agregando un borde izquierdo a esta sección:

• Ancho del borde izquierdo: 7px
• Color del borde izquierdo: # 06c8ff

Cambiar el tamaño de cada fila

Hay un par de filas dentro de la sección que acaba de importar. Habilite la opción 'Hacer esta fila de ancho completo' para cada una de estas filas.

Cambiar la alineación de los botones

Por último, cambie también la alineación de botones a la izquierda.

Guardar plantilla en la biblioteca Divi

Agregar a la biblioteca

¡La plantilla de diseño está terminada! Ahora puede guardarlo en su biblioteca Divi y reutilizarlo también para otros eventos.

Avance

Ahora que hemos seguido todos los pasos diferentes, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación de blog de casos de uso, le mostramos cómo crear impresionantes plantillas de tipos de publicaciones personalizadas para eventos. La plantilla que hemos creado coincide con el estilo del paquete de diseño de Meetup. Después de crear esta plantilla, también la hemos guardado en la Biblioteca Divi para que podamos reutilizarla también para otros eventos. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!