Utilise Gutenberg pour de splendides mises en page sur WordPress

Cet article prend environ 22 minutes à lire en intégralité.

T Tous les outils sont immédiatement disponibles dans WordPress pour créer des articles attractifs.

Découvre toutes les possibilités de mises en page offertes par Gutenberg, son éditeur, dans ce guide pas à pas.

Tu auras toutes les cartes en main pour enchanter tes lecteurs.

Je te propose un survol des usages de Gutenberg et de ses alternatives avant nous attaquer à la mise en pratique.

Gutenberg, c’est quoi ?

Gutenberg est l’éditeur par défaut de WordPress depuis fin 2018. Il s’approche de MS Word ou de Google Docs (en beaucoup plus riche).

Son fonctionnement par blocs est un peu perturbant au premier usage. Chaque élément est géré indépendamment :

• Les titres
• Les textes
• Les images
• Les boutons…

Je te rassure. Tu prends très vite le pli.

Les avantages et les inconvénients de Gutenberg

Voyons le rôle de Gutenberg et de ses alternatives.

FSE, Constructeurs de page, Éditeur classique

L’éditeur classique

Il s’agit du précédent éditeur qui n’avait pas évolué depuis des lustres. Il reste encore quelques nostalgiques mais ils se font de plus en plus rares depuis la rectification des erreurs de jeunesse. Pour moi, il n’apporte aucun avantage. De plus, Gutenberg devient incontournable pour gérer ton site.

L’édition de site, le full site editing

Gutenberg est au centre de la gestion du site, bien au-delà de la mise en page, avec la mise en place du full site editing. Tu gères directement ton en-tête, ton pied de page, ton menu… avec l’éditeur. Je n’aborde pas ce point dans cet article mais les principes évoqués fonctionnent à l’identique.

Les constructeurs de page – Elementor, DIVI, Oxygen…

Gutenberg s’est fortement inspiré de la composition par blocs adoptée par les constructeurs de pages. Ils ne seront pas détrônés tout de suite dans la finesse des réglages mais surtout pour la richesse des bibliothèques de designs.

Elementor, Oxyden et DIVI intègrent de nombreuses options comme les transitions entre blocs qui demandent l’installation d’extensions pour être reproduits dans Gutenberg. Ils étaient incontournables pour personnaliser l’intégralité d’un site. Le full site editing rogne cet avantage décisif.

Gutenberg s’enrichit et intègre de nouvelles options à chaque mise à jour. De plus en plus de propriétaires abandonnent les constructeurs de pages pour alléger les sites et s’assurer de la continuité du service. Cela demande de faire preuve de créativité et de patience pour concevoir des pages d’accueil et de vente sophistiquées.

Gutenberg est parfait pour les articles. Je te déconseille vivement d’utiliser les constructeurs de pages en dehors de tes pages d’accueil et de vente. Tu te retrouves dans une impasse si l’outil devient obsolète ou ne te convient plus. Reprendre quelques pages représente du travail mais c’est une autre paire de manches de devoir revoir des centaines, voire des milliers d’articles un par un.

Commençons par les bases pour débuter avec Gutenberg.

L’interface et le maniement des blocs

Tu fais la connaissance du fameux Gutenberg quand tu ajoutes un nouvel article (ou une nouvelle page).

L’interface de Gutenberg

La page est divisée en plusieurs espaces.

Tu reviens à l’interface de WordPress avec le logo qui se situe à côté du premier menu en haut.

J’utilise principalement le plan de l’article (Détails). Il te donne ton volume de mots, de caractères et met en évidence une hiérarchisation illogique.

Tu te déplaces dans ton article en cliquant sur la section.

La vue en liste est précieuse pour sélectionner un élément précis dans une composition complexe. Tu déplaces les blocs en les glissant.

Tu sélectionnes plusieurs blocs avec la touche majuscule.

