20 encabezados FlexBox para Divi 5 (¡descarga gratuita!)

Flexbox hace que sea más fácil que nunca crear encabezados que se vean limpios, se adapten maravillosamente a diferentes tamaños de pantalla y son fáciles de personalizar en Divi 5. En este paquete gratuito, encontrará 20 diseños únicos de encabezado FlexBox, cada uno construido con el sistema de diseño Flex de Divi 5 para una alineación precisa y un control receptivo. Ya sea que desee usar los estilos globales existentes de su sitio o comenzar con un diseño listo, encontrará ambas opciones aquí.

Vista previa y demostración en vivo

Echemos un vistazo a todos los 20 encabezados FlexBox en este paquete. Este paquete es gratuito para que descargue más abajo en la publicación.

Suscríbete a nuestro canal de YouTube

Ver demostración en vivo

Descargar 20 encabezados FlexBox para Divi 5

Obtenga los 20 encabezados FlexBox de forma gratuita, incluidas las versiones predeterminadas y previas. Cada encabezado está listo para importar a su biblioteca Divi y usar en el creador de temas. Simplemente descargue y comience a construir.

Descargar los archivos

Descargar gratis

Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master 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 suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!

Lo que está incluido (42 exportaciones)

Una vez que descargue y descomprima la carpeta, encontrará las 42 exportaciones de diseño perfectamente organizadas en versiones predeterminadas y previas como encabezados individuales y como paquetes completos de "todos los encabezados".

Predeterminado: encabezados individuales (20) → usa sus estilos globales.
Valor predeterminado: todos los encabezados (1) → Paquete completo usando sus estilos globales.

Prestyly: encabezados individuales (20) → Incluye un estilo en línea para un aspecto instantáneo y listo.
Prestyly: todos los encabezados (1) → Paquete completo con un estilo en línea aplicado.

Cómo instalar los diseños

Mantenga su carpeta de descarga cerca para comenzar a importarlos a su sitio web de Divi.

1. Importar diseños en la biblioteca Divi

Vaya a Divi → Biblioteca Divi.

Una vez allí, haga clic en el botón Importar y exportar para instalar los archivos.

Busque el archivo de diseños de encabezado FlexBox (todos) y haga clic para importarlo.

2. Cree una nueva plantilla de encabezado

Vaya a Divi → Builder de temas.

Cree una nueva plantilla de encabezado o abra una existente.

3. Subir el diseño del encabezado

Una vez que esté dentro del área del encabezado, puede usar la biblioteca Divi para seleccionar su diseño de encabezado de elección. Haga clic en el botón Agregar diseño en la esquina superior izquierda del constructor de temas.

Seleccione el diseño guardado .

Haga clic en el diseño del encabezado que desea agregar al constructor de temas.

Haga clic en el botón Usar este diseño para cargar el encabezado.

Asegúrese de guardar sus nuevos cambios de encabezado y constructor de temas.

Predeterminado vs Prestyly: ¿Cuál debe elegir?

Cuando abra la carpeta de descarga, verá dos versiones de cada encabezado: ** predeterminado ** y ** Prestyled **. Se construyen exactamente de la misma manera, la diferencia es cómo manejan el estilo.

Los encabezados predeterminados heredan su aspecto de sus estilos globales. Los colores de su marca, fuentes y estilos de botones se aplican automáticamente. Si ya ha configurado sus estilos globales, el valor predeterminado es la forma más rápida de agregar estos encabezados a su sitio y coincidir instantáneamente con su diseño.

Los encabezados previos a la prestación vienen con todos sus estilos al horno: los colores, las fuentes y los diseños de botones están en línea. Se ven exactamente como las vistas previas desde el principio. Esto es genial si está construyendo una demostración rápida, pruebas de ideas o desea obtener el diseño exacto que ve en las capturas de pantalla sin tocar sus variables.

En resumen, vaya con el valor predeterminado si desea que los encabezados se mezclen sin problemas con los estilos de su sitio existentes. Elija Prestyled si desea el aspecto listo para usar en las vistas previas.

