FB

TW

In

Créer des onglets de catégories d'articles avec Divi, html, css et javascript

Créer des onglets de catégories d’articles avec Divi, HTML, CSS et JavaScript

Oct 25, 2024 | Trucs & Astuces, Création de sites internet, Divi | 0 commentaires

TRUCS & ASTUCES

4. Créer des onglets de catégorie d’articles avec Divi, HTML, CSS et JavaScript

Introduction

Vous souhaitez améliorer la navigation sur votre site en affichant vos articles par catégorie sous forme d’onglets ?

Grâce au thème Divi et son Divi Builder et un peu de HTML, CSS et JavaScript, vous pouvez structurer vos articles de manière organisée et attractive. Voici comment faire, étape par étape.

onglet de categories

Table des Matières

Comment commencer?

1. Créer les catégories d’articles dans WordPress

  • Avant d’ajouter des onglets de catégories sur votre site, il faut d’abord organiser vos articles dans WordPress :
    • Accédez à votre tableau de bord WordPress.
    • Dans le menu latéral, allez à Articles > Catégories.
    • Créez autant de catégories que nécessaire (par exemple : Création de sites internet, WordPress, Trucs & Astuces, etc.).
    • Une fois les catégories créées, assignez chaque article à sa catégorie correspondante via l’éditeur d’articles.
categories tabs

2. Utiliser le module Blog de Divi pour chaque catégorie

  • Divi propose un module Blog qui permet d’afficher des articles d’une catégorie spécifique. Voici comment procéder pour chaque catégorie d’articles :
    • Ouvrez une nouvelle page ou section dans Divi Builder.
    • Ajoutez une rangée et insérez le module Blog.
    • Dans les paramètres du module Blog, allez à l’onglet Contenu > Catégorie et sélectionnez la catégorie d’articles à afficher.
    • Personnalisez l’apparence du module si nécessaire (nombre d’articles, style d’affichage, etc.).
    • Sauvegardez le module Blog dans la Bibliothèque de Divi. Pour cela, cliquez sur l’icône de sauvegarde (au survol) du module, puis sur « Enregistrer le module dans la librairie ». Une fois sauvegardé, le shortcode sera affiché dans la bibliothèque, que vous pourrez utiliser plus tard.
    • Une fois le module sauvegardé dans la bibliothèque de Divi, vous pouvez le supprimer.
  • Une fois le module Blog configuré pour une catégorie, vous pouvez obtenir le shortcode correspondant :
    1. Installez un plugin comme Shortcodes for Divi, Divi Library Shortcode ou Divi Supreme Lite qui permet de convertir des modules Divi en shortcodes.
    2. Sauvegardez le module dans la bibliothèque Divi.
    3. Copiez le shortcode généré pour ce module et notez-le (il ressemblera à quelque chose comme [df_layout_shorcode id= »285807″]).

Plugin « Shortcodes for Divi » : lien

module blog 1
sauvegarder module

Installer le plugin pour afficher les shortcodes : lien

shortcodes

3. Créer la structure HTML des onglets

  • Dans une nouvelle section Divi, ajoutez une rangée et insérez le module Code. Collez le code HTML suivant pour créer les boutons d’onglets et les sections de contenu. N’oubliez pas de remplacer les shortcodes créés pour chaque catégorie dans les sections de contenu par ceux que vous avez sauvegardés dans la bibliothèque :

4. Ajouter le style CSS pour les onglets

Dans le même module Code, ajoutez les balises <style> et </style> autour du code CSS suivant pour styliser les boutons d’onglets et les contenus correspondants. Vous pouvez modifier ces styles à votre convenance pour mieux correspondre à l’esthétique de votre site :


.tab-container {
    display: flex;
    margin-bottom: 20px;
}

.tab-button {
    background-color: #0077b6;
    font-size: 20px;
    font-weight: 500;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 5px;
}

.tab-button:hover {
    background-color: #f25252;
}

.tab-button.active {
    background-color: #f25252;
}

.tab-content {
    display: none;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.tab-content.active {
    display: block;
}

.article-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

5. Ajouter le JavaScript pour gérer les onglets

Enfin, toujours dans le module Code, n’oubliez pas d’encadrez le script JavaScript avec les balises <script> et </script> pour activer les fonctionnalités des onglets :


document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('WebDesign').style.display = 'block';
});

function openTab(evt, tabName) {
  var i, tabcontent, tabbuttons;

  // Cacher tous les contenus
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Supprimer la classe active des boutons
  tabbuttons = document.getElementsByClassName("tab-button");
  for (i = 0; i < tabbuttons.length; i++) {
    tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
  }

  // Afficher le contenu de l'onglet sélectionné
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

Conclusion

Vous avez maintenant les clés en main pour améliorer la navigation sur votre site en organisant vos articles par catégories sous forme d’onglets. En suivant les étapes décrites, vous avez appris à :

  1. Créer des catégories d’articles dans WordPress : Cela permet de structurer votre contenu de manière logique.
  2. Utiliser le module Blog de Divi : En affichant des articles d’une catégorie spécifique, vous personnalisez l’expérience de vos visiteurs.
  3. Créer une structure HTML pour les onglets : Vous avez mis en place les boutons d’onglets et les sections de contenu correspondantes, facilitant ainsi la navigation.
  4. Ajouter du style avec CSS : Grâce à des styles personnalisés, vous avez amélioré l’apparence visuelle de vos onglets pour qu’ils s’intègrent harmonieusement à votre site.
  5. Intégrer le JavaScript pour une interactivité dynamique : Cela permet de gérer l’affichage des onglets de manière fluide et intuitive.

Ces pratiques vous permettent non seulement de structurer votre contenu de façon attrayante, mais aussi d’offrir une expérience utilisateur enrichie sur votre site. N’hésitez pas à explorer davantage les possibilités offertes par Divi et à affiner votre code, car chaque détail compte pour créer un site qui vous ressemble vraiment.

Prêt à démarrer votre projet ou besoin d’aide pour optimiser votre site internet ? Contactez-nous dès aujourd’hui pour obtenir un devis gratuit !

DEVIS Gratuit
NOUS CONTACTER

Articles similaires

Comment créer un Mega Menu avec Divi

Comment créer un Mega Menu avec Divi

TRUCS & ASTUCES5. Créer un Méga Menu avec Divi(1ère partie)IntroductionDans le monde des sites web modernes, la navigation joue un rôle clé pour...

Restez connectés avec nos dernières News et Mises à jour

Joindre notre Newsletter

Restez informé des dernières nouveautés et offres exclusives en vous abonnant à notre newsletter

Suivez-Nous

Rejoignez notre communauté en nous suivant sur les réseaux sociaux pour ne rien manquer de nos actualités et mises à jour

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Inscrivez-vous à notre Newsletter

Rejoignez notre liste de diffusion et profitez de 10 % de réduction sur nos tarifs !

You have Successfully Subscribed!