Tu sauvegardes ton brouillon ou publies ton article à l’aide du menu en haut à droite. Tu trouveras les options avancées que nous aborderons plus tard dans l’article.

Gutenberg propose de prévisualiser sur mobile et tablette. C’est un gadget sans intérêt. Cela ne te donne aucune idée du rendu sur ton site une fois publié.

Il est beaucoup plus utile de Prévisualiser dans un nouvel onglet pour voir à quoi ressemble ton article en conditions réelles. Tu peux utiliser les options de simulation d’une vue mobile de ton navigateur pour valider l’adaptation de l’affichage.

Tu retrouves les options complémentaires du bloc sélectionné dans l’onglet Bloc

et les options de l’article dans le menu de droite dans l’onglet Article.

C’est ici que tu trouveras l’image d’illustration de l’article qui se place en général sous le titre et qui illustre les extraits de la publication.

L’extrait de l’article servira de description pour les moteurs de recherche si tu n’utilises pas une extension SEO comme RankMath ou Yoast.

Tu indiques également la catégorie de ton article.

L’utilisation des étiquettes est rarement recommandée car elle brouille les thématiques pour le référencement naturel.

Quand ton article est finalisé, tu cliques sur publier

et tu confirmes. Je te recommande de vérifier la date de publication.

La notion de bloc est centrale dans l’utilisation de Gutenberg.

Le maniement des blocs

Les blocs sont les éléments qui composent ta page. Tu ajoutes un nouveau bloc par catégorie d’élément : texte, visuel, vidéo, colonnes, bouton…

Ils s’empilent verticalement.

Le bloc par défaut est le paragraphe qui abrite du texte. Il est disponible dès que tu sautes une ligne avec Entrée.

Pour ajouter un bloc, tu cliques sur le + qui apparaît au survol entre deux blocs. Il peut être un peu capricieux pour s’afficher.

Une autre option sera de sélectionner un bloc et d’utiliser la touche Entrée puis de cliquer sur Ajouter un bloc situé en fin de ligne.

Tu découvres les blocs les plus utilisés. Tu accèdes aux autres avec Tout parcourir.

Tu accèdes directement à l’ensemble des blocs avec le + du menu haut.

Les blocs sont organisés par thématiques.

Tu cliques sur un bloc pour l’intégrer à l’emplacement sélectionné. Tu glisses et déposes successivement plusieurs blocs pour éviter les allers-retours.

Pour déplacer ton bloc dans ta page, tu utilises les flèches.

Pour déplacer plusieurs blocs, tu sélectionnes le premier et le dernier de la série avec la touche MAJ enfoncée.

Le copier-coller facilite également les déplacements de blocs.

Pour supprimer un bloc Gutenberg, tu utilises le menu déroulant à droite de la barre d’outils puis Retirer le bloc ou la touche effacer (celle avec la flèche vers la gauche).

Pour changer le style d’un bloc, tu te positionnes en haut à gauche de ta barre d’outils.

Tu verrouilles ton bloc pour éviter les modifications involontaires.

Tu empêches le déplacement ou la suppression.

Cette option peut-être utile pour proposer un modèle commun pour une équipe de rédacteurs mais ne te serviras pas au quotidien.

Difficile d’imaginer un site sans textes.

La mise en forme du texte, des titres, des listes et des tableaux

Les titres structurent ton contenu et facilitent sa consultation. Ils sont essentiels pour que Google comprenne les thématiques abordées dans ton texte.

Les titres et le permalien

Tu complètes le titre principal de ton article qui sera automatiquement en hiérarchie 1 (H1). Il est possible de mettre plusieurs titres H1 dans un article mais cela n’est pas souhaitable.

Tu enregistres le brouillon. Cette option apparaît dès que tu commences à travailler sur ton article.

L’url de ton article

WordPress génère automatiquement l’URL. Ce permalien mérite d’être revu dans l’onglet Article du menu droit > Permalien. Tu retrouves l’ensemble des mots de ton titre séparés par des tirets.

