Creación de header responsive en DIVI

En el desarrollo de una página web es importante un buen responsive ya que la mayoría de visitan serán desde dispositivos móviles.
En este post iremos aprendiendo paso a paso la elaboración de una cabecera para nuestra página web y más adelante tener una web funcional.
Para desarrollar este pequeño proyecto usaremos DIVI, esta plantilla la usamos en la agencia y nos ha dado muy buenos resultados.

1. Instalar DIVI

Uno de los pasos más importantes es la instalación de nuestra plantilla.
Para instalar DIVI iremos a nuestro panel de wordpress e iremos al menú Apariencia – Temas.


Daremos clic en el botón de Añadir nuevo – Subir tema  y cargaremos nuestra plantilla.

2. Crear header

Ahora que tenemos la plantilla instalada procederemos a crear nuestra plantilla para header.

Iremos a menú de wordpress buscaremos Divi – Theme Builder

Nos aparecerá una pantalla donde nos dejara agregar nuestro header global

Agregaremos nuestra cabecera dando clic en Add Global Header – Build Global Header

Seleccionaremos la opción de Build From Scratch y estamos listos para crear nuestro header

Para nuestro header usaremos tres elementos, logo, menú y redes sociales entonces usaremos una fila con 3 secciones, donde la sección mas grande sera a la derecha y las otras dos las mas pequeñas.
Ahora ya podemos ver la estructura de nuestro header y podemos ir agregando nuestros elementos.

Agregaremos nuestro logo haciendo clic en el botón de mas (+)

Insertaremos el modulo imagen

Seleccionaremos nuestro logo a insertar y guardaremos dando clic en el botón verde

Listo ahora tenemos nuestro logo en nuestra primera sección; para la segunda sección insertaremos otro modulo pero en este caso uno de redes sociales.

Seleccionaremos nuestras redes sociales a colocar y los enlaces correspondientes, una vez terminado de configurar daremos clic en guardar.
En nuestro tercera sección colocaremos nuestro menú.

Seleccionaremos el menú a usar y guardaremos.

Nos queda centrar nuestros módulos verticalmente y para eso iremos a la configuración de nuestra fila.

Iremos a Design (Diseño) – Equalize Column Heights (Igualar columnas)

Una vez que hayamos activado igualar columnas iremos a Advanced (Avanzado) – Custom Css y agregaremos este pequeño codigo CSS align-items:center; y display:flex;

Con esto ya tenemos nuestro header listo y responsive.