crear una barra promociones y La animación para la plantilla de su página en Divi puede ser una excelente manera de anunciar productos y ofertas elegantes sin tener que depender de un complemento. Con las potentes funciones de diseño de Divi, puede crear visualmente el promociones y cuando editas una plantilla en Divi Theme Builder. Luego, una vez que el modelo esté listo, la barra promociones y aparecerá en cualquier página asignada a esta plantilla. 

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

Lo que necesitas para empezar

Para comenzar, debes para instalar y activar el tema Divi . Asegúrese de tener la última versión de Divi.

También necesitará al menos una página creada con Divi Builder para fines de prueba, que se verá afectada por la plantilla de la barra de promoción.

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

Crea una nueva plantilla

Desde el panel de WordPress, vaya a Divi> Generador de temas. Luego haga clic en el cuadro "Agregar una nueva plantilla" para crear una nueva plantilla.

Agregar un nuevo modelo divi

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

Página de inicio de Divi

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

NOTA: estamos agregando la barra de promoción al área del cuerpo del modelo (no al encabezado) para que pueda funcionar con el encabezado predeterminado de Divi, así como con todos los encabezados personalizado que puede agregar más tarde.

Agregar un modelo de cuerpo

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

Elija un diseño a escala divi

Agregar la barra de promoción al modelo

En el editor de diseño de plantillas, podemos comenzar a crear la barra de promoción usando Divi Builder.

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

Agregar fila a una columna en divi

Configuraciones de línea

Antes de agregar un módulo, actualice los parámetros de la fila de la siguiente manera:

  • Gradiente de fondo izquierdo: # 4a42ec
  • Gradiente de fondo derecho: # 521d91
  • Dirección del gradiente: 90deg
  • Use un ancho de canal personalizado: SÍ
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho máximo: 100%
  • Tapicería: 0px en la parte superior, 0px en la parte inferior
Elija un diseño a escala divi 1

Esto admite el color de fondo y el ancho de la barra de promoción que creamos.

Parámetros de la columna

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

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

Personalización del código css

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

Ahora estamos listos para agregar contenido a la barra de promoción.

Añadir módulo Blurb

Para el contenido de este ejemplo de promoción, incluiremos un módulo de presentación con un ícono pequeño 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 icono dentro de la fila y agregue un módulo de presentación.

Agregar una segunda sección del módulo de resumen

Para el contenido del texto de presentación, ingrese la siguiente información:

  • Título: [ingrese el texto de la promoción]
  • Utilice el icono: SI
  • Icono: icono de regalo (ver captura de pantalla)
Configuración del módulo resumen divi

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

  • Color del icono: # ff4a9e
  • Imagen / ubicación de los iconos: izquierda
  • Usar tamaño de fuente del icono: SÍ
  • Tamaño de fuente del icono: 16px
  • Tamaño del título del texto: 16px (escritorio), 14px (teléfono)
  • Línea de título de Hewight: 1.3em
  • Ancho máximo: 230px (solo teléfono)
  • Acolchado: Top 10px
  • Estilo de animación: diapositiva
  • Dirección de la animación: derecha
  • Retraso de animación: 250 ms
Personalización del módulo de resumen Divi

Agregar el módulo de botones

Luego agregue un módulo de botones debajo del módulo Blurb. Debido a la propiedad flexible, el módulo aparecerá a la derecha de la propaganda en lugar de debajo.

Módulo de botón Divi

Actualice los parámetros de diseño del botón de la siguiente manera:

  • Use estilos personalizados para el botón: SÍ
  • Tamaño del texto del botón: 15px (escritorio), 13px (teléfono)
  • Color de texto del botón: #ffffff
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 20px
  • Peso de fuente: semi-negrita
Personaliza el módulo del botón divi
  • Margen (escritorio): 20px a la izquierda
  • Margen (teléfono): 10px a la izquierda
  • Tapicería (oficina): 0px en la parte superior, 0px en la parte inferior
  • Relleno (teléfono): 2px en la parte superior, 2px en la parte inferior, 8px a la izquierda, 8px a la derecha
  • Estilo de animación: rebote
  • Retraso de animación: 1000 ms
Personalizar el espaciado del módulo del botón divi

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:

  • Tapicería: 0px en la parte superior, 0px en la parte inferior
  • Estilo de animación: rebote
  • Dirección de la animación: Abajo
  • Duración de la animación: 500 ms
  • Retraso de animación: 250 ms
  • Animación Opacidad inicial: 100%
  • Índice Z: 999
Personalizar módulo divi de animación

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

En este punto, la barra de promociones está lista. Pero dado que se trata de una plantilla, debemos asegurarnos de agregar el módulo de publicación de contenido para mostrar el contenido de la (s) página (s) usando esta plantilla.

Para las páginas que se crean (o que se crearán) con Divi Builder, querrá utilizar 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 mod de contenido de publicación estándar en una sección regular para lograr un ancho máximo similar de 1080px por defecto).

Agregar una sección de ancho completo

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

Crear una sección de constructor divi de ancho completo

Agregar un módulo de contenido en formato Fullwidth

Luego seleccione el módulo Fullwidth Post Content.

Divi contenido del artículo de ancho completo

Es más o menos eso. Ahora asegúrese de guardar el diseño antes de salir del editor.

Guardar diseño divi

Luego guarde los cambios para el generador de temas.

Creador de temas divi

Resultado final

Avant

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

Resultado de ejemplo antes

après

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

Resultado de ejemplo después

Haga que la barra promocional sea pegajosa

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

position: fixed;width: 100%;

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

Entrar en la sección fija

Luego agregue el siguiente código CSS al elemento principal de la tableta:

position: relative;

Agregue un código css a la sección divi

Ahora verifique el resultado.

Resultado animado Divi

Para conversiones anteriores, también puede agregar la URL del enlace a toda la fila, en la opción de enlace Configuración de fila.

Consideraciones finales

En este tutorial, le mostramos cómo diseñar una barra de promoción (desde cero) utilizando Divi Theme Builder. La barra promocional se completa con múltiples animaciones y diseños para que sea realmente visible para visitantes. Incluso puede corregir la barra de promoción a medida que se desplaza hacia abajo en la página para obtener aún más visibilidad. Y con la capacidad de controlar dónde se coloca la barra de promoción en su sitio, la aplicación es extremadamente conveniente.