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

Bienvenue dans la partie 3 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 partie 2 de cette série, nous avons créé notre modèle de publication d'évaluation de produit à l'aide des paramètres intégrés d'Extra et de Visual Builder. Avec le nouveau modèle de publication, vous avez pu ajouter des publications supplémentaires et les attribuer à leurs catégories respectives.

Aujourd'hui, nous allons créer deux mises en page de catégories à l'aide du générateur de catégories d'Extra. La première mise en page affichera les articles/avis sur les produits sur votre page d'accueil, mettant en évidence les avis les plus récents et les plus populaires. La deuxième mise en page présentera toutes les catégories sur une seule page à l'aide du module de curseur carrousel. Une fois que vous aurez terminé ce didacticiel, vous aurez une bonne base pour un site d'évaluation de produits bien conçu.

Voici un aperçu de ce que nous allons construire

Préparation des éléments de conception

Étant donné que les mises en page des catégories dépendent en grande partie du contenu de la publication, assurez-vous d'ajouter suffisamment de publications pour que vous puissiez avoir une idée de l'apparence du site une fois que vous aurez ajouté votre propre contenu. Comme indiqué dans la partie 2 de cette série, mes mises en page de catégories sont remplies de 4 catégories et de 3 produits dans chaque catégorie. J'utilise des images d'archives de Shutterstock pour les images en vedette de mes publications.

Pour concevoir les mises en page des catégories, nous utiliserons le générateur de catégories d'Extra et un peu de CSS personnalisé.

Commençons.

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

Abonnez-vous à notre chaîne Youtube

Construire la disposition des catégories pour la page d'accueil

Par défaut, extra utilise une disposition de catégorie pour la page d'accueil. Pour créer une mise en page personnalisée, à partir de la barre latérale du tableau de bord WordPress, accédez à Extra > Category Building . Recherchez la mise en page de la catégorie déjà nommée «page d'accueil», puis survolez-la et sélectionnez modifier.

Ensuite, cliquez sur « Effacer la mise en page » dans le menu du constructeur violet afin d'effacer la mise en page par défaut actuelle.

Nous pouvons maintenant commencer à créer notre mise en page personnalisée. Commencez par ajouter une colonne deux tiers un tiers à la ligne de la section standard.

Dans la colonne de gauche (deux tiers), ajoutez un curseur de publications en vedette.

Mettez à jour les paramètres du module de curseur de publications en vedette comme suit :

Sous l'onglet Contenu…

Catégories : Tous
Afficher uniquement les articles en vedette : [Je garderais cette option désactivée jusqu'à ce que vous décidiez des articles que vous souhaitez afficher. Vous pouvez désigner un certain message comme présenté dans la zone Paramètres supplémentaires de la page de l'éditeur de message.]
Afficher l'auteur : OFF
Afficher la date : OFF

Sous l'onglet Conception…

Couleur de la flèche de navigation : #ffffff
Arrière-plan de la flèche de navigation : #000000
Arrière-plan de la légende : rgba(255,255,255,0.4)
Taille de la police du titre : 24 px
Couleur du texte du titre : #000000
Taille de la police méta : 16px
Couleur du méta-texte : #000000
Marge personnalisée : en bas 0px

Sous l'onglet Avancé…

Saisissez le CSS personnalisé suivant dans la zone de texte Élément principal :

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

Enregistrer les paramètres

Ajoutez maintenant un module de texte à la colonne de droite (un tiers) et mettez à jour les paramètres du module de texte comme suit :

Sous l'onglet Contenu, ajoutez le code HTML suivant à l'onglet texte de la zone de contenu :

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

Le lien ici est destiné à servir de bouton CTA fictif. Vous pouvez choisir de l'utiliser comme vous le souhaitez. Mettez simplement à jour l'URL et le texte du lien.

Astuce : Vous pouvez utiliser Bloom pour déclencher une boîte de dialogue d'inscription par e-mail lorsque vous cliquez sur ce CTA. De cette façon, les visiteurs pourront rester informés aujourd'hui des produits de votre campagne de marketing par e-mail. Pour ce faire, vous devrez installer Bloom, ajouter un formulaire contextuel et intégrer votre fournisseur de messagerie. Choisissez ensuite d'afficher la popup en cliquant sur le sélecteur CSS « ​​a.join-cta » qui correspond à la classe de lien dans le code html ci-dessus.

Vous pouvez également en savoir plus sur la façon de faire apparaître le formulaire d'option de floraison lorsque vous cliquez sur un bouton.

Revenons maintenant aux paramètres du module de texte.

Sous l'onglet Conception…

Taille de la police du texte : 40 px (ordinateur de bureau), 24 px (tablette et smartphone)
Taille de la police d'en-tête : 42 px (ordinateur de bureau), 38 px (tablette), 28 px (smartphone)
Rembourrage personnalisé : 40px (en haut), 15px (à droite), 15px (en bas), 15px (à gauche)

