¡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:
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:
En este tutorial voy a crear un header genérico para toda la web siguiendo este boceto que he preparado:
Y este sería el resultado:
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.
Gran post, es lo que buscaba para crear cabeceras diferentes por páginas. Lo que no soy capaz de hacer es crear una cabecera personalizada en la que el logo esté centrado, en medio del menú. Como lo tienes tú en esta web. Puede centrarlo en la opción general desde el personalizador del tema, pero no se hacerlo cuando creo cabeceras personalizadas
¿Alguna idea?
Hola Julio,
Sí, con el generador de temas puedes alinear el menú y el logo en la misma línea. Solo tienes que habilitar la siguiente opción dentro de la configuración del menú: Diseño > Diseño (de nuevo) > Estilos > Logotipo centrado en línea.
Saludos
Buenas tardes,
muchas gracias por tu explicación, he conseguido hacer el header personalizado, en una web nueva
El problema es que el menú no queda fijo a la parte de arriba cuando bajas.
Esto se puede hacer con el menú personalizado?
Hola Mònica,
Sí, ahora puedes hacer fijo cualquier elemento con Divi. Solo tienes que ir a los ajustes de ese módulo, fila o sección y modificar el lugar en el que quieres que se muestre: Avanzado > Puesto > Fixed.
Espero que te sirva.
Saludos
Sirvió. Muchas gracias. Gran explicación
Tengo en mi cabecera una imagen con texto! Y la web en tres idiomas, por lo que necesitaría que cada idioma mostrara la imagen diferente según idioma. Lo mismo me ocurre en el pie! Tengo textos como Sígueme en… o consulta.. Se pueden hacer cabeceras y pies por idioma? Gracias
Hola José Luis,
¿Qué plugin has utilizado para crear los diferentes idiomas?
Hola Max.
He utilizado PolyLang
Gracias
Mil gracias por el tutorial.
Tengo una pregunta con las cabeceras o headers,
Yo tengo un menú principal y uno arriba del todo secundario donde están el logo teléfonos etc.
Cómo puedo con el nuevo constructor usar las posiciones para hacer fijo el principal sólo.
No lo consigo de ninguna manera. Mil gracias de nuevo y un saludo
Hola Jesús. Échale un vistazo a las opciones de puesto de esa sección.
Lo tienes en: Ajustes de sección > Avanzado > Puesto.
Ahí puedes hacer fija a esa sección que contiene el menú.
Saludos
Hola Max.
Mil gracias por tu ayuda y rápida respuesta.
El problema es que sólo quiero fijo la sección del menú principal y la del secundario no y está en otra sección.
El caso es que si pongo fija la del principal desde Ajustes de sección > Avanzado > Puesto se me oculta la sección del menu secundario. No sé cómo trabajar con el index para lograr que una no tape la otra.
Un saludo
Buenas tardes,
He creado una cabecera personalizada en la versión escritorio, pero me gustaría deshabilitarla en en la versión movil y tablet, me gustaría que apareciese por defecto la que tengo por defecto en Divi.
Hay alguna manera? si desactivo la visibilidad de la cabecera sale en blanco, y si no la pongo también.
¡Muchas gracias!
Hola Max,
mi cabecera diseñada en Divi Builder me queda por detrás del cuerpo central. El submenú queda tapado. He probado modificar el Z index a 999 marcando la variante «Fixed» pero no hay manera ¿Sabes qué puede estaqr pasando?
Hola, a mi me pasa lo mismo. He creado una cabecera, pero cuando se despliega el submenú queda tapado por el cuerpo de la web. También he probado a modificar el Z índex y la opción «Fixed» pero no lo soluciono. ¿Algún consejo?
Muchas gracias por todas las aportaciones.
Hola, me sirvió tu tutorial, gracias! Pero necesito consultarte sobre como se hace (si es que se puede) de generar el header personalizado pero sin afectar al footer, que el footer siga siendo el que construi con los widgets y demás. Personalice el header y me desapareció el footer. Agradezco tu ayuda.
Hola Ezequiel,
Crear una cabecera personalizada no afecta (o no debería) afectar al footer, son elementos independientes. De todas formas, otra idea es volver a crear el footer también con el generador de temas.
Saludos
Muchas gracias!!
Muy bien explicado, muy útil!
Saludos,
Hola de nuevo Max,
¿Sabes si hay alguna manera de elegir cómo mostrar el menú?
En mi diseño me gustaría añadir el logo, algunos elementos de contacto y luego el menú pero en su versión a pantalla completa, es decir, que se muestre el icono para desplegar el menú en lugar de las opciones de menú directamente.
Gracias de antemano!
Hola Mertxe,
Precisamente con el generador de temas de Divi puedes diseñar una cabecera y menú a tu gusto.
Además, en el blog de Elegant Themes puedes descargar diseño para cabeceras que ya están diseñadas.
¡Gracias por pasarte!
Hola Max,
Una consulta, hice un menú con el generador de temas de Divi, pero cuando me meto en responsive (movil) y le doy hacia la izquierda aparece sale una barra blanca hasta el final de la pagina, deshabilito el menú y el footer (ambos hechos con el generador de temas y se quita.
Ya revise si de casualidad tiene que ver con la anchura de la sección, pero nada.
Tu sabrás que puede estar pasando y como solucionarlo?
De antemano muchas gracias.
Hola Max. He seguido el tutorial y he logrado hacer el menú personalizado que quería. Pero tengo un problema, y es que el menú me queda por encima todo el contenido y se come todos los puntos de ancla que tengo, así como el vídeo inicial. ¿No hay manera de que el menú sea independiente y todo el contenido quede por debajo suyo, no de fondo?
Muchas gracias.