¡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:
- 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.
- Parte Media (Cuerpo): Es el contenido único de cada página (textos, imágenes, secciones). Esto lo diseñaremos con Elementor.
- 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.
- Ve a Apariencia > Personalizar.
- Haz clic en «Maquetador de cabeceras» (Header Builder). Verás un panel visual con tres filas (arriba, centro, abajo). Usaremos la fila central.
- 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»).
- Haz clic en el icono
- 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.
- Sigue en Apariencia > Personalizar, pero ahora vuelve atrás y entra en «Maquetador de pies de página» (Footer Builder).
- 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.
- 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.
- Ve a Páginas, busca tu página de «Inicio» (o Home) y haz clic en «Editar con Elementor».
- Haz clic en el icono
+rosa y selecciona una estructura de dos columnas (izquierda y derecha). - 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.
- 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
- Columna Derecha (La Imagen):
- Arrastra un widget de Imagen. Sube una foto de alta calidad (¡optimizada!) que represente tu servicio o producto.
- 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!
