Avant de commencer à insérer des blocs
👉 Consulter la Fiche 0 : L'éditeur Gutenberg de WordPress3 façons d'insérer un bloc
- →Cliquer le + qui apparaît entre les blocs existants
- →Cliquer le + en haut à gauche de l'éditeur
- →Taper / dans l'éditeur et chercher le bloc par nom
- →Appuyer sur Entrée en fin de paragraphe
💡 La touche / est la plus rapide : tapez /image, /titre, /bouton… et validez avec Entrée.
Paragraphe
- Bloc par défaut — s'insère automatiquement
- Cliquez pour écrire ; barre d'outils : gras, italique, lien
- Taille et couleur dans la colonne droite
💡 N'utilisez pas des lignes vides pour créer de l'espace — utilisez le bloc Espacement à la place..
Titre (H2, H3…)
- Tapez /titre
- H2 = section principale, H3 = sous-section
- Ne jamais utiliser H1 (réservé au titre de page)
- Changez le niveau via la barre d'outils
💡 Respectez la hiérarchie H2 → H3 pour le SEO et l'accéssibilité.
Liste (puces / numéros)
- Tapez /liste
- Choisissez puces ou numérotée
- Entrée = nouvel élément
- Tab = sous-niveau, Maj+Tab = remonter
💡 Préférez des listes courtes (5–7 items max) pour rester lisible.
Citation
- Tapez /citation
- Rédigez le texte ; ajoutez la source en dessous
- Style "grande" disponible dans la colonne droite
💡 Idéal pour les témoignages ou mettre en valeur une phrase clé.
Tableau
- Tapez /tableau
- Définissez le nombre de colonnes et lignes
- Clic droit sur une cellule : insérer/supprimer une ligne
- Activez "Ligne d'en-tête" dans la colonne droite
💡 Pour un comparatif ou des tarifs, activez l'en-tête pour plus de clarté.
⚠️ Limitez-vous à 3–4 colonnes : illisible sur mobile au-delà.
Détails (accordéon simple)
- Tapez /détails
- Saisissez le titre dans le champ résumé
- Ajoutez le contenu masqué à l'intérieur du bloc
- Le visiteur clique pour déplier/replier
- Option "Ouvert par défaut" dans la colonne droite
💡 Parfait pour une FAQ à un seul item. Pour plusieurs questions, préférez le bloc Accordéon (section Design).
Image
- Tapez /image
- Choisissez : Téléverser, Médiathèque ou URL
- Renseignez le texte alternatif (colonne droite)
- Ajustez l'alignement et la largeur
- Recadrez : icône recadrage dans la barre d'outils
- Lien au clic : icône maillon dans la barre d'outils
- Choisissez la taille d'affichage (voir section Formats)
💡 Le texte alternatif est lu par Google et les lecteurs d'écran — ne pas l'oublier. L’objectif est qu’une personne ne pouvant pas visionner l’image parvienne à se l’imaginer (max 100 caractères).
💡 "Lier à → Fichier média" permet l'affichage plein écran au clic.
Galerie
- Tapez /galerie
- Ajoutez plusieurs images depuis la médiathèque
- Choisissez le nombre de colonnes (colonne droite)
- Activez le recadrage pour uniformiser les hauteurs
- Cliquez sur une image pour la retirer ou la réordonner
💡 Idéal pour les portfolios, galeries de réalisations ou photos d'événements.
💡 Pour un rendu propre, utilisez des photos de mêmes proportions.
⚠️ Compressez toutes vos photos avant import — une galerie non optimisée ralentit fortement la page.
- Sur PC (Windows) : Ouvrez l'image avec l'application Photos. Cliquez sur les 3 petits points "..." en haut > Redimensionner l'image,
- Sur Mac : Ouvrez l'image avec Aperçu. Menu Outils > Ajuster la taille.
Vidéo
- Tapez /vidéo pour un fichier téléversé
- Ou /youtube / /vimeo pour un lien externe
- Collez l'URL YouTube ou Vimeo directement
- Ajustez les proportions dans la colonne droite
💡 Préférez YouTube ou Vimeo pour les vidéos longues — elles ne consomment pas votre espace serveur et se chargent plus vite.
Quand WordPress insère une image, il propose plusieurs tailles prédéfinies. Choisir la mauvaise taille, c'est charger une image de 2 000 px là où 400 px suffisent : la page ralentit et le référencement 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 |
| Moyenne-grande | 768 px de large | Image dans le corps d'un article | Zone d'affichage > 800 px |
| Grande | 1024 px de large | Image pleine largeur dans un article | Affichage dans une petite 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 sur Squoosh.app 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 1 920 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.
Poursuivez la découverte des blocs avec :
👉 Les blocs Design (mise en page)