Crear y modificar cabeceras Divi

Escrito por Matias Adrian Romero

09 May 2020

Una de las grandes novedades que incluyó la versión de Divi 4 fue la posibilidad de modificar la cabecera de la web utilizando el mismo constructor visual del que disponemos en el editor de páginas o entradas.

Esto nos permite una mayor flexibilidad a la hora de personalizar la cabecera a nuestro gusto, sin tener que recurrir a código CSS o plugins.

En este tutorial te voy a explicar paso a paso cómo crear y modificar la cabecera de divi utilizando su theme builder.

⌛ Tiempo estimado de lectura: 5 minutos

📐 Crear una cabecera en Divi con el constructor de temas

Para realizar esta prueba voy a partir desde cero, sustituyendo el menú y el logo que viene por defecto hasta conseguir un diseño a medida.

Antes

modificar cabecera divi

Después

modificar cabecera divi

Lo primero que debemos hacer es acceder desde nuestro panel de control a Divi > Generador de temas > Agregar encabezado global

agregar encabezado global

Si es la primera vez que accedes al generador de temas, veras que solo está habilitada la plantilla por defecto de tu sitio web.

Esto quiere decir que desde esa plantilla puedes añadir un encabezado, cuerpo o pie de página global, el cuál se va a mostrar en todas las ubicaciones de tu sitio web.

Por ejemplo: Si quieres agregar un encabezado para tu página de inicio y otro distinto en tu blog, es tán fácil como darle a la opción de añadir nueva plantilla y luego activar la opción de Usar en: Entradas > Todos Entradas y Blog

agregar nueva plantilla
configuraciones de plantilla divi

Esta configuración la puedes replicar en cualquier ubicación de tu sitio web.

Vamos a continuar con la construcción de nuestra cabecera, para ello le tienes que dar la opción de agregar encabezado global y construir encabezado.

A continuación vas a ver tres opciones del constructor visual de Divi, por ahora vamos a centrarnos en la primera opción, la de construir desde cero.

Para construir la cabecera primero tienes que añadir una sección y a continuación una fila.

En este ejemplo voy a utilizar una fila con 3 columnas, pero puedes elegir las que creas más conveniente para el estilo que vayas a utilizar.

🛑 Añadir el logo y los elementos a la cabecera

Para añadir el logo tienes dos opciones:

  1. Agregar un módulo de menú y entre sus elementos añadir tu logotipo
  2. Agregar un módulo de imagen y añadirle un enlace a la página de inicio para que al hacer clic sobre él actúe de la misma manera que lo haría un logo convencional.

Para este ejemplo voy a utilizar la segunda opción.

insertar logo en cabecera divi

Para cambiar el tamaño de un logo debemos ir a la pestaña de diseño. Desde ahí podemos ajustar el tamaño para la versión escritorio, tableta y la del teléfono.

ajustar tamaño de un logo

Ahora vamos a añadir el menú principal, para ello selecciona la columna central de la fila, agregar nuevo módulo y menú.

Desde la configuración puedes escoger cualquier menú que tengas creado, para crear un menú, lo puedes hacer desde: Panel de control > apariencia > menú

crear menu

En el caso de que quieras agregar el logotipo directamente desde este módulo también puedes hacerlo. Simplemente tienes que seleccionar la pestaña logotipo y agregar imagen.

agregar imagen

Desde la pestaña Elementos, puedes elegir si quieres que aparezca el carrito de compras y el icono de búsqueda.

elementos modulo menu divii

Por último vamos añadir en la columna de la derecha, un módulo de redes sociales.

botones sociales divi

✍ Personalizar la cabecera Divi paso a paso

Ahora que ya tenemos la cabecera creada vamos a aplicarle un poco de diseño para que luzca con un aspecto mucho más profesional.

Lo primero que voy a hacer es utilizar un color morado oscuro para el fondo de la cabecera.

Para aplicar este color tienes que ir a Sección > Fondo

configuracion seccion cabecera divi

Lo siguiente que voy a hacer es reducir los margenes, desde Diseño > Separación > Margen y Relleno, aplicando en ambos 0px

ajustes separacion de seccion divi

Poco a poco la cabecera va tomando color, pero como puedes ver el módulo del menú tiene por defecto un fondo blanco, así que vamos a corregirlo para continuar.

encabezado global parte

Seleccionando el menú, en la pestaña de fondo podemos eliminar el color blanco que viene por defecto y quedará un fondo transparente.

Lo siguiente es cambiar el color  y la fuente del texto desde la pestaña diseño > texto del menú

configuracion menu

Ahora toca ajustar la separación superior e inferior del modulo, voy a ajustarlo para que quede en el centro de la sección.

ajustes separacion menu

Luego toca hacer lo mismo con el módulo de redes sociales, en este caso lo voy a centrar y le aplicaré un margen superior de 25px para que esté a la misma altura que el módulo de menú.

Para finalizar voy a ajustar los márgenes de separación de la fila con un relleno superior de 10px y 15px en la base.

El último paso es elegir el ancho de la fila, en este caso utilizaré un tamaño de 85% y un ancho máximo de 1200 pixeles. Estos valores son orientativos, los puedes ajustar a tus necesidades.

configurar ancho de fila en divi

Ahora solo queda guardar los cambios y cerrar el constructor visual. 

El resultado como puedes, con unos pocos cambios queda una cabecera mucho más personalizada y profesional.

modificar cabecera divi

Ahora que sabes como cambiar la cabecera de divi y personalizarla a tu gusto puedes continuar añadiendo tantas opciones y módulos como necesites, por ejemplo con un menú secundario o una barra de navegación fija.

5/5 (1 Review)

Elegant Themes

Celebra su 12 aniversario 🥳

No te vayas aún, hay mucho más…

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

web design agency 2

¿Quieres triunfar con tu página web?

Suscribete y recibe las mejores guías de Diseño Web con WordPress

¡Enhorabuena! Te has suscrito correctamente a nuestro boletín de articulos de diseño web.

Chat Whatsapp
Acepte nuestra política de privacidad primero para comenzar una conversación.