Cómo construir una web profesional con bloques y Astra Pro

Cada vez que hablo con un nuevo cliente/a que viene de una mala experiencia con su web anterior, suele haber un denominador común: la web fue construida con un maquetador visual (los casos de uso suelen referirse a Elementor, Divi o WPBakery) y una plantilla predefinida de un tema multipropósito, repleta de (in)utilidades, con mil cosas que no necesitaban.

El resultado: webs lentas, difíciles de mantener, llenas de código enrevesado y recargado, mal optimizadas para SEO y, en muchos casos, muy difíciles de escalar o actualizar sin romper cosas.

Por eso, desde hace tiempo he encontrado una combinación que me funciona de forma constante: Astra, como tema base, utilizando su versión Pro, complementado con plugins de bloques ligeros como Spectra o CoBlocks. Este stack permite construir webs profesionales, rápidas y sostenibles a largo plazo sin necesidad de encadenarse de por vida al lastre de un constructor visual.

Este artículo es una guía práctica para quienes quieren hacer las cosas bien desde el principio. Tanto si eres desarrollador/a como si eres dueño/a de un negocio y quieres entender cómo debe construirse una web WordPress hoy en día.

Los page builders o maquetadores visuales, como Elementor, Divi o WPBakery son útiles. No lo vamos a negar. O, mejor dicho, fueron útiles en su momento. Puedo entender las motivaciones de hace unos años, cuando el editor clásico no permitía grandes lujos ni había forma de conseguir ciertos resultados especialmente en diseño. Ahora ya todo esto no es excusa. Los avances que ha conseguido la comunidad de WordPress, el desarrollo de Gutenberg, o el full site editing han permitido que la maquetación nativa dé un salto de calidad que hace no tanto era impensable.

¿Es malo usar constructores/maquetadores visuales? No. Te diría que incluso hay casos en los que me parece buena idea. Pero traen implícitos costes ocultos: rendimiento, dependencia, complejidad, suciedad de código, funcionalidades añadidas innecesarias…

• Velocidad de carga muy baja. Es común ver webs que tardan 4-5 segundos (o más) en cargar completamente. No quiere decir que el mero hecho de usar un constructor visual recargue una web de por sí en lo que se refiere al rendimiento, porque cualquier constructor se puede optimizar, pero la ausencia de esa optimización en una web construida con un maquetador visual puede empeorar el rendimiento de manera catastrófica.
• Mucha dependencia de shortcodes o estructuras propias que se rompen si cambias de builder o intentas deshacerte de él. Constructores como WPBakery, que gestionan sus contenidos con shortcodes específicos, implican un problema importante si queremos deshacernos de ellos, porque nos obligan a construir de nuevo prácticamente todo desde cero.
• CSS e inline JS por duplicado, lo que complica la optimización.
• Clientes/as que no entienden cómo editar cosas porque el backend se les hace demasiado complejo.

Además, y aunque esto influya más en quienes nos ganamos la vida con ello que en la mentalidad de alguien que no se dedica a hacer webs de manera profesional, estos maquetadores a menudo rompen con la filosofía WordPress: un CMS ligero —a pesar de lo que digan los escépticos—, flexible y fácil de extender y de escalar.

• Integración perfecta con el core de WordPress (y el editor de bloques, que está en continua mejora).
• Mayor compatibilidad con plugins de SEO, caché o rendimiento.
• Se evita el efecto lock-in (dependiencia que algunos plugins o temas generan cuando los usas) que tienen muchos constructores visuales.
• Se reduce el número de plugins pesados.
• Se obtiene una web más fácil de mantener, más estable y más escalable.

Y si quieres añadir efectos, layouts más avanzados o elementos visuales más potentes, es más efectivo recurrir a plugins especializados como Spectra, CoBlocks o Kadence Blocks, que lo permiten sin llevar aparejada toda la complejidad de un constructor visual.

Si vas a seguir esta estrategia —y es algo que te recomiendo encarecidamente— necesitas una base bien armada desde el principio. Estos son los recursos básicos:

Evita instalaciones automáticas mediante temas predeterminados o multipropósito, llenos de demos, plantillas y plugins que, en realidad, tu web no necesita. Instala WordPress a mano, limpio y con lo justo para funcionar. Usa una versión de PHP actualizada, no te olvides de los protocolos de seguridad (HTTPS) y apuesta siempre por un hosting optimizado y de garantías (no intentes escatimar con el hosting o sus precios; me lo agradecerás).

