Cómo animar su encabezado global con Divi

Su encabezado es una de las partes más importantes de su sitio web. Conecta sus páginas, publicaciones y llamadas a la acción. También es una de las cosas que sus visitantes buscan automáticamente, por lo que no pierden tiempo en encontrar lo que buscan. Si está buscando una forma de enfatizar su encabezado, disfrutará esta publicación. Le mostraremos cómo animar su encabezado global personalizado usando el Generador de temas de Divi. Las posibilidades son infinitas, pero le mostraremos dos ejemplos de animación con los que puede comenzar de inmediato. ¡También podrá descargar los archivos JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los dos ejemplos en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Móvil

Ejemplo # 2

Escritorio

Móvil

Descargue el encabezado global animado GRATIS

Para poner sus manos sobre el encabezado global animado gratuito, primero deberá descargarlo 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

1. Vaya a Divi Theme Builder y comience a crear un encabezado global

Ir a Divi Theme Builder

Comience por ir al Divi Theme Builder en su backend de WordPress.

Crear encabezado global desde cero

Haga clic en 'Agregar encabezado global' y continúe seleccionando 'Crear encabezado global'.

2. Cree un diseño de bloque de encabezado global

Configuración de la sección

Espaciado

Una vez que esté dentro del editor de plantillas, puede comenzar a construir el encabezado global. Nos aseguramos de tener un diseño de 'bloque' en marcha para que podamos, más adelante, agregar animaciones a dos contenedores diferentes; columna + módulo. Abra la sección que puede observar dentro del editor de plantillas y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Sombra de la caja

A continuación, agregue una sombra de cuadro.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (13,60,216,0.24)

Índice Z

Y asegúrese de aumentar también el índice z de la sección en la pestaña avanzada. Esto asegurará que el contenido del encabezado global aparezca en la parte superior de todo el contenido de la página / publicación.

• Índice Z: 99999

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Visibilidad

Asegúrese de configurar los desbordamientos de la fila en 'visible' también.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Configuración de columna (las tres)

Color de fondo

Una vez que haya completado la configuración de la fila, también deberá diseñar las columnas. Abra cada una de las columnas y cambie su color de fondo en consecuencia:

• Color de fondo de la columna 1: #efefef
• Color de fondo de la columna 2: # ffcb0f
• Color de fondo de la columna 3: # 2848ff

Espaciado

Agregue un poco de relleno superior e inferior personalizado a cada columna también.

• Acolchado superior: 0.5vw (escritorio), 1vw (tableta y teléfono)
• Acolchado inferior: 0.5vw (escritorio), 1vw (tableta y teléfono)

Elemento principal

Y para asegurarnos de que todo el contenido de la columna esté centrado verticalmente, agregaremos tres líneas de código CSS al elemento principal de cada columna.

display: flex;
flex-direction: column;
justify-content: center;

Columna 1 Índice Z

Por último, pero no menos importante, abra la configuración de la columna 1 y aumente el índice z en la configuración de visibilidad.

• Índice Z: 10

Agregar módulo de menú a la columna 1

Seleccione el menú

Es hora de agregar módulos, comenzando con un Módulo de menú en la columna 1. Seleccione un menú de su elección.

Subir logotipo

Sube tu logo a continuación.

Quitar fondo

Continúe eliminando el color de fondo del módulo.

Diseño

Vaya a la pestaña de diseño y asegúrese de que las siguientes configuraciones se apliquen al diseño:

• Estilo: alineado a la izquierda
• Dirección del menú desplegable: hacia abajo

Configuración del texto del menú

Estilo de la configuración de texto a continuación:

• Fuente del menú: Montserrat
• Color del texto del menú: # 000000
• Tamaño del texto del menú: 0.7vw (escritorio), 2vw (tableta), 3vw (teléfono)

Configuración del menú desplegable

Junto con la configuración del menú desplegable.

• Color de la línea del menú desplegable: #ffffff

Configuración de iconos

Y también cambia el color del icono del menú de hamburguesas.

• Color del icono del menú de hamburguesas: # 2848ff

Dimensionamiento

Continúe cambiando el ancho máximo del logotipo en diferentes tamaños de pantalla.

• Ancho máximo del logotipo: 6vw (escritorio), 9vw (tableta), 13vw (teléfono)

Espaciado

Y complete la configuración del módulo agregando algunos márgenes izquierdo y derecho.

• Margen izquierdo: 2vw
• Margen derecho: 2vw

Agregar módulo de código a la columna 1

Inserte el código CSS para la capacidad de respuesta de VW

