Escrito por Matias Adrian Romero

09 May 2020

Crear y modificar cabeceras Divi

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.

4/5 (3 Reviews)

No te vayas a├║n, hay mucho m├ís…

2 Comentarios

  1. Avatar

    hola me gustaria saber como poner color al hover del men├║, as├ş como lo tiene tu web

    mil gracias

    Responder
    • Matias Adrian Romero

      Buenas fernando ┬┐A que hover te refieres exactamente? ┬┐Al de los enlaces del menu o al boton del CTA?

      Responder

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.

Chat Whatsapp
Acepte nuestra pol├ştica de privacidad primero para comenzar una conversaci├│n.