Aunque puedes usar Astra gratuito, la versión Pro te da acceso a muchísimos aspectos más:

• Maquetador de cabeceras y pies de página por bloques.
• Controles avanzados de diseño.
• Muchas más opciones de tipografía, espaciados…
• Diseño de blog más personalizado.

Pásate por la web de Astra y echa un vistazo a lo que ofrece la versión Pro. Y cuando te hayas decidido y lo tengas listo, actívalo con tu clave de licencia. Es así de fácil.

Mi preferido. La versión gratuita, que encontrarás en el repositorio de WordPress, ofrece más de 30 bloques nuevos para el editor, como contenedores avanzados con layouts configurables con Flexbox o CSS Grid, acordeones, contadores, botones con iconos, testimonios, varios tipos de galerías, iconos, listas, etc. Además, aporta controles de diseño más específicos y granulares que los bloques nativos. En realidad, con lo que ofrece Spectra en su versión gratuita y el propio editor de bloques puedes construir una web totalmente funcional.

Muy simple y muy visual. Ideal para estructuras como columnas, grids y bloques con tipografía llamativa. También ofrece un control bastante avanzado sobre márgenes y espaciados.

Muy útil para cosas como formularios de contacto o secciones personalizadas mediante layouts preconfigurados.

No son imprescindibles, pero, en muchos casos, facilitan las cosas:

• Caché y/o rendimiento (Autoptimize, LiteSpeed Cache, W3 Total Cache…).
• SEO (Rank Math, SEOPress, Yoast SEO…).
• Optimización de imágenes (Imagify, ShortPixel…).
• Añadir funciones sin tocar código (WPCode, Code Snippets…).

Y aquí es donde empieza la magia. Astra Pro es extremadamente ligero y modular. Puedes activar única y exclusivamente aquello que consideres o necesites.

Paso a paso:

1. Instala Astra desde el repositorio oficial (Apariencia > Temas > Añadir tema > Astra)
2. Instala y activa el plugin Astra Pro Addon desde tu cuenta.
3. Si así lo consideras, ve a Astra > Escritorio y activa solo los módulos necesarios.
4. Entra al personalizador de WordPress (Apariencia > Personalizar) y configura todo paso por paso:
   • Tipografías globales (procura usar Google Fonts de manera local siempre que sea posible) y específicas.
   • Paleta de colores de marca.
   • Estilos de botones, enlaces, formularios…
   • Diseño general (anchura de los layouts, márgenes, etc.).
   • Cabecera / pie de página con bloques o layouts prediseñados.

💡 Consejo: define tu sistema visual desde el inicio y de manera general para evitar inconsistencias más adelante en el diseño de tu web.

Una vez tienes la base, tendrás que construir las secciones de tu web. Aquí es donde los plugins de bloques entran en acción.

Bloques más útiles de Spectra:

• Container: permite estructurar contenido con Flexbox y CSS Grid, controlar anchos, alineaciones, dispositivos…
• Heading: para títulos y títulos con subtítulo, y diseño personalizado.
• Buttons: con iconos, hovers personalizados y estilos globales.
• Image Gallery: para mostrar trabajos, productos, portafolios…
• Info Box: para destacar servicios o características.

Bloques destacados de CoBlocks:

• Collage Gallery: para presentaciones creativas.
• Pricing Table: si necesitas mostrar tarifas o tablas de precios.
• Accordion, FAQ: útiles para páginas informativas.

Kadence Blocks (si decides incluirlo):

• Formulario de contacto integrado.
• Bloques de iconos y testimonios visualmente muy cuidados.
• Filas con preconfiguración de columnas, rellenos…

No todo es diseño bonito. La arquitectura web es clave. Una web sencilla pero bien estructurada convierte mejor, carga más rápido y es mucho más fácil de usar.

• Inicio: un hero visualmente muy atractivo y con mensaje directo, un bloque de servicios, una zona en la que se resalte tu valor diferencial frente a tu competencia, un bloque de testimonios, y una llamada clara a la acción.
• Sobre mi / nosotros: historia, valores, equipo. Transmite cercanía desde la profesionalidad.
• Servicios: página de resumen general y, si es necesario y te interesa destacarlo, subpáginas para cada servicio concreto.
• Contacto: formulario de contacto claro y limpio, o en su defecto o como complemento datos de contacto, mapa (si fuera necesario).
• Blog (opcional): muy útil para crear contenido (SEO), reforzar tu marca y buscar autoridad.

