Création d'un site d'évaluation de produits avec extra - Partie 2

Bienvenue dans la partie 2 de cette série en 4 parties sur la façon de développer un site d'évaluation de produits à l'aide d'Extra. Si vous vous demandez comment commencer à développer un site d'évaluation de produits, cette série est pour vous. Avec sa fonctionnalité de révision intégrée et sa catégorisation intelligente des publications, Extra est spécialement équipé pour créer de superbes critiques, des modèles de publication de produits, des méga menus et des présentations de catégories en quelques minutes. Rejoignez-moi alors que nous explorons la puissance d'Extra.

Dans la première partie de cette série, nous avons commencé notre aventure de création d'un site d'évaluation de produits en configurant les options de thème et les paramètres de personnalisation de thème.

Aujourd'hui, nous allons commencer en ajoutant notre première critique de produit en tant que nouveau message et en personnalisant la mise en page de ce message à l'aide de Divi Builder et des paramètres de thème supplémentaires. Une fois que vous aurez terminé ce didacticiel, vous disposerez d'un modèle de publication enregistré que vous pourrez extraire de votre bibliothèque pour créer facilement le reste de vos publications.

Voici un aperçu de ce que nous allons construire

Préparation des éléments de conception

Puisque nous ajouterons nos produits dans cette partie de la série, vous aurez besoin de vos images de produits. Pour ce tutoriel, j'aurai 4 catégories avec 3 produits dans chaque catégorie donc j'utiliserai un total de 12 images. J'utilise des images de stock de shutterstock avec des arrière-plans blancs pour lui donner un aspect plus net.

Pour concevoir la mise en page de la publication, nous utiliserons le Visual Builder et un peu de CSS personnalisé.

Commençons.

Création d'un site d'évaluation de produits avec Extra - Partie 2

Abonnez-vous à notre chaîne Youtube

Ajouter votre première évaluation de produit en tant que nouveau message

Depuis le tableau de bord WordPress, accédez à Publications > Ajouter un nouveau .

Chaque article sera votre avis sur le produit, donc le nom de votre article doit être le nom de votre produit. Étant donné que mon produit va être un tracker de fitness, je vais entrer "Fitness Tracker" comme titre de mon message.

Remarque : si vous ne l'avez pas déjà fait, c'est le bon moment pour définir vos paramètres de permalien sur l'option « Poster le nom » afin que votre URL ne contienne que le nom du produit (votre préférence bien sûr).

Ensuite, cliquez sur le bouton « Utiliser Divi Builder » puis sur le bouton « Utiliser Visual Builder » pour déployer le Visual Builder.

À partir de Visual Builder, insérez une ligne à une colonne et ajoutez un module de texte à la colonne.

Dans l'onglet contenu des paramètres du module de texte, entrez le code html suivant dans la zone de contenu (assurez-vous que vous travaillez dans l'onglet « texte » et non dans l'onglet « visuel » :

<h2 class="subtitle fancy"><span>Product Description</span></h2>

Cela servira de sous-titres « de fantaisie » pour différentes sections. Nous le styliserons plus tard avec du CSS personnalisé.

Juste en dessous de la balise h2, vous pouvez ajouter le texte de description de votre produit. J'utilise du "lorem ipsum" pour l'instant.

Ajoutez une autre ligne d'une colonne sous votre ligne actuelle et ajoutez-y un autre module de texte. Dans les paramètres du module de texte, ajoutez un autre sous-titre html en insérant la balise h2 « pour et contre » suivante dans l'onglet texte de votre section de contenu.

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

Ceci commencera la section Avantages et inconvénients de votre évaluation de produit.

Ajoutez ensuite une ligne moitié moitié (deux colonnes) sous la précédente. Dans la colonne de gauche, ajoutez un module de texte et mettez un titre h3 avec le texte « Pros ».

Maintenant, dupliquez ce module de texte et faites glisser le module dupliqué vers la colonne de droite. Remplacez le titre h3 dans le nouveau module de texte par « Contre ».

Astuce : Dans le Visual Builder, vous pouvez simplement cliquer sur la zone de texte et taper le nouveau titre au lieu d'ouvrir les paramètres.

Ensuite, nous allons utiliser le module de présentation pour ajouter des sous-éléments sous les titres Avantages et Inconvénients.

Dans la colonne de gauche, sous le module de texte « Pros », ajoutez un module Blurb. Dans l'onglet contenu des paramètres Blurb, ajoutez une ligne de texte (j'utilise du texte factice pour l'instant) dans la zone de contenu.

Ensuite, faites défiler vers le bas et sélectionnez "Utiliser l'icône". Dans la zone Icône qui apparaît, sélectionnez le symbole plus.

Cliquez sur l'onglet Conception et mettez à jour les éléments suivants :

Couleur de l'icône : #ffffff

Icône de cercle : OUI

Couleur du cercle : #5bd999

