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 Divi en curso , le mostraremos cómo crear impresionantes plantillas de tipos de publicaciones personalizadas para eventos con Divi utilizando el paquete gratuito de diseño de Meetup. Este tutorial de caso 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 coincida con el paquete de diseño de Meetup. Después de crear esta plantilla, podrá reutilizarla para todos los eventos que comparta en su sitio web.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final en diferentes tamaños de pantalla.
Instale 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, que es uno de los complementos de calendario de eventos de WordPress más populares disponibles en la actualidad. Este es un complemento gratuito que puede encontrar yendo a su panel de WordPress> Complementos> Agregar nuevo> Buscar el complemento 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 control de WordPress > Apariencia > Personalizar . Navegue hasta la tipografía de su sitio web yendo a Configuración general > Tipografía siguiente . Una vez que esté allí, aplique la siguiente configuración:
- Tamaño del cuerpo del texto: 16
- Altura de la línea del cuerpo: 1,9
- Fuente del encabezado: Roboto
La configuración del calendario de eventos
El complemento Calendario de eventos también tiene algunas configuraciones propias en el Personalizador de temas. Vuelve al menú principal de tu Personalizador de temas > Calendario de eventos > Tema general > Y usa los siguientes colores:
- Color de acento: #06c8ff
- Color destacado destacado: #06c8ff
Vuelva a la configuración de Calendario de eventos > Tema general y use el mismo color ‘#06c8ff’ para todas las opciones que puede encontrar allí.
Agregar un nuevo evento
Agregar nuevo evento
Ahora estamos listos para crear un nuevo evento. Para hacerlo, ve a tu 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
- Ubicación
- Organizadores
- Sitio web del evento
- Costo del evento
Agregar imagen destacada
Agregue una imagen destacada a su 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:
Abra la página de destino de Meetup y guarde los elementos de diseño
Localizar y guardar fila en la biblioteca Divi
Trabajar eficientemente 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:
Ubique y guarde la sección en la biblioteca Divi
También necesitaremos la siguiente sección, así que continúe y guarde esta también:
Empezar a crear una plantilla de tipo personalizado de evento
Agregue líneas de código CSS personalizadas para que coincida 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, agregaremos algunas líneas de código CSS por adelantado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
#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 a usar Visual Builder en nuestro evento!
Agregar una nueva sección
Imagen de fondo
Verás que ya hay una sección presente en la página. Ese es el lugar en 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 de medios si ya cargó el paquete de diseño de Meetup en 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.
Borde
También estamos creando este tipo de efecto de línea de tiempo para nuestra plantilla. Vaya a la configuración de su 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 columna:
Dimensionamiento
Abra la configuración de su fila y habilite la opción ‘Hacer esta fila Fulliwdth’ en la configuración de tamaño. Esto es algo que vamos a hacer 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, continúe e importe la fila que ha guardado en su Biblioteca Divi.
Dimensionamiento
Tendremos que 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 módulo de cuerpo de texto y módulo de botón
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
¡Hemos terminado 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 diferentes pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales
En esta publicación de blog de caso 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 guardamos 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!