Cómo Crear un Bloque Fijo (Sticky) en Gutenberg

Los elementos fijos permanecen visibles mientras el usuario se desplaza, lo que resulta útil para botones de afiliado, cajas de llamada a la acción o cualquier elemento que quieras mantener a la vista.

WordPress 6.2+ añadió posicionamiento fijo nativo para los bloques de Grupo cuando se usa un tema de bloques y el Editor del Sitio. Eso funciona para cabeceras y elementos de diseño de nivel superior. Pero si quieres fijar bloques individuales dentro del contenido de una entrada (un botón, una imagen, un widget de barra lateral), todavía necesitas un plugin. El plugin gratuito Sticky Block lo resuelve de forma limpia y con un impacto mínimo en el rendimiento.

Pasos

1. Instala Sticky Block

Ve a Plugins → Añadir nuevo, busca “Sticky Block”, instálalo y actívalo.

2. Añade el contenedor Sticky Block

En el editor Gutenberg, añade un Sticky Block. Coloca cualquier otro bloque en su interior — un botón, una imagen, un grupo — y se desplazará con el usuario página abajo.

3. Configura las opciones de fijación

Los ajustes te permiten:

• Definir el espacio entre el elemento fijo y el borde de la ventana
• Elegir en qué tamaños de pantalla activar la fijación (móvil, escritorio o ambos)
• Definir un elemento de empuje (otro elemento que aparta al fijo de su camino)
• Aplicar condiciones de visualización (mostrar solo en móvil, o solo en ciertos sistemas operativos)

Eso es todo. Cualquier bloque que anides dentro del contenedor Sticky Block se vuelve fijo. Sin necesidad de CSS.

Opción nativa de fijación en WordPress 6.2+ (solo temas de bloques)

Si usas un tema de bloques (como Twenty Twenty-Four o cualquier tema FSE), WordPress ya incluye posicionamiento fijo integrado. Así funciona:

1. Abre el Editor del Sitio (Apariencia → Editor)
2. Selecciona o añade un bloque de Grupo donde quieras el comportamiento fijo (normalmente una cabecera)
3. En la barra lateral de ajustes del bloque, ve a Posición y selecciona Fijo
4. El bloque de Grupo permanecerá ahora fijo en la parte superior de la ventana cuando el usuario se desplace

Este enfoque nativo funciona para elementos de todo el sitio, como cabeceras y barras de navegación. No funciona dentro del contenido de entradas individuales y requiere un tema de bloques. Si necesitas elementos fijos dentro de entradas o páginas, o si usas un tema clásico, el plugin Sticky Block sigue siendo la mejor opción.

Otras alternativas de plugins

Además del plugin Sticky Block, existen algunas opciones más:

• Otter Blocks tiene una función “Transform to Sticky” que funciona en cualquier bloque. La versión gratuita cubre el posicionamiento fijo básico; la versión pro añade modo flotante y ajustes de comportamiento de colisión.
• CSS personalizado: si te sientes cómodo añadiendo CSS, puedes usar position: sticky; top: 1rem; en cualquier bloque mediante el campo de Clase CSS adicional más el CSS personalizado de tu tema. No necesitas plugin, pero pierdes la configuración visual.

Para la mayoría de la gente, el plugin Sticky Block es el camino más sencillo. Tiene más de 6.000 instalaciones activas y está probado hasta WordPress 6.8.