Le plus court et compréhensible sera le mieux. Tu supprimes tous les termes inutiles pour conserver uniquement le mot-clé de ton article. Tu passes par exemple de « le-guide-ultime-des-tontes-ete-chiens-race-2026 » à « tontes-ete-chiens ».

Ton permalien sera toujours en minuscules sans accent avec les termes séparés par des tirets (touche du 6).

Aparté SEO : Je t’encourage fortement à installer une extension SEO comme Rank Math, Yoast ou SEOpress pour personnaliser le titre qui apparaît dans les résultats des moteurs de recherche.

La hiérarchie des titres

Tes lecteurs naviguent aisément entre les différents chapitres et trouvent facilement l’information recherchée à l’aide des titres.

Tu sélectionnes le niveau de hiérarchie à appliquer. Le titre 1 (H1) est attribué automatiquement au titre principal de l’article. Mieux vaut ne jamais l’utiliser.

Cela donne en pratique :

• Mon premier sujet (Titre H2)
  • Ma section 1.1 (Titre H3)
    • Ma sous-section 1.1.1 (Titre H4)
      • Texte (Paragraphe)

Il est rarissime d’utiliser les titres au-delà du Titre 4.

Les niveaux de titres servent à structurer ton texte et pas pour la mise en forme. Tu perturberais la compréhension des moteurs de recherche.

Il est possible de faire dépasser les titres de la zone de texte avec les options Grande largeur et Pleine largeur disponibles dans certains thèmes.

Tu colores et personnalises tes titres comme tu le souhaites. Nous voyons ces options tout de suite car elles s’appliquent à l’identique pour les textes.

La mise en forme des textes

Les paragraphes gèrent les textes de ton article. Tu trouves les fonctionnalités de mise en page standard dans la barre au-dessus de ton paragraphe.

• Les alignements

• Les options de formatage directement accessibles : Gras | Italique | Lien

Pour ajouter un lien, tu sélectionnes ton texte et tu copies l’url (ou tu tapes des termes pour disposer d’une suggestion d’articles). Tu valides avec la flèche.

Tu ouvres ton lien dans un nouvel onglet en dépliant le menu.

Rank Math ajoute les options Ne pas suivre le lien (pour les moteurs de recherche) et Lien sponsorisé (directive de Google).

• Les options avancées de formatage

Barrer | Code en ligne | ^Exposant | Image | _Indice | Mettre en évidence | Saisie au clavier

Le code en ligne évite que du code HTML ne s’exécute.

Les images intégrées dans le texte sont surtout utiles dans les tableaux. Tu cliques sur l’image pour indiquer sa largeur en pixels (cela ne fonctionne plus pour moi).

Mettre en évidence colore le texte sélectionné et le fond.

Tu cliques sur les paramètres pour préciser une teinte spécifique.

Tu disposes de fonctionnalités supplémentaires dans le menu de droite.

Les options supplémentaires pour personnaliser ton texte dans le menu

Les modifications s’appliquent pour l’ensemble du paragraphe.

Couleur

Tu définis les couleurs du texte et de l’arrière-plan.

Couleur du texte

Couleur d’arrière-plan

Tu retrouves la couleur des liens dans les options.

Typographie

Tu disposes de 4 tailles par défaut (petite, moyen, large et extra large).

Tu personnalises la taille exacte dans les réglages (en pixels, em ou rem).

Tu disposes de 4 réglages supplémentaires dans les options.

La hauteur de ligne exprime l’espace que prend ton texte en hauteur. Cela permet d’aérer tes paragraphes.

Ce texte est en hauteur de ligne 0.8.
Tu vois qu’il est compressé.

Celui-ci est en 2.
Les lignes sont distantes. Il est préférable d’effectuer ces réglages au niveau du thème et de ne gérer ici que les rares exceptions.

Tu sélectionnes la graisse de ta police et son style dans Apparence.

