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.