Gutenberg : Guide de mise en page sur WordPress [Débutants]

La mise en page sur WordPress est rapide à assimiler. Tu retrouveras des similitudes avec un traitement de texte classique.

D’autres notions sont propres à la publication sur internet. L‘éditeur de texte Gutenberg offre de nouvelles possibilités de mise en page.

picto articles débutants

Débutant

Pas une minute à prendre, entrons directement dans le vif du sujet.

Crée un nouvel article

Article (dans le menu de gauche) > Ajouter

ajouter un nouvel article
  • Compléter le titre principal de ton article
Gutenberg ajout de titre
  •  Enregistrer le brouillon
enregistrer le brouillon

Tu cliques sur ton titre. Le lien qui apparaît au dessus est l’adresse internet de ta page.

  • Bouton Modifier pour l’optimiser : tu indiques le mot-clé de ton article en minuscules sans accent avec les termes séparés par des tirets (touche du 6). Le plus court et compréhensible sera le mieux.
modifier le permalien

Manie les blocs

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

Les blocs les plus courants sont immédiatement accessibles :

les blocs courants
  • Paragraphe pour ton texte courant
  • Liste
  • Visuel
  • Titre

Tu retrouveras cette boîte de dialogue à la suite du dernier bloc de ton article.

Pour ajouter un bloc au milieu de ton article, tu survoles le bloc en dessous et cliques sur le + bleu.

ajout d'un bloc au milieu de l'article

Tu choisis le contenu que tu souhaites ajouter.

choix du bloc

Ceux que tu utilises le plus régulièrement seront présents en haut. La barre de  recherche t’éviteras également la navigation dans les catégories.

Il existe un raccourci pour gagner du temps.

Tu tapes / dans paragraphe et le menu s’ouvre directement. Tu peux même chercher ton bloc avec les premières lettres. Par exemple pour ajouter une vidéo :

raccourci bloc

Pour déplacer ton bloc, tu utilises la poignée ou les flèches situées à gauche quand tu survoles.

déplacer ton bloc

Tu peux sélectionner plusieurs blocs pour les déplacer en les sélectionnant le premier et le dernier de la série avec la touche MAJ enfoncée.

Tu les déplaceras avec les flèches en haut à gauche.

déplacer plusieurs blocs à la fois dans Gutenberg

Pour retirer un bloc :

  • Cliquer sur le menu … à droite de la barre d’outils
  • Sélectionner retirer bloc
retirer un bloc

Pour basculer un bloc vers un autre type de contenu, tu te positionnes en haut à gauche de ta barre d’outils. L’option modifier le type de bloc va apparaître. Tu cliques pour afficher les options.

modifier le type de bloc

Réalise la mise en page

Mise en forme du texte

Nous allons débuter par la mise en forme de ton texte.

Tu trouves dans la barre au dessus de ton paragraphe les fonctionnalités de mise en page standard.

Les alignements

  • gauche
  • centré
  • droite
alignements

Les options de formatage :

  • gras
  • italique
  • texte barré
formatage texte

Ajoute un lien

C’est ici que tu ajouteras des liens vers d’autres pages.

  • Sélectionner le texte sur lequel tu souhaites poser ton lien
  • Cliquer sur la chaîne
ajout lien
  • Cliquer sur la flèche pour valider le lien
valider lien
  • Cliquer sur les trois points
  • Sélectionner Ouvrir le lien dans un nouvel onglet
réglages liens
activer ouvrir nouvel onglet

Ouvrir ton lien dans un nouvel onglet possède deux intérêts majeurs :

  • Permettre aux lecteurs de revenir facilement dans l’article d’origine
  • Faire baisser le taux de rebond et disposer d’une mesure du temps passé sur l’article

Modifie la taille de ta police

Les options avancées se trouvent dans le menu à droite.

taille de polices

Tu as le choix entre entre 5 tailles préformatées de texte :

  • petit
  • normal
  • moyen
  • grand
  • énorme
tailles de polices prédéfinies

Tu peux affiner en définissant la taille précise de la police en pixels.

