Décoder WordPress : Travailler Avec Les Modèles De Blocs

Publié : par Jason Cosper
Décoder WordPress : Travailler Avec Les Modèles De Blocs thumbnail

Imagine si créer un site web était comme jouer à Tetris — empiler des pièces préfabriquées dans l’ordre que tu souhaites.

Ce serait assez satisfaisant, n’est-ce pas ?

Et bien, c’est ce que tu obtiens avec les modèles de blocs WordPress. Avec ces designs prédéfinis, tu peux ajouter des sections entières à n’importe quelle page ou publication en un clic. Et contrairement à Tetris, elles ne disparaîtront pas lorsque tu les empiles parfaitement. 

Cela semble excellent sur le papier. Mais comment utilises-tu exactement les motifs de blocs ? 

C’est exactement ce dont traite ce guide.

Reste avec nous pour les prochaines minutes, et tu apprendras ce que sont les motifs de bloc et comment les utiliser sur ton propre site WordPress.

Allons-y !

Qu’est-ce qu’un Motif de Bloc WordPress ?

Un modèle de bloc dans WordPress est une mise en page prête à l’emploi composée de blocs réutilisables. 

Ces dispositions peuvent être insérées presque partout sur ton site WordPress, y compris les pages et les articles.

exemple de modèle de bloc WordPress montrant un h1 en haut à gauche, une description à droite et une photo de montagnes en dessous

Une fois insérés, tu peux éditer et modifier le contenu dans les motifs de blocs. Les composants individuels fonctionnent tout comme les blocs Gutenberg habituels, donc tu peux ajuster les couleurs et les polices, réorganiser les composants, échanger des images et changer le contenu de chaque bloc. 

Gutenberg

Gutenberg est le nom donné au projet d’éditeur de blocs dans WordPress. De nombreux développeurs et passionnés de WordPress utilisent les termes Éditeur Gutenberg et Éditeur de blocs de manière interchangeable.

Lire la suite

Tu peux également réutiliser les motifs de blocs d’innombrables fois sur ton site, même au sein d’une seule page ou publication. 

Cela signifie que tu n’as pas besoin de créer (et recréer) manuellement les mises en page un bloc à la fois lorsque tu utilises l’éditeur de blocs.

Découvrir Les Blocs WordPress

Pour comprendre pleinement comment fonctionnent les motifs de blocs, tu dois connaître un peu les blocs.

Les blocs sont une partie essentielle de WordPress depuis fin 2018 lorsque la version 5.0 a introduit le nouvel éditeur de blocs WordPress, Gutenberg.

Cette composante flexible de WordPress te permet de construire des articles et des pages en utilisant des éléments individuels, connus sous le nom de blocs. Les exemples incluent des images, des paragraphes, des listes, des en-têtes, intégrations, des séparateurs, des tables et des colonnes.

Intégrer

Intégrer signifie insérer du contenu externe directement dans une page web plutôt que d’y faire un lien. L’intégration permet aux visiteurs de visualiser le contenu sans quitter le site web.

Lire la suite

Chaque bloc est livré avec un ensemble d’options de personnalisation, telles que l’alignement, la couleur et la taille de la police. Tu peux déplacer les blocs via un éditeur par glisser-déposer

Pour revenir à la métaphore du Tetris, imagine pouvoir déplacer une pièce dans le jeu après qu’elle soit complètement tombée — tout simplement parce que tu ne l’aimais pas où tu l’avais placée au départ. C’est le type de flexibilité que te donne Gutenberg.

Modèles de Blocs : Quels Sont Les Avantages ?

Lorsque tu crées des modèles de blocs, tu assembles simplement plusieurs blocs pour créer un petit modèle. Cela signifie que tu peux assembler ton site web assez rapidement, car tu ne construis pas chaque page à partir de zéro.

Et ce n’est pas le seul avantage. Voici quelques autres avantages :

  • Tu peux créer des sections entières en utilisant des blocs : Créer tes propres modèles de blocs personnalisés permet à quiconque travaille sur ton site de gérer le contenu sans se soucier de la mise en page et du design.
  • Tu peux utiliser des modèles de blocs pré-faits par des designers professionnels : Tu peux modifier ces modèles pour qu’ils correspondent à ton style, ce qui te donne de nombreuses options pour jouer lorsque tu crées un article ou une page.
  • Tu peux sauvegarder les modèles que tu utilises souvent : Après avoir créé ou sélectionné des modèles de blocs, tu peux les sauvegarder et construire une bibliothèque de modèles adaptée à ta marque.
  • Tu peux construire de nouveaux contenus plus rapidement. C’est bien plus rapide d’insérer un modèle sauvegardé que de concevoir une page à partir de zéro.
  • Ils sont flexibles et personnalisables : Tu peux adapter les modèles de blocs préconstruits à tes besoins spécifiques de design et de fonctionnalité. Trouve un modèle de bloc dans le Répertoire de Modèles WordPress qui te plaît et modifie-le selon ta créativité.
  • Ils sont indépendants du thème : Les modèles de blocs construits sur mesure ne sont liés à aucun thème particulier. Si tu changes le thème de ton site WordPress plus tard, tes modèles resteront les mêmes.
  • Ils fournissent des mises en page de pages et d’articles réactives : Concevoir ton site WordPress en utilisant des blocs et des modèles de blocs signifie que le contenu de ton site sera optimisé correctement pour différents appareils, comme les smartphones ou les tablettes.

