Construire une page d’accueil avec un thème basé sur des blocs

Dans ce tutoriel, nous allons créer une page d’accueil en utilisant un thème basé sur des blocs sans recourir à des extensions ni à du code.

Objectifs d’apprentissage

1. Configurer une page d’accueil statique.
2. Créer une entête et un pied de page pour votre modèle de page.
3. Ajouter différents types de blocs et compositions de blocs à votre page d’accueil et les modifier.
4. Utiliser la barre d’outils et colonne latérale des réglages des blocs.

Questions de compréhension

1. Quel modèle voulez-vous assigner à votre page d’accueil ?
2. Êtes-vous à l’aise avec l’utilisation des compositions d’entête et des compositons de pied de page ?
3. Quelle est la fonction du bloc Contenu ?

Transcription

Bonjour et bienvenue sur Learn WordPress. Aujourd’hui, nous allons construire une page d’accueil avec un thème basé sur des blocs. La page d’accueil est le centre principal de votre site et sert de vitrine à votre marque . Elle devrait inciter les internautes à explorer davantage votre site et, bien sûr, capter leur attention. Dans la session d’aujourd’hui, nous allons définir une page d’accueil statique, créer un élément de modèle d’entête et de pied de page, supprimer le titre du site et construire la page d’accueil à l’aide de l’éditeur de blocs. L’objectif est de recréer cette page d’accueil que j’ai déjà réalisée. J’ai uniquement utilisé des blocs pour créer cette page d’accueil ayant pour thème le voyage, et j’ai essayé de créer des opportunités pour inciter l’internaute à explorer davantage le site web.

Tout d’abord, j’ai créé trois articles. J’ai ajouté tous les médias que j’utiliserai pour mon site web. J’ai créé des pages pour mon menu de navigation, j’ai installé le thème basé sur des blocs Twenty Twenty-Two, et maintenant nous allons cliquer sur le menu « Réglages » puis sur « Lecture ».

La prochaine étape consiste à définir une page d’accueil statique, sélectionnez une page statique et définissez votre page d’accueil ainsi que votre page des articles, puis cliquez sur « Enregistrer les modifications ». Lorsque nous revenons aux pages, nous remarquerons maintenant que cela indique « Page des articles » à côté de blog et « Page d’accueil » à côté de la page d’accueil. Lorsque nous ouvrons notre page d’accueil, nous constatons qu’elle a été attribuée au modèle par défaut, qui est le modèle de page, ce qui signifie qu’elle partagera les mêmes entête et pied de page que les autres pages. Si vous le souhaitez, vous pouvez créer un modèle personnalisé unique spécifique à la page d’accueil en cliquant sur « Nouveau  ».

Une fois que vous avez défini votre page d’accueil statique, rendez-vous dans « Apparence » et cliquez sur « Éditeur ». Cela vous amènera à votre éditeur de site. Cliquez sur la « Vue en liste » pour avoir une meilleure idée de la structure de la page, et la première chose que nous allons faire est de supprimer le titre de la publication. Ensuite, si nous cliquons sur le contenu de la page, rappelez-vous que c’est là que le contenu de votre page sera affiché. Je vais utiliser des compositions pour remplacer l’entête actuel. Une fois que vous avez sélectionné le bloc parent, cliquez sur « Remplacer », puis recherchez la composition pertinente qui répond à vos besoins. Je recherche la composition d’entête avec le logo du site au milieu et les éléments de navigation sur les côtés. Ensuite, j’ajouterai les liens vers mes pages ainsi que le logo du site. Enfin, je souhaite changer la couleur de fond en blanc et la couleur du texte ainsi que des liens en noir.

Maintenant, nous pouvons suivre le même processus pour le pied de page. Sélectionnez le bloc pied de page, cliquez sur « Remplacer », et trouvez la composition de pied de page pertinente. Voilà !

Nous avons terminé la configuration de notre modèle, maintenant nous pouvons commencer à ajouter du contenu à notre site. Cliquez sur l’icône WordPress ou l’icône du site pour revenir au tableau de bord. Ouvrez la page d’accueil et maintenant nous pouvons commencer à créer. La première chose que je veux ajouter est une image à la une, donc je vais ajouter une composition de blocs. Je vais me rendre dans le répertoire des compositions et taper « bannière ». Une fois que vous avez trouvé la composition que vous recherchez, vous pouvez simplement la copier et la coller dans votre page, puis commencer à la modifier.

