Créer un menu plein écran dans Divi
Vous serez dirigé vers l’éditeur Divi Builder, qui aura une section. Ouvrez le panneau de configuration de section et dans le bloc d’arrière – plan, changez la couleur d’arrière – plan en couleur entièrement transparente = rgba (255255255,0). 
Ensuite, supprimez le remplissage par défaut en haut et en bas de la section, allez à l’onglet conception → espacement et réglez le remplissage en haut et en bas à 0px. 
Continuez à spécifier la classe CSS pour cette section, puis convertissez la section en un menu plein écran pour le code CSS, allez à l’onglet avancé → ID et classe CSS, et tapez dans la classe CSS: transformation de section.
Ensuite, allez au verrou de visibilité et définissez les débordements horizontaux et verticaux à masquer, continuez avec le verrou de positionnement et définissez l’index Z à 99999, ce qui garantira que la section est toujours en haut de toutes les pages et du contenu du message. De plus, activez l’option de vol stationnaire de la souris et assurez – vous que la valeur de l’index Z est la même. 
Étape 3: ajoutez la première ligne à la section continuer en ajoutant une ligne à la section, qui sera la première ligne de la section. Ensuite, sans ajouter de module, ouvrez les paramètres de ligne, allez à l’onglet conception et ouvrez le bloc de dimension de sorte que la ligne occupe toute la largeur de l’écran. Les méthodes suivantes sont nécessaires:
Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 100% largeur maximale: 100% 
Continuer à supprimer le prochain remplissage supérieur et inférieur par défaut dans le bloc d’espacement et définir le remplissage supérieur et inférieur à 0px. 
Étape 4: ajouter un formulaire de texte au bouton Menu nous n’avons besoin que du formulaire de texte dans cette ligne, le contenu de ce formulaire de texte sera votre bouton Menu, vous pouvez ajouter le symbole de menu que vous avez sélectionné. Dans cet article, nous utilisons
Si vous préférez, nommez le premier menu et fournissez – lui un lien. Notre premier menu est \
Police de texte: arial text font Weight: Half bold text color: # 000000 text size: 3vw (Desktop), 7vw (tablette), 8vw (mobile) text letter Spacing: – 0.1vw text Line height: 1EM 
Ensuite, le réglage de l’espacement. Définir comme suit: marge supérieure: 1vw marge inférieure: 2vw marge gauche: 3vw
| Continuez à copier le formulaire texte dans le nombre de menus désiré. Cependant, assurez – vous que le menu ne dépasse pas la hauteur de l’écran. Cette fois, nous allons utiliser 4 menus, donc nous allons le cloner trois fois. Pour l’obtenir, cliquez sur le formulaire texte du menu, puis cliquez sur l’icône copier |
Étape 8: ajouter du Code au menu plein écran il est temps d’ajouter du Code au menu plein écran. Lorsque vous cliquez sur l’icône du menu, le code suivant convertit la section plein écran.
$(\ $(\ }); $(.Me) Aucun élément cliquez sur). Cliquez sur (fonction () { $(\ }); }); |
Pour ajouter du Code, nous allons d’abord créer une nouvelle ligne et y ajouter un formulaire de code. Nous limiterons l’espace occupé par cette ligne en supprimant tous les remplissages par défaut en haut et en bas. 
Continuez en ajoutant un formulaire de code et en collant le code ci – dessus. 
Étape 9: taille finale de la section une fois que vous avez terminé d’ajouter tous les modules et leur contenu à la section, vous pouvez effectuer le redimensionnement final. Ouvrir les paramètres de la section → conception → redimensionner et appliquer les tailles suivantes à la section: largeur: 8vw (bureau), 11vw (tablette), 18vw (téléphone mobile) Hauteur: 7vw (bureau), 11vw (tablette), 18vw (téléphone mobile) 
Continuer à aller à avancé → personnaliser CSS → onglet Éléments principaux et ajouter le clip CSS suivant: emplacement: fixe;
Limite supérieure: 0; Assurez – vous que le même clip CSS est appliqué pendant le vol stationnaire. Étape 10: enregistrer le projet et le regarder en temps réel, un menu plein écran simple est prêt, cliquez sur le bouton Enregistrer pour enregistrer le menu, fermez l’éditeur et cliquez sur Enregistrer les modifications sur la page Theme Builder. Essayez d’ouvrir une de vos pages ou messages et de cliquer sur le menu que vous venez de créer. Voici notre menu
Trois pages.