Enregistrer les paramètres

Allez maintenant dans les paramètres de ligne afin que nous puissions styliser l'arrière-plan de la ligne.

Ensuite, mettez à jour les éléments suivants :

Sous l'onglet Contenu…

Contexte : #ffffff

Sous l'onglet Conception…

Faire cette ligne pleine largeur : OUI
Égaliser les hauteurs de colonne : OUI

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

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-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);
-moz-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);
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);

Enregistrer les paramètres

Découvrez votre section de curseur personnalisée maintenant.

Vous avez l'air bien jusqu'à présent.

Nous allons continuer. Revenez au générateur de catégories et ajoutez une section standard sous la section actuelle et ajoutez une ligne à une colonne avec un module de texte.

Mettez ensuite à jour les paramètres du module de texte comme suit :

Sous l' onglet Contenu , ajoutez ce titre html dans l'onglet texte de la zone de contenu :

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

Sous l'onglet Conception…

Orientation du texte : Centre
Police d'en-tête : B (gras)
Taille de la police d'en-tête : 48 px (ordinateur de bureau), 42 px (tablette), 36 px (smartphone)

Enregistrer les paramètres

Cela servira de titre à la section ci-dessous qui affichera vos avis sur les produits.

Ajoutez ensuite une section de spécialité avec la structure de colonne trois quarts un quart suivante :

Dans la section de gauche (trois quarts), ajoutez une ligne à deux colonnes.

Dans la colonne de gauche de cette ligne, ajoutez un module de messages

Mettez ensuite à jour les paramètres du module Messages sous l'onglet Contenu en attribuant une catégorie au module. De cette façon, le module Messages n'affichera que cette catégorie. Pour ce faire, je vais sélectionner « Vêtements » comme catégorie.

Ensuite, mettez à jour les éléments suivants :

Afficher l'auteur : NON
Date d'exposition : NON

Enregistrer les paramètres

Dupliquez ce module de messages afin que vous ayez deux modules de messages empilés sur la colonne de gauche et 2 sur la droite.

Mettez ensuite à jour les paramètres de chaque module avec une catégorie différente. Les catégories que j'ai sont les vêtements, l'électronique, la cuisine et la santé et la forme physique.

Si vous souhaitez ajouter un module de publications qui affiche des critiques de vidéos, vous pouvez l'ajouter ici. Vous devrez d'abord ajouter une nouvelle catégorie de publication appelée Vidéo, attribuer à la catégorie la couleur #222222. Créez ensuite un nouveau message, sélectionnez « Vidéo » pour le format et ajoutez l'URL de la vidéo à la boîte d'options de format vidéo intégrée d'Extra.

Ensuite, vous pouvez ajouter le contenu de votre boîte de révision à afficher sous la vidéo.

Une fois que vous avez téléchargé quelques vidéos, assurez-vous de les ajouter à la catégorie Vidéo. Revenez ensuite au générateur de catégories de votre page d'accueil et ajoutez une ligne à une colonne sous la ligne contenant vos quatre modules de publications. Ensuite, dupliquez un module de messages de la ligne précédente et ajoutez-le à la nouvelle ligne. Dans les paramètres du module Messages sous l'onglet Contenu, sélectionnez la catégorie « Vidéo ». Vous avez maintenant un module de publications qui affichera des vidéos.

Dans la zone de droite (barre latérale) de la section spécialisée, nous allons ajouter deux autres modules de publication empilés les uns sur les autres.

Pour le premier, mettez à jour les paramètres du module Messages pour inclure « Toutes » les catégories. Sélectionnez ensuite la méthode de tri « Meilleure note ».

Dupliquez ce module de publications afin qu'un autre s'empile en dessous. Ensuite, mettez à jour la méthode de tri sur celle-ci sur "La plus populaire".

Allez-y et mettez à jour la publication pour enregistrer vos paramètres. Voici à quoi devrait ressembler la mise en page jusqu'à présent.

Ensuite, dupliquez (ou copiez) la deuxième section principale contenant le module de texte avec le titre « Revues de produits ».

Faites ensuite glisser (ou collez) la section dupliquée sous la section de spécialité. Dans la nouvelle section, mettez à jour le contenu des paramètres du module de texte avec le code html suivant :

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

Enregistrer les paramètres

Ensuite, nous allons ajouter un flux de blog qui affiche toutes les critiques de produits en commençant par la plus récente.

Sous le module de texte que vous venez de mettre à jour, ajoutez un module de maçonnerie de flux de blog à la colonne. Dans les paramètres du module de maçonnerie du fil de blog, sous l'onglet Contenu, sélectionnez toutes les catégories que vous souhaitez afficher dans le fil.

Enregistrer les paramètres

Et enfin, sous le module de maçonnerie de flux de blog, ajoutez un module de carrousel de messages. Mettez à jour les paramètres du module Carrousel de publications sous l'onglet Contenu pour inclure toutes les catégories et sélectionnez OUI pour afficher uniquement les publications en vedette.

