Fiche de référence n°2

Les blocs Gutenberg & les formats d'image

Comment ajouter et configurer les blocs essentiels, et bien choisir la taille d'affichage de vos images.

➕ Ajouter un bloc 📝 Paragraphe & Titre 📋 Liste & Citation ➖ Séparateur & Bouton 🧩 Colonnes & Tableau 🖼️ Bloc Image 📐 Formats d'affichage
➕  Comment ajouter un bloc
+

Trois façons d'insérer un bloc

  • Cliquez le + qui apparaît entre les blocs existants en survolant la zone
  • Cliquez le + en haut à gauche de l'éditeur pour une insertion libre
  • Tapez / directement dans l'éditeur et cherchez le bloc par nom
  • Appuyez Entrée en fin de paragraphe pour enchaîner un nouveau bloc

💡 La touche / est la plus rapide : tapez /image, /titre, /bouton… et validez avec Entrée.

🧱  Les blocs de base
1

Bloc Paragraphe

  • Bloc par défaut — s'insère automatiquement
  • Cliquez dans le bloc pour écrire
  • Barre d'outils : gras, italique, lien, alignement
  • Options avancées : taille, couleur (colonne droite)

💡 Évitez de forcer la mise en forme avec des espaces ou retours manuels.

2

Bloc Titre (H2, H3…)

  • Tapez /titre ou choisissez "Titre" dans le +
  • H2 pour section principale, H3 pour sous-section
  • N'utilisez jamais H1 (réservé au titre de page)
  • Modifiez le niveau à tout moment via la barre d'outils

💡 Respectez la hiérarchie H2 → H3 pour le SEO et l'accessibilité.

3

Bloc Liste (puces / numéros)

  • Tapez /liste dans l'éditeur
  • Choisissez : liste à puces ou numérotée
  • Entrée pour ajouter un élément
  • Tab pour sous-niveau, Maj+Tab pour remonter
  • Convertissez en numérotée via la barre d'outils

💡 Préférez les listes courtes (5–7 items max) pour rester lisible.

4

Bloc Citation

  • Tapez /citation dans l'éditeur
  • Rédigez le texte de la citation
  • Ajoutez la source dans le champ dédié en dessous
  • Style large disponible dans la colonne droite

💡 Idéal pour les témoignages clients ou mettre en valeur une phrase clé.

5

Bloc Séparateur

  • Tapez /separateur dans l'éditeur
  • 3 styles disponibles : ligne, tirets, points
  • Couleur et largeur modifiables (colonne droite)
  • Utilisez-le pour aérer une longue page

💡 Un séparateur invisible (même couleur que le fond) crée un espace vertical propre.

6

Bloc Bouton

  • Tapez /bouton dans l'éditeur
  • Saisissez le texte du bouton
  • Collez l'URL de destination dans le champ lien
  • Cochez "Ouvrir dans un nouvel onglet" si lien externe
  • Styles : contour, rempli — couleur via colonne droite

💡 Un bouton doit dire ce qui se passe : "Demander un devis" plutôt que "Cliquez ici".

7

Bloc Colonnes

  • Tapez /colonnes dans l'éditeur
  • Choisissez une disposition (50/50, 33/66…)
  • Chaque colonne accepte n'importe quel bloc
  • Redimensionnez en glissant la bordure entre colonnes
  • Sur mobile : les colonnes s'empilent automatiquement

⚠️ Évitez plus de 3 colonnes — illisible sur mobile.

8

Bloc Tableau

  • Tapez /tableau dans l'éditeur
  • Définissez le nombre de colonnes et de lignes
  • Cliquez dans une cellule pour saisir le contenu
  • Clic droit sur une cellule : insérer/supprimer ligne ou colonne
  • Activez "Ligne d'en-tête" dans la colonne droite

💡 Pour un tableau de tarifs, activez l'en-tête pour plus de clarté.

🖼️  Bloc Image — Insertion et configuration
9

Insérer une image

  • Tapez /image dans l'éditeur
  • Choisissez : Téléverser, Médiathèque ou URL
  • Renseignez le texte alternatif (champ Alt, colonne droite)
  • Choisissez l'alignement : gauche, centré, droite
  • Définissez la largeur : % ou pixels fixes

💡 Toujours renseigner le texte alternatif — lu par Google et les lecteurs d'écran.

10

Configurer l'affichage

  • Cliquez sur l'image pour afficher la barre d'outils
  • Recadrez directement dans l'éditeur (icône recadrage)
  • Ajoutez un lien sur l'image (icône maillon de chaîne)
  • Style : arrondi, ombre — dans la colonne droite
  • Légende : cliquez sous l'image pour en ajouter une

💡 Liez l'image à "Fichier média" pour permettre l'affichage plein écran au clic.

📐  Choisir le bon format d'affichage

Quand WordPress insère une image, il propose plusieurs tailles prédéfinies. Choisir la mauvaise taille, c'est charger une image de 2000 px là où 800 px suffisent : la page ralentit, les Core Web Vitals chutent, le SEO en pâtit.

Taille WordPress Dimensions Quand l'utiliser À éviter si…
Miniature 150 × 150 px Vignette en liste d'articles, icônes L'image doit être visible en grand
Moyenne 300 × 300 px max Image dans un article, colonne étroite L'image est le sujet principal de la page
Moyenne-grande 768 px de large Image dans le corps d'un article, blog Zone d'affichage > 800 px de large
Grande 1024 px de large Image pleine largeur dans un article Affichage sur petite zone ou dans une colonne
Taille réelle Fichier original Téléchargement, lightbox HD Usage standard — souvent surdimensionné !
🚀

Privilégiez le format WebP pour toutes vos images

WebP est le format moderne recommandé par Google. À qualité visuelle égale, il est 25 à 35 % plus léger que JPG ou PNG. WordPress le supporte nativement depuis la version 5.8.

  • Convertissez vos photos avec Squoosh.app (gratuit, en ligne) avant de les téléverser
  • Poids cible : moins de 200 Ko pour une image standard, moins de 80 Ko pour une miniature
  • Résolution : inutile de dépasser 1920 px de large même pour une image plein écran
⚠️

Règle d'or : avant d'importer une image, vérifiez toujours son poids et ses dimensions. Une photo de 4 Mo prise avec un smartphone n'a rien à faire directement dans WordPress. Redimensionnez et compressez d'abord, importez ensuite.