¡Hola Divi Lover! 🙂

Desde la última gran actualización de Divi, ya es posible personalizar de forma nativa la cabecera de nuestra web y de sus diferentes páginas (antes también se podía, pero había que recurrir a código CSS, o bien a plugins externos).

De esta forma, con la llegada de Divi 4, tenemos disponible el conocido como generador de temas, que permite diseñar un footer y header personalizados en nuestra web (también crear diferentes diseños en función del tipo de contenido: landings, productos, entradas, etc), así como modificar el cuerpo global de nuestros contenidos.

Por ese motivo, en este post te traigo un tutorial para diseñar un header totalmente personalizado en Divi con el generador de temas.

Tutorial para diseñar un header en Divi

Antes de empezar, en este post de mi blog personal te cuento cuáles son los elementos que puedes incluir en la cabecera de tu web, tales como logo, menú, buscador, botones, etc.

Lo primero que te recomiendo es realizar un boceto de cómo quieras que sea el header de tu web, gracias al cual puedas decidir qué elementos vas a incluir.

Una vez lo tengas claro, debes ir al generador de temas de Divi:

Tutorial para diseñar un header Divi

Previo paso al diseño del header, debes saber que el generador de temas incluye todos los módulos, filas y secciones que puedes encontrar en Divi Builder, así que no tiene ninguna complicación.

Otro punto muy interesante y que ya he mencionado es que nos permite crear diferentes cabeceras en función del contenido de nuestra web: categorías, páginas, entradas, productos o proyectos. Es decir, que podemos tener diferentes diseños y configurarlos según el tipo de contenido:

Tutorial para diseñar un header Divi

En este tutorial voy a crear un header genérico para toda la web siguiendo este boceto que he preparado:

Tutorial para diseñar un header Divi

Y este sería el resultado:

Tutorial para diseñar un header Divi
versión escritorio
Tutorial para diseñar un header Divi
versión móvil

Por último, aquí tienes el vídeo tutorial donde te explico paso a paso cómo crear este header con Divi.

El código que tienes que aplicar para centrar verticalmente las columnas es el siguiente:

/* Centrar columna vertical */
display: flex;
flex-direction: column;
justify-content: center;

Espero que este tutorial te sea de gran utilidad a la hora de crear una cabecera personalizada en tu web con el generador de temas de Divi y darle a tus headers un diseño diferente del que viene por defecto con la plantilla.