Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Voulez-vous apprendre à sélectionner et à utiliser des blocs imbriqués dans WordPress ?

La fonctionnalité des blocs imbriqués de Gutenberg vous permet d’ajouter plusieurs blocs à l’intérieur d’un bloc parent. Ensuite, vous pouvez personnaliser différents éléments de bloc en même temps, organiser efficacement le contenu des publications et accéder à une plus grande flexibilité de conception.

Dans cet article, nous allons vous afficher comment sélectionner et utiliser facilement les blocs imbriqués de WordPress.

Select and use nested blocks in WordPress

Que sont les blocs imbriqués de WordPress ?

La fonctionnalité de blocs imbriqués 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 WordPress en ajoutant plusieurs blocs les uns à l’intérieur des autres. Cela vous permet de bénéficier d’une plus grande flexibilité lors de la conception et de la mise en forme du contenu des pages et des publications.

Par exemple, vous pouvez imbriquer plusieurs blocs Image dans un bloc Groupe pour définir un ensemble de photos prises lors d’un évènement particulier ou une série d’œuvres d’art créées à l’aide d’une technique spécifique.

Preview of WordPress nested blocks

En outre, la fonctionnalité de blocs imbriqués vous permet de modifier chaque bloc séparément. Cela signifie que vous pouvez personnaliser chaque bloc en fonction de vos besoins sans affecter les autres blocs.

Cela permet de mieux organiser le contenu, de le rendre plus attrayant et de rationaliser le processus de création.

Cela étant 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 à l’aide du bloc Groupe ou Colonnes dans l’éditeur de blocs de Gutenberg.

Tout d’abord, vous devez ouvrir une publication existante ou nouvelle dans l’éditeur de blocs à partir de la colonne latérale de l’administration de WordPress.

À partir de là, il vous suffit de cliquer sur le bouton « + » d’ajout de module dans le coin supérieur gauche de l’écran et de trouver le bloc Groupe. Après l’avoir cliqué et ajouté à la page, vous devez sélectionner une Mises en page pour les blocs que vous allez imbriquer les uns dans les autres.

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

Select Group block from the block menu

Ensuite, il suffit de cliquer sur le bouton « + » à l’écran pour commencer à ajouter du contenu dans le bloc parent.

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

Add an image block within the Group block

Après avoir ajouté le bloc, il suffit de cliquer 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 ouvrir à nouveau le menu des blocs, à partir duquel vous pouvez choisir d’autres blocs à ajouter.

Open the block menu to add another block within the Group block

Comment définir les Réglages des blocs imbriqués de WordPress

Une fois que vous avez imbriqué plusieurs blocs, vous pouvez configurer leurs réglages individuels en cliquant sur chaque bloc. Les réglages du bloc s’ouvrent alors 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.

Configure the individual block settings

Pour définir les réglages de tous les blocs imbriqués ensemble, vous devez cliquer sur le bouton « Groupe » dans la barre d’outils du bloc en haut. Les réglages du bloc parent s’afficheront alors dans la colonne de droite.

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

N’oubliez pas que ces réglages affecteront tous les blocs imbriqués dans le bloc parent.

Configure the settings of the Group block

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.

Un menu s’ouvre alors, dans lequel vous devez sélectionner l’option « Créer un bloc réutilisable ».

Choose the Create Reusable Block option

Une fois que vous avez fait cela, un nouveau bloc réutilisable sera créé où vous pourrez ajouter plusieurs blocs.

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

Create nested blocks

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

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

Preview of WordPress nested blocks

Bonus : Utiliser l’extension Wayfinder pour sélectionner facilement des blocs imbriqués

Il est parfois difficile de sélectionner un bloc individuel et de le configurer lorsque plusieurs blocs sont imbriqués les uns dans les autres.

Sélectionné, l’extension Wayfinder permet de sélectionner très facilement 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 l’extension Wayfinder. Pour plus d’instructions, vous pouvez consulter notre guide du débutant sur l’installation d’un plugin WordPress.

Une fois activé, rendez-vous sur la page Réglages  » Wayfinder dans la colonne latérale de l’administrateur WordPress.

Une fois que vous y êtes, tous les réglages sont déjà activés. Il vous suffit de décocher la case à côté des réglages 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, cochez la case située à côté de l’option « Afficher les types de blocs ».

Configure the Wayfinder plugin settings

Toutefois, si vous ne souhaitez pas que l’extension affiche les classes de blocs, il vous suffit de décocher la case située à côté de cette option.

Après avoir défini les Réglages, n’oubliez pas de cliquer sur le bouton « Enregistrer les modifications ».

Ensuite, vous devez ouvrir une publication existante ou nouvelle à partir du tableau de bord WordPress.

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

GIF for the Wayfinder plugin

Cela vous aidera à identifier tous les blocs différents qui sont imbriqués dans un bloc de groupe ou de colonne.

À partir de là, vous pouvez facilement sélectionner un bloc individuel à partir du bloc parent pour en définir les Réglages.

Use Wayfinder plugin to easily select a block

Vous pouvez également sélectionner tous les blocs imbriqués en même temps en cliquant simplement sur le Titre « Colonnes » ou « Groupe ». Les réglages du bloc parent s’ouvrent alors dans la colonne de droite.

Une fois les réglages du bloc effectués, il vous suffit de cliquer sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos modifications.

Click the Group block outline to open its settings

Nous espérons que cet article vous a aidé à apprendre comment sélectionner et utiliser les blocs imbriqués de WordPress. Vous pouvez également consulter notre tutoriel sur la modification de la hauteur et de la largeur des blocs dans WordPress et nos meilleurs choix pour les extensions WordPress incontournables pour aider à la croissance de votre site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

4 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph says

    I’m using nest blocks for image on left and text on the right and I want it to stay that way not only on desktop but also on mobile but it just doesn’t It places text under the image. Is this normal in case of mobile or am I doing something wrong?

    • WPBeginner Support says

      It would depend on the theme but it is very common to happen on mobile to ensure the text remains readable on mobile.

      Administrateur

  3. Jiří Vaněk says

    Thanks to these articles, I’m slowly getting acquainted with Gutenberg. I’m used to very simple solutions from Elementor, and here everything seems a bit complicated or rather unfamiliar to me. However, sometimes I come across people who want help with a website exclusively using Gutenberg and nothing else. So, I appreciate these guides where I can get my hands on, try out, and learn things that might be completely ordinary for someone using Gutenberg.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.