Cómo animar tu encabezado global con Divi

Su encabezado es una de las partes más importantes de su sitio web. Conecta tus 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 el tiempo para encontrar lo que buscan. Si está buscando una manera de enfatizar su encabezado, disfrutará de esta publicación. Le mostraremos cómo animar su encabezado global personalizado usando el Theme Builder 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

Descarga GRATIS el Encabezado Global Animado

Para poner sus manos en el encabezado global animado gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Suscríbete a nuestro canal de Youtube

1. Vaya a Divi Theme Builder y comience a construir el encabezado global

Ir al Creador de temas Divi

Comience yendo a 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. Crear un diseño de bloque de encabezado global

Ajustes de sección

Espaciado

Una vez que esté dentro del editor de plantillas, puede comenzar a crear el encabezado global. Nos estamos asegurando de tener un diseño de ‘bloques’ 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
  • Relleno inferior: 0px

Sombra de la caja

Agregue una sombra de cuadro a continuación.

  • Fuerza de desenfoque de sombra de cuadro: 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 utilizando 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 del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

Visibilidad

Asegúrese de configurar los desbordamientos de la fila como «visibles» también.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

Configuraciones de columna (las tres)

Color de fondo

Una vez que haya completado la configuración de las filas, también deberá diseñar las columnas. Abre cada una de las columnas y cambia su color de fondo según corresponda:

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

Espaciado

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

  • 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.

01
02
03
display: flex;
flex-direction: column;
justify-content: center;

Índice Z de la columna 1

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.

Cargar logotipo

Cargue su logotipo a continuación.

Quitar fondo

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

Disposición

Pase 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 cambie el color del ícono del menú de hamburguesas también.

  • 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 un margen 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 nuestros valores de espacio y tamaño de texto. Hicimos esto para asegurarnos de que pueda colocar hasta 8 elementos de menú en diferentes tamaños de pantalla de escritorio, sin que se divida en dos líneas. Tendremos que asegurarnos de que el espacio entre los elementos del menú también se cree con la unidad vw. Para hacerlo, agregaremos un módulo de código a la columna 1 e insertaremos las siguientes líneas de código CSS:

01
02
03
04
05
06
<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

Añadir Redes Sociales

En la siguiente columna, allí, necesitaremos un módulo de seguimiento de redes sociales. Agrega las redes sociales de tu preferencia.

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

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

Alineación

Pase a la pestaña de diseño y cambie la alineación del botón.

  • Alineación de botones: Centro

Configuración de botones

Complete la configuración del módulo diseñando 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 negrita
  • Estilo de fuente del botón: Mayúsculas

3. Agregar animación coincidente a los elementos

Combo de animación de encabezado global #1

Columna 1 Animación

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 animación: 100%

Columna 2 Animación

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
  • Retardo de animación: 500ms
  • Opacidad inicial de animación: 100%

Columna 3 Animación

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
  • Retardo de animación: 1000ms
  • Opacidad inicial de animación: 100%

Animaciones de módulos (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: Fundido
  • Retardo de animación: 1500ms

Combo de animación de encabezado global #2

Columna 1 Animación

¿Quiere 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 animación: 100%

Columna 2 Animación

Use 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
  • Retardo de animación: 500ms
  • Opacidad inicial de animación: 100%

Columna 3 Animación

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
  • Retardo de animación: 1000ms
  • Opacidad inicial de animación: 100%

Animaciones de módulos (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
  • Retardo de animación: 1500ms

4. Guardar los cambios del constructor y ver el resultado

Una vez que haya completado la configuración de la animación, puede guardar el encabezado global, salir del Generador de temas 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 pudo descargar los archivos JSON de forma gratuita!

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