Comment créer un bloc collant (fixe) dans Gutenberg sans code

Cherchez-vous des moyens de créer un bloc collant dans Gutenberg ? 🤔

Que vous souhaitiez créer une clause de non-responsabilité d'affiliation, offrir des réductions ou attirer l'attention des visiteurs sur des fonctionnalités importantes de votre produit, un bloc collant peut vous aider à atteindre ces objectifs.

Les blocs collants, également appelés blocs fixes, restent visibles à l'écran même lorsque l'utilisateur fait défiler la page, garantissant que le contenu que vous souhaitez mettre en évidence est toujours à sa vue.

👉 Voici un exemple de ce dont nous parlons : vous pouvez voir comment les icônes sociales sont « bloquées » dans leur position même lorsque l'utilisateur fait défiler :

L'ajout d'un bloc collant dans Gutenberg offre une expérience utilisateur transparente et engageante, vous permettant de transmettre efficacement votre message et de capter l'intérêt de votre public.

Gutenberg ne propose pas de bloc collant prêt à l’emploi. Mais il existe des outils tiers que vous pouvez utiliser pour ajouter des blocs collants à vos publications et pages.

Dans ce didacticiel, nous allons vous montrer comment utiliser un plugin Gutenberg populaire appelé Otter Blocks pour ajouter un bloc collant à votre site Web WordPress.

Plongeons-y. 🤿

Comment ajouter un bloc collant dans l'éditeur Gutenberg

Pour ajouter un bloc collant dans Gutenberg Editor, vous devez suivre les étapes suivantes :

• Étape 1 : Installez et activez le plugin Otter Blocks
• Étape 2 : Activez l'outil Transformer en Sticky pour votre bloc
• Étape 3 : Changer la position du bloc collant
• Étape 4 : Configurer le décalage
• Étape 5 : Activer le bloc collant sur mobile
• Étape facultative : essayez le mode flottant
• Étape facultative : spécifier le comportement du bloc

Étape 1 : Installez et activez le plugin Otter Blocks 🔌

Otter Blocks est un plugin WordPress qui étend les fonctionnalités de l'éditeur Gutenberg.

Il propose une collection de blocs de construction de pages, de fonctionnalités d'éditeur et de modèles pour vous aider à améliorer la conception et le fonctionnement de votre site Web.

Certains des blocs les plus populaires proposés par Otter sont, entre autres, les tableaux de prix, les témoignages, les icônes sociales, les cartes, les barres de progression, les animations, le compte à rebours et les critiques de produits. Voici une liste complète des blocs Otter.

Otter Blocks a une version gratuite et une version premium (appelée Otter Pro).

Vous pouvez utiliser la version gratuite pour créer un bloc collant de base dans Gutenberg, afin de pouvoir suivre ce tutoriel gratuitement.

Cependant, pour effectuer certaines des étapes que nous avons couvertes, comme l'ajout de distance entre le bloc et l'écran, la suppression du bloc collant sur le frontend, l'affichage des blocs collants sur mobile, etc., vous avez besoin de la version premium du plugin.

Otter Pro est disponible moyennant des frais annuels de 49 $ pour un seul site Web. Vous pouvez l'acheter ici. Et si vous souhaitez essayer le plugin avant de l’utiliser, essayez cette démo.

➡️ Pour continuer, installez la version gratuite ou premium d'Otter. Dans le didacticiel ci-dessous, nous essaierons de noter quand une certaine fonctionnalité nécessite l'option premium.

Étape 2 : Activez l'outil Transformer en Sticky pour votre bloc 🚧

Ouvrez la page ou la publication dans laquelle vous souhaitez ajouter le bloc collant dans l'éditeur Gutenberg.

Sélectionnez le bloc que vous souhaitez rendre collant et accédez au panneau situé sur le côté droit de l'éditeur.

Sur le panneau, accédez à Bloquer et accédez à l'option Outils de blocage . Développez les outils de bloc en sélectionnant le signe plus .

Choisissez ensuite Transformer en Sticky dans le menu déroulant.

Une nouvelle option appelée Sticky apparaîtra juste en dessous des outils de blocage. Développez-le et accédez à Sticky To .

Dans Sticky To, vous pouvez définir l’élément auquel vous souhaitez que le bloc adhère. Il existe quatre options :

1. Bloc de niveau supérieur
2. Section
3. Blocage parental
4. Écran

Pour comprendre ces options et savoir laquelle convient à votre publication collante, ouvrez la présentation du document dans l'éditeur Gutenberg et examinez les blocs entourant votre bloc de publication collante.

Le bloc le plus haut est le bloc de niveau supérieur. En sélectionnant le bloc de niveau supérieur , vous fixerez votre bloc collant avec le bloc le plus haut . Dans notre cas, il s'agit du bloc Groupe dans l'image ci-dessous.