Ce carrousel est destiné à afficher uniquement les articles que vous avez sélectionnés en tant qu'articles en vedette lors de la création de vos articles d'évaluation de produit.

Voyons maintenant à quoi ressemble la mise en page finale.

Ajout de quelques lignes de CSS personnalisé

Pour rassembler le design, nous devons ajouter quelques lignes de CSS personnalisé. Accédez au Personnalisateur de thème > CSS supplémentaire et ajoutez ce qui suit en haut du code CSS actuel déjà présent :

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
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);
border-top: 10px solid;
}

Ensuite, à l'intérieur des crochets de requête multimédia définis sur une largeur minimale de 980 pixels, ajoutez ce qui suit :

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

Le premier extrait CSS ajoute une ombre légèrement plus sombre et une bordure supérieure plus haute aux modules. Le second personnalise le bouton « Rejoindre maintenant » dans la section supérieure.

Eh bien, c'est tout pour la mise en page de la catégorie Page d'accueil. Voici à quoi ressemble le résultat final :

En plus de la disposition des catégories de la page d'accueil, ajoutons une disposition plus simple pour afficher toutes nos catégories sur une seule page.

Construire la mise en page « Toutes les catégories »

Cette mise en page est vraiment simple à créer maintenant que tous vos messages sont chargés, vos catégories définies et le style du thème en place. Le but de cette mise en page est de créer une page qui affiche toutes les catégories et tous les produits sur une seule page. Cela peut être fait de différentes manières, mais avec Extra, je voulais profiter du module de carrousel de publications pour afficher les catégories et les publications dans une mise en page similaire à ce que vous verriez sur les sites de streaming vidéo comme Hulu et Netflix.

Pour ajouter la mise en page, faites défiler jusqu'en haut de la mise en page de votre catégorie actuelle et sélectionnez Ajouter nouveau. À l'aide du générateur Catégorie, ajoutez une ligne à une colonne à une section standard. Ajoutez ensuite un module de texte à la ligne. Mettez à jour les paramètres du module de texte, sous l'onglet Contenu pour inclure la balise h1 suivante dans la zone de contenu :

<h1 class="subtitle fancy"><span>All Categories</span></h1>

Enregistrer les paramètres

Ajoutez ensuite un module Carrousel de messages sous le module Texte. Dans les paramètres du module Carrousel de messages, sélectionnez Vêtements comme catégorie.

Enregistrer les paramètres

Ajoutez ensuite un module de texte sous le carrousel de publications de la catégorie Vêtements. Dans les paramètres du module de texte, ajoutez le lien suivant à la zone Contenu sous l'onglet Contenu :

<a href="/category/clothing">view all clothing reviews</a>

L'URL et/ou le texte du lien peuvent devoir changer en fonction de votre site, mais l'idée est de créer un lien vers la page de catégorie pour cette catégorie particulière afin d'afficher toutes les critiques de produits pour cette catégorie.

Sous l'onglet Conception, modifiez l'orientation du texte sur « Droite ».

Enregistrer les paramètres

Pour afficher les trois catégories suivantes de la même manière, répétez le processus d'ajout d'un module de carrousel de messages affecté à une catégorie spécifique, suivi d'un module de texte contenant un lien vers la page de catégorie correspondante.

Dans la zone de catégorie à droite du générateur, ajoutez une nouvelle catégorie appelée « Toutes les catégories » et sélectionnez-la pour cette mise en page. De cette façon, chaque fois que nous créerons un lien vers la page de catégorie "Toutes les catégories", ce modèle s'affichera.

La mise en page finale devrait ressembler à ceci lorsque vous avez terminé.

Et voici à quoi ressemble la disposition des catégories sur le site.

Vous pouvez le dire maintenant car nous n'avons pas encore beaucoup de produits ajoutés, mais cela finira par fonctionner comme un moyen pratique de parcourir les produits pour chaque catégorie à l'aide du module de curseur de carrousel de publications.

C'est tout pour le post d'aujourd'hui. J'espère que vous avez apprécié la partie 3 de cette série en 4 parties sur la création d'un site d'évaluation de produits avec Extra.

J'espère que vous ne vous fatiguez pas encore, nous avons un dernier post à faire dans notre série.

À venir

Dans le dernier article de notre série, nous personnaliserons l'en-tête et les éléments de navigation de notre site d'évaluation de produits. En plus de créer votre menu, je vais vous montrer un moyen sympa d'attribuer des couleurs à vos liens de menu qui correspondent aux couleurs des catégories sur l'ensemble du site. Je vais également vous montrer comment créer des méga menus en quelques clics.

J'ai hâte de construire ensemble la dernière partie de notre site Web.

Comme toujours, n'hésitez pas à soumettre des commentaires ci-dessous.