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

Después

Lo primero que debemos hacer es acceder desde nuestro panel de control a Divi > Generador de temas > 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

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.

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.

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ú

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.

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

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

✍ 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

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

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.

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ú

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

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.

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.

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.