💡 Sugerencia: usa plantillas reutilizables para encabezados, bloques de CTA o pies de página. Ahorrarás tiempo y mantendrás la coherencia visual en toda la web. Puedes configurarlas en Astra > Site Builder. Aquí puedes ver cómo usarlo y entender sus funcionalidades.

Una web rápida no es solo lujo, es esencial. Los buscadores te penalizan por lentitud, y un altísimo porcentaje de los usuarios abandonan una web si esta no carga en menos de 3 segundos, especialmente en móvil (en 2023 lo dejó claro una encuesta de Google).

• Siempre que sea posible, instala solo los plugins imprescindibles. Cada uno añade carga. Y todo se puede optimizar, pero muchas veces no hay necesidad de acudir a un plugin si lo que necesitas se puede hacer de otra manera.
• Optimiza las imágenes antes de subirlas a la web. Utiliza fuentes externas (Bulk Resize, TinyPNG…) para hacerlo, acude siempre a formatos de última generación (preferiblemente WebP) y usa compresiones que minimicen el tamaño y la calidad (la mayoría de las veces no es necesario utilizar imágenes gigantes ni las mejores calidades).
• Cargar fuentes desde local. Por ejemplo, Astra ofrece una opción para cargar las fuentes de Google localmente, de tal manera que las guardará en tu servidor y así la web no tendrá que efectuar consultas externas cuando necesite cargar las fuentes. Ahorrarás recursos y permitirás que la web cargue más rápido.
• Activa lazy load (carga diferida) para imágenes y iframes.
• Usa algún complemento que te permita minificar, combinar y cachear (premium, WP Rocket, FlyingPress, Perfmatters; en el repositorio de WordPress, Autoptimize, LiteSpeed Cache si tu servidor lo ofrece, W3 Total Cache…). Te cuento cosas sobre esto en este artículo.
• Activa una CDN si consideras que los usuarios/as que te van a visitar lo harán desde puntos geográficos diversos.

🚀 Bonus tip: Si quieres tener control granular, puedes usar algo como Asset CleanUp para desactivar scripts innecesarios en ciertas páginas.

El resultado final va a ser una web que:

• Carga en menos de 2 segundos con total seguridad.
• Se adapta perfectamente a móviles sin sobrecarga de plugins.
• Es editable por el cliente desde el editor nativo sin líos excesivos (más allá de la curva de aprendizaje).
• Tiene una base sólida y profesional para crecer (tanto en SEO como en cualquier otra funcionalidad).

Y lo mejor es que no dependerás de un ecosistema cerrado. Si en el futuro quieres cambiar un bloque, una sección, un plugin o incluso el theme, lo podrás hacer sin ningún miedo a que todo se desmonte.

Construir una web profesional hoy en día no requiere ni de plantillas sobrecargadas, ni de temas multipropósito a los que le cambiamos los colores y los textos y ya tenemos web, ni de page builders pesados. Requiere de conocimiento, buenas prácticas y una elección inteligente de las herramientas más adecuadas en función de lo que nuestra web necesite. Todo se puede optimizar, pero siempre es más complicado si partimos de bases más complejas.

Tras estos consejos, tendremos que comprobar la web en todos los navegadores y dispositivos que nos sea posible, prestar atención a la seguridad, revisar que no quede contenido de ejemplo, fijar la estructura de los enlaces permanentes, comprobar que enlaces y formularios funcionan como deben, no permitir el spam si tenemos habilitados los comentarios en entradas o páginas, estar al día en cuanto a nuestras páginas legales y cumplir con la legalidad de las cookies, o dar de alta la web en Google Search Console, como algunas de esas últimas tareas indispensables para que todo esté en orden. Si tienes alguna duda sobre cualquiera de estas acciones, no dudes en consultarme.

Con el ejemplo de Astra Pro y plugins de bloques bien seleccionados puedes crear webs totalmente personalizadas, optimizadas para SEO, con un rendimiento óptimo y —siempre que estén cubiertas con un buen mantenimiento— pensadas para durar años y años sin necesidad de tener que rehacerlas cada seis meses.