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.
Asigne la plantilla a las páginas en las que se debe mostrar la barra de promoción.
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.
Luego, seleccione la opción "Construir desde cero".
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.
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
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;
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.
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)
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
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.
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
- 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
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
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.
Agregar un módulo de contenido en formato Fullwidth
Luego seleccione el módulo Fullwidth Post Content.
Es más o menos eso. Ahora asegúrese de guardar el diseño antes de salir del editor.
Luego guarde los cambios para el generador de temas.
Resultado final
Avant
Ahora aquí está la página antes de asignar el modelo con la barra de promoción.
après
Y aquí está la misma página con la nueva plantilla con la barra de promoción.
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:
Luego agregue el siguiente código CSS al elemento principal de la tableta:
position: relative;
Ahora verifique el resultado.
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.
Hola,
Excelente artículo y tutorial, realmente TOP !!!
Me gustaría hacer lo mismo, pero como uso el menú secundario en el que se encuentra la cuenta, el teléfono y la cesta sobre el menú principal (mis categorías de productos), la barra de promoción no se muestra de repente, a menos que me haya perdido un paso del tutorial. !!.
Lo que quiero poder hacer es mostrar esta barra promocional encima de la barra secundaria, en fin, encima de todo lo demás para poner una promo, una venta flash, cambiar la información según los eventos que quiero incluir
¿Alguna idea sobre esta ruta por favor?
Youssef