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.

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.

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.

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.

[vc_row center_row= »yes »][vc_column width= »1/2″][vcex_button target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]TÉLÉCHARGER LE THÈME DIVI [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutoriels » target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]TÉLÉCHARGER LES TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Autres tutoriels Divi

• 5 sites pour restaurant qui utilisent Divi comme thème
• Comment ajouter un texte sur un produit WooCommerce de Divi
• Comment modifier la couleur des menu entre les pages de Divi
• Comment personnaliser les grilles d’un blog avec Divi
• Comment utiliser l’éditeur de rôle de Divi sur WordPress
• Comment créer un slider en plein écran de Divi
• Comment modifier la couleur des menus entre les pages de Divi
• Des fonctionnalités que vous ignorez probablement de Divi
• Comment utiliser Divi Builder sur WordPress
• Comment utiliser le module de défilement de vidéos de Divi
• Comment utiliser le module Bascule de Divi Builder
• Comment ajouter un module de témoignage sur Divi Builder
• Comment utiliser le module de texte de Divi
• Comment créer un slider sur Divi
• Comment éditer un rôle d’utilisateur de Divi
• Comment utiliser le module Social Media de Divi
• Comment utiliser le module boutique sur le thème WordPress Divi
• Comment utiliser le module sidebar de Divi
• Comment utiliser le module des tableaux de prix de Divi
• Comment utiliser le module de titre des publications de Divi
• Comment ajouter un module vidéo de Divi
• Comment utiliser le module de navigation entre articles
• Comment utiliser le module de recherche de Divi
• Comment utiliser le module portefeuille de Divi
• Comment utiliser le module personne sur Divi Builder
• Comment utiliser le module portefeuille avec filtre de Divi
• Comment utiliser le module slider pleine largeur
• Comment utiliser le module Image de Divi Builder
• Comment utiliser le module de navigation pleine largeur de Divi Builder
• Comment utiliser le module galerie d’images
• Comment utiliser le module Carte Pleine largeur de Divi Builder
• Comment utiliser le module portfeuille pleine largeur de Divi
• Comment utiliser le module en-tête pleine largeur de Divi
• Comment utiliser le module compteur de Divi
• Comment utiliser le slider d’articles sur Divi Builder
• Comment utiliser le module Email Optin de Divi