homefinance blog
Su encabezado es una de las partes más importantes de su sitio web. Conecta sus páginas, publicaciones y exhortaciones. También es una de las cosas que sus visitantes buscan automáticamente para que no pierdan el tiempo encontrando lo que están buscando. Si está buscando una manera de enfatizar su encabezado, disfrutará de esta publicación. Le mostraremos cómo animar su encabezado global personalizado utilizando el creador de temas de Divin. Las posibilidades son ilimitadas, pero le mostraremos dos ejemplos de animación con los que puede comenzar de inmediato. ¡Podrá descargar los archivos JSON de forma gratuita! Vamos a eso.
Vista previa antes de lanzar la cabeza en el tutorial, no echamos un vistazo rápido a los dos ejemplos en diferentes tamaños de pantalla. Ejemplo no. 1 escritorio
Móvil
Ejemplo no. 2 escritorio
Móvil
Descargue el encabezado global animado gratuito de forma gratuita para poner su mano en el encabezado global gratuito, primero tendrá que descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube 1. Vaya al creador de temas Divin y comience a crear acceso de encabezado global El Divine Builder comience a acceder al edificio de temas de división en la espalda de WordPress.
Construya el encabezado Global desde cero Haga clic en “Agregar encabezado global” y continúe seleccionando “Build Global Header”.
2. Construya el diseño global de la configuración de configuración de bloques de encabezado Una vez que esté en el editor de plantillas, puede comenzar a crear el encabezado global. Nos aseguramos de tener un diseño de tipo “bloque”, para que podamos agregar, más tarde, animaciones a dos contenedores diferentes; columna + módulo. Abra la sección que puede ver en el editor de plantillas y elimine todos los rellenos predeterminados e inferiores.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Box Shadow Agregue un tono de caja adicional.
Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (13,60,216,0,24)
El índice z y asegúrese de aumentar el índice z de la sección en la pestaña avanzada. Esto asegurará que el contenido de encabezado global aparezca por encima de toda la página / contenido de la publicación. Indica z: 99999
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Visibilidad Asegúrese de establecer las descargas de la fila en “Visible”.
Desbordamiento horizontal: visible
Desbordamiento vertical: visible
Configuración de columna (las tres) Color de fondo Después de haber completado la configuración de la fila, deberá estilizar las columnas. Abra cada una de las columnas y cambie el color de fondo en consecuencia:
Columna 1 Color de fondo: #efeffe
Columna 2 Color de fondo: # FFCB0F
Columna 3 Color de fondo: # 2848ff
Espacio agregue algunos rellenos personalizados, superior e inferior, a cada columna.
Revestimiento superior: 0.5VW (escritorio), 1 VW (tableta y teléfono)
Bajo revestimiento: 0.5VW (escritorio), 1 VW (tableta y teléfono)
El elemento principal y para garantizar que todo el contenido de la columna esté centrado verticalmente, agregaremos tres líneas de código CSS al elemento principal de cada columna. Pantalla: Flex;
Dirección flexible: columna;
Justify-Concursing: Centro;
Columna 1 Índice Z No menos importante, abra la configuración de la columna 1 y aumente el índice Z en la configuración de visibilidad. Indica z: 10
Agregue un módulo de menú en 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.
Cargue el logotipo Cargue su logotipo a continuación.
Elimine el fondo continúe eliminando el color de fondo del módulo.
Cambio de apariencia a la pestaña de diseño y asegúrese de que se apliquen la siguiente configuración al aspecto:
Estilo: alineado a la izquierda
Dirección del menú desplegable: abajo
Configuración de texto del menú Afinar la configuración del texto:
Fuente del menú: Montserrat
Color de texto del menú: # 000000
Tamaño del texto del menú: 0.7VW (escritorio), 2VW (tableta), 3VW (teléfono)
Configuración desplegable junto con la configuración del menú Drop -down.
Menú de la línea de color NEGO: #ffffff
Icono de configuración y cambie el color del icono del menú de hamburguesas.
Icono de menú de hamburguesas de color: # 2848ff
La dimensión continúa cambiando el ancho del logotipo máximo en diferentes tamaños de pantalla.
Ancho máximo del logotipo: 6VW (escritorio), 9VW (tableta), 13VW (teléfono)
Espacio y complete la configuración del módulo agregando algunos bordes izquierdo y derecho.
Margen izquierdo: 2VW
Margen derecho: 2VW
Agregue un módulo de código en la columna 1 Ingrese el código de código para la receptividad VW ahora, en el módulo de menú, utilicé la unidad de ancho de la ventana para el tamaño de texto y los valores de espaciado. Hicimos esto para asegurarnos de que pueda colocar hasta 8 elementos de menú en diferentes tamaños de la 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 esto, agregaremos un módulo de código en la columna 1 e introduciremos las siguientes líneas de código CSS:
.et-Menu> li {
ROLDE-LEFT: 1VW! IMPORTANTE;
Right: 1VW! IMPORTANTE;
}
Agregue el módulo de seguimiento de las redes sociales a la columna 2 Agregar redes sociales a la siguiente columna, necesitaremos un módulo de seguimiento en las redes sociales. Agregue las redes sociales a su elección.
Restablecer individualmente los estilos de redes sociales continúan restableciendo la configuración de cada red.
Alineación Complete la configuración del módulo modificando la alineación del módulo.
Alineación del módulo: centro
Agregue un módulo de botón a la columna 3 Agregue una copia Pase a la siguiente y última columna. Allí, solo necesitaremos un módulo de botón. Agregue una copia de su elección.
Alineación Vaya a la pestaña Diseño y cambie la alineación del botón.
Alineación de botones: centro
Botón Configuración Complete el módulo Configuración Estilizando el botón.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1VW (escritorio), 1.2VW (tableta), 2VW (teléfono)
El color del texto del botón: #ffffff
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Montserrat
Peso de fuente de fuente: Ultra Bold
El estilo de la fuente del botón: mayúscula
3. Agregue la animación coincidente al combo de animación de encabezado global # 1colana 1 animación Ahora que hemos construido 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: Up
Opacidad de animación para comenzar: 100%
Columna 2 Animación Agregue la siguiente configuración de animación en la columna 2:
Estilo de animación: Zoom
Dirección de la animación: Down
Retraso de animación: 500 ms
Opacidad de animación para comenzar: 100%
Columna 3 Animación Complete la configuración de la columna Asignación de la siguiente animación 3:
Estilo de animación: Zoom
Dirección de Animación: Up
Animación de retraso: 1000 ms
Opacidad de animación para comenzar: 100%
Modo de animaciones (los tres módulos) Después de haber 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 Global Animation Antet # 2
Animación de la columna 1 ¿Quiere recrear en su lugar el segundo conjunto de animación? Abra la configuración de la columna 1 y agregue la siguiente animación:
Estilo de animación: diapositiva
Dirección de Animación: Up
Opacidad de animación para comenzar: 100%
Columna 2 Animación Use la siguiente configuración de animación para la columna 2:
Estilo de animación: diapositiva
Dirección de Animación: Up
Retraso de animación: 500 ms
Opacidad de animación para comenzar: 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: Up
Animación de retraso: 1000 ms
Opacidad de animación para comenzar: 100%
Módulo de animaciones (los tres módulos) luego abra cada módulo individual y agregue la siguiente animación: Estilo de animación: diapositiva
Dirección de la animación: Down
Retraso de animación: 1500 ms
4. Guarde los cambios del constructor y vea el resultado después de haber completado la configuración de animación, ¡puede guardar el encabezado global, salir del constructor de temas y ver el resultado en su sitio web!
Vista previa ahora, que hemos seguido todos los pasos, para echar un vistazo final a los ejemplos en diferentes tamaños de pantalla. Ejemplo no. 1 escritorio
Móvil
Ejemplo no. 2 escritorio
Móvil
Pensamientos finales En este tutorial, le mostré cómo animar su encabezado global utilizando las opciones incorporadas de DIV y Builder de temas. Esta es una excelente manera de llamar la atención sobre el encabezado de su sitio web. Con las opciones de animación incorporadas de la división, las posibilidades son ilimitadas. Para ayudarlo a comenzar, le mostré dos ejemplos diferentes. ¡Podrías descargar los archivos JSON gratis! Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.
