Comment optimiser le module de menu de Divi avec 5 préréglages globaux (téléchargement GRATUIT)

Les menus sont un élément essentiel de tout site, il est donc logique de consacrer un peu de temps et d'efforts supplémentaires pour s'assurer qu'ils s'affichent correctement. Dans Divi, nous pouvons créer rapidement des menus personnalisés à l'aide du module Menu de Divi, qui fournit de nombreuses options de style dont nous avons besoin. Mais cela aide toujours à rationaliser le processus de conception de l'en-tête de votre site Web en préparant au préalable des préréglages globaux de menu. Cela vous permettra de déployer un cadre de style de menu personnalisé d'un simple clic afin que vous puissiez passer plus de temps à peaufiner la conception pour qu'elle corresponde à l'image de marque de votre site Web. Par exemple, si vous souhaitez un menu centré avec un logo et des liens ressemblant à des boutons, vous pouvez utiliser un préréglage global pour déployer ce cadre en un seul clic. Cela vous fait gagner un temps et une énergie précieux.

Dans ce tutoriel, nous allons partager 5 préréglages globaux du module de menu que vous pouvez utiliser lors de la création de vos en-têtes Divi personnalisés. En plus du téléchargement gratuit qui comprend les 5 préréglages, nous allons vous guider tout au long du processus de création de ces préréglages à partir de zéro.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour utiliser ces préréglages globaux de menu sur votre en-tête global, vous devez d'abord importer la mise en page (avec ses préréglages) dans la bibliothèque Divi comme suit :

1. Allez dans Divi > Bibliothèque Divi.
2. Cliquez sur le bouton importer/exporter en haut de la page.
3. Sélectionnez l'onglet Importer dans la fenêtre contextuelle de portabilité
4. Choisissez le fichier JSON de mise en page à importer
5. Sélectionnez Importer les préréglages
6. Cliquez sur le bouton Importer

Ensuite, accédez au générateur de thème et modifiez l'en-tête global. Ajoutez un module de menu là où vous voulez que le logo soit et utilisez les préréglages pour styliser et placer le menu en conséquence.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Création de 5 préréglages globaux du module de menu dans Divi

#1 – Liens de bouton centrés avec logo

Pour notre premier préréglage global de style de menu, nous allons concevoir un menu avec des liens de bouton de largeur égale afin que le menu soit symétrique. Nous inclurons même des états de survol qui correspondent à l'état actif des liens des boutons de menu.

Pour créer ce premier préréglage global de menu, ajoutez une ligne à une colonne à la section normale.

Ajoutez ensuite un module de menu à la ligne.

Ouvrez les paramètres du menu et ajoutez un menu au module.

Ensuite, ajoutez également le logo du site en tant que contenu dynamique au module.

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Style : Centré

• Police du menu : Poppins
• Poids de la police du menu : gras
• Style de police du menu : TT
• Taille du texte du menu : 14 px (ordinateur de bureau), 24 px (tablette et téléphone)
• Espacement des lettres du menu : 0,15 em
• Hauteur de la ligne de menu : 1,3 em (ordinateur de bureau), 1,8 em (tablette et téléphone)

• Hauteur maximale du logo : 60 pixels

• Marge : 0px en bas

Sous l'onglet Avancé, nous allons ajouter des styles de liens de menu personnalisés afin qu'ils apparaissent sous forme de boutons.

Lien de menu CSS

Ajoutez le CSS personnalisé suivant au lien du menu :

Sur le bureau…

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

En vol stationnaire…

background: #333333;
color: #ffffff;
opacity: 1;

Lien de menu actif CSS

background: #333333;
color: #ffffff;
opacity: 1;

Logo du menu CSS

margin-bottom: 10px;

Style 1 Résultat

Voici le résultat final…

Ajout du style de menu 1 en tant que préréglage global

Section en double

Avant d'ajouter le style de menu en tant que préréglage global, dupliquez toute la section contenant le module de menu afin que nous puissions utiliser les styles du menu pour démarrer la conception suivante.

