Sélectionner une page


Vous utilisez Divi et souhaitez profiter au maximum de votre menu? Dans ce guide, nous allons vous montrer Comment personnaliser le menu Divi avec CSS pour vous démarquer de vos concurrents et améliorer l’expérience client sur votre site web.

Avec plus de 3 millions d’utilisateurs Deux est l’un des constructeurs de pages les plus populaires. L’une des raisons à cela est qu’il est extrêmement flexible et propose des tonnes d’options de personnalisation que vous pouvez utiliser pour donner à votre site Web un aspect professionnel, même si vous êtes débutant. Cependant, pour faire passer la conception de votre site Web au niveau supérieur, vous devez utiliser des scripts CSS pour personnaliser la conception. Vous pouvez modifier de nombreuses choses, mais l’une des plus importantes est le menu de navigation.

Pourquoi éditer le menu Divi?

La barre de navigation du menu est l’un des éléments les plus importants de tout site Web. Il se trouve en haut de la page, c’est donc le premier élément que les utilisateurs voient lorsqu’une page se charge. En règle générale, ce menu apparaît sur toutes les pages d’un site, c’est donc l’élément que les utilisateurs voient le plus souvent.

De plus, la fonction principale d’un menu est de fournir un moyen facile pour les visiteurs de naviguer et d’améliorer l’expérience utilisateur. Pour cette raison, un menu de navigation bien organisé et conçu peut avoir un impact énorme sur votre entreprise.

Même si Deux De nombreux outils d’édition du menu sont inclus dans la livraison. L’ajout de code personnalisé est la meilleure façon de procéder. Mais ne vous inquiétez pas si vous ne savez pas coder. Dans ce tutoriel, nous allons vous montrer comment le faire Personnalisez le menu Divi avec CSS Pas à pas.

Comment personnaliser le menu Divi avec CSS

Dans cette section, nous allons vous montrer comment éditer le menu Divi en utilisant CSS pour en tirer le meilleur parti. Vous devez coller les scripts CSS dans le personnalisateur de WordPress en accédant à Apparence> Personnaliser> CSS supplémentaire. Vous pouvez également les coller sur le champ style.css Dossier du sujet de votre enfant.

REMARQUE: Avant de commencer:

Regardons maintenant différentes options pour personnaliser le menu Divi avec des scripts CSS.

1) Changer la couleur d’arrière-plan de la barre de navigation

Divi vous donne la possibilité de modifier la couleur d’arrière-plan du menu mais de l’appliquer à tout l’en-tête. Si vous souhaitez simplement changer la couleur de la barre de navigation, utilisez ce script:

.et_menu_container{background-color:red;}

Changer la couleur de la barre de navigation du menu Divi

2) Changer les polices de menu

Une autre façon de personnaliser le menu Divi est de changer les polices du menu. Par exemple, ce script CSS modifie la police de tous les éléments du menu dans Lucida Console. Cela inclut les listes déroulantes et autres contenus qui apparaissent dans le conteneur de menu.

.et_menu_container{font-family: Lucida Console, Courier, monospace;}

Noter: La famille de polices se compose d’un certain nombre de polices, comme illustré dans l’exemple ci-dessus. Vous pouvez également choisir une seule police, mais elle doit d’abord être téléchargée sur votre installation WordPress. Pour plus d’informations sur les polices, consultez les liens ci-dessous:

3) Changer la couleur du texte pour les éléments de survol

Utilisez ce code pour changer la couleur du texte lorsque vous survolez un élément:

#top-menu li a:hover{
color:blue;
}

Cela changera la couleur des liens de la barre de navigation en bleu lorsque les utilisateurs les survoleront. Cependant, vous pouvez personnaliser le code et le changer en n’importe quelle couleur en utilisant le code hexadécimal ou le format RGBA.

4) Changer la largeur de la liste déroulante

Pour vous assurer que chaque élément du menu Divi a l’air bien, vous pouvez ajuster la largeur de la liste déroulante. Par exemple, utilisez ce script CSS pour donner à la liste déroulante une largeur de 500 pixels:

#top-menu > li > .sub-menu{
width:500px;
}

5) Ajouter une image de fond à la barre de navigation du menu Divi

En plus de petits changements, vous pouvez également apporter des changements plus radicaux. Supposons que vous souhaitiez personnaliser le menu Divi avec CSS en affichant une image en arrière-plan de la barre de navigation. Pour ce faire, copiez et collez simplement ce code:

.et_menu_container{
background-image:url('http://localhost/Sampler/wp-content/uploads/2020/10/gift4.png');
background-size:cover;
}

Ajouter une image à la barre de navigation du menu d'arrière-plan Divi

Notez que nous utilisons une image précédemment téléchargée. Téléchargez simplement votre propre image et remplacez l’URL de l’image par celle que vous souhaitez.

Vous pouvez également utiliser une image à partir d’une URL externe. Cependant, nous vous recommandons fortement de télécharger une image dans la médiathèque de votre site Web. De cette façon, vous vous assurez que vous avez le contrôle total de l’image et qu’il n’y a aucun risque de la perdre si le propriétaire de l’image décide de la supprimer.

Enfin, notez que nous utilisons la propriété pour que l’image couvre tout l’espace disponible. Il existe d’autres options comme répéter, automatiquement, contenir, et ainsi de suite, choisissez celui que vous aimez. Pour des options plus complexes d’impression de l’image sur votre site Web, voir Cette page.

Voici comment appliquer CSS à un seul élément

