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

Bienvenue dans la partie 4 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 1, nous définissons nos options de thème et nos paramètres de personnalisation. Dans la partie 2, nous avons ajouté nos publications et créé une mise en page pour afficher nos critiques de produits. Dans la troisième partie de cette série, nous avons créé deux présentations de catégories pour notre site d'évaluation de produits : une pour notre page d'accueil et une pour la page « Toutes les catégories ».

Aujourd'hui, nous allons terminer notre site de revue de produits en créant notre disposition de catégorie par défaut, notre menu et notre pied de page. Le point culminant de la publication d'aujourd'hui sera le menu personnalisé qui contient des liens de menu qui correspondent à la couleur de leurs pages de catégorie correspondantes. Je vais également vous montrer comment déployer les options de méga-menu intégrées d'Extra et ajouter quelques personnalisations qui nous sont propres.

Voici un aperçu de ce que nous allons construire

Commençons.

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

Abonnez-vous à notre chaîne Youtube

Création de la page de catégorie par défaut

Extra est livré avec une page de catégorie par défaut déjà installée. La page de catégorie par défaut est la mise en page qui sera utilisée lors de l'affichage d'une page de catégorie qui n'a pas de mise en page de catégorie spécifique sélectionnée. Dans la partie 3 de cette série, nous avons désigné une disposition de catégorie pour notre page d'accueil et nous avons attribué notre page « Toutes les catégories » à la catégorie spécifique « Toutes les catégories ». Pour le reste de nos pages de catégories d'avis sur les produits, nous utiliserons cette disposition de catégorie par défaut.

Pour personnaliser notre disposition de catégorie par défaut, accédez au tableau de bord wordpress et accédez à Extra > Category Builder. Passez ensuite la souris sur la "Catégorie par défaut" et cliquez sur le lien Modifier.

Par défaut, votre catégorie par défaut a deux modules empilés l'un sur l'autre à l'intérieur d'une rangée d'une colonne d'une section standard. Avant d'apporter des modifications à la mise en page, assurez-vous de sélectionner l'option « Utiliser cette mise en page comme mise en page par défaut ? » dans la zone Utilisation de la mise en page dans la barre latérale droite.

Tout d'abord, remplacez le curseur de messages en vedette par un module de carrousel de messages. Mettez ensuite à jour les paramètres du module en cochant « Catégorie/étiquette/taxonomie actuelle » comme catégorie pour ce module. Désormais, ce module carrousel de messages n'affichera que les produits de la page de catégorie visitée. Assez intelligent, hein ?

Enregistrer et quitter

Vous pouvez laisser le module de maçonnerie de flux de blog à ses paramètres par défaut. Assurez-vous simplement que quel que soit le module de catégorie que vous ajouterez à cette page à l'avenir, la catégorie « Catégorie/Tag/Taxonomie actuelle » lui est attribuée.

Maintenant, afin de styliser le titre de votre page de catégorie h1, vous devez ajouter le CSS personnalisé suivant au CSS supplémentaire dans le personnalisateur de thème. Assurez-vous de le mettre dans une requête média avec une largeur minimale de 980px.

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

C'est tout pour la disposition des catégories par défaut. Voyons à quoi ressemble notre disposition par défaut sur ma page de catégorie de cuisine.

Maintenant que nous avons mis en place notre disposition de catégorie par défaut, attirons notre attention sur l'une des parties les plus importantes de notre site Web : le menu de navigation.

Nous avons déjà mis en place notre style d'en-tête de base dans la partie 1 de cette série. Mais aujourd'hui, nous allons créer et styliser notre menu de navigation principal.

Depuis votre tableau de bord WordPress, accédez à Apparence > Menus, puis sélectionnez Menus . Sélectionnez le lien « Créer un nouveau menu » en haut de la page et entrez le nom « Menu Catégories » comme nom de menu. Sélectionnez ensuite « Menu principal » comme emplacement d'affichage dans la section Paramètres du menu.

