Accueil Formations Maîtriser WordPress 7- Créer son portfolio en ligne de A à Z

Mettre en page un article avec Gutenberg

Retour à la formation
Chapitre 3 Leçon 6
Précédent
Suivant

Découvrez comment utiliser l’éditeur WordPress Gutenberg pour structurer un article avec des titres, des paragraphes, des colonnes et une galerie d’images.

Détails de la leçon

Description de la leçon

Cette leçon présente les fonctionnalités essentielles de l’éditeur de blocs Gutenberg pour mettre en page un article WordPress. À partir d’un article de mariage, vous apprendrez à organiser le contenu et à créer une présentation plus agréable à lire.

La démonstration commence par l’ajout d’un titre de niveau 2, puis de paragraphes contenant la présentation du projet et des informations pratiques : lieu, date et prestation. Le panneau de structure permet de visualiser les blocs et leurs relations. Vous découvrez ensuite comment insérer un bloc de colonnes, choisir une disposition à trois colonnes et y déplacer les paragraphes concernés. La taille du texte peut également être ajustée dans les réglages de chaque paragraphe.

La leçon montre enfin comment ajouter une galerie à partir d’images déjà téléversées dans la médiathèque. Vous sélectionnez les fichiers, créez la galerie et réglez son affichage : nombre de colonnes, taille des images, recadrage et format carré. Après avoir enregistré l’article, vous pouvez consulter le résultat sur le site et repérer les éléments à améliorer, comme la largeur du contenu, les commentaires ou la navigation entre articles. L’exercice fournit ainsi une première méthode pour combiner les blocs Gutenberg et construire une mise en page claire, structurée et illustrée.

Objectifs de cette leçon

À l’issue de la leçon, vous serez en mesure de créer et organiser des blocs, structurer un article avec des titres et des paragraphes, répartir du contenu en colonnes, insérer une galerie depuis la médiathèque, régler son affichage et vérifier le rendu de l’article publié.

Prérequis pour cette leçon

Il est utile de disposer d’un site WordPress accessible et de savoir ouvrir un article dans l’interface d’administration. Pour reproduire l’exercice, préparez un article à modifier ainsi que quelques images dans la médiathèque. Aucune connaissance avancée en développement n’est nécessaire.

Métiers concernés

Ces compétences sont utiles aux gestionnaires de sites WordPress, rédacteurs web, blogueurs, chargés de communication, créateurs de contenu et photographes qui publient des portfolios ou des reportages illustrés.

Alternatives et ressources

Gutenberg est l’éditeur natif de WordPress. Selon les besoins, il est également possible d’utiliser des éditeurs visuels comme Elementor ou Beaver Builder, ou de construire certaines mises en page avec l’éditeur classique et des extensions adaptées. Les options disponibles dépendent du thème et des extensions installés.

Questions & Réponses

Ajoutez un bloc « Titre » à l’endroit souhaité, saisissez le texte, puis vérifiez que le niveau sélectionné est bien H2. Gutenberg permet de choisir différents niveaux de titre dans les réglages du bloc.
Insérez un bloc « Colonnes », choisissez une disposition à trois colonnes, puis déplacez chaque paragraphe — par exemple le lieu, la date et la prestation — dans la colonne correspondante. Vous pouvez ajuster la taille du texte dans les réglages de chaque paragraphe.
Après avoir sélectionné les images de la médiathèque et inséré la galerie, vous pouvez définir le nombre de colonnes, la taille des images, leur recadrage et leur format. La démonstration choisit trois colonnes et des images carrées.