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

Créer une page d’accueil avec Gutenberg

Retour à la formation
Chapitre 5 Leçon 2
Précédent
Suivant

Découvrez comment composer une page d’accueil WordPress avec Gutenberg : ajoutez une présentation, affichez les derniers projets avec un bloc de requête et ajustez la mise en page depuis l’éditeur de site.

Détails de la leçon

Description de la leçon

Cette leçon montre comment mettre en page une page d’accueil WordPress à l’aide de l’éditeur de blocs Gutenberg. À partir d’une page déjà définie comme page d’entrée du site, vous ajoutez un titre de niveau 2, un paragraphe de présentation et un titre de niveau 3 afin de construire une hiérarchie claire et pertinente pour les visiteurs comme pour le référencement.

Vous insérez ensuite un bloc de publications pour afficher automatiquement les trois articles les plus récents, qui représentent ici les projets du photographe. La requête est configurée pour sélectionner les articles, les trier du plus récent au plus ancien et en limiter le nombre à trois. Vous modifiez le modèle de publication pour faire apparaître le titre de chaque article sous son image mise en avant et vérifiez que les titres et images renvoient vers les pages correspondantes.

La leçon aborde également plusieurs ajustements visuels. Vous choisissez le modèle de page sans titre afin de masquer le titre « Accueil » sur le site, puis augmentez la largeur du contenu dans l’éditeur de thème. Enfin, vous organisez les textes dans une colonne de mise en page, les alignez à gauche et ajoutez une marge supérieure pour équilibrer l’espace. Ces manipulations illustrent un processus pratique d’itération entre l’éditeur et le front office pour obtenir une page d’accueil cohérente et adaptée aux besoins du site.

Objectifs de cette leçon

À l’issue de la vidéo, vous saurez structurer le contenu d’une page d’accueil avec des titres et un paragraphe, configurer un bloc de publications pour afficher les derniers projets, modifier son modèle afin d’ajouter les titres des articles, choisir un modèle de page sans titre et ajuster la largeur, l’alignement ainsi que les marges de la mise en page.

Prérequis pour cette leçon

Disposer d’un site WordPress avec accès au tableau de bord et à l’éditeur de site. Une page définie comme page d’accueil et quelques articles publiés faciliteront la mise en pratique. Aucune connaissance avancée du code n’est nécessaire.

Métiers concernés

Ces compétences sont utiles aux photographes indépendants souhaitant présenter leurs projets, aux concepteurs de sites WordPress, aux intégrateurs web et aux gestionnaires de contenu chargés de créer ou de maintenir des sites vitrines et des portfolios professionnels.

Alternatives et ressources

La mise en page peut être réalisée avec l’éditeur de blocs natif Gutenberg ou avec un constructeur de pages compatible avec WordPress, comme Elementor ou Beaver Builder. Les mêmes principes de structure et de présentation peuvent aussi être appliqués avec des modèles de blocs personnalisés ou des réglages de thème, selon les fonctionnalités disponibles.

Questions & Réponses

Ajoutez un bloc de publications ou de requête, choisissez les articles comme type de publication, triez-les du plus récent au plus ancien et définissez une limite de trois éléments. Le bloc affichera alors les contenus correspondants, à mesure que de nouveaux articles seront publiés.
Modifiez la composition du bloc de publications et repérez le modèle de publication utilisé pour chaque résultat. Insérez le bloc de titre à l’intérieur de ce modèle, et non à l’extérieur : il affichera alors le titre de chaque article de la requête plutôt que celui de la page d’accueil. Vous pouvez également activer un lien vers l’article.
Dans les réglages de la page, sélectionnez le modèle « Page sans titre » si le thème le propose. Pour élargir la zone de contenu, ouvrez l’éditeur de site, accédez aux styles puis à la mise en page et augmentez la largeur de contenu. Vous pouvez ensuite affiner l’alignement et les marges des blocs.