Dans une certaine mesure, lorsque créez une conception de page, pouvez rencontrer une liste de services, de cours ou de contenu similaire que souhaitez partager de façon interactive. La conception que utilisez pour lister le contenu joue un rôle important dans la façon dont les visiteurs digèrent le contenu. Pour la plupart des listes, devez également inclure une invitation à agir pour le point de connexion. êtes à la recherche damp;rsquoune approche créative, apprécierez certainement ce tutoriel. Aujourdamp;rsquohui, nous allons montrer comment utiliser Divi pour afficher les colonnes CTA dans un état collant. Une fois que le CTA atteint la fin de la colonne, lamp;rsquoeffet collant samp;rsquoarrête, ce qui offre une expérience facile pour les gens de continuer à lire les éléments de la liste et de décider damp;rsquoagir au besoin sans défiler vers le haut ou vers le bas pour trouver le CTA. Nous partagerons également gratuitement les fichiers json!
On y va. Aperçu avant damp;rsquoaller plus loin dans ce tutoriel, jetons un coup damp;rsquooeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit de la disposition de la section CTA de la colonne adhésive pour obtenir la disposition de la section CTA de la colonne adhésive gratuite, devez damp;rsquoabord en utilisant les boutons ci dessous. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire. Télécharger le fichier
Inscrivez à Divi Newsletter et nous enverrons par courriel une copie du dernier paquet de mise en page de la page damp;rsquoatterrissage Divi, ainsi quamp;rsquoun grand nombre damp;rsquoautres ressources, conseils et astuces Divi gratuits. Suivez nous et serez bientôt maître Divi. êtes déjà inscrit, entrez votre ind
Irizzo envoie un e mail ci dessous, puis cliquez sur pour accéder au paquet Layout.
Vous êtes inscrit avec succès. Vérifiez votre adresse e mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Commençons à recréer! Tout damp;rsquoabord, ajoutez une nouvelle section à la page en cours de traitement. Ouvrez les paramètres partiels et appliquez une couleur de fond blanche. Couleur de fond: FFFFFF Ajouter une structure de ligne 1 continuer à ajouter de nouvelles lignes en utilisant la structure de colonne suivante: Sans ajouter de module, ouvrez le réglage de ligne et appliquez une marge inférieure.
Marge bénéficiaire inférieure: 5% Ajouter un formulaire texte à la colonne ajouter du contenu H2 ajouter un formulaire texte qui contient du contenu H2 de votre choix. Paramètres de texte H2 passer à lamp;rsquoonglet conception du module et modifier les paramètres de texte en conséquence H2: titre 2 caractères: Wing title 2 poids de police: bold title 2 alignement du texte: Central text Color title 2: 000000 title 2 taille du texte: desktop: 55px tablette: 40px Téléphone: 30px Ajoutez le module séparateur à la colonne de visibilité sous le module texte, ajoutez le module séparateur et assurez que lamp;rsquooption afficher le séparateur est activée.
Afficher les séparateurs: Oui Ligne passer à lamp;rsquoonglet conception du module et modifier les paramètres de ligne comme suit: couleur de ligne: 3a7a84 style de ligne: Double Dimensions compléter la configuration du module en changeant les paramètres de dimension en conséquence: poids du séparateur: 10px largeur: 8% alignement du module: hauteur centrale: 10px Ajouter une structure de colonne continue pour la ligne 2 en ajoutant une autre ligne juste en dessous de la ligne précédente en utilisant la structure de colonne suivante: Redimensionner les paramètres damp;rsquoouverture et modifier
Les paramètres de taille sont les suivants:
Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 2 hauteur de colonne égale: Oui largeur: 95% largeur maximale: 2580 px Espacement ensuite, supprimez tous les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px La colonne définit lamp;rsquoimage de fond 1, puis ouvre les paramètres dans la colonne 1 et applique lamp;rsquoimage de fond. Taille de lamp;rsquoimage de fond: couverture La bordure passe à lamp;rsquoonglet conception de colonne et applique des filets. Tous les angles: 20px Ajouter un module Blurb à la colonne 2 ajouter du contenu il est temps damp;rsquoajouter un module, en commençant par le module Blurb dans la colonne 2. Ajoutez votre sélection.
Sélectionnez lamp;rsquoicône sélectionnez lamp;rsquoicône suivante. La couleur de fond est ensuite appliquée avec une couleur de fond blanche. Couleur de fond: FFFFFF Paramètres de lamp;rsquoicône passer à lamp;rsquoonglet conception du module et modifier les paramètres de lamp;rsquoicône en conséquence: couleur de lamp;rsquoicône: 3a7a84 image emplacement de lamp;rsquoicône: à gauche Les paramètres du texte du titre modélisent ensuite les paramètres du texte du titre. Niveau du titre: H3 caractères du titre: poids de la police du titre de lamp;rsquoaile: gras couleur du texte du titre: 000000 taille du texte du titre: Bureau: 35px tablette: 30px Téléphone: 20px
Paramètres du corps du texte il apporte également quelques modifications aux paramètres du texte du corps. Caractères du corps: Karla taille du texte du corps: Bureau: 17px tablette: 15px téléphone mobile: 14px hauteur de la ligne du corps: 2,5 em Redimensionner modifie le prochain réglage de redimensionnement. Largeur du contenu: 100% Lamp;rsquoespacement e applique certaines valeurs de remplissage personnalisées aux paramètres damp;rsquoespacement. Remplissage supérieur: 20% remplissage inférieur: 20% remplissage gauche: 10% remplissage droit: 10% Prochain Front
Frame Shadows: 0px Frame Shadows vertical Location: 3px Shadow color: FFFFFF Passer aux paramètres de taille du module et appliquer les modifications suivantes: largeur: Bureau: 95% tablette et téléphone: 100% alignement du module: Centre Lamp;rsquoespacement ajoute un remplissage personnalisé en haut et en bas. Remplissage supérieur: 150 Px remplissage inférieur: 150 px La bordure comprend également des filets. Tous les angles: 20px Compléter la configuration du module en appliquant les paramètres de conversion suivants: droite: Bureau: 25px tablette et téléphone: 0px Appliquer lamp;rsquoeffet adhésif au module de persistance CTA maintenant que tous les éléments sont en place, il est temps damp;rsquoappliquer lamp;rsquoeffet adhésif. Ouvrez le module CTA et appliquez les paramètres permanents suivants: position collante: Bureau: Restez en haut de la tablette et du téléphone: décalage supérieur non collant: 50 Px limite inférieure permanente: décalage des colonnes des éléments collants environnants: sont les styles de transition par défaut et permanents: Oui Opacité maintenant que le module est devenu collant, nous pouvons appliquer un style collant. Aller aux paramètres du filtre et appliquer les paramètres du filtre damp;rsquoopacité suivants: opacité par défaut: Bureau: 0% tablette et téléphone: 100% opacité visqueuse: 100% Enfin et surtout, nous modifierons les paramètres de conversion dans lamp;rsquoonglet avancé. Camp;rsquoest tout! Durée de la transition: courbe de vitesse de transition de 800 MS: ralentissement Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans nous montrons comment innover avec lamp;rsquooption adhésive de Divi. Plus précisément, nous avons montré comment utiliser le CTA collant pour afficher les éléments de la liste de façon exceptionnelle. Cette approche
Lorsque les visiteurs sont prêts à passer par vos services, cours ou autres types de listes, pouvez visualiser tous les projets et envoyer des invitations à lamp;rsquoaction à proximité. Vous pouvez également gratuitement le fichier json! avez des questions, namp;rsquohésitez pas à faire part de vos commentaires dans la section commentaires ci dessous. souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez de abonner à notre newsletter et à YouTube Channel afin que soyez toujours lamp;rsquoun des premiers à apprendre et à bénéficier de ce contenu gratuit.
Comment afficher le CTA de la colonne d&rsquoétat visqueux avec Divi
