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

Nous avons ajouté une bordure inférieure qui deviendra la ligne de séparation entre chaque menu. Allez au verrouillage de la bordure sous le style de la bordure et sélectionnez la bordure inférieure. Les autres paramètres sont les suivants: largeur du bord inférieur: 1px couleur du bord inférieur: # 3333

Nous complétons la configuration des formulaires texte en ajoutant des classes CSS personnalisées. Cette classe CSS doit être ajoutée à chaque élément de menu que vous utiliserez. Allez à l’onglet Advanced → CSS ID and Class et tapez dans la classe CSS: menu item Click.

Ensuite, continuez à changer le nom de chaque élément de menu dupliqué et le lien désiré.

– Oui. Transformation de section
Curseur: pointeur;
}
– Oui. Conversion de section active {
Hauteur: 100%! Important
Largeur: 100%! Important
Indice Z: 99999! Important
Couleur de fond: # FFFFFF! Important
}
– Oui. Transformation de section
– transition webkit: tous les 0.5s sont pratiques! Important
– transition MOZ: toutes les 0,5 secondes sont pratiques! Important
– transition o: toutes les 0,5 secondes sont faciles! Important
– MS transition: toutes les 0,5 secondes sont faciles! Important
Transition: toutes les 0,5 secondes sont pratiques! Important
}

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 3 fois.

É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. Jquery (fonction ($) $(\ $(\ }); $(.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.