Placement des images/icônes : à gauche

Enregistrer les paramètres

Dupliquez (ou copiez) ce module de présentation et faites-le glisser (ou collez-le) sous le module de texte « Contre ». Mettez ensuite à jour l'onglet Conception des paramètres Blurb avec la couleur de cercle suivante : #e6567a

Enregistrer les paramètres

Maintenant, dupliquez les modules de présentation dans chaque colonne plusieurs fois car nous ne savons pas combien vous pourriez avoir besoin pour un certain produit.

Allez maintenant dans les paramètres de ligne qui contiennent vos avantages et vos inconvénients. Sous l' onglet Contenu , mettez à jour les éléments suivants :

Arrière-plan de la colonne 1 : #f8f8f8

Arrière-plan de la colonne 2 : #f8f8f8

Sous l' onglet Conception , mettez à jour les éléments suivants :

Utiliser une largeur de gouttière personnalisée : OUI

Largeur de gouttière : 1

Égaliser les hauteurs de colonne : OUI

Remplissage de la colonne 1 : 20px (haut), 20px (droite), 20px (bas), 20px (gauche)

Remplissage de la colonne 2: 20px (haut), 20px (droite), 20px (bas), 20px (gauche)

Sous l' onglet Avancé , ajoutez le CSS personnalisé suivant à la zone de texte Élément principal de la colonne 1 :

 border-top: 10px solid #5bd999; 

Ajoutez le CSS suivant à la zone de texte Élément principal de la colonne 2 :

 border-top: 10px solid #e6567a; 

Astuce : Si vous disposez d'une version mise à jour d'Extra, vous devriez avoir la possibilité d'appliquer les nouvelles animations à votre site Web. Ajoutez une animation à la ligne Avantages et inconvénients en accédant aux paramètres de ligne sous l'onglet Conception et en sélectionnant le style d'animation souhaité. Cela fera apparaître votre section Avantages et inconvénients lorsque l'utilisateur fait défiler la page.

Enregistrer les paramètres

Dupliquez (ou copiez) la deuxième ligne contenant le sous-titre « Avantages et inconvénients » et faites-la glisser (ou collez) sous la ligne que nous venons de terminer. Modifiez ensuite l'en-tête h2 en « Spécifications ».

Dupliquez la ligne à deux colonnes qui contient les éléments de la liste des avantages et des inconvénients et placez-la sous le nouveau module de texte avec le titre « Spécifications ». Supprimez les deux modules de texte qui contiennent les en-têtes « Pros » et « Contrats » de la colonne.

Cliquez maintenant sur les paramètres de présentation pour le premier module de présentation dans la colonne de gauche.

Sous l' onglet Contenu , remplacez l'icône par une coche.

Sous l' onglet Conception , remplacez la couleur du cercle par #222222.

Enregistrer les paramètres

Supprimez maintenant les autres modules de présentation et remplacez-les par celui que vous venez de mettre à jour en les dupliquant et en les faisant glisser aux bons endroits.

Allez maintenant dans les paramètres de ligne et remplacez le CSS personnalisé dans les zones de texte Élément principal de la colonne 1 et Élément principal de la colonne 2 par ce qui suit :

border-top: 10px solid #222222;

Enregistrer les paramètres

Maintenant, la dernière chose que nous devons ajouter à cette mise en page de publication est un bouton « Acheter ». Allez-y et créez une nouvelle ligne à une colonne et ajoutez un module de bouton . Mettez ensuite à jour les paramètres du module de boutons comme suit :

Sous l'onglet Contenu…

Texte du bouton : Acheter maintenant

URL du bouton : [entrer l'URL] (il s'agira très probablement d'un lien d'affiliation vers un site tiers)

L'URL s'ouvre : dans le nouvel onglet

Sous l'onglet Conception…

Alignement des boutons : Centre

Couleur du texte : foncé

Utiliser des styles personnalisés pour le bouton : OUI

Taille du texte du bouton : 30 px

Couleur du texte du bouton : #222222

Couleur du texte de survol du bouton : #5bd999

Couleur d'arrière-plan du survol du bouton : #ffffff

Couleur de la bordure de survol du bouton : #5bd999

C'est tout pour votre section de contenu de la mise en page de votre article de produit. Assurez-vous d' enregistrer la page . Une fois que vous avez enregistré la page, quittez le générateur visuel pour modifier le message à partir du tableau de bord wordpress.

Ajouter des avis à votre message

Faites défiler vers le bas de la page de l'éditeur de publication et recherchez la case intitulée « Examiner le contenu de la boîte » .

