Chaque semaine, nous proposons un nouveau paquet gratuit de mise en page Divi que pouvez utiliser pour votre prochain projet. Pour lamprsquoun de ces paquets de mise en page, nous partageons également un cas damprsquoutilisation qui aidera à mettre votre site au niveau suivant. Cette semaine, dans le cadre de notre plan de conception Divi en cours, nous montrerons comment créer un menu de souris collant étendu en utilisant le paquet de mise en page mécanique Divi. Nous présenterons deux exemples de conception différents que pouvez recréer à partir de zéro et appliquer à namprsquoimporte quel type de site Web que créez! Ce menu apparaît lorsque passez le curseur sur la taille de lamprsquoécran de bureau et est activé lorsque cliquez sur lamprsquoappareil mobile.
Allons y! Aperçu avant damprsquoaller plus loin dans ce tutoriel, jetons un coup damprsquooeil 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. prévoyez utiliser un menu collant extensible au bas de la page, voudrez peut être omettre la barre principale du menu en haut. Pour ce faire, devez aller à lamprsquooption sujet de Divi.
Désactivez la navigation fixe ici, il est recommandé de désactiver lamprsquooption barre de navigation fixe pour assurer quamprsquoil namprsquoy a pas damprsquoespace 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ù 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 lamprsquoAP
Gina, peu importe le genre damprsquoexemple 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.
Lamprsquoespacement 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 lamprsquoé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 à lamprsquoé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 lamprsquoétape générale pour ajouter un module de code à une colonne de code CSS entre les balises de style est damprsquoajouter un module de code à une nouvelle ligne. Le code CSS que nous avons ajouté à ce module de code nous aidera à obtenir lamprsquoeffet damprsquoaffichage 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 lamprsquoexemple 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 damprsquoune 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 déplacez la souris changez cette couleur de fond lorsque 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 lamprsquoonglet 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 damprsquoutiliser 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
Comment créer un menu collant extensible lors de l&rsquoutilisation du vol stationnaire Divi
