Dans une certaine mesure, lorsque vous créez une conception de page, vous pouvez rencontrer une liste de services, de cours ou de contenu similaire que vous souhaitez partager de façon interactive. La conception que vous 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, vous devez également inclure une invitation à agir pour le point de connexion. Si vous êtes à la recherche d’une approche créative, vous apprécierez certainement ce tutoriel. Aujourd’hui, nous allons vous montrer comment utiliser Divi pour afficher les colonnes CTA dans un état collant. Une fois que le CTA atteint la fin de la colonne, l’effet collant s’arrête, ce qui offre une expérience facile pour les gens de continuer à lire les éléments de la liste et de décider d’agir 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 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 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, 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à inscrit, entrez votre ind
Irizzo envoie un e – mail ci – dessous, puis 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! Commençons à recréer! Tout d’abord, 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 à l’onglet 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 – 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 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 d’ouverture 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 l’image de fond 1, puis ouvre les paramètres dans la colonne 1 et applique l’image de fond. Taille de l’image de fond: couverture La bordure passe à l’onglet conception de colonne et applique des filets. Tous les angles: 20px Ajouter un module Blurb à la colonne 2 ajouter du contenu il est temps d’ajouter un module, en commençant par le module Blurb dans la colonne 2. Ajoutez votre sélection.
Sélectionnez l’icône sélectionnez l’icône suivante. La couleur de fond est ensuite appliquée avec une couleur de fond blanche. Couleur de fond: # FFFFFF Paramètres de l’icône passer à l’onglet conception du module et modifier les paramètres de l’icône en conséquence: couleur de l’icône: # 3a7a84 image \ emplacement de l’icô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 l’aile: 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% L’espacement e applique certaines valeurs de remplissage personnalisées aux paramètres d’espacement. 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 L’espacement 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 l’effet adhésif au module de persistance CTA maintenant que tous les éléments sont en place, il est temps d’appliquer l’effet 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 d’opacité 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 l’onglet avancé. C’est 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 cet article, nous vous montrons comment innover avec l’option adhésive de Divi. Plus précisément, nous vous 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, vous pouvez visualiser tous les projets et envoyer des invitations à l’action à proximité. Vous pouvez également télécharger gratuitement le fichier json! Si vous avez des questions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.