Cómo crear una barra de promoción animada para sus plantillas de página en Divi


Crear una barra de promoción animada para su plantilla de página en Divi puede ser una excelente manera de anunciar productos y ofertas con estilo sin tener que depender de un complemento. Con las potentes funciones de diseño de Divi, puede crear visualmente la barra de promoción cuando edite una plantilla en Divi’s Theme Builder. Luego, una vez que la plantilla esté lista, la barra de promoción aparecerá en cualquier página que haya sido asignada a esa plantilla. ¡Fácil!

¡Saltemos y comencemos!

Vistazo

Aquí hay un vistazo rápido a la barra de promoción que crearemos en este tutorial.

También le mostraremos cómo hacer que la barra de promoción sea fija (o fija).

Descargue la plantilla de la página de la barra de promoción GRATIS

Para poner sus manos en la plantilla de la página de la barra de promoción de este tutorial, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json al Divi Theme Builder usando el Opción de portabilidad del generador de temas.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberás instalar y activar el tema Divi. Asegúrate de tener la última versión de Divi.

También necesitará al menos una página creada con Divi Builder con fines de prueba para asignar la plantilla de la barra de promoción a esa página para mostrar el resultado.

Después de eso, estás listo para partir.

Crear una barra de promoción animada en la parte superior de una plantilla de página

Crear una nueva plantilla

Desde el Panel de WordPress, navegue hasta Divi> Generador de temas. Luego haga clic en el cuadro "Agregar nueva plantilla" para crear una nueva plantilla.

Asigne la plantilla a las páginas en las que desea que se muestre la barra de promoción.

En la nueva plantilla, haga clic en el área "Agregar cuerpo personalizado" y luego seleccione "Crear cuerpo personalizado".

NOTA: Estamos agregando la barra de promoción al área del cuerpo de la plantilla (no el encabezado) para que pueda funcionar con el encabezado predeterminado de Divi, así como cualquier encabezado personalizado que pueda agregar en el futuro.

Luego seleccione la opción "Construir desde cero".

Agregar la barra de promoción a la plantilla

Dentro del Editor de diseño de plantillas, podemos comenzar a construir la barra de promoción usando Divi Builder.

Comience agregando una fila de una columna a la sección regular.

Configuración de fila

Antes de agregar un módulo, actualice la configuración de Fila de la siguiente manera:

  • Gradiente de fondo Color izquierdo: # 4a42ec
  • Color de fondo del degradado correcto: # 521d91
  • Dirección de degradado: 90 grados
  • Usar ancho de canal personalizado: SÍ
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%
  • Acolchado: 0px arriba, 0px abajo

Eso se encarga del color de fondo y el ancho de la barra de promoción que estamos creando.

Configuraciones de columna

Antes de abandonar la configuración de la fila, haga clic para abrir la configuración de la columna. Luego agregue el siguiente CSS personalizado al elemento principal de columna:

display: flex;
align-items: center;
justify-content: center;

Este CSS utiliza la propiedad flex para alinear el contenido (o módulos) dentro de la columna para apilar horizontalmente (uno al lado del otro). También centra los módulos dentro de la columna tanto vertical como horizontalmente. La razón por la que lo hacemos de esta manera es para evitar tener que usar múltiples estructuras de filas de columnas que se apilarán una encima de la otra en dispositivos móviles. Con esta configuración, el contenido permanecerá en una alineación horizontal en todos los anchos del navegador.

Ahora estamos listos para agregar contenido a la barra de promociones.

Agregar el módulo Blurb

Para el contenido de esta promoción de ejemplo, incluiremos un módulo publicitario con un pequeño icono y un blog de texto con un botón a la derecha (al igual que la barra de promoción en Elegantthemes.com).

Haga clic en el círculo gris más el ícono dentro de la fila y agregue un módulo publicitario.

Para el contenido de la propaganda, ingrese lo siguiente:

  • Título: (ingrese el texto de la promoción)
  • Use el icono: SÍ
  • Icono: icono de regalo (ver captura de pantalla)

