DiviFast: plantillas para Divi


Inicio

About

Recursos

Contacto

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

Cómo crear una cabecera personalizada con el generador de temas de Divi

Cómo crear una cabecera personalizada con el generador de temas de Divi

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

21 Comentarios

  1. julio

    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?

    Responder
    • Max Camuñas

      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

      Responder
  2. Mònica

    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?

    Responder
    • Max Camuñas

      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

      Responder
      • Óscar

        Sirvió. Muchas gracias. Gran explicación

        Responder
  3. Jose Carlos Carrasquet

    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

    Responder
    • Max Camuñas

      Hola José Luis,

      ¿Qué plugin has utilizado para crear los diferentes idiomas?

      Responder
  4. Jose Carlos Carrasquet

    Hola Max.

    He utilizado PolyLang

    Gracias

    Responder
  5. Jesús

    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

    Responder
    • Max Camuñas

      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

      Responder
      • Jesús

        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

        Responder
  6. Ricaro

    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!

    Responder
  7. Yolanda

    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?

    Responder
    • victor

      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.

      Responder
  8. Ezequiel

    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.

    Responder
    • Max Camuñas

      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

      Responder
  9. Mertxe

    Muchas gracias!!
    Muy bien explicado, muy útil!
    Saludos,

    Responder
  10. Mertxe

    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!

    Responder
    • Max Camuñas

      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!

      Responder
  11. Felipe

    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.

    Responder
  12. Miki

    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.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

te regalamos un diseño gratis para divi

Información Básica sobre Protección de Datos

Responsable: DiviFast. Finalidad: suscripción a nuestra newsletter. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@divifast.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en nuestra política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

DiviFast: plantillas Divi
Resumen de privacidad

Esta web utiliza cookies para que poder ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a este sitio o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Puedes consultar aquí la política de privacidad. Más información en la política de cookies.