La casse modifie toutes les lettres en majuscules ou la première lettre de chaque mot. L’interlettrage ajoute un espacement entre chaque lettre.

Lettrine

Cette option n’est plus disponible dans le menu.

T Tu affiches une lettre surdimensionnée (lettrine). Elle met en avant la première lettre de ton paragraphe dans un style magazine.

Tu ajoutes désormais une lettrine à ton paragraphe en indiquant has-drop-cap dans Avancé > Classe(s) CSS additionnelle(s).

Les listes aèrent la mise en page et évitent l’effet « pavé de texte ».

Les listes

Deux types de listes sont disponibles :

• la liste classique avec un point

1. la liste ordonnée avec une numérotation

Tu organises la hiérarchisation avec les retraits.

1. Point principal
   1. Sous partie

Tu modifies le chiffre de départ ou tu inverses l’ordre de la liste dans les options.

Les citations animent tes textes.

Les citations

Tu disposes de deux options pour les citations. Tu remarques un emplacement spécifique pour l’auteur est disponible sous le texte.

La citation classique

« Ceci est une citation d’une grande portée philosophique. »

Auteur inconnu

Tu annules la décoration avec le style Uni.

« Ceci est une citation d’une grande portée philosophique. »

Auteur inconnu

La citation en exergue met en valeur le texte en l’isolant du contenu.

Le bloc couplet est dédié aux paroles d’une chanson.

Les tableaux

Les tableaux facilitent la présentation de chiffres. Les colonnes sont plus flexibles pour la mise en forme des textes et des visuels.

Tu configures le nombre de lignes et de colonnes.

Tu ajoutes des bandes de couleurs pour marquer les lignes en modifiant le style.

Tu gères l’alignement du tableau.

Tu ajoutes ou tu retires des lignes et des colonnes avec Modifier le tableau.

Pour ajouter une image, tu te places dans la case correspondante et tu utilises Image en ligne.

	Chien	Chat
Autonome
Défense
Te mangera

Tu disposes d’options supplémentaires dans le menu de droite. Je les ai utilisées dans le précédent tableau.

• Tu égalises la largeur des colonnes avec une largeur fixe.
• Section d’en-tête ajoute une ligne de titre affiché en majuscules.
• Section de pied de page me laisse dubitatif sur son usage.

Ta page se sentirait nue sans illustrations et animations.

Les images, vidéos, documents et boutons

Nous débutons par l’insertion d’une image seule.

Intègre une image

Tu sélectionnes le bloc Image et tu accèdes aux options d’insertion.

Une alternative sera de glisser directement ton image à l’emplacement souhaité.

Tu complètes la description de l’image (texte alternatif) pour les personnes malvoyantes dans le menu de droite. Google n’arrive pas à comprendre les images et s’en sert pour présenter tes images dans Google Images.

Tu ajustes les dimensions de l’image. Cependant, je te conseille d’adapter la taille en amont pour optimiser le poids des visuels et accélérer le chargement de ta page.

Tu ajoutes un lien à ton image exactement comme pour du texte.

Tu arrondis ton image dans les styles de bloc.

Je trouve que l’arrondi fonctionne particulièrement bien avec les visuels carrés.

La gestion fine des arrondis se trouve dans Bordure.

Tu appliques le même effet sur les 4 côtés.

Tu laisses libre court à ta créativité en déverrouillant et en appliquant des rayons spécifiques pour chaque coin.

Tu disposes d’options de bordures et d’encadrés supplémentaires dans certains thèmes comme Twenty Twenty-One

Il est possible de modifier l’image directement dans Gutenberg :

• Recadrer

• Zoomer

• Changer les proportions

• Pivoter

Je ne m’attarde pas trop sur ces options. Il s’agit à mon avis d’une fausse bonne idée. Le travail des images en amont permet d’optimiser la taille et de réduire au maximum le poids des images.

