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:

Section builder wordpress css personnalisé

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.

Icone qui change de couleur divi

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.

Format de len tete divi

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.

Personanlisation du menu divi

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.

Builder divi wordpress

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 :

Personnalisation des couleurs réglages divi

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.

Icône sociale divi

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.

Personnalisation du menu secondaire

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

Element de len tête divi wordpress

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 :

Code css personnalisé divi editeur de thème

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.

Section personnalisée divi css theme options

#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