Créer un nouveau préréglage à partir des styles actuels

Pour ajouter le préréglage global, ouvrez les paramètres du module de menu d'origine que nous avons créé et cliquez sur le lien déroulant Préréglage.

Sélectionnez Créer un nouveau préréglage à partir des styles actuels.

Donnez un nom au nouveau préréglage (« Liens de boutons centrés avec logo »), puis enregistrez le préréglage.

#2 – Logo centré en ligne avec liens de bouton

Pour créer le deuxième préréglage global de menu, ouvrez les paramètres du module de menu en double de la conception précédente.

Sous l'onglet Conception, mettez à jour le style :

• Style : Logo centré en ligne

En raison du CSS personnalisé hérité du style de module précédent, les liens du menu conservent le design du bouton tandis que le logo repose parfaitement au centre. Le style de lien de bouton personnalisé permet aux liens de menu de conserver une belle conception symétrique.

Sous l'onglet Avancé, mettez à jour le CSS du logo du menu comme suit :

margin-bottom: 0px;

Résultat du style 2

Voici le résultat final.

Ajout du style de menu 2 en tant que préréglage global

Section en double

Avant d'ajouter le style de menu en tant que préréglage global, dupliquez toute la section contenant le module de menu (style 2) afin que nous puissions utiliser les styles du menu pour démarrer la conception suivante.

Créer un nouveau préréglage à partir des styles actuels

Pour ajouter le préréglage global, ouvrez les paramètres du module de menu d'origine pour le style 2 que nous avons créé et cliquez sur le lien déroulant Préréglage.

Sélectionnez Créer un nouveau préréglage à partir des styles actuels.

Donnez un nom au préréglage (« Logo centré en ligne avec liens de bouton ») et enregistrez le préréglage.

# 3 - Menu espacé VW centré complet avec étiquette mobile

Pour ce prochain style de menu, nous allons concevoir un menu centré sur toute la largeur sans logo dont le texte du menu est dimensionné et espacé d'une unité de longueur vw afin qu'il soit mis à l'échelle avec la largeur du navigateur. Il aura également une étiquette "menu" au-dessus de l'icône du hamburger sur mobile.

Pour créer le troisième préréglage global du menu, nous aurons besoin d'une ligne pleine largeur. Ouvrez les paramètres de ligne contenant le menu dupliqué et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Ouvrez les paramètres du module de menu et supprimez le logo.

Sous l'onglet Conception, mettez à jour le style :

• Style : Centré

Mettez ensuite à jour la taille du texte avec l'unité de longueur VW suivante afin que la taille du texte s'adapte à la largeur du navigateur.

• Taille du texte du menu : 1.5vw (ordinateur de bureau)

Pour créer une étiquette « menu » pour le menu mobile, nous pouvons ajouter du CSS personnalisé à l'affichage de l'élément Before Psuedo sur la tablette comme suit :

Avant CSS

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Notez que la famille de polices est définie sur « poppins » pour correspondre à la police utilisée par les liens de menu. Vous devrez le mettre à jour si vous utilisez une police différente.

REMARQUE : Cela peut ou non apparaître sur le générateur visuel. Vous devrez peut-être charger la page en direct pour voir le résultat.

Ensuite, nous allons ajouter des espacements supplémentaires et des bordures de liens de menu au survol. Continuez à ajouter le CSS personnalisé suivant :

Lien de menu CSS (bureau) :

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Lien de menu CSS (survolez) :

color: #333;
border: 1px solid #333;
opacity:1;

Lien de menu actif CSS :

color: #333;
border: 1px solid #333;
opacity:1;

Style 3 Résultat

Ajout du style de menu 3 en tant que préréglage global

Section en double

Avant d'ajouter le style de menu en tant que préréglage global, dupliquez toute la section contenant le module de menu (style 3) afin que nous puissions utiliser les styles du menu pour démarrer la conception suivante.

Créer un nouveau préréglage à partir des styles actuels

