Comment créer une page de plan de site HTML dynamique dans Divi
Publié: 2020-02-15Une page de plan de site HTML peut être utile pour les utilisateurs cherchant à naviguer sur votre site Divi à partir d'une vue panoramique. Fondamentalement, un plan de site HTML (comme son nom l'indique) est une carte de votre site en HTML. La page du plan du site contient généralement une liste organisée de liens vers tout le contenu pertinent de votre site. Une page de plan de site HTML peut être créée manuellement, mais cela aide si vous pouvez générer le contenu de la page de plan de site de manière dynamique afin que vous n'ayez pas à vous soucier des mises à jour constantes.
Dans ce tutoriel, nous allons vous montrer comment créer une mise en page de plan de site HTML dynamique dans Divi en utilisant une combinaison de Divi Design et du plugin WP Sitemap Page. La configuration est extrêmement simple et le résultat est étonnamment efficace.
Commençons.
Aperçu
Téléchargez GRATUITEMENT la mise en page du plan du site HTML
Pour mettre la main sur la mise en page du plan du site de ce tutoriel, vous devrez d'abord la télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Abonnez-vous à notre chaîne Youtube
Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON dans le Divi Builder.
REMARQUE : cette mise en page repose sur les codes courts utilisés avec le plugin WP Sitemap Page. Si vous n'avez pas le plugin actif sur votre site, vous ne verrez pas le contenu dans les modules.
Ce dont vous avez besoin pour ce tutoriel
Pour ce tutoriel, vous aurez besoin des éléments suivants :
- Le thème Divi.
- Contenu WordPress. Afin de générer du contenu de page de plan de site HTML, vous aurez besoin d'avoir des pages, des articles, des catégories, des produits, etc. sur votre site.
- Le plugin WP Sitemap Page. Ceci est accessible à partir du tableau de bord WordPress que nous vous montrerons comment faire ci-dessous.
Passons au tutoriel, voulez-vous ?
Différence entre les plans de site XML et HTML
Si vous débutez avec les plans de site, il en existe essentiellement deux types : XML et HTML. Les plans de site XML sont spécifiquement générés pour donner aux moteurs de recherche une carte détaillée de votre site. Pour la plupart, les plans de site XML existent uniquement pour les moteurs de recherche comme Google afin de leur permettre d'explorer facilement votre site, ce qui contribuera à améliorer votre classement. En tant que tels, les sites XML ne sont pas destinés à l'utilisateur. C'est là qu'interviennent les plans de site HTML. Les plans de site HTML sont du HTML réel intégré (et du PHP puisque nous utilisons Divi et WordPress) sur une page de plan de site réelle sur votre site Web. L'idée est de générer une liste organisée de tout le contenu pertinent du site Web (articles, pages, produits, catégories, etc.) pour l'utilisateur en un seul endroit pratique. Fondamentalement, une page de plan de site HTML est comme un méga menu pour l'ensemble de votre site.
Pour plus d'informations sur les plans de site (comme comment créer un plan de site XML dans WordPress), consultez notre article sur la façon de créer un plan de site pour votre site WordPress.
Configuration du plugin
Pour ce tutoriel, nous allons utiliser un plugin WordPress GRATUIT mais efficace appelé WP Sitemap Page qui nous permettra d'afficher le contenu du sitemap de manière dynamique au sein d'un module Divi grâce à l'utilisation de shortcodes.
Pour télécharger le plugin, accédez à votre tableau de bord WordPress et accédez à plugins > Ajouter un nouveau. Recherchez ensuite le plug-in de page de plan de site wp à l'aide de la barre de recherche, puis installez et activez le plug-in.
Pour ouvrir les paramètres du plug-in de la page WP Sitemap, accédez à Paramètres> Page WP Sitemap. Là, vous verrez les paramètres disponibles. Pour ce didacticiel, nous allons laisser les options sous l'onglet Paramètres, mais n'hésitez pas à les afficher plus tard.
Cliquez sur l'onglet Comment utiliser pour voir tous les exemples de codes courts disponibles que nous pouvons utiliser pour afficher le contenu de notre page de plan de site. Celles en surbrillance sont celles que nous utiliserons.
Création de la page HTML Sitemap dans Divi
Une fois les plugins configurés, nous sommes prêts à commencer à concevoir la mise en page du plan du site dans Divi.
Création d'une nouvelle page
Pour commencer, créez une nouvelle page, donnez-lui le titre « Plan du site », puis cliquez sur « Utiliser Divi Builder ».
Ajout de la mise en page prédéfinie à la page
Vous serez accueilli avec trois options sur la façon dont vous souhaitez créer votre page. Sélectionnez « Choisir une mise en page prédéfinie ».
Ensuite, recherchez et trouvez le pack de mise en page de magazine et cliquez pour utiliser la mise en page de catégories.
Supprimer les éléments inutiles
Étant donné que nous n'utiliserons que la section supérieure de cette mise en page prédéfinie, une fois la mise en page chargée dans la page, supprimez toutes les sections situées sous la première section.
Ajoutez ensuite une nouvelle section régulière sous la section supérieure.
Ajout de la ligne n°1 pour l'affichage des pages
Pour notre première ligne, nous allons ajouter du contenu de page de plan de site HTML qui affichera toutes les pages du site. Commençons par ajouter une ligne à une colonne.
Ajout d'un module de texte aux pages d'affichage
À l'intérieur de la ligne, ajoutez un nouveau module de texte.
Collez ensuite ce qui suit dans la zone de contenu sous l'onglet texte :
<h2>Pages</h2> [wp_sitemap_page only="page" display_title="false"]
Paramètres de conception de texte
Même si la plupart du contenu textuel est généré par un shortcode, nous pouvons toujours concevoir ces éléments à l'aide des paramètres de conception Divi intégrés. Accédez à l'onglet Conception et mettez à jour les éléments suivants :
- Police du texte : Montserrat
- Poids de la police de texte : gras
Sélectionnez ensuite l'onglet des paramètres de lien et mettez à jour les éléments suivants :
- Couleur du texte du lien : #333333
Ensuite, sélectionnez l'onglet des paramètres de liste non ordonnée et mettez à jour les éléments suivants :
- Couleur du texte de la liste non ordonnée : #c5e0dc
- Type de style de liste non ordonnée : Carré
- Position de style de liste non ordonnée : à l'intérieur
- Retrait d'élément de liste non ordonné : 5vw
REMARQUE : tous les styles de liens remplaceront les styles de liste non ordonnés. C'est pourquoi nous pouvons ajouter cette couleur de texte de liste non ordonnée et elle ne s'appliquera qu'aux petites puces carrées.
Mettez à jour le style Titre 2 comme suit :
- Police de la rubrique 2 : Montserrat
- Poids de la police de l'en-tête 2 : gras
- Titre 2 Taille du texte : 3vw (ordinateur de bureau), 38px (tablette)
Ensuite, mettez à jour l'espacement avec une marge négative à gauche pour tirer un peu le module vers la gauche. Cela ajoutera un joli design qui se chevauche avec notre titre et notre box-shadow.
Enfin, ajoutez une classe CSS personnalisée au module afin que nous puissions le cibler plus tard avec du CSS personnalisé pour diviser le contenu en colonnes.
- Classe CSS : liste de colonnes
Paramètres de ligne
Mettez maintenant à jour les paramètres de ligne comme suit :
- Marge : 5vw bas
- Box Shadow : voir capture d'écran
- Position horizontale de l'ombre de la boîte : -5vw
- Position verticale de l'ombre de la boîte : 0px
- Couleur de l'ombre : #c5e0dc
Ajout de la ligne 2 pour afficher les articles et les catégories
Dupliquer la ligne pour en créer une nouvelle
Dans notre deuxième rangée, nous allons afficher le contenu de la page du plan du site HTML pour nos articles de blog. Pour créer la deuxième ligne, dupliquez la ligne que nous venons de créer contenant nos pages.
Mettre à jour le module de texte avec un shortcode pour afficher les catégories
Ouvrez ensuite les paramètres du module de texte dans la ligne dupliquée et remplacez le contenu par ce qui suit :
<h2>Categories</h2> [wp_sitemap_page only="category" display_title="false"]
Ce shortcode affichera dynamiquement les catégories de publication.
Dupliquer le module de texte pour afficher un titre distinct pour les articles par catégorie
Afin d'afficher les articles par catégorie, dupliquez le module de texte contenant les catégories d'articles et mettez à jour le contenu avec les éléments suivants :
<h2>Posts by Category</h2>
Dupliquer le module de texte et mettre à jour le contenu avec un shortcode pour répertorier les publications par catégorie
Nous allons mettre le titre dans un module de texte séparé du shortcode pour des raisons de conception.
Dupliquez le module de texte que vous venez de dupliquer une fois de plus.
Mettez ensuite à jour le contenu du nouveau module de texte en double avec un nouveau shortcode comme suit :
[wp_sitemap_page only="post" display_category_title_wording="false" display_title="false"]
Mettre à jour la conception de contenu de shortcode avec Divi
Parce que ce shortcode a une liste imbriquée, nous devrons l'optimiser un peu différemment. Cliquez sur l'onglet Conception et mettez à jour les éléments suivants :
- Position de style de liste non ordonnée : à l'extérieur
- Retrait d'élément de liste non ordonné : 0px
- Marge : 0px restante
- Rembourrage : 3.2vw gauche
Remplacez ensuite la classe CSS par ce qui suit :
- Classe CSS : flex-columns
Ajout de la ligne 3 pour les produits
Dans cette troisième et dernière ligne, nous allons ajouter du contenu de page de plan de site HTML qui affiche les catégories de produits et tous les produits.
Dupliquer la ligne n° 1
Pour commencer, dupliquons la ligne du haut (celle qui affiche les pages).
Mettre à jour les paramètres du module de texte pour afficher les catégories de produits
Mettez ensuite à jour les paramètres de texte du doublon avec le contenu suivant :
<h2>Product Categories</h2> [wp_sitemap_page only="product_cat" display_title="false"]
Ce shortcode affichera les catégories de produits.
Dupliquer le module de texte pour afficher les produits
Ensuite, dupliquez le module de texte que vous venez de créer.
Mettez ensuite à jour les paramètres de texte en double avec le contenu suivant :
<h2>Products</h2> [wp_sitemap_page only="product" display_title="false"]
Ce shortcode affichera tous les produits sur tout le site.
Mettre à jour la couleur de l'ombre de la zone de ligne
Pour donner une petite séparation entre les sections, nous pouvons modifier l'ombre de la boîte pour la ligne contenant nos catégories de produits et nos produits. Pour ce faire, mettez à jour les paramètres de ligne comme suit :
- Couleur de l'ombre : #ffc077
Mettre à jour l'en-tête de la page
Avant d'oublier, passez à la section supérieure et mettez à jour les deux modules de texte avec le texte "Plan du site". Cela donnera un titre précis à notre page de plan du site.
Résultat à ce jour
Voici le résultat à ce jour.
Cette conception à une colonne est vraiment superbe telle quelle, alors n'hésitez pas à l'appeler un jour et à rouler avec elle. Mais si vous souhaitez améliorer la mise en page avec plusieurs colonnes, voir ci-dessous.
Ajout de plusieurs colonnes au contenu de la page Plan du site avec CSS personnalisé
À l'heure actuelle, la mise en page par défaut affichera le contenu de la page du plan du site dans une seule colonne. Si vous souhaitez diviser cela en plusieurs colonnes sur le bureau et la tablette, vous pouvez ajouter du CSS personnalisé à un module de code dans Divi.
Tout d'abord, ajoutez le module de code en bas de la page (peu importe où).
Collez ensuite le code CSS suivant dans la zone de code :
<style>
@media all and (min-width: 767px) {
.flex-columns .wsp-posts-list {
display:flex;
flex-wrap: wrap;
}
.flex-columns .wsp-posts-list>li>ul {
width: 300px;
padding: 2% 10% 10% 5%;
}
.column-list .wsp-container {
column-count: 3;
}
}
</style>
Cet extrait CSS ne s'applique qu'à une grande tablette et au-dessus. Le code cible les modules de texte avec les classes CSS que nous leur avons ajoutées précédemment. Pour le module de texte avec la classe « flex-columns », le shortcode qui génère les articles par catégorie est divisé en colonnes de 300px de large. Les modules de texte avec la classe « liste de colonnes » diviseront le contenu de la page du plan du site à code court en trois colonnes.
Résultat final
Découvrez le résultat final !
Autres façons d'ajouter du contenu de plan de site
Nous pouvons également ajouter du contenu de plan de site à la page de plan de site à l'aide des widgets WordPress, des modules Divi et des shortcodes WooCommerce.
Utiliser les widgets WordPress
WordPress possède des widgets standard qui afficheront des éléments tels que des pages, des catégories et des produits. Ils peuvent être trouvés dans le tableau de bord WordPress sous Apparence > Widgets. N'hésitez pas à profiter de ceux qui utilisent le module de barre latérale de Divi si vous avez besoin d'ajouter quelque chose à la page du plan du site.
Utiliser le module de blog Divi
Le module de blog de Divi est livré avec des paramètres intégrés pour l'affichage des articles, des pages, des projets et des produits. Et si vous adoptez une approche minimaliste de la conception, vous pouvez obtenir une liste personnalisable assez sympa pour les pages de plan de site.
Par exemple, nous pouvons ajouter un nouveau module de blog et sélectionner des produits comme type de publication et lui donner un nombre de publications suffisamment grand pour que nous puissions maintenant afficher tous les produits sur notre site.
Ensuite, nous pouvons masquer tous les éléments sauf le lien/titre du produit.
Nous pouvons également faire la même chose pour les pages. Sélectionnez simplement les pages pour le type de publication.
Code abrégé du produit
Pour les produits WooCommerce, nous pouvons utiliser le WooCommerce Product Shortcode pour générer des listes de produits ou des listes de catégories de produits. Le shortcode du produit est très robuste et polyvalent pour afficher les produits comme vous le souhaitez. Vous pouvez même utiliser le shortcode dans un module Divi pour profiter des paramètres intégrés.
Dernières pensées
L'utilisation du plugin WP Sitemap Page combinée à la puissance de Divi est une solution simplifiée et agréable pour générer une page HTML Sitemap dynamique pour votre site Web. Et vous pouvez facilement ajouter du contenu plus dynamique à votre page de plan de site en utilisant également n'importe quelle combinaison de modules Divi et de shortcodes WooCommerce. N'hésitez pas à expérimenter et à trouver le bon design qui correspond à vos besoins.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!