Dans les exemples ci-dessus, tous les éléments de la barre de navigation du menu sont modifiés. Cependant, ce n’est pas le seul moyen de personnaliser le menu Divi en utilisant du code CSS. Vous pouvez également appliquer les scripts CSS à un seul élément. Avant d’entrer dans cela, cependant, nous devrions mieux comprendre comment fonctionne CSS et comment nous créons les scripts.

Une seule ligne CSS s’appelle un régnerqui est composé d’un Sélecteur, une propriété et une valeur.

Personnalisez le menu Divi avec CSS

Puisque la propriété et la valeur ont des noms explicites, concentrons-nous sur le sélecteur.

le Les électeurs est le code qui fait référence à l’élément modifié par la propriété et la valeur. Les sélecteurs peuvent faire référence à de nombreux éléments ou à des éléments individuels.

Si nous ne spécifions pas un seul élément, CSS appliquera la règle à tous les éléments enfants. Cela suit que Principe d’héritage CSS cela implique ce comportement.

Appliquer CSS à des éléments individuels

Pour appliquer le CSS à des éléments individuels, vous devez utiliser la console du navigateur et sélectionner le sélecteur spécifique pour cet élément. Pour ce faire, accédez à la page que vous souhaitez modifier et cliquez avec le bouton droit de la souris ou appuyez sur F12 pour ouvrir la console du navigateur.

Vous verrez quelque chose comme ceci:

Comment personnaliser le menu Divi avec CSS

C’est beaucoup de code! Ne vous inquiétez pas, cela peut sembler accablant, mais il est assez facile à utiliser une fois que vous vous y êtes habitué.

Vous verrez les éléments de votre page Web mis en surbrillance lorsque vous ouvrez les balises HTML ,

,

et passez la souris dessus. De cette façon, vous pouvez voir quel élément vous pointez et obtenir la classe ou l’ID HTML à utiliser dans votre code CSS.

Cliquez sur l’élément que vous souhaitez modifier et vous verrez la sélection CSS

Utilisation de l'outil de développement du navigateur pour choisir le sélecteur CSS

Pour le copier, faites un clic droit dessus et choisissez Copier> Sélecteur CSS. Après avoir copié le sélecteur CSS, accédez à votre tableau de bord WordPress et accédez à Personnalisateur> CSS supplémentaireet collez-le:

#top-menu > li:nth-child(1)

Ce sélecteur pointe vers le lien «Accueil» de notre exemple de site Web, nous pouvons donc maintenant utiliser toutes les propriétés CSS et l’appliquer uniquement au lien «Accueil» de notre menu. Par exemple, pour changer la couleur de l’arrière-plan en rouge, utilisez:

#top-menu > li:nth-child(1){background-color:red;}

Notez que le:nth-child(1) La pseudo-classe nous indique qu’il s’agit du premier (1) élément de liste au même niveau de la hiérarchie.

Maintenant que vous savez comment copier un sélecteur à l’aide de l’inspecteur de navigateur, vous pouvez appliquer votre style CSS à n’importe quel élément de votre site Web.

Plus d’exemples de scripts CSS

Vous pouvez faire beaucoup plus pour personnaliser votre menu Divi en utilisant CSS. Regardons quelques autres exemples.

Ajouter une icône à l’élément de menu

Pour utiliser les icônes Font Awesome, vous devez d’abord les télécharger sur votre site Web. Après cela, vous pouvez coller le script suivant pour imprimer une icône à côté du premier élément du menu:

#top-menu > li:nth-child(1) a::before{

padding-right: 10px;

font-family: "Font Awesome 5 Free";

font-weight: 900; content: "f015";    

}

Ajouter un symbole à l'élément de menu Divi

Si vous voyez une mauvaise police, cela signifie que Font Awesome n’est pas chargé.

Ajoutez cette ligne dans la section d’en-tête pour charger des jeux de symboles Options Divi> Avancé.

<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">

Y compris les modèles Font Awesome aux modèles Divi

Masquer n’importe quel élément du menu en utilisant CSS

Une fois que vous avez le bon sélecteur CSS, vous pouvez lui appliquer n’importe quelle propriété CSS. L’un des plus courants et des plus utiles est Affichage: aucun;; Cela vous permet de supprimer n’importe quel élément du menu. Par exemple, collez le code suivant pour masquer l’élément du panier dans la barre de navigation des menus:

.et-cart-info{display:none;}

Conclusion

Dans l’ensemble, la modification du menu de votre site est un excellent moyen d’améliorer la navigation de votre site et d’améliorer l’expérience utilisateur sur votre site. Bien que Divi ait plusieurs options pour cela, la meilleure façon de le faire est de personnaliser cela Deux Menu des scripts CSS.

Dans ce didacticiel, nous avons vu différentes façons de modifier le menu étape par étape afin que vous puissiez faire passer votre site au niveau supérieur même si vous n’avez aucune compétence en programmation. À présent, vous devez savoir comment:

  • Changer la couleur d’arrière-plan du menu
  • Changer les polices
  • Changer la couleur du texte pour les éléments de survol
  • Changer la largeur de la liste déroulante
  • Ajouter une image d’arrière-plan au menu

Nous avons également vu comment appliquer le CSS à des éléments individuels, ajouter des icônes au menu et masquer chaque élément. Nous vous recommandons d’utiliser ces scripts comme base, de jouer et de les personnaliser en fonction de votre site.

Pour plus d’informations sur la façon de tirer le meilleur parti de Divi, consultez les guides ci-dessous:

Avez-vous essayé de modifier le menu de votre site en utilisant CSS? Qu’est-ce que tu as changé Faites-nous savoir dans les commentaires ci-dessous!





Source link

Recent Posts