Pour ajouter le style 3 en tant que préréglage global, ouvrez les paramètres du module de menu d'origine pour le style 3 que nous avons créé et cliquez sur le lien déroulant Préréglage.

Sélectionnez Créer un nouveau préréglage à partir des styles actuels.

Donnez un nom au préréglage (« Menu complet centré VW Spaced avec étiquette mobile ») et enregistrez le préréglage.

#4 – Menu espacé à droite avec étiquette mobile

Pour créer le quatrième préréglage global du menu, nous devrons mettre à jour la disposition des colonnes de la ligne avec une disposition 0un quart trois quarts. Cela imitera une disposition d'en-tête personnalisée qui comprendra un module de menu sur la droite et un emplacement séparé pour une image de logo dans la colonne de gauche.

Assurez-vous que le menu est dans la colonne de droite. Ensuite, ouvrez les paramètres du menu et mettez à jour les options des éléments pour afficher l'icône du panier et l'icône de recherche.

Sous l'onglet Conception, mettez à jour le style :

• Style : Aligné à gauche

Mettez ensuite à jour les styles de lien et l'alignement du texte suivants :

• Couleur du lien actif : #ac3cf7
• Taille du texte du menu (bureau): 14px
• Alignement du texte : à droite

Maintenant que notre icône de hamburger sur mobile sera sur le côté droit, nous devrons ajuster l'emplacement de l'étiquette de menu sur mobile. Ensuite, nous ajouterons du CSS de lien de menu pour nous assurer que les liens sont espacés et alignés sur le côté droit de la colonne/ligne.

Ajoutez le CSS personnalisé suivant :

Avant CSS (tablette)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

Lien de menu CSS :

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Style 4 Résultat

Voici le résultat final de notre menu aligné à droite. J'ai ajouté un fond gris clair à la ligne pour que vous puissiez mieux voir l'alignement.

Ajout du style de menu 4 en tant que préréglage global

Section en double

Avant d'ajouter le style de menu en tant que préréglage global, dupliquez toute la section contenant le module de menu (style 4) afin que nous puissions utiliser les styles du menu pour démarrer la conception suivante.

Créer un nouveau préréglage à partir des styles actuels

Pour ajouter le style 4 en tant que préréglage global, ouvrez les paramètres du module de menu d'origine pour le style 4 que nous avons créé et cliquez sur le lien déroulant Préréglage.

Sélectionnez Créer un nouveau préréglage à partir des styles actuels.

Donnez un nom au préréglage (« Menu espacé à droite avec étiquette mobile ») et enregistrez le préréglage.

#4 – Menu espacé à gauche avec étiquette mobile

Pour créer ce quatrième préréglage global de menu, nous devrons mettre à jour la disposition des colonnes de la ligne avec une disposition 0un quart trois quarts. Cela imitera une disposition d'en-tête personnalisée qui comprendra un module de menu sur la gauche et un emplacement séparé pour une image de logo (ou CTA) dans la colonne de droite.

Ouvrez les paramètres du menu et mettez à jour l'alignement du texte pour les liens du menu :

• Alignement du texte : à gauche

Ensuite, nous devons ajuster l'étiquette du menu mobile afin qu'elle se trouve au-dessus de la navigation du hamburger sur le côté gauche. Et en ajoutant la "direction:rtl" sur tablette, nous nous assurerons que les icônes mobiles s'aligneront également sur la gauche sur mobile.

Sous l'onglet Avancé, mettez à jour le CSS personnalisé suivant :

Avant CSS (tablette) :

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Élément principal (tablette) :

direction:rtl;

Lien de menu CSS :

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Voici le résultat final.

Résultats finaux

Dernières pensées

Bien que le style extérieur de ces modules de menu soit basique, la conception du cadre interne de la disposition du menu est extrêmement utile pour démarrer le processus créatif. De plus, avoir un préréglage global avec ces frameworks ne fera qu'accélérer encore plus le processus. N'hésitez pas à explorer d'autres façons de personnaliser le module de menu et d'ajouter des préréglages uniques pour vos prochains projets.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!