Comment construire une barre latérale fixe réactive avec des liens d’ancrage coulissants lisses en utilisant Divi

Les barres latérales ne sont pas aussi populaires qu’avant. Dans de nombreux cas, ils finissent par être distraits plutôt que de fournir de l’aide. Mais parfois, les barres latérales sont significatives, surtout lorsqu’il s’agit de contenu long. C’est pourquoi j’ai décidé de créer une barre latérale très significative. Aujourd’hui, je vais vous montrer comment utiliser Divi Builder pour créer une barre latérale fixe (ou fixe) réactive avec un lien d’ancrage de défilement lisse (ou un lien de saut). Comme les barres latérales restent visibles et que les liens d’ancrage fonctionnent en douceur dans différentes parties de la page, les barres latérales restent appariées au contenu, ce qui en fait une fonctionnalité ux utile. Tout comme la structure d’un document, cette combinaison rend le contenu d’une page Web plus accessible et plus lisible. C’est une solution rafraîchissante pour les pages qui défilent longtemps.
Regarde ça! Voici un aperçu que nous allons construire ensemble. Concept Pour les gens comme moi qui vivent dans les documents Google, je sais qu’il existe un outil de structure de document utile qui vous permet de distribuer facilement une barre latérale fixe avec un contour cliquable qui peut être transmis à différents titres de document. J’aime ça parce qu’il m’aide à trouver des informations plus rapidement. Je pense que ce serait bien d’apporter cette fonctionnalité sur votre site. Vous devez commencer ce tutoriel et ce dont vous avez vraiment besoin, c’est Divi! Nous utiliserons également la page recettes du paquet de mise en page des recettes alimentaires, accessible gratuitement à partir de Divi Builder.
Ajoutez une mise en page à la page Abonnez – vous à notre canal YouTube, commencez à créer de nouvelles pages et déployez Divi Builder. Sélectionnez l’option select default Layout. Dans la fenêtre contextuelle télécharger de la bibliothèque, sélectionnez le paquet de mise en page des recettes alimentaires et cliquez pour utiliser la page des recettes
Ancrer l’élément) et ajouter les marges personnalisées suivantes: Marges personnalisées: 20% restantes Maintenant, avant d’enregistrer les paramètres, faites un clic droit sur l’option Marges personnalisées, puis cliquez sur copier les marges personnalisées et enregistrer les paramètres. Dans chaque partie restante de la mise en page, collez les marges personnalisées dans la section en cliquant avec le bouton droit de la section et en cliquant sur coller les marges personnalisées. Cela donnera une marge de gauche de 20% pour toutes les sections, à l’exception de la section supérieure qui contient des boutons de liaison d’ancrage. Créer une barre latérale fixe pour créer une barre latérale, nous devons lui assigner un emplacement fixe sur le côté gauche de la page. Donc, fondamentalement, nous allons transformer la partie supérieure en une barre latérale fixe. Pour ce faire, ouvrez les paramètres en haut et mettez à jour ce qui suit: sur l’onglet conception, mettez à jour… Largeur: 20% hauteur: 100% dans l’onglet avancé, mettre à jour l’emplacement… Position: offset vertical fixe: 80 Px Ceci fournit une position fixe pour cette section avec une largeur de 20% de la page. Il place également la section sur le côté gauche de la page et la place à 80 pixels en haut de la page pour tenir compte de la hauteur de navigation de l’en – tête. 100% de hauteur assure que la Section occupe toute la hauteur de la page. Maintenant, affichez la page dans un autre onglet navigateur pour voir les fonctionnalités. Lorsque vous faites défiler la page vers le bas, la barre latérale reste inchangée et vous pouvez facilement naviguer entre les différentes sections en cliquant sur le bouton liens d’ancrage. Vous avez peut – être remarqué que cette section chevauche la barre de pied de page au bas de la page. Il y a plusieurs façons de résoudre ce problème. Par exemple, je peux supprimer \
Laissez quelques CSS à la configuration de la page pour ajuster la largeur du pied de page. Cependant, si vous voulez maintenir la hauteur de la section à 100%, une solution simple est de supprimer la couleur de fond de la section. Ouvrez la section paramètres que nous utilisons pour la barre latérale et ajoutez la couleur de fond suivante: couleur de fond: rgba (255255255,0) Si vous voulez changer la couleur de la barre latérale, vous pouvez ouvrir la configuration de la page et changer la couleur de fond de la zone de contenu. Comme la couleur de fond de la section est transparente, la couleur de fond de la zone de contenu de la page pénètre. Comme toutes nos autres sections ont une couleur de fond, elle ne sera affichée que par la Section de la barre latérale et ne chevauchera pas la barre de pied de page en bas. Apporter des modifications à votre appareil mobile cette conception n’a vraiment aucun sens pour votre smartphone parce qu’il n’y a pas de barre latérale et qu’il y a des liens en haut de la page que l’utilisateur doit retourner chaque fois qu’il clique sur un lien ancré. Mais cette conception fonctionne toujours avec la tablette, mais vous devrez peut – être créer plus d’espace pour ces liens ancrés. Pour ce faire, ouvrez les paramètres de ligne de la barre latérale de section et mettez à jour ce qui suit: largeur personnalisée: 100 remplissage personnalisé (bureau): 10% à gauche, 10% à droite remplissage personnalisé (tablette): 0% à gauche, 0% à droite Maintenant, il suffit de cacher (ou désactiver) les parties du smartphone. Pour ce faire, ouvrez la section paramètres et allez à l’onglet avancé, puis cliquez sur la case à cocher pour désactiver smartphone.

C’est tout. Maintenant vous avez un menu de barre latérale fixe réactif avec des liens d’ancrage qui défilent en douceur! Résultats finaux examinons maintenant les résultats fi