Nous pouvons maintenant commencer à ajouter nos éléments de menu à notre menu. Cliquez sur la bascule Catégories à gauche de la page. Dans les options qui s'affichent, sélectionnez « Tout afficher » pour vous assurer que vous pouvez voir toutes vos catégories disponibles. Cochez les 5 catégories que vous avez créées (non non classées) et cliquez sur le bouton Ajouter au menu pour les ajouter à la section de structure de menu à droite de la page. Vous pouvez maintenant cliquer et faire glisser chacun des éléments de menu à afficher dans l'ordre suivant :

• Électronique
• Vêtements
• Cuisine
• santé et forme
• toutes catégories

Avant de modifier les éléments du menu, sélectionnez le lien des options d'écran en haut de la page. Dans la section des propriétés du menu avancé qui s'ouvre, assurez-vous de cocher la case à côté de « Classes CSS ». Cela nous permettra d'ajouter une classe CSS personnalisée à chacun de nos éléments de menu.

Retournez à votre menu. En commençant par l'élément de menu Catégorie électronique, cliquez pour ouvrir les options de configuration. Dans la zone Classes CSS, ajoutez une classe nommée « verte ». Et pour l'option Extra Mega Menu, sélectionnez "Mega Menu 3 Featured".

Cela va accomplir deux choses. Tout d'abord, la classe « vert » sera utilisée pour rendre l'élément de menu vert en survol. Deuxièmement, l'option vedette du méga menu 3 ajoutera trois éléments vedettes en tant que méga menu lorsque vous survolez l'élément de menu.

Pour l'élément de menu de catégorie de vêtements, ajoutez la classe « bleu » et sélectionnez l'option « Mega Menu 3 en vedette » .

Pour l'élément de menu de catégorie de cuisine, ajoutez la classe « rose » et sélectionnez l'option « Mega Menu 3 en vedette » .

Pour l'élément de menu de la catégorie Santé et forme physique, ajoutez la classe « violet » et sélectionnez l'option « Mega Menu 3 en vedette » .

L'élément de menu "Toutes les catégories" va être légèrement différent. Allez-y et laissez la zone de texte Classes CSS vide. Et pour l'option Mega Menu, sélectionnez "Mega Menu List". Ce type de méga menu est un méga menu plus traditionnel qui crée une liste d'éléments de sous-menu. L'objectif de ce méga lien de menu est d'afficher toutes les catégories avec une liste de leurs produits en dessous.

Revenez en arrière et ouvrez la boîte des catégories et sélectionnez les quatre mêmes catégories (Électronique, Vêtements, Cuisine et Santé et forme) et ajoutez-les au menu. Faites ensuite glisser chacune des catégories que vous venez d'ajouter d'un niveau sous l'élément de menu méga "Toutes les catégories".

Basculez les options de configuration pour chacun de ces éléments de menu de catégorie et ajoutez les mêmes classes CSS à chacun comme vous l'avez fait précédemment. Voici les catégories avec la classe que vous devez ajouter :

Électronique – vert
Vêtements – bleu
Cuisine – rose
Santé et remise en forme – violet

Ensuite, nous allons ajouter notre propre image personnalisée pour servir d'image de catégorie vedette pour chaque catégorie dans le méga menu.

Utilisez un éditeur de photos pour réduire et recadrer chaque image pour avoir une largeur de 500px et une hauteur de 300px.

Ajoutez-les/faites-les glisser vers la bibliothèque WordPress Media.

Revenez maintenant à la page des menus dans WordPress Admin.

Dans cet exemple, le lien de catégorie supérieure dans mon méga menu est « Électronique ». Cliquez sur la flèche à droite de l'élément « Électronique ». Dans la zone Étiquette de navigation, ajoutez l'image souhaitée en utilisant la balise html img directement avant le texte « Electronics ». La balise d'image doit ressembler à ceci :

<img src="Insert Image Url" width="100%" />

Pour trouver l'url de l'image, allez dans Média → Bibliothèque. Cliquez sur l'image que vous souhaitez ajouter. Dans l'écran contextuel Détails de la pièce jointe, recherchez l'URL dans la section de droite, mettez-la en surbrillance, puis utilisez ctrl+c pour la copier dans votre presse-papiers.

