¡Detente un segundo!
¿Estás cansado del mismo pie de página genérico que traen los temas de WordPress?
¿Quieres algo más personal, flexible y que realmente represente tu marca?
Entonces, el Site Builder del tema Astra y su poderoso sistema de Hooks son tus mejores aliados.
Y no, no necesitas ser un gurú del código para lograrlo.
Solo necesitas saber dónde poner las piezas del rompecabezas. 🧩
Este artículo es para ti, valiente creador digital, que quiere ir más allá de lo convencional.
Aquí te enseñaré cómo construir un footer que deje huella… y que Google adore.
⚙️ ¿Qué son los Hooks en Astra?
Los Hooks son como pequeñas puertas ocultas 🔓 en tu tema Astra.
Permiten insertar contenido donde normalmente WordPress no te dejaría hacerlo.
En lugar de editar archivos PHP directamente (lo cual puede ser arriesgado 💣), los Hooks ofrecen una forma segura y modular de personalizar tu web.
Con ellos, puedes inyectar código, bloques de Gutenberg, formularios o incluso contenido dinámico en lugares estratégicos: encabezados, menús, barras laterales… y por supuesto, el footer.
🧩 Requisitos previos: lo que necesitas tener antes de empezar
Antes de que te pongas a mover piezas, asegúrate de tener lo siguiente:
✅ El tema Astra instalado (preferiblemente la versión Pro para desbloquear los Hooks).
✅ Elementor, Gutenberg o cualquier constructor de bloques que prefieras.
✅ El plugin Astra Pro Addon activado.
✅ Ganas de crear algo propio y auténtico. 💪
Una vez tengas todo listo, prepárate para construir.
🧱 Paso 1: Accede al Site Builder de Astra
Ve a tu panel de WordPress.
Navega a Apariencia > Personalizar.
Ahí verás la opción “Constructor del sitio” (Site Builder si tu instalación está en inglés).
Haz clic.
Verás una interfaz que te permite modificar Header, Footer, y a veces otras áreas según tu configuración.
Ahora, centrémonos en el footer.
📦 Paso 2: Crea un nuevo Hook personalizado
Este paso es mágico. ✨
Es donde tomas el control total del pie de página.
Ve a Apariencia > Astra Options y haz clic en “Custom Layouts”.
(Si no lo ves, asegúrate de que el módulo Custom Layouts está activado en Astra Pro).
Haz clic en «Add New».
Dale un nombre a tu nuevo layout, algo como “Footer Personalizado”.
En el desplegable de Layout Type, selecciona Hook.
Se abrirá un nuevo mundo de opciones. 🌌
🧭 Paso 3: Elige el Hook adecuado para el footer
Aquí es donde mucha gente se pierde.
Pero tú no. 😉
Para colocar un footer, el Hook ideal suele ser:astra_footer_before, astra_footer, o astra_footer_after.
La diferencia entre ellos es milimétrica pero importante:
🔹 astra_footer_before: Justo antes de que empiece el footer del tema.
🔹 astra_footer: Sustituye el contenido principal del footer.
🔹 astra_footer_after: Añade contenido justo después del footer.
En la mayoría de los casos, si quieres crear un footer desde cero, elige astra_footer.
Esto anulará el footer por defecto y te dará total libertad. 🧠
🧱 Paso 4: Crea el contenido de tu nuevo footer
Ahora toca construir. 🧑🏭
Tienes un editor completo a tu disposición.
Puedes usar:
🧩 Bloques de Gutenberg (como columnas, encabezados, íconos, botones, etc).
🧩 Shortcodes de formularios (como Contact Form 7 o WPForms).
🧩 HTML personalizado, si te sientes valiente.
🧩 Incluso widgets dinámicos si usas Elementor o Spectra.
No tengas miedo de experimentar.
Por ejemplo, puedes hacer una estructura como esta:
🔹 Columna 1: Logo + frase de marca.
🔹 Columna 2: Menú de enlaces rápidos.
🔹 Columna 3: Redes sociales con íconos.
🔹 Columna 4: Suscripción al boletín.
Todo esto lo puedes lograr con bloques nativos de WordPress.
Y si usas Spectra (el plugin de bloques de Astra), aún más fácil.
🧪 Paso 5: Configura las condiciones de visualización
Esto es crucial para que el nuevo footer se muestre correctamente.
Más abajo en el panel de creación de Hooks, verás una sección llamada Display On.
Aquí debes seleccionar:
✅ Todo el sitio (Entire Website), si quieres que el footer aparezca en todas las páginas.
✅ O páginas específicas si lo quieres mostrar solo en la homepage o en landing pages.
También puedes aplicar reglas de usuarios: por ejemplo, mostrar un footer distinto a usuarios logueados.
Eso te da un poder enorme sobre la experiencia de navegación. 🎯
🔥 Paso 6: Publica y prueba
Haz clic en Publicar.
Después, ve a tu sitio y actualiza la página.
¡Voilà!
Tu nuevo footer personalizado con Hooks debería estar activo.
Asegúrate de revisarlo en dispositivos móviles 📱 y de probar los enlaces y formularios.
🎨 Bonus: Estiliza con CSS personalizado
¿Quieres afinar aún más?
Ve a Apariencia > Personalizar > CSS adicional.
Puedes agregar estilos para que el footer se vea como tú quieras.
Ejemplo básico:
.my-footer {
background-color: #1a1a1a;
color: #fff;
padding: 40px 20px;
text-align: center;
}
Solo asegúrate de usar las clases correctas según los bloques que hayas añadido.
El resultado: un footer visualmente impactante y perfectamente integrado con tu identidad visual. 🎨
🧭 Consejo avanzado: combina Hooks con condiciones de Astra
¿Sabías que puedes mostrar un footer distinto en cada tipo de página?
Por ejemplo:
🔸 Uno para el blog.
🔸 Otro para la tienda.
🔸 Otro para páginas de aterrizaje.
Solo tienes que crear múltiples Custom Layouts y usar distintas condiciones en Display On.
La flexibilidad es infinita. 🌐
🚀 Ventajas de usar Hooks en el footer
Aquí te dejo un resumen de por qué deberías usar esta técnica:
✅ Cero riesgos de romper el tema al editar código PHP.
✅ Más control sobre la estructura y el diseño.
✅ Velocidad de edición, sin tocar archivos ni depender de plugins externos.
✅ Mejora del SEO, al personalizar contenido útil en el footer (enlaces, menús, formularios).
✅ Compatibilidad total con bloques, constructores y plugins modernos.
🧠 Reflexión final: El footer también cuenta
Muchos subestiman el footer.
Y eso es un error.
Un footer bien diseñado:
✨ Refuerza tu identidad.
✨ Mejora la navegación.
✨ Aumenta la conversión.
✨ Y sí, también ayuda al posicionamiento en buscadores.
Con el Site Builder y los Hooks de Astra, no hay excusas para dejarlo a medias.
Hazlo tuyo.
Hazlo útil.
Hazlo memorable.
Y si llegaste hasta aquí, ya tienes todo lo necesario para lograrlo. 🏁
