skip to Main Content

Comment modifier la couleur des menus entre les pages sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Faire que votre site se démarque de la foule est parfois plus facile à dire qu’à faire. Heureusement, vous pouvez vous prendre à jouer les petits bricoleurs en ajoutant des touches de personnalisation créatives qui feront en sorte que votre blog se démarque des autres.

Dans ce tutoriel, je vais vous montrer comment utiliser le builder de Divi pour personnaliser votre blog, et en particulier la zone CSS.

C’est la région dont je parle:

Ce que cela signifie, c’est que toutes les modifications que nous appliquerons ici, ne seront effectives que sur la page que nous modifions. C’est une caractéristique incroyablement intéressante et utile!

Voici le résultat final, nous aurons à la fin de ce tutoriel. La couleur de fond du menu de navigation qui change en fonction de la page que vous visitez. En option supplémentaire vous remarquerez que les icônes changent aussi de couleur.

Je vais d’abord montrer comment appliquer la couleur d’arrière-plan sur le menu. Puis séparément je vais vous montrer comment faire en sorte que les icônes sociales correspondent.

Si vous n’avez pas encore lu notre tutoriel sur la présentation du thème WordPress Divi, je vous invite à le faire.

Commençons!

Appliquer des couleurs aux menus

D’abord, j’utilise le format d’en-tête par défaut. Si vous utilisez un autre format, ce tutoriel devrait encore être efficace parce que le l’ID générique  des « divs » sur Divi est la même pour tous les formats (#main-header), pour autant que je sache. Si vous rencontrez des problèmes avec d’autres formats.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Nous devons nous assurer que les liens apparaissent sur le fond. Les couleurs que j’ai choisies, que vous trouverez sur Coolors.co si vous souhaitez les utiliser, sont sur le côté le plus sombre, alors je dois faire que le lien du texte ait une couleur claire. J’ai opté pour la couleur blanche.

J’utilise rgba (255,255,255,0.6) qui sera la couleur du lien et blanc foncé comme couleur du lien actif (pour l’effet visuel désiré)

Ensuite, allez à la page sur laquelle vous souhaitez appliquer la première modification (vous devriez voir les liens du menu mis en place). Cliquez sur l’icône à « 3 lignes » et une boîte d’options s’affichera.

Maintenant , ajoutez le CSS suivant dans cette boîte :

#main-header {
 background: #474f61;
}

Vous devriez avoir quelque chose de semblable à cela, n’oubliez pas de changer le code hexadécimal de la couleur de votre choix :

Cliquez sur « Enregistrer et mettre à jour », et cela s’appliquera au menu principal, et tout ceci en une ligne de code.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Maintenant, vous avez juste besoin d’ajouter ce même code pour toutes vos pages et changer le code hexadécimal à chaque fois.

Les icônes des réseaux sociaux (Facultatif)

Pour cette partie, nous allons modifier le code que nous avons déjà fait, puis ajouter un peu de code au niveau du CSS du site, et je vais vous expliquer pourquoi certains CSS devraient être ajoutés dans les pages individuelles et pourquoi certains ne devraient pas l’être.

Alors vous devez d’abord vous assurer que vous avez configuré vos liens sociaux. Allez à « Divi Options > Thème général » et ajoutez vos URL à vos pages de médias sociaux.

Ensuite, accédez à vos paramètres dans la barre de menu secondaire et définissez les couleurs d’arrière-plan et du texte. Je choisis le « blanc » comme la couleur du texte parce que je vais ajouter un fond rond de couleur à chaque icône sociale pour correspondre avec la nouvelle couleur du menu, de sorte que l’icône puisse apparaître.

Aller à « En-tête & Navigation > Éléments  de l’en-tête » et cochez la case « Afficher les icônes sociales ».

Vous rappelez-vous de comment nous avons procédé pour ajouter du code CSS sur chaque page ? Nous allons y retourner et modifier ce que nous avons écrit avant. Remplacer ce que vous avez là avec le CSS suivant, ou si vous reconnaissez ce qui est différent vous pouvez ajouter simplement le code supplémentaire.

#main-header,
#top-header .et-social-icon a {
 background: #474f61;
}

Ce code permettra à notre site pour non seulement de changer la couleur de fond pour le menu sur cette page, mais aussi l’arrière-plan de nos icônes sociales. Nous avons simplement ajouté un autre élément dans le mélange. Vous devriez avoir quelque chose qui ressemble à ce qui suit :

Vous devrez peut-être vérifier que les couleurs hexagonales soient correctes sur chaque page.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

CSS Général

Le code suivant sera dans vos « Option du thème > boîte CSS » ou dans le fichier style du thème enfant.

#top-header .et-social-icons li {
 margin-left: 5px;
}
#top-header .et-social-icon a {
 padding: 4px;
 margin-bottom: 8px;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 line-height: 24px;
}

Vous vous demandez peut-être pourquoi cela ne va pas aussi dans la boîte CSS de la page. La raison est que ce morceau de code particulier affecte tous les éléments ciblés donc il est inefficace de mettre le même code exact à plusieurs endroits. Seule la couleur de fond change par page, mais ce code ne change pas par page. C’est juste une meilleure pratique pour éviter d’alourdir votre site.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra de personnaliser les menus sur votre blog WordPress.

Autres tutoriels Divi

Cet article comporte 3 commentaires
  1. Bonjour,

    Merci pour tout vos tuto.
    Savez vous si nous pouvons mettre le sous menu divi ( du second niveau en dessous du dropdown ) en fill-width ? qui prend toute la largeur de la page

  2. Bonjour,

    Comment faites-vous pour changer la couleur du texte dans le main-header? Ayant un background (sur mon main-header) transparent, la couleur de police que j’ai choisi (sur mon main-header, qui présente mes différentes rubriques) via l’interface de personnalisation de divi est noire. Cependant j’aimerais qu’elle soit blanche sur CERTAINES PAGES car la photo en dessous est trop foncée.

    Comment faire?

    Merci par avance,

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
22 Partages
Partagez13
Tweetez2
Enregistrer7