Comment sélectionner et utiliser des blocs imbriqués dans WordPress

Les blocs imbriqués sont l'une des fonctionnalités les plus puissantes de l'éditeur de blocs WordPress — et les maîtriser peut faire passer vos conceptions au niveau supérieur.

Ils vous permettent de regrouper et d'organiser plusieurs éléments comme des paragraphes, des images et des boutons en une seule mise en page. Une fois que vous comprenez comment les utiliser, vous pouvez créer des pages plus flexibles et d'aspect professionnel sans avoir recours à des plugins supplémentaires ou à du code personnalisé.

Chez WPBeginner, nous utilisons les blocs imbriqués depuis leur lancement, et ils ont complètement changé notre approche de la conception de pages. Ils facilitent la gestion des mises en page complexes et aident à transformer le contenu de base en sections soignées et conviviales.

Dans ce guide, nous vous expliquerons étape par étape comment sélectionner et utiliser les blocs imbriqués dans WordPress — afin que vous puissiez commencer à créer des mises en page plus claires et plus efficaces en toute confiance.

Que sont les blocs imbriqués WordPress ?

La fonctionnalité de bloc imbriqué de WordPress Gutenberg vous permet d'insérer (ou d'« imbriquer ») un ou plusieurs blocs à l'intérieur d'un autre bloc.

Les blocs imbriqués vous aident à créer des mises en page plus complexes sur votre site Web WordPress en ajoutant plusieurs blocs les uns dans les autres. Cela permet plus de flexibilité lors de la conception et du formatage du contenu des pages et des articles.

Par exemple, vous pouvez imbriquer plusieurs blocs d'images dans un bloc de groupe pour afficher un ensemble de photos d'un événement particulier ou une série d'œuvres d'art créées à l'aide d'une technique particulière.

De plus, la fonctionnalité de bloc imbriqué vous permet de modifier individuellement chaque bloc. Cela vous permet de personnaliser chaque bloc selon vos besoins sans affecter les autres blocs.

Cela, à son tour, entraîne une meilleure organisation du contenu, rend le contenu plus attrayant et rationalise le processus créatif.

Cela dit, voyons comment vous pouvez facilement sélectionner et utiliser les blocs imbriqués de WordPress Gutenberg.

Comment utiliser les blocs imbriqués de WordPress

Vous pouvez facilement imbriquer plusieurs blocs ensemble en utilisant le bloc Groupe ou Colonnes dans l'éditeur de blocs Gutenberg.

Tout d'abord, vous devez ouvrir un article existant ou nouveau dans l'éditeur de blocs depuis la barre latérale d'administration de WordPress.

À partir de là, cliquez simplement sur le bouton « + » pour ajouter un bloc dans le coin supérieur gauche de l'écran et trouvez le bloc Groupe. Après avoir cliqué dessus et l'avoir ajouté à la page, vous devez sélectionner une mise en page pour les blocs que vous allez imbriquer ensemble.

Pour ce tutoriel, nous sélectionnerons la mise en page « Groupe ».

Ensuite, cliquez simplement sur le bouton « + » à l'écran pour commencer à ajouter du contenu dans le bloc parent.

Pour les besoins de ce tutoriel, nous allons ajouter un bloc Image.

Après avoir ajouté le bloc, cliquez simplement sur le bouton « Groupe » dans la barre d'outils du bloc en haut pour sélectionner le bloc parent.

Ensuite, vous devez cliquer sur le bouton « + » pour rouvrir le menu des blocs, à partir duquel vous pouvez choisir d'autres blocs à ajouter.

Comment configurer les paramètres des blocs imbriqués de WordPress

Une fois que vous avez imbriqué plusieurs blocs, vous pouvez configurer leurs paramètres individuels en cliquant sur chaque bloc. À partir de là, les paramètres du bloc apparaîtront dans la colonne de droite de l'écran.

