Guía WordPress (Parte 5): Creando el Blog (Plantilla de Post y Loop Grid)

Llegamos a la Parte 5 de nuestra guía. Tu web ya tiene una base técnica sólida, un sistema de diseño coherente y una estructura visual en la Homepage. Pero una web estática puede parecer un «cementerio digital». Para atraer tráfico real desde Google y fidelizar a tus usuarios, necesitas contenido dinámico: necesitas un Blog. En este tutorial, aprenderás a configurar la «máquina» de contenidos de tu web utilizando las opciones nativas de Astra, asegurando que cada artículo que publiques se vea impecable automáticamente.

Entendiendo la «Máquina» del Blog: Archivo vs. Single

Antes de tocar un solo botón, es vital entender cómo funciona el blog en WordPress para no perderse. A diferencia de la Home (que diseñaste manualmente), el blog funciona con plantillas dinámicas. Hay dos piezas clave:

1. El Archivo (El Escaparate): Es la página donde se listan todas tus entradas (ej: tuweb.com/blog). Técnicamente se llama «Loop» (bucle), porque repite la estructura de tarjeta una y otra vez para cada post.
2. El Single Post (El Producto): Es la plantilla de diseño de un artículo individual. Es lo que ve el usuario cuando hace clic en una noticia para leerla completa.

El concepto clave: En WordPress profesional no diseñas cada artículo uno por uno. Diseñas una plantilla maestra una sola vez, y todos los artículos (pasados y futuros) se adaptan a ese diseño automáticamente.

Configurando el «Loop» (Blog) con Astra

Como estamos usando la versión gratuita de Elementor (que no permite editar plantillas de blog), delegaremos esta tarea en nuestro potente tema: Astra.

1. Ve a Apariencia > Personalizar > Blog > Blog / Archivo.
2. Layout (Disposición): Aquí decides cómo se presentan tus entradas. Astra Free suele ofrecer una disposición estándar.
3. Estructura del Post: Aquí tienes el control de qué información mostrar en la tarjeta de cada entrada.
   • Imagen Destacada: ¡Actívala siempre! Un blog sin imágenes es invisible.
   • Meta Datos: ¿Quieres mostrar el autor? Si eres el único escritor, quizás sobre. ¿La fecha? Recomendable para mostrar frescura. ¿La categoría? Útil para la navegación. Oculta lo que no aporte valor.
   • Extracto: Define cuántas palabras del texto se muestran como resumen antes del botón «Leer más».

Diseñando la Plantilla de Entrada (Single Post)

Ahora vamos a diseñar la experiencia de lectura. Queremos que el usuario se quede a leer, no que huya.

1. Sin salir del personalizador, vuelve atrás y entra en Blog > Entrada individual.
2. Ancho del Contenido: Este es el ajuste más importante para la legibilidad. Si el texto ocupa el 100% de la pantalla (1920px), es imposible de leer. Configúralo en «Estrecho» o limita el ancho a unos 700-800px. Esto imita el formato de libro y cansa menos la vista.
3. Barra Lateral (Sidebar):
   • ¿Quieres poner banners o un formulario de newsletter al lado del texto? Activa la Barra Lateral Derecha.
   • ¿Prefieres una lectura inmersiva tipo Medium? Selecciona «Sin barra lateral».
4. Estructura del Título: Decide si quieres que el Título (H1) y la Imagen Destacada aparezcan dentro del área de contenido o si prefieres que ocupen todo el ancho superior.

Una vez termines, haz clic en «Publicar». Ahora, escribe una entrada de prueba en Entradas > Añadir nueva y verás cómo aplica automáticamente tu nuevo diseño.

Insertando «Últimas Entradas» en la Home con Elementor

Tenemos el blog configurado, pero está escondido en /blog. Vamos a mostrar un adelanto en nuestra Homepage para conectar la página estática con el contenido dinámico.

1. Ve a tu página de Inicio y haz clic en «Editar con Elementor».
2. Crea una nueva sección titulada «Últimas Noticias».
3. El Truco Gratuito: Elementor Free no tiene un widget de «Posts» visualmente atractivo por defecto. Tienes dos opciones:
   • Opción A (Básica): Busca el widget «WordPress > Entradas recientes». Es funcional pero básico.
   • Opción B (Recomendada): Instala un plugin gratuito de addons (como Essential Addons for Elementor o Royal Addons). Estos plugins añaden un widget de «Post Grid» gratuito a tu Elementor.
4. Arrastra el widget de Post Grid a tu sección.
5. Configura la «Consulta» (Query) para que muestre solo 3 entradas ordenadas por fecha descendente.

¡Listo! Ahora tu Home se actualiza sola cada vez que publicas un artículo nuevo.

Las Limitaciones de lo Gratuito (El Upsell a PRO)

Con Astra Free, tu blog se ve limpio, ordenado y profesional. Sin embargo, es rígido. Estás limitado a las opciones que el personalizador te ofrece (donde poner el título, la foto, y poco más).

¿Qué pasa si quieres diseñar una tarjeta de artículo totalmente a medida? ¿O si quieres insertar un banner de publicidad dentro del contenido automáticamente después del tercer párrafo?

Para eso necesitas el poder del Theme Builder:

• Elementor Pro te permite usar el Loop Grid Builder, una herramienta revolucionaria donde diseñas una tarjeta pixel a pixel (con la foto redonda, el título a un lado, efectos hover…) y se aplica a todo tu blog.
• Astra Pro te desbloquea diseños de blog avanzados (Masonry, lista destacada) y paginación infinita.

Conclusión y Próximo Paso

¡Tu web ya tiene estructura y tiene vida! Ya no es solo un folleto digital, es una plataforma de contenido dinámica lista para posicionar en Google.

Estamos en la recta final. Tienes el coche montado y el motor en marcha. En la Parte 6, sacaremos la lupa para el paso final crítico antes de enseñarle tu web al mundo: El Lanzamiento y el Checklist de 10 Puntos para no cometer errores de novato.

¿Prefieres que un experto configure tu estrategia de contenidos y blog? En GAB Developers optimizamos tu plataforma para que tus contenidos vuelen. Descubre cómo podemos ayudarte en gabdevelopers.es. ¡Optimiza tu huella digital!