Dans les options des images, tu indiques le style d’intégration au sein du texte. Le rendu n’est pas toujours facile à maîtriser avec aligner à gauche et aligner à droite qui interfèrent avec le texte. Tu ajoutes des espacements pour éviter les interactions.

Je trouve le filtre duotone intéressant. Il apporte facilement une identité visuelle à ta page ou à ton site. Son avantage est qu’il n’alourdit pas ton site et permet même de l’alléger avec des visuels chargés en noir et blanc.

Mon image de base.

Tu ouvres les options des filtres duotone.

Tu appliques un des filtres prédéfinis.

Tu vois que la perception est complètement différente entre le filtre violet/jaune

et le noir/bleu pour la même photo.

Tu personnalises à tes couleurs en cliquant sur les deux extrémités pour indiquer la référence de ta couleur.

La galerie facilite la présentation d’un mur d’images.

Présente plusieurs images dans une galerie

Tu charges tes visuels.

Tu organises l’ordre de tes visuels. Tu pourras les réorganiser ensuite dans le bloc.

Tu choisis le nombre d’images présentées en largeur.

Les visuels de la galerie se répartissent en largeur et s’ajustent automatiquement.

Je préfère charger les images dans la bibliothèque de médias en amont pour leur attribuer un texte alternatif.

Tu cliques tour à tour sur chaque image de ta galerie

et tu complètes le descriptif.

Chaque image est indépendante. Tu varies les effets comme tu le souhaites.

Tu gères l’espacement entre les visuels.

Tu disposes de l’option d’intégrer du texte au-dessus des images en transformant le bloc texte en bannière. Tu trouveras les explications concernant les bannières dans la suite de l’article.

Le procédé diffère pour les vidéos.

Intègre une vidéo

Il est possible d’intégrer une vidéo exactement comme une image.

Les vidéos sont extrêmement volumineuses. Elles saturent ton serveur et ralentissent ta page. Mieux vaut les charger sur des services spécialisés comme YouTube, Viméo, TikTok…

Tu les ajoutes à ta page à l’aide des contenus embarqués.

La démarche est similaire pour tous. Je prends l’exemple de YouTube. Tu complètes l’URL de ta source et tu valides avec Embarquer.

Je suis passé à une solution plus radicale dans mes articles. J’intègre uniquement une image de la couverture de la vidéo sur mon site avec un lien vers YouTube.

La bannière offre de nombreuses opportunités créatives.

Ajoute une bannière

Tu intègres, par exemple, des publicités vers tes produits ou services.

Tu choisis une image, une vidéo ou un fond coloré

et tu insères du texte en superposition.

Tu précises la hauteur de la bannière.

Tu peux également la mettre en pleine hauteur qui s’adaptera automatiquement à l’écran de ton visiteur.

Un fond de couleur est appliqué sur le visuel pour accentuer la lisibilité. Tu personnalises ce calque de superposition avec la couleur de ton choix

et son intensité avec l’opacité.

Il est possible d’appliquer un dégradé de couleurs.

Tu ajoutes un effet de défilement de l’image sous le texte (parallaxe) en activant Arrière plan fixe.

Le rendu diffère en fonction de ton thème. Tu devras souvent réaliser plusieurs prévisualisations pour ajuster (y compris sur mobiles).

La bannière est parfaite pour être présentée en pleine hauteur. Celle-ci prendra la taille exacte de l’écran de ton visiteur.

Cela fonctionne parfaitement avec la pleine largeur pour couvrir tout l’écran.

Tu places les éléments dans l’espace.

Tu ajoutes les blocs que tu souhaites dans ta bannière comme dans une colonne. Tu tapes / pour faire apparaître le menu des blocs.

Le bloc fichier facilite la mise à disposition des documents sur ton site.

Les documents à télécharger

Tu charges le document à partager.

Le nom qui apparaît est celui du fichier.

Tu précises si tu souhaites que ton fichier s’ouvre dans un autre onglet dans le menu de droite.