Recevez du contenu directement dans votre boîte de réception

Abonnez-vous maintenant pour recevoir toutes les dernières mises à jour directement dans votre boîte de réception.

Comment Les Modèles De Blocs Ont Évolué Au Fil Du Temps

Les modèles de blocs ont été introduits dès août 2020 avec la sortie de WordPress 5.5 “Eckstine.” 

Depuis ce temps, nous avons vu beaucoup d’évolution :

  • WordPress 5.9 a ajouté l’option de copier et coller des motifs de blocs dans l’Éditeur Complet du Site.
  • WordPress 6.0 a rendu l’insertion de blocs plus facile à naviguer et a simplifié pour les développeurs l’ajout de motifs à leurs thèmes.
  • WordPress 6.3 a introduit des motifs synchronisés, qui se présentent de manière identique sur tout votre site. Tu peux modifier un motif synchronisé sur une page, et toutes les autres copies se mettront à jour pour paraître identiques.
  • WordPress 6.5 a proposé une nouvelle sélection agréable de motifs de blocs, divisée en catégories.
  • WordPress 6.6 a introduit l’option de passer outre le système de motifs synchronisés, afin que chaque copie d’un motif puisse avoir un contenu ou un style unique.

Comment Créer Tes Propres Modèles de Blocs

Aujourd’hui, les motifs de blocs sont assez puissants et très faciles à utiliser.

Si tu es prêt à commencer à expérimenter cette fonctionnalité WordPress, voici un tutoriel rapide étape par étape :

Étape 1 : Créer Un Brouillon D’article

Pour créer un modèle de bloc, commence par créer un nouveau brouillon de publication ou de page dans WordPress. 

Un nouveau brouillon ne contiendra aucun contenu existant. C’est une toile vierge pour ta créativité basée sur des blocs !

Commence à ajouter les blocs que tu souhaites inclure dans ton modèle : en-têtes et paragraphes, colonnes, images et galeries, médias vidéo et audio, séparateurs, et plus encore.

capture d'écran de la vue de l'utilisateur sur wordpress utilisant les motifs de blocs dans un post

Une fois que tu as ajouté tes blocs, assure-toi de les styliser. Utilise les palettes de couleurs intégrées et les sélecteurs de polices.

Étape 2 : Sélectionne et Copie les Blocs

Une fois que tes blocs sont bien en place, tu dois créer le motif. Ne t’inquiète pas, ce n’est pas technique !

Commence par sélectionner manuellement tous les blocs que tu souhaites inclure dans ton modèle de blocs. Clique sur le premier bloc, appuie et maintiens Alt (Shift sur Mac), puis clique sur le dernier bloc que tu veux voir apparaître dans le modèle.

Pour terminer, clique sur les trois points verticaux en haut de ton éditeur, et sélectionne Créer un motif dans le menu déroulant.

même capture d'écran que précédemment montrant où ouvrir les options de motif dans le bloc de titre

Conseil pro : Si tu ne peux pas facilement voir tous les blocs que tu souhaites sélectionner, ouvre l’onglet Vue D’ensemble Du Document pour voir la liste complète des éléments. C’est le bouton avec trois lignes horizontales décalées dans le coin supérieur droit de l’éditeur. 

Étape 3 : Sauvegarde Ton Modèle de Bloc

Ayant construit ton modèle de bloc, tu as juste besoin de le sauvegarder dans la bibliothèque de modèles WordPress.

Tu devrais voir une fenêtre pop-up qui te demande de nommer ton modèle de bloc et de choisir une catégorie. Les catégories de modèles t’aident à regrouper des modèles, comme tous les modèles pour une page particulière.

capture d'écran de la boîte pour ajouter un nouveau motif montrant où saisir le nom et les catégories avec le bouton d'ajout en bas à droite de la boîte

Enfin, tu as un grand choix à faire : synchroniser ou ne pas synchroniser (comme Shakespeare le dirait probablement).

Rappelle-toi, les motifs de blocs synchronisés sont tous liés. Si tu modifies un, tous les autres copies changent. En revanche, les motifs de blocs non synchronisés sont indépendants. 

Une fois que tu as pris ta décision, clique sur Créer… et voilà, c’est fait !

Comment Créer Des Modèles De Blocs Dans L’Éditeur De Site

La méthode ci-dessus est probablement la façon la plus simple de créer des modèles de blocs. Mais tu peux également les construire et les enregistrer via l’Éditeur de site WordPress si tu disposes d’un thème basé sur des blocs.

Pour ce faire, rends-toi dans Apparence > Éditeur dans le panneau d’administration WordPress.

capture d'écran du bouton éditeur sous thèmes sous apparence dans la barre de navigation à gauche

