Guide WordPress : Création d’une vignette

Créer ses propres vignettes stylées sur WordPress !

Introduction : les vignettes dans WordPress

Pour que les articles WordPress soient bien visibles et attirent l’œil, les vignettes sont importantes. Ce guide explique comment des vignettes encadrées et originales peuvent être créées. C’est facile et cela change tout !

Qu'est-ce qu'une vignette et pourquoi est-ce important ?

  • Explication simple : Une vignette est comme la couverture d’un livre. C’est la première chose qui est vue, et cela donne envie de cliquer pour lire la suite.
  • Importance : De bonnes vignettes apportent plus de clics, plus de lecteurs, et donnent un aspect professionnel au site web.

Les outils nécessaires 

  • WordPress : C’est là où les articles sont écrits.
  • Elementor (gratuit) : Un outil super pour la création facile de pages et de construction par blocs.

Étape par étape : La création d'une vignette avec Elementor 

Ajouter le conteneur principal

Dans la barre à gauche, sélectionner un Conteneur et le glisser sur la page. Ensuite sélectionner une Direction de l’élément en Colonne – vertical.

ajouter un élément flexbox wordpress
Glisser un conteneur vers le constructeur de page
direction verticale élément wordpress
Choisir la direction de l'élément

Ajouter une image

Dans la barre à gauche, sélectionner un élément Image et le glisser dans le conteur principal précédemment ajouté.

Lui associer une image depuis votre médiathèque et lui choisir une taille de Thumbnail 150 x 150.

ajouter un élément image wordpress
Glisser un élément de type image dans le conteneur principal
taille image wordpress
Adapter la taille de l'image en 150 x 150

Ajouter un titre de vignette

Toujours dans la barre latérale de gauche, sélectionner un élément Titre et le glisser sous l’image. Lui donner le contenu texte de son choix. Penser à lui donner une autre balise HTML que H2 qui ne correspondra pas à la définition d’un tel titre. Il est conseillé de centrer le titre afin d’avoir un design cohérent.

ajouter un élément titre wordpress
Glisser un élément de type titre sous l'image
balise html h1 h2 h3 h4 wordpress
Changer la balise en H3 ou H4 selon votre structure
alignement élément centre wordpress
Centrer le titre

Ajouter un Éditeur de texte

De la même manière que le titre, ajouter un élément Éditeur de texte sous le titre. Il servira à décrire ce que la vignette met en avant. Le centrer n’est pas obligatoire c’est un choix comme un autre.

ajouter un élément éditeur de texte wordpress
Glisser un élément de type Éditeur de texte sous le titre

La réutilisation du modèle de vignette

Enregistrer comme modèle

Afin de pouvoir réutiliser votre vignette partout dans votre site web sans devoir tout refaire à chaque fois, il est important de sauvegarder votre création comme un modèle. Pour cela il va falloir faire un clic droit sur le menu du conteneur principal et sélectionner Enregistrer comme modèle.

enregistrer comme un modèle wordpress
Enregistrer l'élément principal comme modèle

Importer le modèle existant

Lorsque un modèle est sauvegarder, il est alors possible de le réutiliser. Pour cela il faut aller en bas de page et sélectionner l’icone Ajouter un modèle. Choisir ensuite votre modèle pour l’insérer sur votre page.

importer un modèle wordpress
Ouvrir un modèle en sélectionnant l'icone pour ajouter un modèle

Conclusion : Devenir un pro des vignettes !

Avec ce guide, toutes les cartes sont en main pour que de superbes vignettes soient créées sur WordPress ! Il ne faut pas hésiter à expérimenter avec les couleurs, les polices et les images pour que les vignettes soient vraiment uniques et adaptées à votre contenu !

Vous pouvez voir quoi faire de ces vignettes dans le guide sur la création de présentation des services.

Tutoriel en vidéo Youtube

Il vous sera plus facile de suivre le tutoriel avec la vidéo à vos cotés. Vous pouvez aussi voir les autres guides pour votre création de site sous WordPress.