Créer une liste de défilement interactive en utilisant l’option Divi Adhesive

L’option adhésive de Divi vous permet d’ajouter facilement des interactions aux pages créées et conçues. Si vous cherchez un moyen de mentionner plusieurs projets sans simplement créer une liste statique, vous aimerez ce tutoriel. Aujourd’hui, nous vous montrerons comment créer une liste de défilement interactive en utilisant l’option permanente Divi. Lorsque les gens défilent vers le bas dans cette section, certains éléments sont ajoutés à la liste à gauche. Cela aide à maintenir l’aperçu. Vous pouvez également télécharger gratuitement le fichier json! On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille.
Bureau Mobile Téléchargement gratuit mise en page pour obtenir une mise en page gratuite, vous devez d’abord 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 au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Créer une structure d’élément ajouter une nouvelle couleur de fond de section commence par ajouter une nouvelle section à la page en cours de traitement. Ajoute une couleur de fond à la section. Couleur de fond: \ # f2f2f
Conversion personnalisée. Les deux: 300% Convertir la conversion et compléter la configuration du module en appliquant les paramètres de conversion suivants: financement: 30% Le dernier module dont nous avons besoin pour ajouter un module séparateur à la colonne 1 visibilité colonne 1 est le module séparateur. Assurez – vous que l’option afficher le séparateur est activée. Afficher les séparateurs: Oui Ligne passer à l’onglet conception du module et modifier les paramètres de ligne en conséquence: couleur de ligne: # 000000 style de ligne: emplacement de la ligne solide: Haut Le redimensionnement modifie également les paramètres de taille du module. Poids du séparateur: 4px hauteur du séparateur: 4px Ajoutez le module image à la colonne 2 laissez la zone image dans la colonne 2 vide et le premier module que nous ajouterons est le module image. Laissez la boîte d’image vide. L’image de fond utilise l’image de fond. Taille de l’image de fond: couverture emplacement de l’image de fond: Centre Espacement et permettre l’affichage de l’image de fond, nous allons changer les paramètres d’espacement comme suit: espacement supérieur: Bureau: 15vh tablette et téléphone: 0vh remplissage supérieur: 33vh remplissage inférieur: 33vh Ajouter un formulaire texte à la colonne 2 ajouter du contenu le formulaire suivant et le dernier que nous avons besoin est le formulaire texte sous le formulaire image. Ajoutez du contenu descriptif de votre choix. Paramètres de texte passer à l’onglet conception du module et modifier les paramètres de texte comme suit: caractères de texte: couleur du texte du stand: # 000000 taille du texte: Bureau: 1.2vw tablette: 2.3vw Téléphone: 3.4vw hauteur de la ligne de texte: 1.6 em L’espacement complète le réglage du module en changeant le réglage de l’espacement du module en conséquence: remplissage à gauche: tablette et téléphone: 5% remplissage à droite: 5% Appliquer un effet visqueux pour transformer la colonne 1 appic
Maintenant que tous les éléments sont en place, nous pouvons commencer à appliquer les paramètres permanents. Ouvrez les paramètres de la colonne 1 et utilisez les paramètres permanents réactifs suivants dans l’onglet avancé: position de collage: collage bas Bureau: tablette et téléphone mobile Section: lignes de décalage avec les éléments collants environnants: Bureau: Oui tablette et téléphone mobile: pas de styles de transition par défaut et permanents: Oui Module de texte 1 dans la colonne 1: hauteur permanente maintenant que la colonne 1 est fixée, nous pouvons commencer à appliquer certains paramètres permanents aux éléments de cette colonne. Nous commencerons par la hauteur du premier formulaire texte. Hauteur: 0px hauteur de l’adhésif: automatique Opacité nous changeons également l’opacité. Opacité: 0% opacité visqueuse: 100% Formulaire de texte 2 dans la colonne 1: définissez en permanence l’échelle de transformation ensuite, nous allons ouvrir le deuxième formulaire de texte dans la colonne 1. Renvoie la valeur de l’échelle de transformation à l’état permanent de 100%.
Les deux collent: 100% Transform translate modifie également les paramètres de traduction des transformations collées. Fond visqueux: 0% Transition e complète la configuration du module en augmentant la durée de la transition dans l’onglet avancé. Transition: 1000 MS Module séparateur: réglez en permanence la largeur maximale. Enfin, nous changerons également la largeur maximale du module séparateur. Largeur maximale: 0px largeur maximale de l’adhésif: 120 px Une fois la première ligne terminée, vous pouvez la cloner deux fois. Changez tout le contenu et l’image assurez – vous d’éditer tout le contenu et l’image et vous avez terminé! Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Enfin, dans cet article, nous vous montrons