Les menus sont une partie importante de tout site Web, il faut donc du temps et des efforts supplémentaires pour s’assurer qu’ils sont affichés correctement. Dans Divi, nous pouvons rapidement créer des menus personnalisés en utilisant le module menu de Divi, qui fournit de nombreuses options de style dont nous avons besoin. Mais en préparant quelques presets de menu global à l’avance, il aide toujours à simplifier le processus de conception des titres de site. Cela vous permettra d’implémenter un cadre de style de menu personnalisé lorsque vous cliquez sur le bouton, afin que vous puissiez passer plus de temps à modifier le design pour correspondre à votre marque de site. Par exemple, si vous voulez un menu centré avec des liens vers des logos et des boutons similaires, vous pouvez déployer le cadre en un seul clic en utilisant les valeurs par défaut globales. Cela permet d’économiser du temps et de l’énergie précieux.
Dans ce tutoriel, nous partagerons 5 presets de module de menu global que vous pouvez utiliser lors de la création de vos propres titres Divi personnalisés. En plus d’inclure le téléchargement gratuit des 5 presets, nous vous guiderons dans le processus de création de ces presets à partir de zéro. Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier
Abonnez – vous à Divi Newsletter et nous vous enverrons par e – mail une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources incroyables
Le, nous pouvons ajouter quelques CSS personnalisés à l’élément avant psuedo sur l’écran de la tablette comme suit: avant le contenu CSS: \
Famille de polices: Poppins;
Taille de la police: 12px;
Position: absolue;
En haut: 0;
Gauche: 50%;
Conversion: conversion (- 50%, – 100%);
Notez que la famille de polices est définie à \
Aligner le contenu: centré;
Alignement du texte: centré;
Fill:. 3em;
Marge inférieure: 8px;
Bordure: 1px solide transparent;
Lien vers le menu CSS (en haut): Couleur: # 333;
Bordure: 1px solide # 333;
Opacité: 1;
Lien vers le menu CSS actif: Couleur: # 333;
Bordure: 1px solide # 333;
Opacité: 1;
Résultat du style 3 Ajouter le style de menu 3 comme Section de copie par défaut globale avant d’ajouter le style de menu comme valeur par défaut globale, copiez la section entière qui contient le module de menu (style 3) afin que vous puissiez utiliser le style de menu pour démarrer le projet suivant. Créer un nouveau preset à partir du style actuel pour ajouter le style 3 comme défaut global, ouvrez les paramètres originaux du module de menu pour le style 3 que nous avons créé, puis cliquez sur le lien déroulant par défaut. Sélectionnez créer un nouveau preset à partir du style courant. Nommez le preset (menu complet centré sur VW avec espacement des étiquettes mobiles) et sauvegardez le preset. # 4 – menu d’espacement droit avec étiquette de mouvement Pour créer un quatrième preset de menu global, nous devons mettre à jour la disposition des lignes et des colonnes avec la disposition 0 1 \ 4 3 \ 4. Ceci simule la disposition manquante du titre
Et enregistrer le preset. # 4 – menu d’espacement gauche avec étiquette de mouvement Pour créer ce quatrième preset de menu global, nous devons mettre à jour la disposition des lignes et des colonnes en utilisant la mise en page Q3. Cela simule une mise en page personnalisée du titre qui contiendra un module de menu à gauche et un espace séparé pour l’image du logo (ou CTA) dans la colonne de droite. Ouvrir les paramètres du menu et mettre à jour l’alignement du texte pour les liens du menu: alignement du texte: à gauche Par conséquent, nous devons ajuster l’onglet déplacer le menu au – dessus du navigateur de Hambourg gauche. En ajoutant \
Position: absolue;
Famille de polices: Poppins;
Taille de la police: 12px;
Hauteur de la ligne: 1EM;
En haut: 0px;
Gauche: 6px;
Transformation: translatey (- 100%);
Principaux éléments (comprimés): Direction: RTL;
Lien vers le menu CSS: largeur minimale: 8em;
Emballage: 0,3em;
Marge inférieure: 8px;
Contenu du réglage: extrémité flexible;
C’est le résultat final. Résultats finaux Bien que le style externe de ces modules de menu soit fondamental, la conception de la structure interne de la disposition du menu est utile pour commencer le processus de création. En outre, la mise en place de ces cadres à l’échelle mondiale accélérera encore ce processus. Vous êtes libre d’explorer d’autres façons de personnaliser les modules de menu et d’ajouter des presets uniques pour votre prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!