À partir de là, vous pouvez ajuster la couleur d'arrière-plan, la couleur du texte et la taille des blocs individuels sans affecter les autres blocs qui y sont imbriqués.

Pour configurer les paramètres de tous les blocs imbriqués ensemble, vous devrez cliquer sur le bouton « Grouper » dans la barre d'outils du bloc en haut. Cela ouvrira les paramètres du bloc parent dans la colonne de droite.

Vous pouvez maintenant configurer la justification, l'orientation, la couleur d'arrière-plan, la couleur du texte et la typographie de tous les blocs imbriqués.

Gardez à l'esprit que ces paramètres affecteront tous les blocs imbriqués dans le bloc parent.

Vous pouvez également convertir un bloc individuel existant en blocs imbriqués en cliquant sur le bouton « Options » dans la barre d'outils supérieure de n'importe quel bloc.

Cela ouvrira une invite de menu, où vous devrez sélectionner l'option « Créer un modèle ».

Une fois que vous aurez fait cela, une invite s'ouvrira vous demandant de donner un nom et de choisir une catégorie pour votre nouveau bloc réutilisable.

Ensuite, cliquez sur le bouton « Créer » pour enregistrer vos paramètres.

Une fois que vous êtes satisfait, n'oubliez pas de cliquer sur le bouton « Publier » ou « Mettre à jour » pour enregistrer vos modifications.

Dans notre exemple, nous avons imbriqué un bloc Titre, Image et Paragraphe dans un bloc Groupe.

Voici à quoi ressemblaient les blocs imbriqués sur notre site de démonstration.

Bonus : Utilisez le plugin Wayfinder pour sélectionner facilement les blocs imbriqués

Parfois, il peut être difficile de sélectionner un bloc individuel et de le configurer lorsqu'il y a plusieurs blocs imbriqués ensemble.

Heureusement, le plugin Wayfinder facilite grandement la sélection des blocs imbriqués à partir d'un bloc parent et vous indique même le type et la classe des blocs.

Tout d'abord, vous devrez installer et activer le plugin Wayfinder. Pour plus d'instructions, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, rendez-vous sur la page Paramètres » Wayfinder depuis la barre latérale d'administration de WordPress.

Une fois que vous y êtes, tous les paramètres seront déjà activés. Il vous suffit de décocher la case à côté des paramètres que vous ne souhaitez pas utiliser.

Par exemple, si vous souhaitez que Wayfinder affiche les types de blocs pour tous les blocs de l'éditeur, laissez la case cochée à côté de l'option « Afficher le type de bloc ».

Cependant, si vous ne souhaitez pas que le plugin affiche les classes de blocs, décochez simplement la case à côté de cette option.

Après avoir configuré les paramètres, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications ».

Ensuite, vous devez ouvrir un article existant ou nouveau dans l'éditeur de blocs WordPress depuis le tableau de bord.

Une fois que vous y êtes, survoler n'importe quel bloc interne avec votre souris affichera un contour avec son nom. Vous pourrez également voir le contour et le nom de tous les blocs imbriqués dans le bloc parent.

Ceci vous aidera à identifier tous les différents blocs imbriqués dans un bloc Groupe ou Colonne.

À partir de là, vous pouvez facilement sélectionner un bloc individuel du bloc parent pour configurer ses paramètres.

Vous pouvez également sélectionner tous les blocs imbriqués à la fois en cliquant sur l'en-tête « Colonnes » ou « Groupe ». Cela ouvrira les paramètres du bloc parent dans la colonne de droite.

Après avoir configuré les paramètres du bloc, cliquez simplement sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos modifications.

Nous espérons que cet article vous a aidé à apprendre comment sélectionner et utiliser les blocs imbriqués de WordPress. Vous voudrez peut-être aussi consulter notre tutoriel étape par étape sur comment changer la hauteur et la largeur des blocs dans WordPress et notre guide pour débutants sur comment utiliser les modèles de blocs WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.