Cómo crear un bloque adhesivo (fijo) en Gutenberg sin código

¿Estás buscando formas de crear un bloque adhesivo en Gutenberg? 🤔

Ya sea que desee crear un descargo de responsabilidad para afiliados, ofrecer descuentos o llamar la atención de los visitantes sobre características importantes de su producto, un bloque adhesivo puede ayudarlo a lograr estos objetivos.

Los bloques adhesivos, también conocidos como bloques fijos, permanecen visibles en la pantalla incluso cuando el usuario se desplaza hacia abajo en la página, lo que garantiza que el contenido que desea resaltar esté siempre a la vista.

👉 Aquí hay un ejemplo de lo que estamos hablando: puede ver cómo los íconos sociales están "atascados" en su posición incluso cuando el usuario se desplaza:

Agregar un bloque adhesivo en Gutenberg proporciona una experiencia de usuario fluida y atractiva, lo que le permite transmitir su mensaje de manera efectiva y captar el interés de su audiencia.

Gutenberg no ofrece ningún bloque adhesivo listo para usar. Sin embargo, existen herramientas de terceros que puede utilizar para agregar bloques adhesivos a sus publicaciones y páginas.

En este tutorial, le mostraremos cómo utilizar un complemento popular de Gutenberg llamado Otter Blocks para agregar un bloque adhesivo a su sitio web de WordPress.

Profundicemos en ello. 🤿

Cómo agregar un bloque adhesivo en Gutenberg Editor

Para agregar un bloque adhesivo en el Editor Gutenberg, debe seguir los siguientes pasos:

• Paso 1: instale y active el complemento Otter Blocks
• Paso 2: habilita la herramienta Transformar en Sticky para tu bloque
• Paso 3: cambia la posición del bloque adhesivo
• Paso 4: configurar el desplazamiento
• Paso 5: habilite el bloque adhesivo en el móvil
• Paso opcional: pruebe el modo flotante
• Paso opcional: especificar el comportamiento del bloque

Paso 1: Instale y active el complemento Otter Blocks 🔌

Otter Blocks es un complemento de WordPress que amplía las funcionalidades del Editor Gutenberg.

Ofrece una colección de bloques de creación de páginas, funciones de edición y plantillas para ayudar a mejorar el diseño y el funcionamiento de su sitio web.

Algunos de los bloques más populares que ofrece Otter son tablas de precios, testimonios, íconos sociales, mapas, barras de progreso, animaciones, cuenta regresiva y reseñas de productos, entre otras cosas. Aquí hay una lista completa de bloques Otter.

Otter Blocks tiene una versión gratuita y otra premium (llamada Otter Pro).

Puedes usar la versión gratuita para crear un bloque adhesivo básico en Gutenberg, para que puedas seguir este tutorial de forma gratuita.

Sin embargo, para llevar a cabo algunos de los pasos que cubrimos, como agregar distancia entre el bloque y la pantalla, eliminar el bloque adhesivo en la interfaz, mostrar bloques adhesivos en el móvil, etc., necesita la versión premium del complemento.

Otter Pro está disponible por una tarifa anual de $49 para un solo sitio web. Puedes adquirirlo desde aquí. Y si quieres probar el complemento antes de usarlo, prueba esta demostración.

➡️ Para continuar, instala la versión gratuita o premium de Otter. En el tutorial a continuación, intentaremos señalar cuándo una determinada función requiere la opción premium.

Paso 2: habilita la herramienta Transformar en Sticky para tu bloque 🚧

Abra la página o publicación donde desea agregar el bloque adhesivo en el Editor Gutenberg.

Selecciona el bloque que quieres convertir en adhesivo y ve al panel ubicado en el lado derecho del editor.

En el panel, navegue hasta Bloquear y vaya a la opción Herramientas de bloqueo . Expanda las Herramientas de bloque seleccionando el signo más .

Luego elija Transformar en Sticky en el menú desplegable.

Aparecerá una nueva opción llamada Sticky justo debajo de Herramientas de bloqueo. Expande eso y ve a Sticky To .

En Sticky To, puedes establecer el elemento al que deseas que se adhiera el bloque. Hay cuatro opciones:

1. Bloque de nivel superior
2. Sección
3. Bloque de padres
4. Pantalla

Para comprender estas opciones y cuál se adapta a su publicación fija, abra la Descripción general del documento en el Editor Gutenberg y observe los bloques que rodean su bloque de publicación fija.

El bloque superior es el bloque de nivel superior. Al seleccionar el bloque de nivel superior , fijará su bloque adhesivo con el bloque superior . En nuestro caso, es el bloque Grupo en la imagen de abajo.