taille polices libre

Tu peux également ajouter une lettrine qui met en avant la première lettre de ton paragraphe dans un style magazine.

ajout lettrine

Modifie la couleur de ton texte et du bloc

Tu peux personnaliser aisément la couleur de ton paragraphe dans Réglages de couleur

Couleur arrière plan

Couleur du texte

Tu disposes de 10 couleurs prédéfinies que tu peux affiner à l’aide du sélecteur de couleurs.

réglages couleurs texte
sélecteur couleurs

Définis tes titres

Les titres sont indispensable pour la bonne compréhension de ton article. Ils permettent de naviguer aisément entre les différents chapitres.

Google s’en sert pour mieux comprendre ton contenu et catégoriser ton article.

Tu remarques que le titre 1 (H1) est absent. Celui-ci est automatiquement attribué au nom de l’article. Il n’y a qu’un seul titre principal par page.

Tu sélectionnes le niveau de hiérarchie à appliquer.

niveau des titres

Cela donne en pratique :

  • Introduction (Paragraphe)
  • Mon premier sujet (Titre 2)
    • Ma section 1.1 (Titre 3)
      • Ma sous-section 1.1.1 (Titre 4)
        • Texte (Paragraphe )
      • Ma sous-section 1.1.2 (Titre 4)
        • Texte (Paragraphe )
    • Ma section 1.2 (Titre 3)
      • Ma sous-section 1.2.1 (Titre 4)
        • Texte (Paragraphe )
      • Ma sous-section 1.2.2 (Titre 4)
        • Texte (Paragraphe )
  • Mon deuxième sujet (Titre 2)
    • Ma section 2.1 (Titre 3)
      • Ma sous-section 2.2.1 (Titre 4)
        • Texte (Paragraphe )
  • …..
  • Conclusion (Paragraphe)

A moins de rédiger une thèse, il est rarissime d’utiliser les titres au-delà de Titre 4.

Les titres H5 et H6 sont disponibles dans le menu à droite.

titres h5 et h6

Note : Chaque niveau de titre applique une mise en page spécifique au texte, déterminée par ton thème dans la feuille de style CSS. Attention, cette fonctionnalité ne doit pas être utilisée pour la mise en page.

Les listes

Deux types de listes sont disponibles :

options de liste
  • la liste classique avec un point
  1. la liste ordonnée

Tu peux organiser la hiérarchisation avec les retraits.

hiérarchisation des listes
  1. Point principal
    • Sous partie

Les citations

La citation classique.

citation

Ceci est une citation d’une grande portée philosophique. A méditer.

citation exergue

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

Ceci est une citation hautement remarquable.

Divise ton texte en colonnes

Les colonnes vont subdiviser ton bloc verticalement.

colonnes
ajout colonnes

Colonne 1 avec du texte

Intégration d’un visuel

Tu peux ajouter des blocs supplémentaires en largeur

ajout colonnes supplémentaires

ou insérer des contenus différents au sein d’une colonne.

ajout d'un bloc dans une colonne

Ajoute des séparateurs et des espacements

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

séparateur

Tu peux définir le style.

style séparateurs

Court


Large


Pointillés


L’espacement incorpore des espaces vides pour aérer.

Tu peux régler la hauteur de l’espacement en pixels.

réglages espacement

Lire la suite

Lire la suite ne concerne pas l’apparence de ton article met permet de définir la partie qui sera visible dans les listes d’articles sur ta page d’accueil par exemple.


lire la suite

Ajoute un tableau

Les tableaux sont utiles pour présenter des chiffres. Malheureusement, tu ne peux pas avoir d’autres contenus que du texte.

Ville
ChienChat
Paris35623
Bordeaux87789

Tu configures le nombre de lignes et de colonnes.

configure lignes et colonnes

Tu peux modifier le style et ajouter des bandes de couleurs pour marquer les lignes.

changer le style du tableau
Ville
ChienChat
Toulon5898
Paris35623
Bordeaux87789

Tu peux modifier le tableau quand tu le souhaites en ajoutant/retirant des lignes/colonnes.