Revenez maintenant à la configuration de l'élément de menu « Électronique » sur la page du menu et remplacez le texte « Insérer l'URL de l'image » en collant l'URL de votre image à l'aide de ctrl+v.

Répétez le même processus pour les 3 prochains éléments de menu de catégorie.

Une fois que vous avez ajouté les quatre balises d'image à chacun de vos éléments de menu de catégorie, il est temps d'ajouter vos éléments de menu de publications uniques (liens vers vos critiques de produits) sous chacune de leurs catégories respectives.

Cliquez pour ouvrir la boîte de messages sur la gauche et sélectionnez l'onglet « Tout afficher ». Sélectionnez ensuite vos 12 produits et cliquez sur Ajouter au menu. Faites ensuite glisser chacun des éléments du menu de publication d'un niveau sous chacune de leurs catégories.

Enregistrer le menu

Avant de découvrir notre nouveau menu, nous devons ajouter du CSS personnalisé pour mettre la touche finale à notre menu.

Accédez au Personnalisateur de thème > CSS supplémentaire et entrez le CSS suivant :

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

Enregistrez et publiez vos paramètres.

Voyons maintenant notre nouveau menu. Remarquez les couleurs des éléments de menu lorsque vous les survolez. Les couleurs correspondent à la couleur de leur catégorie correspondante.

Création du pied de page

Pour créer le pied de page de notre site de critiques de produits, nous allons profiter des widgets intégrés d'Extra pour afficher les dernières critiques de produits et une liste de catégories.

Nous devons d'abord aller dans Personnalisateur de thème > Paramètres de pied de page. Cliquez ensuite sur Disposition et sélectionnez une disposition à 2 colonnes.

Revenez en arrière et sélectionnez Typographie et mettez à jour les éléments suivants :

Taille du texte de l'en-tête : 32
Taille du corps/texte du lien : 16
Couleur du texte du widget : rgba(255,255,255,0.6)
Couleur du lien du widget : #ffffff
Couleur du titre du widget : #ffffff

Enregistrer et publier

Revenez au menu principal du personnalisateur de thème et sélectionnez Widgets. Sélectionnez ensuite Footer Sidebar Left et cliquez sur le bouton Ajouter un widget. Sélectionnez le widget Extra – Avis récents

Revenez au menu des widgets et sélectionnez Barre latérale de pied de page à droite et ajoutez le widget Catégories.

Accédez à la section CSS supplémentaire et ajoutez le CSS personnalisé suivant pour votre pied de page.

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

Enregistrez et publiez les paramètres du personnalisateur de thème et consultez votre pied de page.

C'est ça. Vous avez terminé avec succès la partie 4 et terminé la série sur la création d'un site d'évaluation de produits à l'aide d'Extra.

CSS final

Selon l'endroit où vous êtes entré dans la série, vous devrez peut-être vérifier votre CSS personnalisé pour vous assurer que tout est entré correctement. Voici le code CSS final à saisir dans le personnalisateur de thème.

.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;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
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) {

.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;
}

/***************************
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;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

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

Emballer

J'espère que vous avez apprécié d'explorer la puissance d'Extra dans la création d'un site d'évaluation de produits avec moi. Si quoi que ce soit, je suis convaincu que vous repartirez au moins avec une nouvelle appréciation de ce thème exceptionnel et un peu d'inspiration pour en faire plus. Le système d'évaluation intégré, les présentations de catégories intelligentes et la puissance de Divi Builder en font un outil idéal pour un site d'évaluation de produits.

Un sujet que je n'ai pas abordé (en le gardant pour un futur article) est de savoir comment gérer les liens d'affiliation à l'aide d'Extra. Après tout, pour la plupart des gens, l'objectif final de leur site d'évaluation de produits est de gagner de l'argent. N'hésitez pas à partager vos réflexions à ce sujet ci-dessous dans les commentaires.

Je suis dans l'attente de votre réponse.