Comment créer un accordéon cliquable avec un titre de page collant dans Divi
La nouvelle option de position de collage de Divi ouvre de nombreuses possibilités de conception nouvelles et passionnantes. Dans ce tutoriel, nous vous montrerons comment combiner l’option de position collante de Divi avec le lien d’ancrage de glissement de fluide pour créer une approche semblable à celle de l’accordéon pour indexer et naviguer les pages. Il est facile de le construire avec les options intégrées de Divi, de sorte que vous n’avez pas besoin de CSS supplémentaires ou d’autres codes. Une fois terminé, vous aurez une façon unique d’organiser vos pages et d’améliorer l’expérience utilisateur sur votre bureau et votre appareil mobile.
Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Ici, vous pouvez voir les titres de page collés en haut et en bas de la fenêtre du navigateur, empilés ensemble comme un accordéon. Ici, vous pouvez voir que cliquer sur l’un des titres collants va sauter (en utilisant le lien de positionnement de défilement unifié) à cette partie de la page, ainsi qu’à l’accordéon. C’est aussi une fonctionnalité sur votre téléphone. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder
Dans l’onglet conception, mettre à jour ce qui suit: utiliser une largeur de gouttière personnalisée: s largeur de gouttière: 1 largeur (tablette et téléphone): 100% remplissage: 0px en haut, 0px en bas