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