Maintenant, regarde à ta gauche. Tu vois cette barre latérale ? Clique sur Patterns, et tu verras tous les motifs que tu as collectés jusqu’à présent, soigneusement organisés par catégories.

capture d'écran de la navigation des motifs montrant la catégorisation des modèles comme le pied de page, l'en-tête, l'en-tête de paiement et le mini-panier

En haut à droite, tu devrais voir le bouton Ajouter un nouveau motif. Clique dessus.

Cela ouvrira la fenêtre pop-up du nom et de la catégorie. Remplis les détails, et clique sur Créer.

WordPress ouvrira alors un éditeur vierge.

capture d'écran de l'éditeur vide montrant une boîte de titre et une image affichant DreamHost juste en dessous

Choisis simplement et configure les blocs que tu veux dans ton modèle de bloc, et appuie sur Enregistrer dans le coin supérieur droit pour terminer.

Navigation Dans Le Répertoire Des Modèles

Si concevoir tes propres modèles te semble être un travail difficile, nous avons de bonnes nouvelles à partager.

Comme pour les thèmes, WordPress dispose d’un annuaire où les gens partagent des motifs de blocs.

Capture d’écran de la page des Modèles

Au moment de la rédaction, il y a environ 2 000 de ces modèles à choisir, et ils sont tous totalement gratuits.

Pour obtenir ces modèles, rends-toi sur le répertoire de modèles (disponible sur WordPress.org et .com) et trouve quelque chose qui te plaît. Touche un modèle, puis clique sur Copier. Cela transférera tout le code source du modèle de bloc dans ton presse-papiers.

capture d’écran cliquée une étape supplémentaire dans une des options de motif montrant le bouton de copie de motif

Ensuite, retourne à l’article ou à la page sur laquelle tu travailles et colle le code. Et voilà! Tu as un nouveau motif tout brillant.

Astuce pro : Les images fournies dans les modèles de blocs créés par d’autres concepteurs sont généralement référencées à partir de sources externes. Il est toujours possible que ces liens se rompent, il est donc généralement préférable d’utiliser vos propres images (ou celles que vous avez licenciées).

Ajouter Des Motifs De Blocs Depuis Votre Bibliothèque

Si tu as créé et enregistré des modèles, tu te demandes peut-être comment les utiliser.

Pour commencer, ouvre un brouillon de publication ou de page, et appuie sur le + dans le coin supérieur gauche pour ouvrir l’insertion de bloc.

Au début, on te proposera quelques blocs. Clique sur l’onglet Patterns en haut de ce panneau.

capture d'écran d'un article présentant les motifs de blocs et basculant vers des motifs à partir de blocs en haut du menu

Ici, tu peux consulter tous tes modèles de blocs sauvegardés ou les parcourir par catégorie. Une fois que tu as trouvé le bon, clique sur l’image de prévisualisation pour l’ajouter à ton brouillon.

Rappelle-toi que les modèles de blocs sont juste des gabarits, donc tu peux modifier le contenu une fois que tu as inséré un modèle enregistré.

Astuce de pro : Certains plugins (tels que les constructeurs de pages) ajoutent des motifs préfabriqués supplémentaires à ta liste. Spectra et JetBrains sont deux qui ajoutent toute une flotte de motifs lorsqu’ils sont activés.

Comment Gérer Tes Modèles De Blocs

Si tu utilises un thème par blocs, tu peux gérer les motifs que tu as créés via l’éditeur du site. Le menu pertinent se trouve sous Apparence > Éditeur > Motifs.

Dans la section principale à droite, appuie sur les trois points à côté de n’importe quel motif enregistré pour le modifier ou le supprimer.

capture d'écran de l'organisation catégorique des modèles montrant à nouveau les trois points sous un modèle pour cliquer afin de trouver les options d'édition et de duplication

Si tu utilises un thème WordPress classique qui ne prend pas entièrement en charge l’édition complète du site, navigue vers Apparence > Modèles pour voir une liste classique de tes modèles enregistrés. Ici, tu peux les modifier, les exporter ou les supprimer.

Besoin D’aide ?

Comme tu peux le voir, les motifs de blocs ne sont pas très techniques. Ils sont en fait assez faciles à utiliser. 

Cela dit, il reste tout de même un travail de conception à faire. Si tu n’es pas sûr de toi dans ce domaine, nous pouvons t’aider.

Notre équipe de conception experte peut créer le site de tes rêves de A à Z, donc tu n’as pas besoin de lever le petit doigt.

Et avec notre service d’hébergement WordPress géré, configurer et maintenir un site web attrayant n’a jamais été aussi facile. C’est super rapide et totalement fiable.

Inscris-toi aujourd’hui pour l’essayer par toi-même !

website management by DreamHost
Hébergement WordPress

Hébergement WordPress Imbattable

Solutions d’hébergement fiables et ultra-rapides, spécifiquement optimisées pour WordPress.

Voir Plus

Cette page contient des liens d’affiliation. Cela signifie que nous pouvons gagner une commission si tu achètes des services via notre lien sans aucun coût supplémentaire pour toi.