Je te recommande d’héberger les fichiers dans des espaces de partage comme Google Drive pour ne pas alourdir ton serveur.

Tu indiques alors le lien de partage fourni par le site dans un bouton.

Les boutons

Tu inscris ton texte directement dans le bouton.

Tu indiques ton lien.

Tu définis le style de ton bouton. Contour se distingue du texte standard par une fine bordure.

Tu personnalises les couleurs y compris en dégradés.

Tu règles l’arrondi des coins.

Tu indiques la taille du bouton avec les réglages de la largeur.

Tu retrouves la typographie comme les paragraphes.

La fonctionnalité Centrer est présente quand tu sélectionnes le bloc en entier.

Tu disposes de l’alignement dans le menu du bloc.

Orientation verticale

Nous allons voir comment agencer tous les éléments de ta page.

La mise en page : séparateurs, disposition, colonnes…

Les séparateurs et espacements aèrent et rythment l’espace.

Les séparateurs et des espacements

Les séparateurs soulignent les grandes parties de ton texte en complément des titres.

Tu définis le style.

Par défaut et large sont similaires chez moi.

Pointillés

Tu appliques la couleur de ton choix mais ne peux pas définir l’épaisseur sauf en passant par les CSS de ton thème.

L’espacement incorpore des espaces vides pour aérer. Un espacement de 75 pixels est inséré sous ce bloc.

Tu règles la hauteur de l’espacement en pixels dans les options

ou directement sur le bloc.

Accole du texte à une image

Médias et texte est prévu pour cet usage.

Les deux zones se gèrent exactement comme des blocs paragraphes et images standards.

Je n’avais pas compris l’intérêt de ce bloc avant de tomber sur cette particularité. Tu définis si tu souhaites positionner ton texte à gauche.

Cela se répercute sur ordinateur

mais pas sur mobiles.
C’est très pratique pour dynamiser ta présentation sans te retrouver avec un effet étrange sur téléphone.

Les colonnes seront plus flexibles pour les autres mises en page.

Les colonnes pour une mise en page souple

Les colonnes subdivisent ton bloc verticalement. Tu empiles les éléments à l’intérieur.

Tu sélectionnes ton nombre de colonnes.

Tu règles précisément la largeur en pixels ou en % des colonnes.

Tu ajoutes des colonnes supplémentaires en largeur dans le menu de droite. Cette option apparaît quand tu sélectionnes le bloc complet.

Tu gères l’alignement vertical au sein du bloc ou des colonnes individuellement.

Tu cliques sur le + pour ajouter un élément.

Tu retrouves le + pour ajouter des blocs dans la colonne.

Tu personnalises les couleurs.

Les colonnes s’empilent sur mobile.

Un croquis avec les mesures aide pour placer les blocs si tu souhaites réaliser un ensemble audacieux.

Cette option est valable pour tous les blocs imbriqués mais s’avère particulièrement pratique pour les colonnes.

Tu peux remonter au bloc parent en survolant le symbole de ton bloc colonnes.

Les marges internes sont précieuses pour placer finement tes éléments et éviter qu’ils ne soient collés par exemple. Je les ai dans Twenty Twenty-Two/ Elles sont censées être disponibles pour tous dans la version 6.0 mais je ne les ai pas vues dans ma version de test.

Les effets de chevauchement dynamisent les mises en page mais ne sont disponibles que dans Twenty Twenty-One.

Lire la suite

Lire la suite ne concerne pas l’apparence de ton article. Tu définis la limite de la partie visible avant le bouton continuer la lecture sur ta page articles.

Nous avons fait le tour de tous les blocs dont tu auras besoin au quotidien. Je te propose d’approfondir ton usage.

Astuces et utilisations avancées de Gutenberg

Les codes courts intègrent des fonctionnalités avancées dans tes articles.

Les codes courts (shortcodes)

