Comment créer un menu collant extensible lors de l’utilisation du vol stationnaire Divi

Chaque semaine, nous vous proposons un nouveau paquet gratuit de mise en page Divi que vous pouvez utiliser pour votre prochain projet. Pour l’un de ces paquets de mise en page, nous partageons également un cas d’utilisation qui vous aidera à mettre votre site au niveau suivant. Cette semaine, dans le cadre de notre plan de conception Divi en cours, nous vous montrerons comment créer un menu de souris collant étendu en utilisant le paquet de mise en page mécanique Divi. Nous vous présenterons deux exemples de conception différents que vous pouvez recréer à partir de zéro et appliquer à n’importe quel type de site Web que vous créez! Ce menu apparaît lorsque vous passez le curseur sur la taille de l’écran de bureau et est activé lorsque vous cliquez sur l’appareil mobile.
Allons – y! Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Exemple 1 Bureau Mobile Exemple # 2 Bureau Mobile Étapes générales désactiver la navigation fixe pour diviser les options de thème nous commencerons par quelques étapes générales. Ces étapes sont les mêmes pour les deux exemples et sont nécessaires pour obtenir les résultats souhaités. Si vous prévoyez utiliser un menu collant extensible au bas de la page, vous voudrez peut – être omettre la barre principale du menu en haut. Pour ce faire, vous devez aller à l’option sujet de Divi. Désactivez la navigation fixe ici, il est recommandé de désactiver l’option barre de navigation fixe pour vous assurer qu’il n’y a pas d’espace libre en haut de la page. Barre de navigation fixe: Désactiver Masquer la barre de menu principale sur la configuration de la page ouverte pour passer à la page où vous voulez ajouter un menu collant extensible et ouvrir la configuration de la page. Masquer le menu principal en ajoutant les lignes de code CSS suivantes à la page En – tête principal
Affichage: aucun;
} Ajouter une nouvelle section à la fin de l’AP
Gina, peu importe le genre d’exemple que tu veux recréer, certaines des étapes de base sont les mêmes. La première étape consiste à ajouter une section normale au bas de la page. L’espacement ouvre les paramètres de section et supprime tous les remblais supérieurs et inférieurs personnalisés. Remplissage supérieur: 0px remplissage inférieur: 0px Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionnez sans ajouter de module, activez les paramètres de ligne et laissez la ligne prendre toute la largeur de l’écran. Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 100% largeur maximale: 100% Espacement ensuite, supprimez tous les remblais supérieurs et inférieurs par défaut.
Remplissage supérieur: 0px remplissage inférieur: 0px En ajoutant deux lignes de code CSS à l’élément principal de la ligne, nous pouvons garder la ligne entière au bas de la page. En bas: 0px;
Position: fixe; En ajoutant un index Z aux paramètres de visibilité des lignes, nous nous assurons que les lignes (et les formulaires de texte que nous ajoutons dans les prochaines étapes) restent en haut de tout le contenu de la page. Indice Z: 99 La dernière partie de l’étape générale pour ajouter un module de code à une colonne de code CSS entre les balises de style est d’ajouter un module de code à une nouvelle ligne. Le code CSS que nous avons ajouté à ce module de code nous aidera à obtenir l’effet d’affichage pendant que nous survolons la souris. Collez la ligne de code CSS suivante dans le formulaire:

– Oui. DT menu li {
Taille de la police: 0;
Hauteur de la ligne: 0;
}
– Oui. Menu dt: vol stationnaire li {
Taille de la police: 2vh;
Hauteur de la ligne: 2,1em;
} Recréer l’exemple 1 Ajouter un formulaire texte à la colonne ajouter du contenu maintenant que nous avons terminé toutes les étapes, nous pouvons commencer à nous concentrer sur deux exemples de conception différents, à partir de
Numéro un. Ajoute un formulaire texte à une colonne d’une ligne. Dans la zone de contenu, nous affichons la copie ≡ menu en utilisant le style de paragraphe. Par conséquent, nous insérons tous les éléments du menu dans la liste non ordonnée. Nous ajouterons également un lien distinct pour chaque titre de page. La couleur de fond par défaut passe aux paramètres de fond du formulaire et change la couleur de fond. Couleur de fond: # FFFFFF Couleur de fond lorsque vous déplacez la souris changez cette couleur de fond lorsque vous déplacez la souris. Couleur de fond: rgba (255255255,0,83) Et ajoute un fond de rampe par défaut. Couleur 1: rgb (255255255,0) couleur 2: # FFFFFF position finale: 60% Allez dans l’onglet conception et modifiez les paramètres de texte pour continuer. Police de texte: Khand poids de la police de texte: gras couleur du texte: # 021827 taille du texte: 3vh direction du texte: Centre Paramètres de texte pour le curseur de la souris modifie certains paramètres de texte pour le curseur de la souris. Couleur du texte: rgba (255255255,0) taille du texte: 0vh Ensuite, allez aux paramètres du texte du lien et changez la couleur du texte du lien. Couleur du texte du lien: # 000000 Les paramètres de texte de la liste par défaut passent aux paramètres de texte de la liste par défaut et sont modifiés au besoin. Assurez – vous d’utiliser 0px pour la taille du texte par défaut. Caractères de liste non ordonnés: Khand style de caractère de liste non ordonnés: majuscules alignement de texte de liste non ordonnés: Centre couleur de texte de liste non ordonnés: rgba (255255255,0) taille de texte de liste non ordonnés: 0px hauteur de ligne de liste non ordonnés: 0em emplacement de style de liste non ordonnés: interne Liste les paramètres de texte en vol stationnaire, puis modifie certaines valeurs en vol stationnaire