Créez une liste de navigation de portefeuille déroulante avec les effets de défilement de Divi
Publié: 2020-06-11Les pages de portfolio sont l'excuse parfaite pour faire preuve de créativité avec votre conception de sites Web. Dans ce didacticiel, nous allons vous montrer comment créer une liste de navigation de portefeuille défilante accrocheuse pour pimenter n'importe quelle page de portefeuille. Grâce aux effets de défilement de Divi, les éléments de menu prennent vie lorsqu'ils atteignent le milieu de l'écran. Des boutons avec des liens d'ancrage aident l'utilisateur à naviguer vers les sections correspondantes.
Continuez votre lecture pour recréer le design ou téléchargez le fichier JSON gratuitement.
Aperçu
Avant de commencer le didacticiel, examinons le design sur différentes tailles d'écran.
Bureau
Mobile
Filaire
Cette liste de navigation de portefeuille à défilement réactive est créée avec une série de lignes répétées et alternées. Pour cette raison, nous avons inclus une capture d'écran de la vue filaire. Cela vous aidera à suivre l'ordre des lignes et de leurs modules respectifs. Nous vous suggérons d'étiqueter chaque ligne en conséquence pour garder une trace. Nous avons également ajouté ces instructions dans les étapes du didacticiel.
Téléchargez les sections des héros GRATUITEMENT
Pour mettre la main sur la mise en page gratuite de la liste de navigation du portefeuille à défilement, vous devez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
1. Créer une nouvelle section
Ajouter une section
Fond
Commencez par une section régulière à l'intérieur d'une page nouvelle ou existante. Avant d'ajouter des lignes ou des modules, ajoutez une couleur d'arrière-plan à la section.
- Couleur d'arrière-plan : #222831
Espacement
Ajoutez suffisamment d'espacement à la section pour que les effets de défilement fassent également leur magie.
- Rembourrage haut et bas : 660px
2. Créer une liste de navigation de portefeuille déroulante
Ajouter la ligne 1
Structure des colonnes
Ajoutez la première ligne et choisissez la structure de colonnes suivante :
Dimensionnement
Ajustez ensuite la largeur de la ligne.
- Largeur: 90%
- Largeur maximale : 2560px
Espacement
Ensuite, ajustez les paramètres d'espacement.
- Rembourrage gauche
- Bureau : 130px
- Tablette et téléphone : 50px
Étiquette d'administrateur
Et étiquetez la ligne.
- Libellé administrateur : ligne 1
Ajouter un module de texte à la colonne
Teneur
Ajoutez un module de texte pour le titre. Insérez du contenu H1 de votre choix.
Texte d'en-tête
Passez à l'onglet Conception et stylisez le texte du titre comme suit :
- Niveau de titre : H1
- Police : Alata
- Poids : gras
- Couleur : #a3f7bf
- Taille
- Bureau : 190px
- Tablette : 120px
- Téléphone : 50px
- L'espacement des lettres
- Ordinateur de bureau et tablette : 7px
- Téléphone : 8px
Effets de défilement
Enfin, ajoutez un effet de défilement en fondu entrant et sortant à l'onglet avancé.
- Activer l'effet : entrée et sortie en fondu
- Bas de la fenêtre
- Poste : 100 %
- Opacité de départ : 100 %
- Opacité moyenne
- Poste : 50 %
- Milieu : 100 %
- Haut de la fenêtre
- Poste : 80 %
- Opacité finale : 20 %
Ajouter la ligne 2
Structure des colonnes
Il est maintenant temps d'ajouter les éléments de navigation. Ajoutez une nouvelle ligne avec deux colonnes de taille égale.
Étiquette d'administrateur
Étiquetez la ligne.
- Libellé de l'administrateur : ligne 2
Dimensionnement
Ajustez également les paramètres de taille.
- Largeur de gouttière : 1
- Largeur: 80%
- Largeur maximale : 1920px
Paramètres de la colonne 1
CSS personnalisé
Avant d'ajouter des modules, ajoutez une ligne de code CSS aux éléments principaux des colonnes pour vous assurer que les proportions restent les mêmes sur des écrans plus petits. Commencez par la colonne 1 :
- Élément principal : largeur : 20 % !important
width: 20% !important }
Paramètres de la colonne 2
CSS personnalisé
Faites de même pour la deuxième colonne.
- Élément principal : largeur : 80% !important
width: 80% !important }
Ajouter un module de bouton à la colonne 1
Teneur
Maintenant, ajoutez un module de boutons à la colonne 1 avec une copie de votre choix.
- Texte du bouton : Afficher
Relier
Ajoutez ensuite un lien d'ancrage au module. Nous ajouterons un identifiant CSS correspondant pour ce lien d'ancrage plus tard dans le didacticiel.
- URL du lien du bouton : #VB
Alignement
Passez à l'onglet Conception et modifiez l'alignement des boutons.
- Alignement des boutons : Centre
Bouton
Ensuite, stylisez le bouton en conséquence :
- Styles personnalisés pour le bouton : Oui
- Taille du texte
- Bureau : 30 pixels
- Tablette : 25px
- Téléphone : 20px
- Couleur : Blanc #ffffff
- Fond : Gris foncé #222831
- Largeur de la bordure : 0px
- Rayon de bordure : 0px
- Espacement des lettres : 1px
- Police : Alata
- Afficher l'icône du bouton : Non
Espacement
Modifiez également les paramètres d'espacement.
- Rembourrage supérieur
- Bureau : 25px
- Tablette : 15px
- Téléphone : 5px
Effets de défilement
Et ajoutez un effet de défilement en fondu entrant et sortant.
- Activer l'effet : entrée et sortie en fondu
- Bas de la fenêtre
- Poste : 40 %
- Opacité de départ : 0%
- Opacité moyenne
- Bas : 45%
- Milieu : 100 %
- Haut : 55%
- Haut de la fenêtre
- Poste : 60 %
- Opacité finale : 0%
Boîte ombre
Avant de passer au module suivant, ajoutez une ombre de boîte aux paramètres de survol du bouton.
- Boîte d'ombre : 4e option
- Position horizontale : 0px
- Position verticale
- Survol : 5 pixels
- Force du flou : 0px
- Force de propagation: 0px
- Couleur de l'ombre : vert aqua #a3f7bf
Ajouter un module de texte à la colonne 2
Teneur
Continuez en ajoutant un module de texte à la colonne 2 avec du contenu H3 de votre choix.
Texte d'en-tête
Passez à l'onglet Conception et stylisez le texte du titre comme suit :
- Niveau de titre : H3
- Police : Alata
- Couleur
- Bureau : Blanc #ffffff
- Survol : vert aqua #a3f7bf
- Taille du texte
- Bureau : 80px
- Tablette : 65px
- Téléphone : 38px
Effets de défilement
Et complétez les paramètres du module en ajoutant un effet de défilement en fondu entrant et sortant dans l'onglet avancé.
- Activer l'effet : entrée et sortie en fondu
- Bas de la fenêtre
- Poste : 40 %
- Opacité de départ : 15 %
- Opacité moyenne
- Bas : 45%
- Milieu : 100 %
- Haut : 55%
- Haut de la fenêtre
- Poste : 60 %
- Opacité finale : 15 %
Dupliquer la ligne 2
Pour compléter la liste de navigation, dupliquez cette ligne trois fois. Les nouvelles lignes seront renumérotées ; 2, 3 et 4.
Ajuster la ligne 3
Libellé d'administration de ligne
Modifiez le libellé administrateur de la ligne de 2 à 3.
- Libellé de l'administrateur : ligne 3
Module de boutons
Remplacez le lien d'ancrage de #VB par #WEB.
- URL du lien du bouton : #WEB
Module de texte
Modifiez également le contenu H3 dans le module de texte.
- Corps du texte : sites Web
Ajuster la ligne 4
Libellé d'administration de ligne
Modifiez le libellé administrateur de la ligne de 2 à 4.
- Libellé de l'administrateur : ligne 4
Module de boutons
Remplacez le lien d'ancrage de #VB par #MA.
- URL du lien du bouton : #MA
Module de texte
Modifiez également le contenu H3.
- Corps du texte : applications mobiles
Ajuster la ligne 5
Libellé d'administration de ligne
Modifiez le libellé administrateur de la ligne de 2 à 5.
- Libellé de l'administrateur : ligne 5
Écartement des rangs
Ajoutez une marge inférieure.
- Marge inférieure
- Bureau 230px
- Tablette : 100 pixels
- Téléphone : 60 pixels
Module de boutons
Remplacez le lien d'ancrage de #VB par #UX.
- URL du lien du bouton : #UX
Module de texte
Et modifiez le contenu H3 ici aussi.
- Corps du texte : conception UX
3. Créer des éléments de portefeuille
Ajouter la ligne 6
Structure des colonnes
La liste déroulante de navigation du portefeuille renvoie aux éléments du portefeuille. Chaque élément est composé de deux rangées. Une rangée avec un séparateur invisible et une autre avec un module d'appel à l'action. Les identifiants CSS sont ajoutés à la ligne avec le séparateur. De cette façon, la navigation de l'ancre ne s'arrêtera pas en haut de l'élément de portefeuille mais au milieu.
Créons les éléments maintenant. Ajoutez une ligne avec une colonne.
Étiquette d'administrateur
N'oubliez pas d'étiqueter la nouvelle ligne.
- Libellé de l'administrateur : ligne 6
Identifiant CSS et classes
Insérez un identifiant CSS correspondant dans l'onglet avancé.
- Identifiant CSS : VB
Ajouter un module de séparation à la rangée 6
Visibilité
Ajoutez un séparateur invisible à la colonne de la ligne.
- Afficher le diviseur : Non
Dupliquer la ligne 6
Dupliquez cette ligne trois fois. Les nouvelles lignes seront renumérotées ; 8, 10 et 12.
Ajuster la ligne 8
Étiquette d'administrateur
Changez l'étiquette d'administrateur de 6 à 8.
- Libellé de l'administrateur : ligne 8
Identifiant CSS et classes
Changez l'ID CSS de VB en WEB.
- Identifiant CSS : WEB
Ajuster la ligne 10
Étiquette d'administrateur
Modifiez l'étiquette d'administrateur de 6 à 10.
- Libellé de l'administrateur : ligne 10
Identifiant CSS et classes
Changez l'ID CSS de VB en MA.
- Identifiant CSS : MA
Ajuster la ligne 12
Étiquette d'administrateur
Changez l'étiquette d'administrateur de 6 à 12.
- Libellé de l'administrateur : ligne 12
Identifiant CSS et classes
Étiquette d'administrateur
Changez l'ID CSS de VB en UX.
- Identifiant CSS : UX
Ajouter la ligne 7
Structure des colonnes
Laissez les quatre rangées avec des séparateurs où ils sont pour le moment. Ajoutez une nouvelle ligne avec une colonne.
Fond
Sans ajouter encore de module, ouvrez les paramètres de ligne et stylisez l'arrière-plan comme suit :
- Image d'arrière-plan : photo
- Mélange d'images : multiplier
- Dégradé de fond
- Couleur 1 : Gris foncé #222831
- Couleur 2 : Transparent
- Type : Linéaire
- Direction: 90deg
- Position de départ : 50 %
- Position finale : 100 %
- Placer le dégradé au-dessus de l'image d'arrière-plan : Oui
Étiquette d'administrateur
Étiquetez la ligne.
- Libellé administrateur : ligne 7
Dimensionnement
Ajustez les paramètres de dimensionnement de la ligne suivante.
- Largeur: 80%
- Largeur maximale : 2560px
- Alignement : Centre
Frontière
Ajoutez également des coins arrondis.
- Coins arrondis : 25px
Effets de défilement
Et activez un effet de défilement en fondu entrant et sortant.
- Activer les effets : entrée et sortie en fondu
- Opacité de départ : 0%
- Opacité moyenne : 100 %
- Poste : 80 %
- Opacité finale : 20 %
Ajouter un module d'appel à l'action à la ligne 7
Teneur
Ajoutez maintenant un module d'appel à l'action à la ligne.
- Titre : Image de marque
- Bouton : En savoir plus
- Corps : Texte descriptif
Fond
Supprimez la couleur d'arrière-plan par défaut.
- Contexte : aucun
Relier
Ajoutez un lien vers la page correspondante. Nous allons insérer un # pour le moment.
- Relier: #
Texte du titre
Stylisez ensuite le texte du titre.
- Niveau de titre : H2
- Police : Alata
- Couleur : Blanc #ffffff
- Taille
- Bureau : 70 pixels
- Tablette : 60px
- Téléphone : 48px
- Espacement des lettres : 1px
Le corps du texte
Stylisez également le corps du texte.
- Police : Lato
- Couleur : Blanc #ffffff
- Taille
- Bureau : 19px
- Tablette : 20px
- Téléphone : 18px
- Hauteur de ligne : 1,8 em
Bouton
Passez aux paramètres des boutons et appliquez les modifications suivantes :
- Styles personnalisés : Oui
- Taille du texte : 20 pixels
- Couleur du texte : gris foncé #222831
- Contexte : vert aqua #a3f7bf
- Rayon de bordure : 9px
- Espacement des lettres : 1px
- Police des boutons : Alata
- Marge supérieure : 35px
Dimensionnement
Ajustez également la taille du module.
- Largeur : 50 %
- Largeur maximale
- Ordinateur de bureau : 50 %
- Tablette et téléphone : 100 %
- Alignement : à gauche
Espacement
Ajoutez également du rembourrage au module.
- Rembourrage gauche :
- Bureau : 90px
- Rembourrage gauche et droit :
- Tablette : 50px
- Téléphone : 40 pixels
CSS personnalisé
Enfin, ajoutez une ligne de code CSS au titre de la promotion dans l'onglet avancé.
- Titre de la promotion : padding-bottom : 30px ;
padding-bottom: 30px; }
Dupliquer la ligne 7
Dupliquer la ligne 7 trois fois. Les nouvelles lignes seront renumérotées ; 9, 11 et 13.
Ajuster la ligne 9
Fond
Changez l'image d'arrière-plan et changez la direction du dégradé.
- Image d'arrière-plan : nouvelle photo
- Dégradé de fond
- Couleur 1 : Transparent
- Couleur 2 : Gris foncé #222831
- Position de départ : 0%
- Position finale : 50 %
Étiquette d'administrateur
Mettez à jour le libellé administrateur de la ligne de 7 à 9.
- Libellé administrateur : ligne 9
Ajuster le module d'appel à l'action dans la ligne 9
Teneur
Mettez à jour le contenu du module.
- Titre : Sites Web
- Corps : Nouveau texte descriptif
Relier
Mettez également à jour le lien.
- Lien : Nouveau lien
Dimensionnement
Modifiez l'alignement du module de gauche à droite.
- Alignement du module : à droite
Espacement
Modifiez le rembourrage du bureau de gauche à droite. Les paramètres de la tablette et du mobile doivent rester les mêmes.
- Rembourrage droit
- Bureau : 90px
Ajuster la ligne 11
Fond
Modifiez l'image d'arrière-plan dans la nouvelle ligne.
- Image d'arrière-plan : une autre photo
Étiquette d'administrateur
Mettez à jour le libellé administrateur de la ligne de 7 à 11.
- Libellé administrateur : ligne 11.
Ajuster le module d'appel à l'action dans la ligne 11
Teneur
Modifiez le contenu à l'intérieur du module d'appel à l'action.
Relier
Modifiez également le lien.
- Lien : Nouveau lien
Ajuster la ligne 13
Fond
Changez l'image d'arrière-plan et changez la direction du dégradé.
- Image d'arrière-plan : nouvelle photo
- Dégradé de fond
- Couleur 1 : Transparent
- Couleur 2 : Gris foncé #222831
- Position de départ : 0%
- Position finale : 50 %
Étiquette d'administrateur
Ouvrez l'onglet d'étiquette d'administrateur et mettez à jour le numéro de ligne à 13.
Ajuster le module d'appel à l'action dans la ligne 13
Teneur
Mettez à jour le contenu du module.
- Titre : Conception UX
- Corps : Nouveau texte descriptif
Relier
Mettez également à jour le lien.
- Lien : Nouveau lien
Dimensionnement
Modifiez l'alignement du module de gauche à droite.
- Alignement du module : à droite
Espacement
Modifiez le rembourrage du bureau de gauche à droite. Les paramètres de la tablette et du mobile doivent rester les mêmes.
- Rembourrage droit
- Bureau : 90px
Réorganiser les lignes
Déplacez les lignes 7, 9 et 11.
Placez les lignes dans le bon ordre, en fonction de leur étiquette d'administrateur.
Comparez votre wireframe
Vérifiez la structure filaire de la liste de navigation et des éléments de votre portefeuille déroulant. Les lignes doivent être dans l'ordre pour que les liens d'ancrage fonctionnent correctement. Voici un autre aperçu de notre vue filaire :
Aperçu
Nous avons terminé toutes les étapes pour recréer la liste de navigation du portefeuille déroulant. Jetons un autre regard sur l'apparence du design sur différentes tailles d'écran.
Bureau
Mobile
Dernières pensées
Dans ce didacticiel pas à pas, nous avons recréé une liste de navigation de portefeuille déroulante avec les effets de défilement de Divi. De plus, nous avons ajouté des éléments de portefeuille. La navigation est contrôlée avec des liens d'ancrage et des identifiants CSS. C'est un excellent moyen d'afficher de manière interactive les éléments du portefeuille. Laissez-nous un commentaire si vous avez aimé ou si vous avez des questions !