Gutenberg : Guide de mise en page sur WordPress [Débutants]8 minutes à lire

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.

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

• Compléter le titre principal de ton article

•  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.

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 :

• 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.

Tu choisis le contenu que tu souhaites ajouter.

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 :

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

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.

Pour retirer un bloc :

• Cliquer sur le menu … à droite de la barre d’outils
  
• Sélectionner retirer 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.

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

Les options de formatage :

• gras
• italique
• texte barré
  

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
  

• Cliquer sur la flèche pour valider le lien

• Cliquer sur les trois points
  
• Sélectionner Ouvrir le lien dans un 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.

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

• petit
• normal
• moyen
• grand
• énorme

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

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

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.

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.

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.

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 :

• la liste classique avec un point

1. la liste ordonnée

Tu peux organiser la hiérarchisation avec les retraits.

1. Point principal
   
   • Sous partie
     

Les citations

La citation classique.

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

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

Divise ton texte en colonnes

Les colonnes vont subdiviser ton bloc verticalement.

Colonne 1 avec du texte

Intégration d’un visuel

Tu peux ajouter des blocs supplémentaires en largeur

ou insérer des contenus différents au sein d’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.

Tu peux définir le style.

Court

Large

Pointillés

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

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

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.

Ajoute un tableau

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

Tu configures le nombre de lignes et de colonnes.

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

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

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.

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.

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

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.

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

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

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.

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
  

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

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.

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

Tu cliques tour à tour sur chaque image de ta galerie

et complètes le descriptif.

• Cliquer sur Créer une nouvelle galerie
  
• Cliquer sur Insérer la galerie
  

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

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.

Tu choisis ton visuel dans ta bibliothèque

et inscrits ton texte.

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

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é.

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.

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

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

Tu choisis si tu souhaites disposer ton 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.

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.

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

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.

Les articles qui peuvent t’intéresser :

• 103 formules de titres d’articles
• Créer les images de ton site
• Réalise 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