modifier tableau

Les colonnes s’ajustent automatiquement au contenu. Si tu souhaites qu’elles soient de largeur identiques, tu actives Cellules de tableau à largeur fixe dans Réglages du tableau.

égalisation colonnes tableau dans Gutenberg

Les blocs réutilisables

Ces blocs ont la particularité de pouvoir être changé tous en même temps.

Par exemple, tu intègres systématiquement une biographie à la fin de tes articles. Tu pourras désormais la modifier dans un article et les changements s’appliqueront dans l’ensemble des articles où elle figure.

Tu sélectionnes le bloc à dupliquer et trouves Ajouter aux blocs réutilisables dans les options.

ajouter-blocs-reutilisables

Tu les retrouveras désormais en bas dans Réutilisables.

reutiliser-blog

J’ai fait l’erreur de vouloir l’utiliser pour reprendre le formatage d’un bloc sommaire. Je te raconte pas ma tête quand j’ai vu mes précédents sommaires à refaire.

Insère des visuels

Ajoute une image

Tu sélectionnes le bloc Image.

bloc image
interface images

Tu disposes de plusieurs options mais la plus intuitive consiste à glisser ton image dans l’emplacement.

glisser déposer image

Tu complètes la description de l’image pour les personnes malvoyantes et Google qui n’arrive pas à comprendre les images à aujourd’hui.

texte alternatif image

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

dimensions images

Tu peux ajouter un lien à ton image. Dans la grande majorité des cas, tu sélectionnes aucun.

  • Aucun : les clics sur l’image sont sans effet
  • Fichier média : ouvre l’image (cela n’a d’intérêt que si ton visuel est plus grand que la version affichée)
  • Lien personnalisé : tu indiques le lien de destination de ton choix
réglage liens
menu lien média

Si tu souhaites que le lien s’ouvre dans un nouvel onglet, tu actives l’option en dessous.

image nouvel onglet

Présente plusieurs images dans une galerie

Une galerie cela ressemble à cela :

Les visuels se répartissent en largeur. Tu remarques que mes deux dernières images sont plus imposantes pour cette raison.

icône galerie

Le mieux est de charger tes images dans la bibliothèque de médias avant pour leur attribuer un texte alternatif.

bouton bibliothèque médias

Tu cliques tour à tour sur chaque image de ta galerie

images

et complètes le descriptif.

texte alt
  • Cliquer sur Créer une nouvelle galerie
  • Cliquer sur Insérer la galerie
créer galerie
insérer galerie

Tu peux choisir le nombre d’images présentées en largeur et recadrer les images pour les aligner.

nombre colonnes

La bannière

La bannière est pensée pour s’intégrer en entête d’article ou de page. Tu choisis une image ou une vidéo en fond. Tu insères du texte en superposition.

Son rendu diffèrera en fonction de ton thème.

icône bannière

Tu choisis ton visuel dans ta bibliothèque

interface bannière

et inscrits ton texte.

ecrire titre sur image

Un titre en superposition
J’adore !!!

Tu peux ajouter un effet de défilement en activant Arrière plan fixe. L’effet est attractif.

effet paralax sur Gutenberg

Un magnifique effet parallaxe

Un fond de couleur est appliqué sur le visuel pour accentuer la lisibilité. Tu peux personnaliser ce masque avec la couleur de ton choix et l’intensité avec l’opacité.

masque bannière

Accole du texte à une image

Dans les options des images, tu peux les intégrer au sein du texte. Le rendu n’est pas toujours facile à maîtriser.

options image

Une option spécifique existe : Médias et texte.

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

interface média et texte

Tu choisis si tu souhaites disposer ton texte à gauche ou à droite de l’image.

texte à gauche ou à droite de l'image

Le résultat :

Un joli texte d’explication par exemple

Les éléments s’ajusteront en fonction du volume de texte.

Elle possède l’énorme avantage de disposer d’une option pour le rendu sur mobiles qui superpose les éléments. Je te conseille de l’activer systématiquement.

