Divi desde siempre nos permitió diseñar páginas espectacularmente atractivas con relativamente poco esfuerzo.

Es quizás por eso que, una de las primeras cosas que nos consternaban a quienes nos iniciábamos en el constructor Divi, era el hecho de que no tenía casi opciones para personalizar la cabecera del sitio web. Obligándonos a usar un encabezado básico y bastante espartano.

Es cierto que esta falta podía suplirse perfectamente gracias a la plantilla de página Blank. Esta plantilla, aplicada a cualquier página, oculta tanto la cabecera como el pie de página para que luego diseñemos ambos con el propio constructor, integrando así la cabecera al diseño propio de la página.

Pero esta pseudo-solución conlleva aparejados dos problemas:

  1. Que es necesario replicar la cabecera en todas las páginas que diseñemos con Divi. Y si queremos hacer cambios también debemos replicar las modificaciones en cada una.
  2. Que no hay solución para las páginas / entradas en las que no queramos usar el constructor Divi. Y si tenemos un blog es lógico que no queramos maquetar todas las entradas con el constructor, no sería nada práctico.

Cómo crear una cabecera personalizada con Divi

Por suerte, desde el lanzamiento de Divi 4.0, ya es posible personalizar la cabecera global del sitio web con todas las herramientas del propio constructor. E incluso podemos crear diferentes cabeceras para las distintas secciones de tu web.

¡Vamos a ver cómo se hace!

#1. Añadimos una cabecera global

Similar a como vimos en Cómo personalizar una categoría con Divi vamos a la opción Divi > Theme Builder y luego a Add Global Header.

A continuación vamos a elegir la opción Build Global Header para poder crear una cabecera desde cero.

Y luego de ésto se abrirá el constructor Divi que ya conocemos. A partir  de ahora es igual a ir como cuando creamos cualquier página con Divi.

#2. Ajustes de la sección

Lo primero que tenemos que hacer ahora es aplicarle algunos ajustes generales a la sección que va a contener la cabecera. Por ejemplo:

  1. Ancho: 100%
  2. Ancho máximo: 1280px (Escritorio), 100% (Tableta & Teléfono)

Eliminamos todo el espacio predeterminado que hubiera arriba y debajo de la sección:

  1. Relleno Superior (Top Padding): 0px
  2. Relleno Inferior (Bottom Padding): 0px

Agregamos radio de curvatura a las esquinas de abajo.

  1. Izquierda: 50px
  2. Derecha: 50px

Y también una sombra suave a la caja.

  1. Sombra de la caja: según captura de pantalla.
  2. Box Shadow Blur Strength: 60px
  3. Color: rgba(0,0,0,0.13)

Luego, vamos a la pestaña Avanzado y a la sección Visibilidad para ocultar los desbordamientos horizontal y vertical (Overflow) como mostramos en la captura siguiente.

  1. Desbordamiento Horizontal: Oculto
  2. Desbordamiento Vertical: Oculto
  3. Indice Z: 999

Aumentamos también el índice Z, ésto ayudará a garantizar que la sección permanezca encima de todo el contenido de la página.

Cambia también los desbordamientos de la sección al pasar el mouse por encima (Pestaña Flotar).

  1. Desbordamiento Horizontal: Visible
  2. Desbordamiento Vertical: Visible

#3 . Agregamos la fila que conforma la barra del encabezado

Ahora que hemos completado la configuración general de la sección podemos comenzar a agregar filas.

En total vamos a necesitar dos filas, una para contener al encabezado y otra para los elementos del menú. Comenzaremos con el encabezado agregando una nueva fila con la siguiente estructura de columnas:

Y antes de agregar algún módulo a la fila abrimos la configuración y vamos a definir algunos estilos.

  1. Color del Fondo: #38383f

Dentro de la sección Tamaño de la pestaña Diseño modificamos lo siguiente:

  • Uso Personalizado del Canalón de Ancho: SI
  • Ancho del Canalón: 1
  • Ancho: 100%
  • Ancho máximo: 100%

Y para asegurarnos de que las columnas aparezcan una al lado de la otra, incluso en tamaños de pantalla más pequeños, vamos a agregar una línea de código CSS al elemento principal de la fila.

display: flex;

#4. Insertamos la imagen del logo en la cabecera

Una vez completada la configuración de la fila, es hora de comenzar a agregar módulos. Así que (primero que nada) vamos a insertar un módulo de imagen en la columna 1 para cargar el logo de tu página.

Ahora vamos a la pestaña Diseño y ajustamos la alineación de la imagen a la izquierda.

Y en la sección Tamaño ajustamos el Ancho en 100px (esta medida dependerá un poco de las proporciones de tu logo).

En la sección Separación (o Spacing) vamos a cambiar los márgenes:

  1. Margen Superior: 5px
  2. Margen Izquierdo: 50px (Escritorio), 20px (Tableta & Teléfono)

