Cómo crear un calendario de adviento online con Divi (sin plugin)

La recta final antes de las fiestas está marcada a veces por un calendario de adviento. A los pequeños les encanta 😍 ¿Y a nosotros? A nosotros también nos encanta. En este tutorial, te enseñaré a crear un calendario de adviento online con Divi... ¡y nada más!

¡Vamos!

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

Creación de un calendario en línea con Divi: explicación en vídeo

Antes de continuar con este artículo, permítanme darles un video de cómo construir un calendario de adviento digital con Divi...

Si el vídeo no aparece, ir aquí.

Comprender los requisitos de visualización de Divi

Si has visto el vídeo, te habrás dado cuenta de que es bastante fácil crear un calendario de adviento con Divi porque el constructor de páginas ofrece una característica indispensable: condiciones de visualización basadas en la fecha y la hora.

Todo el diseño de este calendario se basa en esta característica bastante desconocida.

De hecho, no solemos necesitarlas, pero en este caso, estas opciones de visibilidad son muy apreciadas y nos ahorran añadir extensiones y más extensiones.

¿Pero cómo funciona? Aquí tienes una explicación detallada:

Como sabes, todos los módulos, líneas y secciones del Divi Builder se componen de 3 pestañas: Contenido, Estilo y Avanzado.

Las opciones de las condiciones están disponibles en la pestaña avanzada de cada elemento, lo que le da una amplia posibilidad de uso: puede añadir una condición en un módulo, en una línea o en una sección.

1. Basta con ir a la pestaña Avanzado > Condiciones del elemento elegido.
2. Haga clic en el icono "+".
3. Elija la condición que desea utilizar.

En el caso de nuestro calendario de adviento digital, necesitaremos principalmente la condición basada en el tiempo (en la categoría Interacción), que se llama Fecha y Hora.

Pero le invito a explorar todos los demás tipos de condiciones, algunas de las cuales puede que le resulten útiles en algún momento. Para saberlo todo, le invito a ver el artículo oficial.

La condición de fecha y hora de Divi le ofrece entonces otras opciones, como :

• "si después".
• "si antes
• "si una fecha específica".
• " si no es una fecha concreta
• "si es un día específico de la semana
• "si es el primer día del mes
• "si es el último día del mes

Para nuestro calendario de Adviento, sólo necesitamos las 3 primeras opciones, a saber:

• "si después".
• "si antes
• "si una fecha específica".

Ahora vayamos al grano...

Paso 1: Crear el lienzo del calendario

Para empezar, hay que crear la arquitectura del calendario:

Si tenemos en cuenta que el calendario de adviento comienza el 1 de diciembre y termina el 24 de diciembre, tendremos que crear 24 cajas para entregar sus bonos digitales.

La arquitectura más sencilla sería entonces crear una sección (azul) formada por 4 filas/líneas (verde), cada una de ellas cortada en 6 columnas. Esta es la elección que hice, pero puedes poner 6 filas/líneas cortadas en 4 columnas, ¡eso también servirá!

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

Paso 2: Crear el primer día del calendario de adviento

Primero nos centraremos en crear el primer día del calendario, cuando funcione correctamente y tenga el diseño perfecto, lo duplicaremos 23 veces (como hice en el vídeo) - sí, ¡intentemos ahorrar nuestro tiempo!

Cada caja diaria constará de 4 módulos. Aquí están los detalles...

Módulo 1 que se muestra todo el tiempo

En la primera columna, coloque un módulo de texto o un módulo de imagen. Se trata de mostrar el título del día (1 de diciembre, 2 de diciembre, 3 de diciembre, etc.).

Esto debería ser siempre visible.

Nota: en este tutorial he utilizado un módulo de Texto, pero en mi "verdadero" calendario de advientoHe creado pequeños emojis, así que he utilizado un módulo de imagen. Es usted quien debe imaginar qué es lo más apropiado para sus necesidades...

Módulo 2 que se muestra antes de que llegue la fecha actual

En mi ejemplo, he utilizado simplemente un módulo de texto. Por ejemplo, puedes colocar un texto como "Vuelve el día D para abrir esta caja". De este modo, el internauta que pase por delante entenderá que esta caja sólo estará disponible a partir del 1 de diciembre.

Para asegurarse de ello, vaya a la pestaña Avanzado > Condiciones y elija la opción "Es antes". A continuación, aparecerá un selector de fechas: elija el día en cuestión (en este caso, el 1 de diciembre).

Justo debajo, está el horario que hay que definir.

Por mi parte, he elegido "0h01", para que no haya ambigüedad, estamos hablando del 1 de diciembre.

Guarde los cambios.

Módulo 3, que sólo aparece en el Día D

Puede utilizar el módulo más adecuado: un módulo de vídeo, una imagen, un texto, un botón, etc. Para mi ejemplo, he utilizado un módulo de llamada a la acción que permite añadir texto y un botón.

Texto de ejemplo: "Descubra la prima del día

Ejemplo de CTA: "Abrir".

Debe asegurarse de que este módulo sólo aparezca el día D. Para ello, vaya a la pestaña Avanzado > Condiciones y elija la opción "Es en una fecha específica. A continuación, accederá a un selector de fechas: elija el día en cuestión (en este caso, el 1 de diciembre) y active la opción Todo el día (justo debajo).

Módulo 4, que se muestra después de la fecha

Por último, el cuarto módulo puede volver a ser un módulo de texto. En mi ejemplo, he indicado "Qué pena, vuelva el año que viene".

