Cómo Hacer una Barra Promocional Animada con Divi

Una barra de promoción animada hecha con Divi puede ser una excelente manera de anunciar productos y ofertas con estilo sin depender de un plugin.

Gracias a las herramientas de diseño de Divi vamos a añadir una barra promocional animada dentro del cuerpo de una plantilla del Theme Builder.

Y una vez que la plantilla esté lista, la barra animada aparecerá en cualquier página que haya sido asignada a esa plantilla. ¡Así de fácil!

Para comenzar a crear nuestra barra promocional animada con Divi vamos a ir al Theme Builder de Divi y vamos a crear una nueva plantilla.

Esta nueva plantilla la vamos a asignar a «páginas específicas» en las que queramos mostrar la barra promocional animada.

También podrías elegir entradas específicas, en lugar de páginas, o cualquier tipo de contenido donde quieras mostrar la barra promocional animada de Divi.

Lo que vamos a editar para añadir la barra promocional animada es el Cuerpo de la plantilla, por lo que podemos dejar que la nueva plantilla use el encabezado global sin problemas.

Sección para la Barra Promocional

En primer lugar añadimos una sección o bien usamos la sección pre-cargada para que sea la barra propiamente dicha.

Fondo:

• Color gradiente 1: #4a42ec
• Color gradiente 2: #521d91
• Dirección del gradiente: 90deg

Separación:

• Margen superior: 15px
• Relleno superior e inferior: 0px

Animación:

• Estilo de animación: Rebote
• Dirección: Hacia abajo

Fila para el Contenido de la Barra

Luego de configurar los ajustes de la sección añadimos una fila con estructura de 1 columna para poder comenzar a añadir los módulos.

Primero configuramos sus ajustes de la siguiente manera.

Tamaño:

• Ancho máximo: 500px
• Alineación: centrado

Separación:

• Relleno superior: 5px
• Relleno base: 0px

Módulo Anuncio

El primer módulo que vamos a añadir en nuestra barra promocional es un Módulo Anuncio de Divi.

Texto:

• Título: Consigue Tu Regalo (o lo que quieras poner).
• Cuerpo: eliminar contenido precargado.

Imagen e Icono (pestaña Contenido):

• Usar ícono: Sí.
• Icono: regalo

Imagen e Icono (pestaña Diseño):

• Color de icono: #ff4a9e
• Ubicación de la imagen o ícono: Izquierda
• Usar tamaño de fuente de ícono: Sí
• Tamaño de fuente de ícono: 16px
• Color del texto: blanco
• Tamaño del texto: 16px

Separación:

• Margen superior: 5px
• Margen base: 0px
• Margen derecho: 25px

Animación:

• Estilo de animación: Diapositiva
• Dirección: Hacia abajo

CSS Personalizado

• Elemento principal: float: left;

Módulo Botón

Y por último vamos a añadir un botón para completar la llamada a la acción. Para eso usamos por supuesto el Módulo Botón de Divi y lo configuramos de la siguiente manera:

Texto:

• Botón: Clic aquí.

Enlace

• URL del enlace del botón: #

Botón:

• Estilos personalizados para botón: Sí
• Tamaño del texto: 15px
• Color del texto: blanco
• Fondo: #ff4a9e
• Ancho del borde: 0px
• Radio: 20px
• Espesor: Semi bold

Separación:

• Margen base: 0px
• Relleno superior y base: 0px

Animación:

• Estilo de animación: Rebotes

Sección para el Contenido de la Página

Insertamos una nueva sección de ancho completo al solo efecto de incluir en la plantilla que estamos creando el contenido actual de las páginas en las que la utilicemos.

Como estamos diseñando el cuerpo de una plantilla no es suficiente con crear la barra. También debemos procurar mostrar el contenido de la página.

Módulo Contenido de Publicación de Ancho Completo

Por último insertamos un módulo Contenido de Publicación de Ancho Completo para que muestre el contenido de la página que use esta plantilla.

 

Espero que te hayan gustado. Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi.

Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.