Tout d’abord, je vais remplacer l’image d’arrière-plan, modifier l’opacité, puis commencer à personnaliser le contenu, et en un rien de temps, vous aurez une bannière accompagnée par du texte. Ensuite, j’insérerai un bloc « Galerie » et sélectionnerai trois images de ma bibliothèque de médias. Ensuite, je vais cliquer sur la « Vue en liste  », sélectionner le bloc « Galerie », changer l’alignement en pleine largeur et l’espacement du bloc à zéro.

Après le bloc « Galerie », je veux ajouter une offre spéciale, et pour cela, j’utiliserai un un bloc « Titre » et un bloc « Colonnes ». Je vais commencer par écrire « Offre spéciale », changer l’alignement au centre et appuyer sur « Entrée ». Ensuite, j’ajouterai un bloc « Colonnes » avec deux colonnes. J’ouvrirai la « Vue en liste » pour m’assurer d’avoir sélectionné le bloc parent. Je vais changer l’alignement du bloc en pleine largeur. Dans la colonne de gauche, j’ajouterai une image, je changerai le style pour qu’elle soit arrondie, ajouterai une légende, j’ajouterai un bloc « Boutons » en disant que vous obtiendrez 15% de réduction avec cette offre spéciale. Je vais changer l’alignement au centre, le rayon à 100, ajouter un lien et changer l’arrière-plan en noir ; puis je ferai exactement la même chose dans la colonne de droite. Avant de continuer, je voudrais créer de l’espace en utilisant des blocs « Espacement ».

Maintenant, je vais insérer un bloc « Boucle de requête » pour afficher certains de mes derniers articles. Ajoutons donc un titre que nous appellerons « Où aller ensuite ». Je vais changer l’alignement en pleine largeur et l’alignement du texte au centre. Après avoir appuyé sur « Entrée », j’insérerai le bloc « Boucle de requête » et cliquerai sur « Partir de zéro ». Ensuite, je choisirai l’option « Image, date et titre » ainsi que la « Vue en grille ». Je changerai ensuite l’alignement en pleine largeur. Sélectionnez l’une des images et, dans les réglages de la colonne latérale, modifiez la hauteur pour vous assurer que toutes les images sont exactement de la même taille et répondent à vos besoins. Enfin, cliquez sur la « Vue en liste » et supprimez tout bloc que vous ne jugez pas important. Par exemple, le bloc « Pagination », le bloc « Aucun résultat » et le bloc « Date ».

Après avoir ajouté un autre bloc « Espacement », je vais insérer un bloc « Bannière ». Je choisirai l’une des images de ma « Médiathèque », changerai l’alignement en pleine largeur, puis l’agrandirai, et modifierai le sélecteur de point focal en conséquence. Je changerai également l’opacité pour la rendre légèrement plus sombre. Une fois que nous aurons fait cela, nous pourrons commencer à ajouter notre contenu. Dans ce cas, je vais présenter aux gens certaines des principales destinations de voyage en 2022. Comme vous l’avez remarqué, vous pouvez changer la taille de votre texte dans les réglages de la barre latérale. Ensuite, j’ajouterai un bloc « Boutons ». Je mettrai le texte en gras, la couleur du texte en noir et la couleur de fond en blanc. Ensuite, je mettrai le rayon à 100 et j’ajouterai un lien.

Ensuite, nous voulons présenter notre équipe aux internautes, je vais ajouter un bloc « Média et texte ». Après avoir changé l’alignement en pleine largeur, nous ajouterons une image du côté gauche et le texte approprié ainsi qu’un bouton du côté droit. Nous suivrons les mêmes étapes ou le même processus que dans les exemples précédents.

Ensuite, j’aimerais insérer une composition d’appel à l’action. Cliquez sur « Tout parcourir », puis rendez-vous dans les compositions. Je vais chercher une compositions de boutons et une fois que vous cliquez sur la composition, elle s’insérera immédiatement dans votre page. Maintenant, je vais continuer et modifier le contenu. La mise en place d’une inscription à votre newsletter est une autre façon d’engager les internautes et d’établir un contact avec ces personnes. J’ai seulement changé le texte et n’oubliez pas d’ajouter un lien URL à votre bouton.

Enfin, je vais ajouter un bloc « Galerie » avec six images. Assurez-vous de sélectionner le bloc parent dans la « Vue en liste » et changez votre galerie pour afficher six colonnes. Ensuite, descendez et définissez l’espacement du bloc à zéro, et une fois que vous avez changé l’alignement en pleine largeur, vous êtes bon. Lorsque je clique sur « Prévisualiser dans un nouvel onglet », je pourrai voir ma page d’accueil terminée qui a été créée sans aucune extension ou code.

Je vous souhaite tout le meilleur dans votre utilisation d’un thème basé sur des blocs pour créer votre propre page d’accueil et site web.