A continuación, seleccionar Sección asegurará que el bloque adhesivo esté fijado al bloque de Sección, y seleccionar Bloque principal hará que el bloque adhesivo se fije al bloque justo encima de su bloque adhesivo .

En nuestro caso, el bloque principal es el bloque Columna de sección. Vea la imagen a continuación.

Finalmente, seleccionar la opción Pantalla le indicará al editor que ignore todos los bloques y simplemente pegue la publicación en la parte superior de la pantalla del usuario .

La posición del bloque adhesivo está configurada de forma predeterminada en la parte superior. Para aprender cómo cambiar su posición, continúe con el siguiente paso.

Paso 3: cambia la posición del bloque adhesivo 🚩

Para cambiar la posición del bloque adhesivo, regrese al panel derecho y busque Posición justo debajo de la opción Pegar a.

Puede colocar el bloque adhesivo en la parte superior o inferior de la pantalla. La posición inferior está disponible sólo para usuarios de Otter Pro .

Así es como se ve el bloque en uno de nuestros sitios de demostración:

Paso 4: Configurar el desplazamiento ⚙️

Después de configurar la posición del bloque adhesivo, intente obtener una vista previa. Si el bloque aparece demasiado lejos o cerca de la pantalla, utilice la opción Desplazamiento para aumentar o disminuir la distancia entre el bloque adhesivo y la pantalla.

Paso 5: habilite el bloqueo adhesivo en el móvil 📱

De forma predeterminada, el bloque adhesivo aparece sólo en los escritorios. Si desea habilitarlo en el móvil, simplemente active la opción Habilitar en el móvil .

Por cierto, sólo los usuarios de Otter Pro pueden acceder a la opción móvil .

Paso opcional: prueba el modo flotante 🏄

El bloque adhesivo se puede configurar para que flote en la pantalla cuando los usuarios se desplazan por la página. Es una excelente manera de captar la atención del usuario y señalarle el bloque adhesivo.

Solo los usuarios de Otter Pro pueden usar el modo flotante y se puede aplicar solo al bloque de nivel superior que en nuestro caso es el bloque de grupo.

Tan pronto como cambie el modo flotante, se le pedirá que defina el ancho , el lado y el desplazamiento lateral del bloque.

El ancho, por supuesto, se refiere al ancho del bloque y el lado te ayuda a definir la ubicación del bloque (izquierda o derecha) en la pantalla. El desplazamiento se refiere a la distancia entre el bloque adhesivo y el lado elegido .

Le recomendamos obtener una vista previa de la página después de configurar el modo flotante y realizar los ajustes necesarios.

Paso opcional: especificar el comportamiento del bloque 👨🏽‍💼

Con el complemento Otter Block, puede crear varios bloques adhesivos en la misma página. A veces estos bloques pueden chocar entre sí. Puedes dictar cómo responderá un bloque adhesivo durante las colisiones usando la opción Comportamiento .

Puede configurar el comportamiento para que se contraiga , se desvanezca o se acumule .

Al elegir colapsar, los bloques adhesivos con el mismo movimiento colapsarán uno sobre otro al chocar, así:

Y elegir desvanecer hará que el bloque se desvanezca o desaparezca uno dentro del otro bloque .

Finalmente, al elegir apilar , el bloque se apilará encima de los otros bloques adhesivos con los que choca, como se muestra en el gif a continuación.

Tanto el fundido como el apilado están disponibles sólo para usuarios de Otter Pro .

Eso es todo. Ahora ha agregado un bloque adhesivo en Gutenberg. 🤩

Crea tu primer bloque adhesivo en Gutenberg 🧱

Agregar un bloque fijo o adhesivo en Gutenberg es una excelente manera de llamar la atención de los visitantes sobre las partes importantes de su sitio web de WordPress.

Dado que Gutenberg no ofrece un bloque adhesivo predeterminado, debe utilizar un complemento de terceros para agregar esta funcionalidad a su sitio.

Si bien existen varios complementos de bloques adhesivos, Otter Blocks es el complemento de bloques más fácil y fácil de usar que existe.

Tiene una versión gratuita y otra premium. La versión gratuita se puede usar para crear un bloque adhesivo, pero algunas de las configuraciones avanzadas, como arreglar el bloque en la parte inferior de la pantalla o habilitar el bloqueo en el dispositivo móvil, se pueden lograr usando la versión premium del complemento.

👉 Para poner en funcionamiento un bloque adhesivo en su página utilizando el complemento Otter Blocks, debe seguir los pasos a continuación:

Si tiene alguna pregunta sobre cómo crear un bloque adhesivo en Gutenberg, háganoslo saber en la sección de comentarios a continuación .