Este módulo debe aparecer después de la fecha, es decir, al día siguiente.

La acción es bastante similar a las anteriores: vaya a la pestaña Avanzado > Condiciones y elija la opción "Es después de", luego elija el día en cuestión - aquí, el 1 de diciembre - a las 23:59 (o incluso del día siguiente a las 0:01 - la elección es suya).

Paso 3: terminar el calendario y el diseño

Es posible que quiera hacer pruebas con plazos más cortos, sólo para asegurarse de que todo funciona correctamente en términos de pantallas.

Advertencia: si utilizas un plugin de caché, configúralo para excluir tu calendario de adviento de la caché, ya que esto podría impedir su correcto funcionamiento.

💡 Mi consejo: ¡pulir el diseño de esta primera caja antes de duplicarla 23 veces!

Algunas ideas de diseño:

• añadir un color de fondo dentro de la columna
• añadir un emoji o una imagen
• añadir un borde o una sombra dentro de la columna
• etc.

Pero sobre todo, compruebe el versión móvil y hacer optimizaciones si es necesario.

Una vez que la primera caja esté perfecta, duplícala.

💡 El truco es hacer lo que hice en el vídeo (en el minuto 5:15): duplicar toda la columna, ya que está formada por 4 módulos, es más productivo así.

Paso 4: Entrega de bonificaciones digitales

Por último, hay algo de lo que aún no hemos hablado: ¿cómo entregar las bonificaciones del calendario de adviento digital?

Pues bien, hay muchas formas de conseguirlo, ya que depende de lo que se quiera ofrecer:

• Contenido escrito
• Un audio
• Un vídeo
• UN PDF
• Un enlace a un contenido externo
• Un producto digital para descargar
• Un código promocional en su tienda

Así que hay miles de maneras de pensar en su diseño.

Opción 1: la más fácil

Podrías perfectamente poner la bonificación directamente en la casilla que es visible en el día D (módulo 3). Esta sería la forma más fácil y la que menos trabajo requeriría.

⚠️ Pero cuidado, si tu contenido es grande, ampliará la caja del día y esto puede alterar el diseño general del calendario.

En cambio, si se trata de un simple enlace a un contenido externo (a una unidad de disco, por ejemplo) o a una promoción oculta en su tienda, puede ponerlo directamente en el botón "Abrir".

Opción 2: que requiere más trabajo

La otra opción sería crear una sección dedicada a la entrega de la bonificación. Esta es la opción que te mostré en mi video.

Es mucho más trabajo, pero puedes poner lo que quieras en esta parte sin demasiadas limitaciones.

La idea sería entonces crear una nueva sección debajo del calendario y definirle un ID CSS que cree un enlace que dirija al usuario a pulsar el botón "Abrir" (vale, no es una explicación muy clara 😱).

Paso a paso, se ve así:

1. En cada casilla del calendario (o preferiblemente antes de duplicar sus casillas, para que sólo haga la acción una vez), añada el ancla del enlace desde la pestaña Contenido > Enlace. Para mi ejemplo, ya que el módulo es una llamada a la acción, puse el enlace en el botón de este módulo.
2. Elijo un ancla de enlace, por ejemplo #entregar.
3. Debajo del calendario, añada una sección que se utilizará para entregar las bonificaciones. Abra su configuración y vaya a la pestaña Avanzado.
4. En el campo ID del CSS, introduzca un identificador único, por ejemplo entregar.
5. Cuando el usuario pulse el botón "Abrir", será redirigido a la sección que entrega las bonificaciones 🤩

A continuación, en la sección que se utiliza para entregar las bonificaciones, añada 24 filas (en verde). Cada uno contendrá una bonificación para cada día. Puedes añadir todos los módulos que necesites: texto, imagen, botón, vídeo, etc.

Sin embargo, no debe olvidar establecer las condiciones de visibilidad para cada una de estas líneas. La línea de bonificación n°1 debe ser visible sólo el 1 de diciembre, la línea de bonificación n°2 debe ser visible el 2 de diciembre, y así sucesivamente.

Creo que ya sabes cómo hacerlo, pero aquí tienes un recordatorio:

1. En la configuración de la línea, vaya a la pestaña Avanzado
2. Añadir una condición de fecha y hora
3. Optar por la visibilidad en una fecha determinada
4. Seleccione la fecha correcta
5. Si es necesario, active la opción "Todo el día".

Ya está, ¡tu calendario de adviento digital está listo! Bueno, no del todo, porque ahora tendrás que llenar cada caja con regalos 🤪.

Calendario de Adviento Divi en imágenes

Por último, es cierto que este tutorial es muy detallado, pero en sí mismo, ¡no es muy complicado!

Sin embargo, esto no deja de ser un ejercicio tedioso, ya que no sólo hay que tener en cuenta el diseño del calendario de Adviento, sino también el trabajo para hacer los 24 bonos.

Aquí están las imágenes de dos calendarios diferentes:

El siguiente es el Calendario de Adviento de Divi Tips En la parte superior de la imagen, esta es la parte visible, en la parte inferior de la imagen, esta es la parte cuando el Divi Builder está activo.

En 2019 y 2020, mi calendario de adviento hizo las delicias de cientos de internautas. En 2021, no tuve tiempo de prepararlo. He dudado durante 2022, porque lo has entendido, ¡es un gran bloque! Pero me complace anunciar su regreso... Para que no te olvides de visitarlo cada día, he preparado incluso un recordatorio para añadir a tu agenda. 👉 ¡Está aquí!

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficaz con mi formación en Divi !