Actualice la configuración de diseño de publicidad de la siguiente manera:

  • Color del icono: # ff4a9e
  • Colocación de imagen / icono: izquierda
  • Usar tamaño de fuente de icono: SÍ
  • Tamaño de fuente del icono: 16px
  • Tamaño del texto del título: 16px (escritorio), 14px (teléfono)
  • Título de línea Hewight: 1.3em
  • Ancho máximo: 230 px (solo teléfono)
  • Acolchado: tapa de 10px
  • Estilo de animación: diapositiva
  • Dirección de animación: derecha
  • Retraso de animación: 250 ms

Agregar el módulo de botones

A continuación, agregue un módulo de botón debajo del módulo de publicidad. Debido a la propiedad flex, el módulo aparecerá a la derecha de la propaganda en lugar de debajo de él.

Actualice la configuración de diseño del botón de la siguiente manera:

  • Usar estilos personalizados para el botón: SÍ
  • Tamaño del texto del botón: 15 px (escritorio), 13 px (teléfono)
  • Color del texto del botón: #ffffff
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 20 px
  • Peso de la fuente del botón: semi negrita

  • Margen (escritorio): quedan 20 px
  • Margen (teléfono): quedan 10 px
  • Relleno (escritorio): 0px arriba, 0px abajo
  • Acolchado (teléfono): 2 píxeles superior, 2 píxeles inferior, 8 píxeles izquierda, 8 píxeles derecha
  • Estilo de animación: rebote
  • Retraso de animación: 1000 ms

Configuraciones de sección

Para completar el diseño de la barra de promoción, actualice la sección que contiene la barra de promoción de la siguiente manera:

  • Acolchado: 0px arriba, 0px abajo
  • Estilo de animación: rebote
  • Dirección de animación: abajo
  • Duración de la animación: 500 ms
  • Retraso de animación: 250 ms
  • Opacidad de inicio de animación: 100%
  • Índice Z: 999

Agregar el módulo de contenido de publicación de ancho completo

En este punto, la barra de promoción está lista para funcionar. Pero como se trata de una plantilla, debemos asegurarnos y agregar el módulo de contenido de publicación para mostrar el contenido de las páginas que usan esta plantilla.

Para las páginas que se crean (o se construirán) con Divi Builder, querrás usar un módulo de contenido de publicación de ancho completo para maximizar el área de contenido.

(NOTA: Para las páginas que usan el editor predeterminado, querrá usar un módulo de contenido de publicación regular dentro de una sección regular para que tenga un ancho máximo similar de 1080px de manera predeterminada).

Agregar sección de ancho completo

En la sección que contiene su barra de promoción, agregue una sección de ancho completo.

Agregar módulo de contenido de publicación de ancho completo

Luego seleccione el módulo de contenido de publicación de ancho completo.

Eso sobre lo hace. Ahora asegúrese de guardar el diseño antes de salir del editor.

Luego guarde los cambios para el generador de temas también.

Resultado final

antes de

Ahora aquí está la página antes de asignar la plantilla con la barra de promoción.

Después

Y aquí está la misma página con la nueva plantilla con la barra de promoción.

Aquí está en el móvil.

Aquí está la animación de la barra de promoción en la carga de la página.

Hacer la barra promocional pegajosa

Para que la barra de promoción se pegue debajo del encabezado Divi predeterminado, podemos agregar un fragmento CSS simple a la sección que contiene la barra de promoción.

Abra la configuración de la sección y agregue el siguiente CSS al elemento principal en el escritorio:

position: fixed;
width: 100%;

Luego agregue el siguiente CSS al elemento principal en la tableta:

position: relative;

Ahora mira el resultado.

No olvides los enlaces

Una vez que haya creado la barra de promoción, deberá agregar la URL del enlace a la oferta o página promocional. Puede agregar la URL del enlace del botón en la pestaña de contenido de configuración del botón.

Incluso para las conversiones, también puede agregar la URL del enlace a toda la fila, en la opción de enlace de configuración de fila.

Pensamientos finales

En este tutorial, le mostramos cómo diseñar una barra de promoción (desde cero) usando Divi Theme Builder. La barra de promoción se completa con múltiples animaciones y diseños para que realmente se destaque entre los visitantes. Incluso puede hacer que la barra de promoción sea fija al desplazarse hacia abajo en la página para obtener aún más visibilidad. Y con la capacidad de controlar dónde aparece la barra de promoción en todo su sitio, la aplicación es extremadamente práctica.

Esperemos que esto te inspire a crear algunas barras de promoción propias.

Espero tener noticias suyas en los comentarios.

¡Salud!