• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mantener el footer siempre abajo en un tema de bloques de WordPress

Descubre en este tutorial cómo conseguir que el pie de página o footer siempre se muestre pegado a la parte inferior de la pantalla en un tema de WordPress.

Por defecto, la mayoría de temas de bloques de WordPress muestran el footer justo donde termina el contenido.

Eso significa que si en una página hay poco contenido, el footer queda a mitad de la página dejando bajo él mucho espacio en blanco.

Así:

tema bloques con pie de pagina pegado al contenido

Si este efecto no te gusta y prefieres que el pie de página se mantenga siempre pegado abajo, puedes conseguirlo con un poco de CSS.

Pasos para que el footer aparezca en la parte inferior de la página en tema de bloques

1. Añade una clase CSS personalizada al grupo de contenido

Ve al «Editor del sitio» y elige la(s) plantilla(s) donde quieras aplicar estos cambios. Dependiendo del tema tendrás distintas plantillas con estructuras diversas.

Para este ejemplo vamos a usar la plantilla «Página» del tema Twenty Twenty-Three. En la vista de lista de bloques podemos observar que tiene 3 niveles superiores:

  • Header: la cabecera
  • Grupo: el contenido
  • Pie de página
elegir bloque grupo contenido tema bloques WordPress

Elige el bloque de grupo y ve al apartado de «Avanzado» y añade content-group en «Clase(s) CSS adicional(es)» del bloque.

añadir clases CSS editor bloques WordPress

2. Añade el CSS personalizado al tema

Para añadir CSS adicional en un tema de bloques debes de ir al «Editor del sitio», hacer clic en el icono de «Estilos», después en los 3 puntos para que se despliegue la opción de «CSS adicional». Aquí tienes unas capturas de pantalla que te ayudarán a acceder:

Una vez estés en esta sección pega el siguiente CSS:

Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.

Con el bloque anterior, aprovechas las características del CSS flexbox para que footer siempre se mantenga en la parte de abajo de la página.

El resultado sería el siguiente:

tema bloques con pie de pagina pegado abajo

Sencillo ¿verdad?

Este snippet debería de funcionar con cualquier tema de bloques pero si ves que en tu caso el texto queda muy pegado (o separado) del borde puedes modificar el valor de min-height.

Conclusión

Si no te gusta que el footer quede «desenganchado» del pie de página, ahora ya sabes cómo forzar que se quede pegado al final mediante CSS.

¿Quieres hacerme alguna pregunta o darme una sugerencia para próximos tutoriales? Pues adelante, cuéntamela en los comentarios (opción exclusiva para suscriptores).

CSS FSE Pie de página WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?