Ensuite, en sélectionnant Section garantira que le bloc collant est fixé au bloc Section, et en sélectionnant Bloc parent, le bloc collant sera fixé au bloc juste au-dessus de votre bloc collant .

Dans notre cas, le bloc Parent est le bloc Section Column. Voir l'image ci-dessous.

Enfin, la sélection de l'option Écran indiquera à l'éditeur d'ignorer tous les blocs et de simplement coller la publication en haut de l'écran utilisateur .

La position du bloc collant est par défaut définie en haut. Pour savoir comment changer sa position, passez à l'étape suivante.

Étape 3 : Changez la position du bloc collant 🚩

Pour modifier la position du bloc collant, revenez au panneau de droite et recherchez Position juste en dessous de l'option Coller à.

Vous pouvez positionner le bloc collant en haut ou en bas de l'écran. La position inférieure est disponible uniquement pour les utilisateurs d'Otter Pro .

Voici à quoi ressemble le bloc sur l'un de nos sites de démonstration :

Étape 4 : Configurer le décalage ⚙️

Après avoir défini la position du bloc collant, essayez de le prévisualiser. Si le bloc apparaît trop loin ou trop près de l'écran, utilisez l'option Décalage pour augmenter ou diminuer la distance entre le bloc collant et l'écran.

Étape 5 : Activer le bloc collant sur mobile 📱

Par défaut, le bloc collant apparaît uniquement sur les ordinateurs de bureau. Si vous souhaitez l'activer sur mobile, activez simplement l'option Activer sur mobile .

À propos, seuls les utilisateurs d'Otter Pro peuvent accéder à l'option mobile .

Étape facultative : essayez le mode flottant 🏄

Le bloc collant peut être configuré pour flotter le long de l’écran lorsque les utilisateurs font défiler la page. C'est un excellent moyen d'attirer l'attention de l'utilisateur et de le diriger vers le bloc collant.

Seuls les utilisateurs d'Otter Pro peuvent utiliser le mode flottant et il ne peut être appliqué qu'au bloc de niveau supérieur qui dans notre cas est le bloc de groupe.

Dès que vous basculez en mode flottant, il vous sera demandé de définir la largeur , le côté et le décalage latéral du bloc.

La largeur fait bien sûr référence à la largeur du bloc et le côté vous aide à définir l' emplacement du bloc (gauche ou droite) sur l'écran. Le décalage fait référence à la distance entre le bloc collant et le côté choisi .

Nous vous recommandons de prévisualiser la page après avoir configuré le mode flottant et d'effectuer les ajustements nécessaires.

Étape facultative : spécifiez le comportement du blocage 👨🏽‍💼

En utilisant le plugin Otter Block, vous pouvez créer plusieurs blocs collants sur la même page. Parfois, ces blocs peuvent entrer en collision les uns avec les autres. Vous pouvez dicter la façon dont un bloc collant réagira lors de collisions à l'aide de l'option Comportement .

Vous pouvez définir le comportement sur Réduire , Fondu ou Empiler .

Choisir l'effondrement fera en sorte que les blocs collants s'effondreront les uns sur les autres avec le même mouvement en cas de collision, comme ceci :

Et en choisissant fondu, le bloc disparaîtra ou disparaîtra l'un dans l'autre bloc .

Enfin, choisir la pile empilera le bloc au-dessus des autres blocs collants dans lesquels il entre en collision, comme le montre le gif ci-dessous.

Le fondu et la pile sont disponibles uniquement pour les utilisateurs d'Otter Pro .

C'est ça. Vous avez maintenant ajouté un bloc collant dans Gutenberg. 🤩

Créez votre premier bloc collant dans Gutenberg 🧱

L’ajout d’un bloc fixe ou collant dans Gutenberg est un excellent moyen d’attirer l’attention des visiteurs sur les parties importantes de votre site WordPress.

Étant donné que Gutenberg ne propose pas de bloc collant par défaut, vous devez utiliser un plugin tiers pour ajouter cette fonctionnalité à votre site.

Bien qu'il existe une poignée de plugins de blocs collants, Otter Blocks est le plugin de blocs le plus simple et le plus convivial du marché.

Il existe une version gratuite et une version premium. La version gratuite peut être utilisée pour créer un bloc collant, mais certains paramètres avancés, comme la fixation du bloc en bas de l'écran ou l'activation du bloc sur mobile, peuvent être obtenus en utilisant la version premium du plugin.

👉 Pour qu'un bloc collant soit opérationnel sur votre page à l'aide du plugin Otter Blocks, vous devez suivre les étapes ci-dessous :

Si vous avez des questions sur la façon de créer un bloc collant dans Gutenberg, faites-le nous savoir dans la section commentaires ci-dessous .