¡Bienvenido a la Parte 2 de nuestra guía definitiva! En la Parte 1 preparamos una base técnica impecable: elegimos un hosting LiteSpeed y realizamos los 5 ajustes iniciales críticos. Ahora es el momento de montar el «chasis» y el «motor» de nuestra web. Vamos a instalar el stack core gratuito que, en nuestra opinión profesional, supera a la mayoría de temas de pago del mercado: la combinación del tema Astra y el maquetador visual Elementor. Con esta base, tendrás el control total sobre un lienzo rápido, flexible y profesional.
¿Por qué un «Stack» y no un Tema de ThemeForest?
Antes de empezar, aclaremos por qué elegimos este «stack» (o combinación de herramientas) en lugar de comprar un tema «multipropósito» de 60€ en ThemeForest. Esos temas (como Avada, The7, etc.) prometen hacerlo todo, pero vienen con dos problemas críticos:
- Bloat (Código Inflado): Están cargados con cientos de opciones, sliders y scripts que nunca usarás, lo que hace que tu web sea innecesariamente lenta desde el primer día.
- Lock-in (Encadenamiento): A menudo utilizan sus propios maquetadores visuales (page builders) propietarios. Si en el futuro decides cambiar de tema, todo tu contenido y diseño se romperán, dejándote «encadenado» a ese tema para siempre.
Nuestro stack evita ambos problemas.
La Combinación: Astra + Elementor
La filosofía detrás de este stack es la especialización: cada herramienta hace una cosa y la hace perfectamente.
- Astra : Actúa como el tema base. Su única función es ser increíblemente ligero, rápido y estable. Está diseñado con un código limpio, optimizado para los Core Web Vitals, y proporciona una estructura minimalista sobre la que construir. No intenta hacer diseño, solo ser el mejor «chasis» posible.
- Elementor : Este es el plugin de maquetación visual. Es la herramienta que te permite diseñar el frontend de tu web (el contenido de tus páginas) de forma visual, arrastrando y soltando elementos. Te da el control creativo total sobre el layout sin necesidad de escribir código.
Incluso en sus versiones gratuitas, esta combinación es más potente y profesional que la mayoría de temas premium. ¿La razón? No tienes el código «inflado» (bloat) de un tema multipropósito, sino dos herramientas optimizadas que trabajan en perfecta sintonía.
Cómo Instalar el Tema Astra
Astra será nuestro cimiento (tema). Desde este enlace ASTRA puedes descargar su versión gratis o la versión PRO que desbloquea todo su potencial.
- En tu panel de WordPress, ve a Apariencia > Temas.
- En la parte superior, haz clic en el botón «Añadir nuevo».
- En la barra de búsqueda (arriba a la derecha), escribe: «Astra».
- Aparecerá el tema Astra. Haz clic en «Instalar».
- Una vez instalado (tarda unos segundos), el botón cambiará. Haz clic en «Activar».
¡Listo! Ya tienes el «chasis» más rápido y fiable del mercado. Si te ofrece instalar «Plantillas de Inicio» (Starter Templates), puedes omitirlo por ahora.
Cómo Instalar el Plugin Elementor
Elementor será nuestra maquinaria de diseño (plugin).
- En tu panel de WordPress, ve a Plugins > Añadir nuevo.
- En la barra de búsqueda (arriba a la derecha), escribe: «Elementor».
- Aparecerá «Elementor Website Builder». Haz clic en «Instalar ahora».
- Una vez instalado, haz clic en «Activar».
Es posible que Elementor te pida crear una cuenta o te lance un asistente de configuración. Puedes saltar todos esos pasos por ahora, ya que configuraremos lo esencial manualmente.
¡El Paso Clave! Cómo «Sincronizar» Astra y Elementor
Este es el ajuste más importante y donde muchos principiantes fallan. Por defecto, el tema (Astra) sigue controlando el ancho de la página, lo que «encajona» a Elementor. Tenemos que decirle a Astra que «ceda el control» a Elementor para que podamos diseñar en un lienzo completo.
Este ajuste se hace página por página:
- Ve a Páginas > Añadir nueva para crear una nueva página (ej: «Inicio»).
- Ponle un título.
- En la barra lateral derecha (los ajustes de la página de WordPress, NO la de Elementor), busca el panel de «Ajustes de Astra».
- Cambia estas opciones:
- Barra Lateral (Sidebar): Selecciona
Sin barra lateral. - Maquetación del contenido (Content Layout): Selecciona
Elementor: Ancho completo. - Desactivar Título: Marca esta casilla (normalmente no queremos que el tema muestre el título de la página, ya que lo diseñaremos nosotros con Elementor).
- Barra Lateral (Sidebar): Selecciona
Ahora, cuando hagas clic en «Editar con Elementor», tendrás un lienzo limpio y de ancho completo para diseñar.
Conclusión y Próximo Paso
¡Felicidades! Has instalado la base de diseño profesional más potente y gratuita de WordPress. Ya tienes tu chasis (Astra) y tu motor (Elementor) listos y sincronizados.
Ahora que tenemos el lienzo gratuito listo, en la Parte 3, vamos a configurar los Ajustes Globales de Estilo (colores, fuentes y layout) en Astra y Elementor antes de empezar a maquetar nuestra primera página.
En GAB Developers, creemos que la elección de las herramientas correctas define la calidad del proyecto final. ¡Optimiza tu huella digital!