#5. Agregamos botones sociales a la cabecera

Ya tenemos el logo en la primera columna y ahora vamos a la segunda columna donde vamos a colocar los botones de nuestras redes sociales.

Para ésto vamos a usar el módulo Seguir en medios sociales.

Luego, vamos abriendo los ajustes particulares de cada red social y cambiamos el color de fondo a transparente.

  1. Color del Fondo: rgba(0,0,0,0)

Volvemos a la configuración general del módulo y cambiamos la alineación a Centrado.

Ahora modificamos los ajustes del ícono:

  • Color: #ffffff
  • Usar Tamaño de Icono Personalizado: SI
  • Icono Tamaño del Texto: 16px (Escritorio & Tableta), 12px (Teléfono)

Le agregamos un poco de margen superior al módulo de redes sociales

#6. Agregamos un botón a la cabecera

Ahora vamos a ir a la tercera columna para agregar un módulo de botón con cualquier texto a tu elección.

Este botón puede ser una llamada a la acción para invitar al usuario a que realice algo que tu quieras, como por ejemplo: suscribirse, comprar, ponerse en contacto, etc.

Alineamos el botón a la Derecha.

Asignamos los siguientes estilos a la configuración del botón:

  1. Usar Estilos Personalizados para Botón: SI
  2. Botón Tamaño del Texto: 12px (Escritorio), 10px (Tableta), 8px (Teléfono)
  3. Botón Color del Texto: #ffffff
  4. Botón Color del Fondo: #ffae25
  5. Botón Ancho del Borde: 0px

  1. Radio del borde del botón: 0px
  2. Espacio entre letras de botones: 5 px (Escritorio), 3 px (Tableta y teléfono)
  3. Fuente del botón: Open Sans
  4. Peso de fuente del botón: Negrita
  5. Estilo de fuente del botón: Mayúscula

Y agregamos algunos valores de relleno (padding) personalizados para los diferentes tamaños de pantalla.

  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Acolchado izquierdo: 50 px (Escritorio y tableta), 15 px (Teléfono)
  • Relleno derecho: 50 px (Escritorio y tableta), 15 px (Teléfono)

#7. Agregamos un menú a la cabecera

El último paso de la creación de esta cabecera personalizada con Divi es añadirle un menú. No hay cabecera de sitio web que no tenga un menú y nosotros no vamos a ser menos.

Para poder insertar colocar un menú en la cabecera de Divi vamos a insertar una nueva fila de ancho completo.

Y le asignamos los siguientes valores de estilo:

  1. Usar ancho de canal personalizado: SI
  2. Ancho de canal: 1
  3. Ancho: 100%
  4. Ancho Máx.: 100%

Y nos aseguramos de eliminar los rellenos predeterminados Superior e Inferior.

Ahora sí vamos a añadir el Módulo de Menú. Aquí debes elegir el menú principal de tu sitio o el que prefieras agregar a la cabecera.

Y ahora vamos a la pestaña Diseño y cambiamos lo siguiente:

  1. Estilo: Centrado
  2. Dirección del menú desplegable: Hacia abajo

Vamos a modificar también el color del enlace activo en la pestaña de diseño.

  1. Color de enlace activo: # ffae25

Haremos lo mismo para el color de línea del menú desplegable en la configuración del menú desplegable.

Y modificamos el color del icono del menú de rayas horizontales (hamburger) que se muestra en dispositivos móviles.

Y por último unos cambios más a la configuración del texto del menú.

  1. Fuente del menú: Prata
  2. Color del texto del menú: #000000

#8. Hacemos que la cabecera se quede fija

Este último paso es completamente opcional y puedes hacerlo u omitirlo según prefieras.

Vamos a agregar unas líneas de código CSS a la sección que contiene la cabecera de nuestro sitio para hacer que quede siempre fija en la parte superior. Quiero decir que cuando hagamos scroll la cabecera siempre estará visible ahí arriba.

Para hacerlo accedemos a los ajustes de la sección y vamos a la pestaña Avanzado.

Dentro de la pestaña Avanzado buscas el cuadro Elemento principal y pegas el siguiente código CSS.

position: fixed;
top: 0;
left: 0;
right: 0;

¡Y eso fue todo! Ya tenemos una cabecera bien completa asignada a todo el sitio web. Antes de salir del editor no te olvides de guardar los últimos cambios.

Y una vez de regreso en la página del Theme Builder recuerda guardar nuevamente los cambios.

Ahora sí terminaste. Solo te queda revisar cómo quedó el resultado final accediendo a cualquier página o entrada de tu sitio web.

 

Sin duda esta cabecera que acabamos de crear es solo un ejemplo. Siguiendo estos pasos puedes diseñar tu propia cabecera personalizada, incluyendo los elementos que creas necesarios.

Espero que te haya gustado y resultado útil la guía.