Les codes courts sont générés par des extensions. Je les utilise pour intégrer un formulaire, un sommaire et afficher le temps de lecture de l’article.

Tu copies-colles le code indiqué dans l’extension dans le bloc spécifique.

Cette option permet de diriger vers un endroit précis de tes publications.

Intègre des liens au sein de ton article

Tu retrouves dans les options avancées la possibilité de créer un point de repère sous forme d’une ancre HTML. Tu l’utilises pour créer un lien qui dirigera immédiatement sur cette section.

L’identifiant de ton ancre doit être unique et respecter les règles des URL (minuscules séparées par des tirets du 6).

Tu indiques le lien interne en ajoutant un # avant l’identifiant dans ton article.

Tu peux réaliser des liens vers cette section depuis d’autres articles ou sites en ajoutant l’url complète sur le modèle : https://www.monsite.fr/article/#identifiant

C’est parfait pour les liens ponctuels. Pour les sommaires, des extensions automatisent le travail et font gagner un temps précieux.

Tu simplifies les éléments présents dans tes menus pour adapter Gutenberg à ton utilisation.

Personnalise l’interface de Gutenberg

Tu disposes d’options avancées.

L’option Barre d’outil supérieure remonte le menu des blocs dans la barre principale.

Mise en lumière voile les éléments non sélectionnés.

Tu passes dans une vue qui affiche le code HTML de ton article avec Éditeur de code.

Pour les modifications au sein d’un bloc, il est plus pratique de visionner le code au niveau du bloc.

Copier l’intégralité du contenu facilite la tâche si tu souhaites déplacer un article.

Tu désactives l’affichage des blocs que tu n’utilises pas dans Préférence > le gestionnaire de bloc.

Tu personnalises les options présentes dans ton menu de droite dans Panneaux.

Un raccourci pour gagner du temps

Tu sélectionnes directement le bon bloc en tapant / dans un paragraphe. La liste des blocs apparaît.

Tu continues la saisie avec les premières lettres du bloc pour filtrer. Par exemple pour intégrer une vidéo YouTube :

Insère des émojis

Tu as remarqué que l’éditeur ne propose pas d’émojis 😢. Ils sont pourtant parfaitement gérés par WordPress.

Tu les fais apparaître avec les raccourcis Touche Windows (à gauche de ALT) + ; ou Ctrl + Cmd + Espace sur Mac.

Ajoute un espace insécable pour éviter les coupures indésirables

L’espace insécable : &Gnbsp; (à copier sans le G en deuxième position)

Celui-ci s’ajoute dans l’HTML entre les lettres à maintenir ensemble en remplacement de l’espace.

Il évite ainsi les coupures disgracieuses en particulier avec la ponctuation et les chiffres.

Affiche une explication au survol d’un texte

Une note qui s’affiche au survol s’ajoute dans le HTML avec le code : <abbr title="Texte au survol" lang="fr">Texte à expliquer</abbr>
Gaufre

Les icônes des réseaux sociaux et services

De nombreux réseaux sociaux et services sont intégrés.

Tu cliques sur le plus

et tu choisis le réseau social que tu souhaites ajouter. La recherche facilite la tâche.

Tu intègres le lien vers ton réseau sinon ton bouton ne s’affiche pas.

Tu disposes de 4 tailles prédéfinies.

Tu choisis entre 3 styles :

Tu personnalises tes couleurs.

Tu forces l’ouverture des liens dans un nouvel onglet.

Tu gères l’alignement et l’orientation.

Les groupes pour des compositions complexes

Tu groupes des blocs pour les gérer de manière globale. Tu appliques, par exemple, un fond de couleur.

Tu sélectionnes tes blocs avec MAJ et tu transformes en groupe. Tu peux également créer directement un groupe et ajouter les éléments à l’intérieur.

Tu dégroupes dans les options.

La vue en liste facilite la sélection des éléments d’un groupe.