Ahora, en el módulo de menú, hemos usado la unidad de ancho de la ventana gráfica para nuestro tamaño de texto y valores de espaciado. Hicimos esto para asegurarnos de que pueda colocar hasta 8 elementos de menú en diferentes tamaños de pantalla de escritorio, sin que se dividan en dos líneas. Necesitaremos asegurarnos de que el espacio entre los elementos del menú se cree también con la unidad vw. Para hacer eso, agregaremos un módulo de código a la columna 1 e insertaremos las siguientes líneas de código CSS:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

Agregue el módulo de seguimiento de redes sociales a la columna 2

Agregar redes sociales

En la siguiente columna, necesitaremos un módulo de seguimiento de redes sociales. Agrega las redes sociales que prefieras.

Restablecer estilos de redes sociales individualmente

Continúe restableciendo la configuración de cada red.

Alineación

Complete la configuración del módulo cambiando la alineación del módulo.

• Alineación del módulo: centro

Agregar módulo de botones a la columna 3

Agregar copia

A la siguiente y última columna. Allí, solo necesitaremos un módulo de botones. Agregue una copia de su elección.

Alineación

Vaya a la pestaña de diseño y cambie la alineación de los botones.

• Alineación de botones: centro

Configuración de botones

Complete la configuración del módulo estilizando el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 1.2vw (tableta), 2vw (teléfono)
• Color del texto del botón: #ffffff
• Ancho del borde del botón: 0px

• Radio del borde del botón: 0px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: Ultra Bold
• Estilo de fuente del botón: mayúsculas

3. Agregue una animación coincidente a los elementos

Combo de animación de encabezado global n. ° 1

Animación de la columna 1

Ahora que hemos creado el encabezado global, ¡es hora de agregar las animaciones! Para recrear la primera animación, abra la configuración de la columna 1 y agregue la siguiente animación:

• Estilo de animación: Zoom
• Dirección de animación: Arriba
• Opacidad inicial de la animación: 100%

Animación de la columna 2

Agregue la siguiente configuración de animación a la columna 2 a continuación:

• Estilo de animación: Zoom
• Dirección de animación: Abajo
• Retraso de animación: 500 ms
• Opacidad inicial de la animación: 100%

Animación de la columna 3

Complete la configuración de la columna asignando la siguiente animación a la columna 3:

• Estilo de animación: Zoom
• Dirección de animación: Arriba
• Retraso de animación: 1000 ms
• Opacidad inicial de la animación: 100%

Animaciones de módulo (los tres módulos)

Una vez que haya completado la configuración de la columna, abra cada uno de los módulos individualmente y use la siguiente animación para ellos:

• Estilo de animación: Fade
• Retraso de animación: 1500 ms

Combo de animación de encabezado global n. ° 2

Animación de la columna 1

¿Quieres recrear el segundo conjunto de animación en su lugar? Abra la configuración de la columna 1 y agregue la siguiente animación:

• Estilo de animación: diapositiva
• Dirección de animación: Arriba
• Opacidad inicial de la animación: 100%

Animación de la columna 2

Utilice la siguiente configuración de animación para la columna 2 a continuación:

• Estilo de animación: diapositiva
• Dirección de animación: Arriba
• Retraso de animación: 500 ms
• Opacidad inicial de la animación: 100%

Animación de la columna 3

Y complete la configuración de la columna aplicando la siguiente configuración de animación a la columna 3:

• Estilo de animación: diapositiva
• Dirección de animación: Arriba
• Retraso de animación: 1000 ms
• Opacidad inicial de la animación: 100%

Animaciones de módulo (los tres módulos)

Luego, abra cada módulo individualmente y agregue la siguiente animación:

• Estilo de animación: diapositiva
• Dirección de animación: Abajo
• Retraso de animación: 1500 ms

4. Guarde los cambios del generador y vea el resultado

Una vez que haya completado la configuración de la animación, puede guardar el encabezado global, salir de Theme Builder y ver el resultado en su sitio web.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final a los ejemplos en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Móvil

Ejemplo # 2

Escritorio

Móvil

Pensamientos finales

En este tutorial, le mostramos cómo animar su encabezado global usando las opciones integradas de Divi y Theme Builder. Esta es una excelente manera de llamar la atención sobre el encabezado de su sitio web. Con las opciones de animación integradas de Divi, las posibilidades son infinitas. Para ayudarlo a comenzar, le mostramos dos ejemplos diferentes. ¡También pudiste descargar los archivos JSON gratis!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.