Comment fixer un module dans son conteneur de colonne en utilisant Divi

Lorsque vous affichez plusieurs invitations à l’action sur une page, cela vous aide à créer un effet de défilement interactif qui combine différents éléments. Une façon est de convertir un module en un élément fixe lorsqu’il se déplace dans un conteneur de colonne. Dans le tutoriel d’aujourd’hui, nous vous montrerons comment créer de beaux dessins qui traitent de cette technologie, et vous pouvez télécharger des fichiers json gratuitement! On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un dernier coup d’oeil aux résultats sur différents écrans de taille. Bureau Tablettes et téléphones portables Pour obtenir la conception d’un contenant de colonne d’adhésif gratuit, vous devez d’abord le télécharger en utilisant le bouton en bas. 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! Abonnez – vous à notre chaîne YouTube et commençons à recréer! Tout d’abord, ajoutez une nouvelle section générale à la page en cours de traitement. Réglage de la Section d’ouverture de l’intervalle et changement de remplissage supérieur et inférieur en div
Colonne 1 dans la colonne 1, nous avons besoin du module suivant et du dernier module pour télécharger l’image, qui est un module d’image. Téléchargez l’image PNG de votre choix. Aligner modifie plus tard l’alignement de l’image. Alignement de l’image: Centre Assurez – vous que toute la largeur est également pressée sur le module. Largeur totale: Oui L’espacement complète la configuration du module en allant aux paramètres d’espacement et en ajoutant des valeurs d’espacement personnalisées à différentes tailles d’écran. Marge supérieure: – 5vw (tablette et téléphone mobile) marge inférieure: – 12vw (bureau), 5vw (tablette et téléphone mobile) remplissage à gauche: 3vw (bureau), 10vw (tablette), 25vw (téléphone mobile) remplissage à droite: 3vw (bureau), 10vw (tablette), 25vw (téléphone mobile) Après avoir cloné les deux modules trois fois et inséré les autres colonnes dans la colonne 1 pour compléter les deux modules, vous pouvez cloner les modules trois fois en même temps et placer les modules dupliqués dans les colonnes restantes de la ligne. Assurez – vous de changer l’image dans chaque module d’image copié. Lorsque vous changez le contenu de l’appel d’action, la couleur de fond du bouton change également le contenu de l’appel d’action et la couleur de fond du bouton. Module CTA no 2: # 89ffb4 module CTA No 3: # ff89f1 module CTA No 4: # ffd389 Maintenant, ajoutez la classe CSS au module image dans les colonnes 1, 2 et 3, et pour vous assurer que l’effet de collage s’applique également aux images, nous devons ajouter la classe CSS au module image dans les colonnes 1, 2 et 3.
Classe CSS: images collantes La seule chose à faire pour ajouter une structure de colonne de ligne # 2 est d’ajouter du code CSS. Pour ce faire, ajoutez une nouvelle ligne. Ajouter un module de code avec le code CSS ajouter un module de code à la ligne, entrer le code CSS ci – dessous, et c’est fait! Écran média seulement et (largeur minimale: 980px)
– Oui. CTA visqueux
Position: viscosité;
Emplacement: – webkit collant;
En haut: 8vw! Important
}
– Oui. Viscosité Ima