Une option très pratique : tu passes d’un clic au bloc parent d’une composition qui apparaît au survol du symbole du bloc.

Quand tu sélectionnes un bloc, le menu de gauche bascule pour dévoiler les options des blocs.

Les réglages sont spécifiques pour chaque type de bloc.

Les lignes pour disposer tes éléments comme tu le souhaites

Les lignes sont pensées pour organiser les éléments dans les groupes et les colonnes mais fonctionnent seules.

Tu ajoutes plusieurs blocs.

Tu les orientes comme tu le souhaites ensuite.

À l’horizontale

ou à la verticale.

Les compositions pour des designs prêts à l’emploi

Tu accèdes aux compositions en cliquant sur l’onglet spécifique. Tu choisis le style de bloc.

Tu cliques sur le modèle qui te plaît pour l’intégrer dans ton texte. Tu modifies chaque élément à ta convenance.

Le volume de modèles s’étoffe au fil du temps. C’est l’occasion de regarder comment sont agencées les compositions pour s’en inspirer dans ses mises en page. Je te recommande celles des en-têtes.

Les blocs réutilisables permettent de modifier simultanément des blocs présents dans plusieurs articles et pages différents.

Les blocs réutilisables

Chaque modification que tu opères dans un bloc réutilisable se répercute automatiquement dans l’ensemble des articles.

Tu sélectionnes le bloc et tu l’ajoutes aux blocs réutilisables dans les options.

Tu le nommes.

Tu le retrouves désormais dans l’onglet Réutilisables.

Pour apporter un changement, tu sélectionnes le bloc dans un des articles. Tu cliques sur modifier, tu effectues la modification et tu sauvegardes.

Tu le retires des blocs réutilisables dans les options.

L’extension Reusable Block Extented transforme directement un bloc réutilisable en composition.

Les articles les plus récents

Tu choisis le bloc Boucle de requête.

Tu sélectionnes un des modèles et tu cliques sur Choisir. Il est également possible de partir de zéro et de composer avec les blocs Thème.

Tu peux mettre en forme les différentes sections comme tu le souhaites : alignement, couleurs, taille… Les modifications seront appliquées sur tous les éléments.

Tu cliques sur le premier bloc et tu remontes sur Modèle de publication puis sur Boucles de requêtes pour accéder aux réglages.

Tu découvres les règles d’affichage :

• Éléments par page : articles affichés
• Décalage : pour les affichages sur plusieurs colonnes (par ex. : 2 articles sur la première colonne puis décalage de 2 pour avoir les 2 suivants en deuxième colonne)

Attention : certaines compositions sont organisées en colonnes indépendantes.

Les réglages dans le menu de droite :

• Le type de publication : article ou page
• Ordonner pour trier
• Exclure ou non les articles épinglés en début de page

et tu filtres les articles qui apparaissent à l’aide des éléments suivants :

• Catégories
• Étiquettes
• Auteur
• Mot-clé

Les blocs liés au full site editing

Les blocs rangés dans thème (en dehors des boucles de requêtes) sont faits pour l’édition de thème et n’ont aucune utilité dans les publications.

Conclusion

Tu disposes de toutes les options dont tu as besoin au quotidien pour dynamiser tes articles.

Gutenberg s’améliore au fil du temps et intègre de nouvelles fonctionnalités pour la mise en page sur WordPress. Il sert maintenant pour éditer l’ensemble du site des thèmes qui supportent le Full Site Editing.

N’oublie pas d’installer une extension de référencement naturel comme Rank Math pour ajouter un titre et une description d’article qui apparaîtront dans les moteurs de recherche.

Les articles qui peuvent t’intéresser :

• 103 formules de titres d’articles
• Réduis le poids des images de ton site
• Crée des visuels personnalisés en 3 minutes avec un générateur de mockups
• Réalise facilement la page d’accueil de ton site

Retrouve tous les articles pour Créer seul ton site

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean