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 buscando lo que están buscando. Si está buscando una forma de enfatizar su encabezado, disfrutará de esta publicación. Le mostraremos cómo animar su encabezado global personalizado con 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. 

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, veamos rápidamente los dos ejemplos en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

encabezado global animado

Móvil

encabezado global animado

Ejemplo # 2

Escritorio

encabezado global animado

Móvil

encabezado global animado

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

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder en su backend de WordPress.

encabezado global animado

Construir encabezado global desde cero

Haga clic en ‘Agregar encabezado global’ y continúe seleccionando ‘Construir encabezado global’.

encabezado global animado

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

Configuraciones de sección

Espaciado

Una vez que esté dentro del editor de plantillas, puede comenzar a construir el encabezado global. Nos estamos asegurando de que tengamos un diseño de ‘bloque’ para que luego podamos agregar animaciones a dos contenedores diferentes; columna + módulo. Abra la sección que puede observar dentro del editor de plantillas y elimine todos los rellenos superiores e inferiores predeterminados.

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

encabezado global animado

Sombra de la caja

Agregue un cuadro de sombra a continuación.

  • Caja Shadow Blur Fuerza: 80px
  • Color de sombra: rgba (13,60,216,0.24)

encabezado global animado

Í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 aparecerá en la parte superior de todo el contenido de la página / publicación.

  • Índice Z: 99999

encabezado global animado

Agregar nueva fila

Estructura de columna

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

encabezado global animado

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado global animado

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados a continuación.

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

encabezado global animado

Visibilidad

Asegúrese de establecer los desbordamientos de la fila en ‘visible’ también.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

encabezado global animado

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

encabezado global animado

Espaciado

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

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

encabezado global animado

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;

encabezado global animado

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

encabezado global animado

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.

encabezado global animado

Subir logo

Sube tu logo a continuación.

encabezado global animado

Quitar fondo

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

encabezado global animado

Diseño

Pase a la pestaña de diseño y asegúrese de que la siguiente configuración se aplique al diseño:

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

encabezado global animado

Configuración de texto del menú

Diseñe 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)

encabezado global animado

Configuración del menú desplegable

Junto con la configuración del menú desplegable.

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

encabezado global animado

Configuraciones de iconos

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

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

encabezado global animado

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)

encabezado global animado

Espaciado

Y complete la configuración del módulo agregando un margen izquierdo y derecho.

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

encabezado global animado

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

Insertar código CSS para capacidad de respuesta de VW

Ahora, en el módulo de menú, hemos utilizado la unidad de ancho de la ventana gráfica para nuestros tamaños de texto y valores de espaciado. Hicimos esto para asegurarnos de que puede 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 hacer eso, 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>

encabezado global animado

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

Agregar redes sociales

En la siguiente columna, allí, necesitaremos un Módulo de seguimiento de redes sociales. Agregue las redes sociales de su elección.

encabezado global animado

Restablecer estilos de redes sociales individualmente

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

encabezado global animado

Alineación

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

  • Alineación del módulo: centro

encabezado global animado

Agregar módulo de botón a la columna 3

Agregar copia

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

encabezado global animado

Alineación

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

  • Alineación de botones: centro

encabezado global animado

Configuraciones de botones

Complete la configuración del módulo aplicando estilo al 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

encabezado global animado

  • Radio del borde del botón: 0px
  • Fuente del botón: Montserrat
  • Peso de fuente del botón: Ultra negrita
  • Estilo de fuente del botón: mayúscula

encabezado global animado

3. Agregar animación coincidente a elementos

Combo global de animación de encabezado # 1

encabezado global animado

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

encabezado global animado

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

encabezado global animado

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

encabezado global animado

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: Fade
  • Retraso de animación: 1500 ms

encabezado global animado

Combo de animación de encabezado global # 2

encabezado global animado

Columna 1 Animación

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

encabezado global animado

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

encabezado global animado

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

encabezado global animado

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
  • Retraso de animación: 1500 ms

encabezado global animado

4. Guardar los cambios del generador 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.

encabezado global animado

encabezado global animado

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!