Cet ajout intelligent à Extra vous permet d'ajouter une note de produit à vos publications. Le système de notation est conçu pour avoir une ou plusieurs pannes. Une ventilation est un élément qui compose la note globale. Par exemple, si vous évaluez un appareil photo, des exemples de pannes incluraient des éléments tels que la conception, les performances, la durée de vie de la batterie, etc. Ce sont des composants de l'appareil photo auxquels vous pouvez ajouter un pourcentage d'évaluation distinct. Extra calculera ensuite le pourcentage d'évaluation globale en fonction de ces composants et l'affichera dans la zone Révision. La zone de révision comporte également des zones de saisie utiles pour un titre de zone de révision, un résumé et un titre de résumé.

Pour ajouter votre avis, mettez à jour le contenu de la boîte d'examen avec les éléments suivants :

Titre de la zone de révision : [entrez le titre de la zone de révision] (je suggère « Revue de produit » ou « Revue éditoriale »)

Résumé : [entrer le résumé]

Titre du résumé : [entrez un titre pour le résumé] (j'utilise simplement « Résumé » pour rester simple)

Ajoutez ensuite quatre ventilations avec un titre et un pourcentage de notation comme suit :

Répartition #0

Titre : Conception

Note : 85 %

Répartition #1

Titre : Performance

Note : 90 %

Répartition #2

Titre : Autonomie de la batterie

Note : 70 %

Répartition #3

Titre : Caractéristiques

Note : 85 %

Maintenant que vous avez mis en place votre évaluation, mettons la touche finale à notre article avant de le publier.

Attribuez une catégorie à votre publication

Assurez-vous d'attribuer la bonne catégorie à votre article/produit en cochant la case à côté de la catégorie. Dans ce cas, puisque ce post est pour un tracker de fitness, je vais sélectionner la catégorie « Health & Fitness ». Décochez également la case "non classé".

Voici une ventilation des produits et de leurs catégories que j'utilise :

• Vêtements
  • Des chaussures
  • Regarder
  • Chaussettes fraîches
• Cuisine
  • Couteaux de cuisine
  • Mixer
  • Planche à découper
• santé et forme
  • Traqueur de Fitness
  • Poids
  • Tapis roulant
• Électronique
  • Caméra
  • Écouteurs
  • Ordinateur portable

Non loin de la page, vous trouverez la zone Paramètres supplémentaires. Ces commandes vous permettent de remplacer les paramètres de thème par défaut pour ce message particulier. Vous pouvez bien sûr personnaliser cela comme vous le souhaitez, mais pour cet exemple, je coche les cases suivantes :

Article en vedette (cela permet au produit d'être extrait en tant qu'article en vedette sur certains modules de catégorie.)

Masquer la boîte d'auteur

Enfin, ajoutez votre image vedette. Assurez-vous qu'il fait au moins 1280 px de large car nous utiliserons une mise en page pleine largeur à une colonne pour l'image en vedette.

Publiez votre message.

Allez-y et enregistrez ce modèle afin de pouvoir dupliquer ce processus pour tous vos produits/articles. Pour enregistrer le modèle, cliquez sur l'icône « Enregistrer dans la bibliothèque » dans le menu du générateur visuel au bas de la page, entrez un nom de modèle et cliquez sur Enregistrer dans la bibliothèque.

Maintenant, lorsque vous allez ajouter le reste de vos articles, vous pouvez charger ce modèle à partir de la bibliothèque et remplir le contenu pour la nouvelle évaluation du produit. Le processus devient alors beaucoup plus rapide.

Ajout de CSS personnalisé

On a presque terminé. Nous devons ajouter du CSS personnalisé à notre thème pour styliser certains éléments du message. Pour ce faire, à partir du tableau de bord WordPress, accédez à Personnalisateur de thème > CSS supplémentaire et saisissez ce qui suit :

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Enregistrer et publier

Voyons maintenant notre résultat.

Le système d'évaluation des utilisateurs

Notez qu'au bas de l'article, vous avez un système de rationnement par étoiles.

Ici, vos visiteurs peuvent soumettre une note de départ sur n'importe quel produit en survolant simplement les icônes en forme d'étoile et en cliquant sur le niveau d'étoile de leur choix.

La note globale de l'utilisateur sera affichée dans les métadonnées de l'extrait de publication.

Vous pouvez toujours choisir de désactiver cette fonctionnalité dans la zone Paramètres supplémentaires.

Eh bien c'est ça. J'espère que vous avez apprécié la partie 2 de cette série.

À venir : créer des présentations de catégories pour afficher vos produits

Dans la partie 3, je vais vous montrer comment créer les dispositions de catégorie pour la page d'accueil et la page Toutes les catégories. Assurez-vous d'utiliser votre nouveau modèle de publication pour ajouter au moins 3 produits pour chacune des 4 catégories afin de préparer la partie 3 de la série. Vous en aurez besoin pour remplir les modules de catégorie qui afficheront vos produits.

Voici ce que vous pouvez vous attendre à construire dans la partie 3 :

N'hésitez pas à soumettre vos questions ou commentaires ci-dessous. Je suis dans l'attente de votre réponse.