Si usas el tema Astra, es probable que conozcas sus virtudes: es rápido, ligero y altamente personalizable. Sin embargo, existe una funcionalidad increíblemente potente que muchos usuarios pasan por alto o no comprenden del todo: los Diseños Personalizados (o Custom Layouts). Esta herramienta es, en esencia, la forma que tiene Astra de permitirte «enganchar» (hook) contenido en cualquier parte de tu sitio web sin escribir una sola línea de PHP. Olvídate de editar el archivo functions.php con miedo a romper tu web; en este tutorial, te mostraremos cómo dominar los Diseños Personalizados para llevar tu web al siguiente nivel.
¿Qué son exactamente los «Diseños Personalizados» (Custom Layouts) de Astra?
Imagina los «Diseños Personalizados» como mini-plantillas flexibles. Son contenedores de contenido que puedes diseñar usando el editor de bloques de WordPress o tu maquetador visual favorito (como Elementor o Beaver Builder) y luego «inyectar» o «enganchar» en ubicaciones específicas de tu tema.
Estas ubicaciones, conocidas en WordPress como hooks (ganchos), son puntos de anclaje que los desarrolladores del tema (en este caso, Brainstorm Force) dejan disponibles. Gracias a los Diseños Personalizados, puedes colocar tu contenido en:
- El encabezado (Header) o el pie de página (Footer).
- Antes o después del área de contenido (ideal para banners).
- Dentro del bucle de entradas (para insertar publicidad o CTAs entre posts).
- Incluso en áreas técnicas como el
wp_head(para scripts) o elwp_footer.
Es la solución perfecta para modificar la estructura de tu tema de forma segura, visual y específica.
Paso 0: Cómo Activar el Módulo de «Diseños Personalizados»
Antes de nada, debes asegurarte de que el módulo esté activo. Esta función es exclusiva de Astra Pro.
- Ve a tu panel de WordPress.
- Navega a Apariencia > Opciones de Astra.
- En la sección «Módulos Pro Disponibles», busca «Diseños Personalizados» (Custom Layouts).
- Asegúrate de que esté «Activado».
¡Listo! Ahora verás una nueva sección en tu menú de Apariencia llamada «Diseños Personalizados».
Caso Práctico 1: Insertar un Banner (CTA) Global después de todas las Entradas
Este es uno de los usos más comunes. Queremos que un banner de «Llamada a la Acción» (CTA) aparezca automáticamente debajo de cada artículo del blog.
- Crear el Diseño: Ve a Apariencia > Diseños Personalizados y haz clic en «Añadir nuevo».
- Diseñar el Banner: Dale un título (ej: «CTA Global Blog») y diseña tu banner usando el editor de bloques o Elementor.
- Configurar los Ajustes: En el panel de «Ajustes de Diseño Personalizado» (generalmente debajo del editor o en la barra lateral), configura lo siguiente:
- Disposición: Selecciona «Hook».
- Seleccionar Hook (Acción): Busca y selecciona
content_after. Esto significa que se enganchará justo después del contenido principal. - Visibilidad (Mostrar en): Selecciona «Todas las Entradas» (o
All Blog Posts). - Visibilidad (Usuarios): Puedes dejarlo en «Todos».
¡Guarda los cambios y revisa una entrada de tu blog! El banner aparecerá mágicamente.
Caso Práctico 2: Añadir un Pixel o Script (Analytics) al <head> de toda la web
A menudo necesitamos insertar códigos de seguimiento, como el Píxel de Meta, Google Analytics, o un código de verificación de Google Search Console, en la etiqueta <head> de nuestro sitio.
- Crear el Diseño: Ve a Apariencia > Diseños Personalizados > Añadir nuevo.
- Pegar el Código: Dale un título (ej: «Scripts Head»). En lugar de usar el diseñador visual, busca la opción de «Habilitar fragmento de código» o simplemente pega tu script en un bloque de HTML (si usas el editor de bloques) o en el editor de texto.
- Configurar los Ajustes:
- Disposición: Selecciona «Hook».
- Seleccionar Hook (Acción): Elige
wp_head. - Visibilidad (Mostrar en): Selecciona «Todo el sitio web».
Esto es mucho más limpio y seguro que usar plugins de terceros solo para insertar scripts.
Caso Práctico 3: Crear un Encabezado (Header) Diferente solo para la Homepage
¿Quieres que tu página de inicio tenga un encabezado transparente o un diseño completamente diferente al resto de la web?
- Crear el Diseño: Ve a Apariencia > Diseños Personalizados > Añadir nuevo.
- Diseñar el Encabezado: Diseña tu nuevo header con Elementor o el editor de bloques.
- Configurar los Ajustes:
- Disposición: Selecciona «Encabezado».
- Visibilidad (Mostrar en): Selecciona «Página de Inicio» (o ve a
Páginasy busca tu página de «Inicio»). - Opcional: En la pestaña «Ajustes de Encabezado», puedes marcarlo como «Encabezado Adhesivo» o «Encabezado Transparente» si lo deseas.
¿Por qué usar Custom Layouts en lugar de editar código (functions.php) o el Theme Builder?
Esta es la pregunta clave. ¿Por qué usar esta herramienta si Elementor Pro tiene un «Theme Builder» o si puedo añadir un add_action en mi archivo functions.php?
- Seguridad (vs. functions.php): Editar el archivo
functions.php(o el de un tema hijo) es arriesgado. Un error de sintaxis, una coma mal puesta, y tu sitio web mostrará una pantalla blanca (el «White Screen of Death»). Los Diseños Personalizados son una interfaz segura que evita estos errores fatales. - Rendimiento y Ligereza (vs. Theme Builder): El «Theme Builder» de Elementor Pro es fantástico, pero a veces es excesivo. Si solo quieres insertar un pequeño banner dentro del layout de Astra (como después del contenido), usar el Theme Builder de Elementor implica que Elementor «secuestre» toda la plantilla de la página (header, footer, contenido), lo cual puede ser más pesado. Los hooks de Astra Pro son más quirúrgicos y ligeros; simplemente inyectan contenido en un punto específico sin sobrecargar el resto de la plantilla.
Conclusión:
Los Diseños Personalizados (Custom Layouts) de Astra Pro son, sin duda, una de las herramientas no-code más potentes y subestimadas del ecosistema WordPress. Te dan el poder de un desarrollador para modificar la estructura de tu tema, pero con la seguridad y facilidad de una interfaz visual. Desde insertar scripts técnicos hasta crear banners de marketing y personalizar encabezados por página, el límite es tu creatividad.
En GAB Developers, creemos que la personalización no debe estar reñida con el rendimiento. ¡Optimiza tu huella digital!
