Guía WordPress (Parte 4): Maquetando la Home (Header, Footer y «Hero»)

¡Bienvenido a la Parte 4! Ya tenemos el hosting, el software instalado y, lo más importante, nuestro «Sistema de Diseño» (colores y fuentes) configurado. Ahora empieza la magia visual. Hoy vamos a construir la estructura principal de tu página de inicio (Homepage). Aprenderás a configurar las piezas fundamentales que enmarcan tu web: el Encabezado (Header) y el Pie de Página (Footer), y diseñaremos la sección más importante para captar la atención de tus visitas: el «Hero». Lo mejor de todo es que lo haremos utilizando únicamente las herramientas gratuitas de nuestro stack.

La Estructura: Header, Cuerpo y Footer

Para entender cómo se maqueta en WordPress con este stack gratuito, imagina un sándwich:

1. Parte Superior (Header): Es el menú de navegación y el logo. Se repite en todas las páginas. En nuestra configuración gratuita, esto lo controla el tema Astra.
2. Parte Media (Cuerpo): Es el contenido único de cada página (textos, imágenes, secciones). Esto lo diseñaremos con Elementor.
3. Parte Inferior (Footer): Es el cierre de la web con enlaces legales y redes sociales. Se repite siempre. También lo controla Astra.

Entender qué herramienta controla cada parte te ahorrará muchos dolores de cabeza. ¡Manos a la obra!

Diseñando el Header (Cabecera) con Astra

Vamos a crear una cabecera limpia, funcional y profesional.

1. Ve a Apariencia > Personalizar.
2. Haz clic en «Maquetador de cabeceras» (Header Builder). Verás un panel visual con tres filas (arriba, centro, abajo). Usaremos la fila central.
3. Añadir Elementos:
   • Haz clic en el icono + de la izquierda y selecciona «Logotipo del sitio».
   • Haz clic en el icono + del centro y selecciona «Menú Principal».
   • Haz clic en el icono + de la derecha y selecciona «Botón». (Edita el texto del botón a algo como «Contactar» o «Pedir Cita»).
4. Ajuste Móvil (Tip Pro): En la parte inferior del personalizador, haz clic en el icono del móvil. Verás cómo cambia la vista. Asegúrate de que el «Botón de alternancia» (el menú hamburguesa) está visible y funciona correctamente. Astra lo hace automático, pero siempre verifica.

Diseñando el Footer (Pie de Página) con Astra

El footer transmite confianza y profesionalidad. Vamos a crear una estructura clásica de 3 columnas.

1. Sigue en Apariencia > Personalizar, pero ahora vuelve atrás y entra en «Maquetador de pies de página» (Footer Builder).
2. En la fila central, verás espacios para añadir «Widgets».
   • Columna 1: Añade un widget de «Texto» o «Imagen» para poner tu logo de nuevo y una mini-bio de la empresa.
   • Columna 2: Añade un widget de «Menú de navegación» o lista de enlaces para poner las Páginas Legales (Política de Privacidad, Aviso Legal).
   • Columna 3: Añade el elemento «Social» para mostrar los iconos de tus redes sociales.
3. Copyright: En la fila inferior (la última de todas), edita el elemento «Copyright» para que ponga: © 2024 [Tu Empresa]. Todos los derechos reservados.

Dale a «Publicar». ¡Ya tienes el marco de tu web listo!

Diseñando la Sección «Hero» con Elementor

Ahora vamos a por el «Relleno». El Hero es la primera sección que ven los usuarios al entrar; tiene que impactar.

1. Ve a Páginas, busca tu página de «Inicio» (o Home) y haz clic en «Editar con Elementor».
2. Haz clic en el icono + rosa y selecciona una estructura de dos columnas (izquierda y derecha).
3. Columna Izquierda (El Mensaje):
   • Arrastra un widget de Encabezado (Heading). Escribe tu propuesta de valor. (¡Fíjate cómo sale ya con la tipografía que definiste en la Parte 3!). Cámbialo a etiqueta H1.
   • Arrastra un widget de Editor de Texto debajo para el subtítulo.
   • Arrastra un widget de Botón. Enlázalo a tu página de contacto.
4. Columna Derecha (La Imagen):
   • Arrastra un widget de Imagen. Sube una foto de alta calidad (¡optimizada!) que represente tu servicio o producto.
5. Ajustes de Sección: Haz clic en los 6 puntos de la sección (arriba al centro). En la pestaña «Estilo», puedes poner un color de fondo suave usando tus Colores Globales.

¡Guarda y previsualiza! Ya tienes una Home profesional.

Las Limitaciones de lo Gratuito (¿Cuándo pasar a PRO?)

Con Astra Free y Elementor Free hemos logrado un resultado fantástico y 100% funcional. Sin embargo, a medida que tu web crezca, notarás ciertas barreras:

• Cabecera Estática: En la versión gratuita, el menú desaparece al hacer scroll hacia abajo. Si quieres un «Sticky Header» (Cabecera pegajosa) que persiga al usuario para mejorar la navegación, necesitas Astra Pro.
• Diseño del Header Limitado: Si quieres diseñar un header totalmente a medida (con fondos complejos, animaciones o estructuras no estándar) usando la potencia de Elementor y no el personalizador de Astra, necesitas el Theme Builder de Elementor Pro.
• Mega Menús: Para menús desplegables avanzados con imágenes o columnas, necesitas la versión Pro.

Conclusión y Próximo Paso

¡Felicidades! Ya tienes la estructura visual de tu web montada. Tienes un Header funcional, un Footer que da confianza y una sección Hero que recibe a tus visitantes con impacto, todo ello manteniendo la coherencia de tu sistema de diseño.

Pero una web no es solo una portada bonita; necesita contenido dinámico para atraer tráfico. En la Parte 5, abordaremos la sección que dará vida a tu negocio y te traerá clientes desde Google: el Blog.

¿Prefieres que un experto defina tu identidad visual y sistema de diseño? En GAB Developers convertimos tu visión en una web pixel-perfect. ¡Optimiza tu huella digital!