Personalizando los encabezados

El sistema de diseño FlexBox de Divi 5 le brinda potentes herramientas para modificar diseños mientras mantiene todo receptivo. Aquí le mostramos cómo personalizar estos encabezados para que se ajusten al estilo de su sitio.

1. Ajuste la configuración flexible

Seleccione la fila que contiene los elementos del encabezado. En la pestaña Diseño, ubique el menú desplegable de diseño. Expandirlo para revelar la configuración de FlexBox.

Aquí, puede cambiar la dirección de diseño de la fila a la fila inversa, columna o columna reversa. Esta característica le permite cambiar la dirección de su diseño.

La configuración de contenido de Justify le permite controlar cómo se distribuyen los elementos flexibles a lo largo del eje principal: la dirección principal del contenedor flexible definido por la dirección de diseño. Determina el espacio y la alineación de los elementos horizontal o verticalmente, dependiendo de la dirección del diseño.

Alinear los elementos le permite controlar cómo se alinean los elementos flexibles dentro de una columna, fila o sección. Determina cómo los elementos flexibles se colocan entre sí a lo largo del eje cruzado dentro del contenedor. Puede elegir Start, Center, Fin y Stretch.

Finalmente, la envoltura de diseño controla si los elementos en un contenedor flexible se ven obligados a una sola línea o se les permite envolver en varias líneas cuando exceden el ancho del contenedor (o la altura si la dirección de diseño está configurada en la columna).

2. Mostrar/ocultar elementos en diferentes puntos de interrupción

Divi 5 le permite alternar la visibilidad de secciones, filas, columnas o módulos individuales en puntos de interrupción específicos. Esto es útil para simplificar los diseños en pantallas más pequeñas, como ocultar un botón CTA secundario o reemplazar un menú completo con uno móvil.

Por ejemplo, es posible que desee ocultar los íconos de las redes sociales en un encabezado para ahorrar espacio en pantallas móviles. Mientras esté en el punto de interrupción del escritorio, navegue a la pestaña avanzada. Expanda el menú desplegable de visibilidad. A continuación, haga clic en los puntos de interrupción del teléfono y la tableta para ocultar el elemento.

Use la vista previa receptiva de Divi 5 para ver el encabezado. Al ver el diseño en el punto de interrupción del teléfono, el elemento oculto será visible, pero atenuado, lo que indica que estará oculto en la parte delantera.

3. Agregue enlaces cuando sea necesario

Aunque cada diseño de encabezado está listo para salir de la caja, aún deberá agregar enlaces. En este ejemplo, agregaría enlaces al módulo de seguimiento de las redes sociales. Haga clic para expandir la configuración del módulo. En la pestaña Contenido, haga clic en el primer icono de redes sociales para revelar su configuración.

Expanda el menú desplegable del enlace y agregue el enlace a su cuenta de redes sociales en el campo URL de enlace de la cuenta .

Asegúrese de guardar su encabezado antes de salir del constructor de temas.

Si aún no lo ha hecho, deberá crear un menú para su sitio web. Salga del constructor visual y navegue a la apariencia → menús. Agregue un nombre al campo Nombre del menú .

Haga clic en la casilla de verificación del menú principal y luego haga clic en Crear menú .

Para agregar páginas al menú, haga clic en la pestaña Ver todo y seleccione las páginas que desea aparecer en el menú. Haga clic en Agregar al menú para asignarlos.

De vuelta en el constructor de temas, realice cambios adicionales según sea necesario. Por ejemplo, si el encabezado usa el bucle de bucle, es posible que deba ajustar el orden de los enlaces.

Use Divi 5 para construir sus encabezados hoy

Estos 20 encabezados FlexBox son una forma rápida de acelerar sus compilaciones Divi 5, ya sea que esté trabajando desde sus estilos globales establecidos o comenzando con un aspecto prediseñado. Descárguelos, envíalos en el constructor de temas y hazlos tuyos. Flexbox maneja la alineación para que pueda concentrarse en el diseño.