empiler les éléments sur mobiles

Intègre une vidéo

Tu peux insérer des vidéos de nombreuses origines. Tu les retrouve dans contenus embarqués. Tu remarques que tu peux également ajouter un aperçu de tes réseaux sociaux.

contenus embarqués

Tu complète l’URL de ta source et valide.

url youtube


Conclusion

La prise en main de WordPress va devenir très rapidement naturelle pour toi.

Je n’ai pas abordé toutes les fonctionnalités de Gutenberg et ai laissé de coté certains aspects plus techniques. Laisse moi un commentaire si le sujet t’intéresse.

Gutenberg permet de personnaliser ton article avec de nombreux éléments. Ils devrait s’enrichir dans les prochaines versions d’autres catégories plus avancées.

Il existe un outil gratuit pour pousser la personnalisation plus loin et ajouter des transitions entre les blocs et des animations par exemple.

C’est particulièrement utile pour ta page d’accueil ou tes pages de ventes. Découvre le tutoriel détaillé consacré à Elementor.

Je te recommande également de lire Crée tes articles avec de nombreux conseils pour débuter.

Spécial débutants : La prise en main de Gutenberg l'outil de publication de WordPress.

Les articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

bannière pour l'inscription à la newsletter
Découvre toutes les possibilités offertes par Gutenberg le nouvel éditeur de texte de WordPress.
Résumé
Gutenberg : Guide de mise en page sur Wordpress [Débutants]
Article
Gutenberg : Guide de mise en page sur Wordpress [Débutants]
Description
Un tutoriel pas à pas qui accompagne les débutants dans l'utilisation du nouvel éditeur de texte de Wordpress. Il t'offre de nombreuses possibilités.
Auteur
Publié par
pour pas un rond
Logo

Cet article a 6 commentaires

  1. Merci pour ces explications, auxquelles vous avez consacré beaucoup de temps.
    J’ai soixante-quinze ans et je suis devenu hermétique à toutes les nouveautés. Je maîtrise bien l’ancien éditeur et Gutenberg est dans les nuages pour moi.
    J’ai lu que l’ancien éditeur serait disponible jusqu’en 2022, SEULEMENT. D’ici là, si je ne suis pas mort, je vais cher un moment d’abandonner WordPress en récupérant mes blogs.
    Désolant.
    Bonne journée !

    1. Bonjour,

      Je comprends tout à fait la difficulté de s’adapter au nouvel éditeur de texte.

      2022 laisse toutefois une marge raisonnable pour découvrir Gutenberg. S’il offre de nombreuses nouvelles possibilités que tu ne souhaites pas utiliser 3 blocs suffisent : paragraphe, titre et image.

      Changer de plateforme sera également se confronter à la nouveauté.

      A bientôt,
      Jean

  2. Je n’ai toujours pas compris comment je peux changer la police de caractères de mon article.

    1. Bonjour David,

      Les polices sont gérées au niveau de ton thème. Gutenberg propose une personnalisation des couleurs mais n’intervient pas sur la typographie.

      Tu pourras changer les polices dans ton thème si celui-ci propose cette option ou des les CSS d’un thème enfant sinon.

      Tu peux également utiliser un constructeur de site comme Elementor mais je ne le recommande pas pour la rédaction des articles.

      A bientôt,
      Jean

  3. Merci Jean pour ton travail. Je ne sais toujours pas comment caler des images à gauche, mes alignement quelle que soit ma demande se positionnent avec le centre de l’écran comme repère. Si tu as un conseil je suis preneur. En tous cas merci. :).

    1. Bonjour Pierre,

      Par défaut les images suivent l’alignement dicté par ton thème.
      Note : Si tu as ajouté des CSS avec la notion !important, ce code sera prioritaire par rapport à Gutenberg.

      Quand tu sélectionnes une image, les options d’alignement s’affichent en haut. Tu retrouveras l’alignement à gauche à cet emplacement.

      A bientôt,
      Jean

Laisser un commentaire

Fermer le menu
Praesent justo velit, accumsan fringilla tempus elementum