Comment créer un accordéon cliquable à l'aide d'en-têtes de page collante dans Divi
Publié: 2020-09-03Les nouvelles options de position collante de Divi ouvrent la porte à de nombreuses possibilités de conception nouvelles et passionnantes. Dans ce tutoriel, nous allons vous montrer comment combiner les options de position collante de Divi avec des liens d'ancrage à défilement fluide pour créer un moyen en accordéon d'indexer et de parcourir votre page. Le construire est vraiment facile avec les options intégrées de Divi, il n'y a donc pas besoin de CSS supplémentaire ou d'un autre code. Une fois cela fait, vous disposerez d'un moyen unique d'organiser votre page et d'améliorer l'expérience utilisateur sur ordinateur et mobile.
Commençons!
Aperçu
Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.
Ici, vous pouvez voir les en-têtes de page collants coller en haut et en bas de la fenêtre du navigateur et s'empiler les uns sur les autres comme un accordéon.
Ici, vous pouvez voir que cliquer sur l'un des en-têtes collants sautera (en utilisant des liens d'ancrage à défilement fluide) vers cette section de la page également comme un accordéon.
Voici également la fonctionnalité sur mobile.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le 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 !
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création de la ligne collante
Pour commencer, créons notre ligne collante. Pour ce faire, ajoutez une ligne à une colonne à la section par défaut.
Ouvrez les paramètres de ligne. Sous l'onglet Avancé, mettez à jour la position collante comme suit :
- Position collante : coller en haut et en bas
Cela fera que la ligne restera en haut de la fenêtre du navigateur lorsque l'utilisateur fait défiler vers le bas, puis reste en bas de la fenêtre du navigateur lorsque l'utilisateur fait défiler vers le haut.
Styliser la ligne collante
Maintenant que la position collante est en place, nous pouvons commencer à styliser la ligne à l'aide de l'option de style collant intégrée qui vous permet de donner à l'élément un style spécifique chaque fois que la position collante est en vigueur (ou bloquée). Pour la ligne, nous voulons que l'arrière-plan passe à une couleur sombre chaque fois qu'il est en position bloquée. Pour ce faire, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
- Couleur d'arrière-plan (bureau) : #ffffff
- Couleur d'arrière-plan (collante) : #051923
Sous l'onglet Conception, mettez à jour les éléments suivants :
- Utiliser une largeur de gouttière personnalisée : OUI
- Largeur de gouttière : 1
- Largeur (tablette et téléphone): 100%
- Remplissage : 0px en haut, 0px en bas
Ensuite, nous voulons donner une bordure inférieure à la ligne pour servir de ligne de séparation entre le titre et le contenu ci-dessous. Et, une fois que la ligne est en position collante, nous voulons plutôt afficher une bordure gauche.
Sous la bascule d'option de bordure, mettez à jour les éléments suivants :
- Couleur de la bordure : #6eeb83
- Largeur de la bordure inférieure (bureau): 8px
- Largeur de la bordure inférieure (collante): 0px
- Largeur de la bordure gauche (bureau): 0px
- Largeur de la bordure gauche (collante): 8px
Création du texte d'en-tête collant
Pour créer le texte d'en-tête de page, ajoutez un nouveau module de texte à la ligne.
Collez ensuite le code HTML suivant dans le contenu du corps.
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>
Et mettez également à jour la couleur d'arrière-plan au survol…
- Couleur d'arrière-plan (survol): rgba (255,255,255,0.2)
Cela rendra plus évident que les en-têtes sont cliquables pour l'utilisateur.
Styliser le texte de l'en-tête collant
Sous l'onglet Conception, mettez à jour les éléments suivants :
- Police de la rubrique 2 : Montserrat
- En-tête 2 Alignement du texte : à gauche
- Titre 2 Couleur du texte (bureau) : par défaut (ou noir)
- Titre 2 Couleur du texte (collant) : #ffffff
- Titre 2 Taille du texte : 80px (bureau), 22px (collant), 28px (téléphone)
- Titre 2 Hauteur de ligne : 1,3 em (bureau), 1 em (collant)
Ensuite, mettez à jour le remplissage comme suit :
- Rembourrage (bureau) : 15 pixels en haut, 15 pixels en bas
- Rembourrage (collant) : 10 pixels en haut, 0 pixels en bas, 20 pixels à gauche
- Rembourrage (tablette et téléphone): 15px en haut, 15px en bas, 15px à gauche, 15px à droite
Création du contenu de la page fictive
Une fois la ligne collante en place, nous pouvons ajouter une autre ligne qui contiendra du contenu de page fictive sous le titre. Pour ce faire, créez une nouvelle ligne à une colonne sous la ligne collante.
Ajoutez ensuite un nouveau module de texte à la ligne et collez-y du contenu fictif.
Dupliquer la section selon les besoins pour des en-têtes et du contenu de page plus collants
À ce stade, vous avez mis en place la conception de base pour créer des sections de page supplémentaires avec des en-têtes collants simplement en dupliquant la section.
Section en double
Pour créer une autre section, dupliquez la section existante qui contient la ligne/le titre collant et la ligne de contenu fictif. Cela accélérera le processus de développement de la création de la section suivante de la page.
Mettre à jour le contenu du texte et la couleur de la bordure des lignes
Dans la section dupliquée, mettez à jour le texte à l'intérieur du module de texte, puis mettez à jour la couleur de la bordure sous les paramètres de ligne.
Répétez au besoin
Continuez à dupliquer la section et mettez à jour le contenu du texte et la couleur de la bordure de la ligne si nécessaire. Pour cet exemple, nous allons dupliquer la section encore deux fois pour nous donner un total de quatre en-têtes de page collante qui constitueront l'accordéon.
Ajout de liens d'ancrage aux en-têtes de page collante
À l'heure actuelle, la fonctionnalité permettra à l'utilisateur de faire défiler la page vers le bas et d'avoir les en-têtes collés en haut et en bas un peu comme un accordéon. Maintenant, nous voulons rendre les en-têtes cliquables afin que, lorsque l'utilisateur clique sur l'un des en-têtes collants, l'utilisateur soit dirigé vers cette section de la page. Cela se fait à l'aide de liens d'ancrage.
Pour ajouter un lien d'ancrage, nous devons d'abord ajouter un identifiant CSS à la section vers laquelle nous voulons que le lien renvoie.
Ajouter l'ID CSS de la section 1
Ouvrez les paramètres de la section et ajoutez l'ID CSS suivant :
- Identifiant CSS : un
Ensuite, ouvrez les paramètres de la ligne persistante et ajoutez l'URL du lien de ligne suivante :
- URL du lien de ligne : #one
Désormais, lorsque l'utilisateur clique sur la ligne/l'en-tête, la page passe directement à cette première section.
Ajouter l'ID CSS de la section 2
Ensuite, nous devons ajouter le lien d'ancrage pour le deuxième titre.
Ouvrez les paramètres de la deuxième section et ajoutez l'ID CSS suivant :
- Identifiant CSS : deux
Ajouter l'URL du lien de la ligne collante de la section 1
Ensuite, ouvrez les paramètres de la ligne collante à l'intérieur de la deuxième section et ajoutez l'URL du lien de ligne :
- URL du lien de ligne : #deux
Ajouter l'ID CSS de la section 3
Ensuite, nous devons ajouter le lien d'ancrage pour le troisième titre.
Ouvrez les paramètres de la troisième section et ajoutez l'ID CSS suivant :
- ID CSS : trois
Ajouter l'URL du lien de la ligne collante de la section 1
Ensuite, ouvrez les paramètres de la ligne collante à l'intérieur de la troisième section et ajoutez l'URL du lien de ligne :
- URL du lien de ligne : #trois
Ajouter l'ID CSS de la section 4
Enfin, nous devons ajouter le lien d'ancrage pour le quatrième titre.
Ouvrez les paramètres de la quatrième section et ajoutez l'ID CSS suivant :
- ID CSS : quatre
Ajouter l'URL du lien de la ligne collante de la section 1
Ensuite, ouvrez les paramètres de la ligne collante à l'intérieur de la quatrième section et ajoutez l'URL du lien de ligne :
- URL du lien de ligne : #quatre
Résultat final
Ici, vous pouvez voir les en-têtes de page collants coller en haut et en bas de la fenêtre du navigateur et s'empiler les uns sur les autres comme un accordéon.
Ici, vous pouvez voir que cliquer sur l'un des en-têtes collants sautera (en utilisant des liens d'ancrage à défilement fluide) vers cette section de la page également comme un accordéon.
Voici également la fonctionnalité sur mobile.
Dernières pensées
Cette conception utilise l'option de position collante d'une manière unique. Non seulement les en-têtes de page restent visibles lorsque l'utilisateur fait défiler, mais chaque en-tête est également cliquable, amenant l'utilisateur à cette section spécifique à l'aide de liens d'ancrage. Le résultat ressemble beaucoup à un accordéon pour toute votre page. Cette conception serait certainement utile pour l'indexation du contenu long ou pour la création d'une page conviviale.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!