Limiter l’effet de défilement aux conteneurs de colonne qui utilisent Divi

L’effet de défilement de Divi vous aide à ajouter de nouvelles dimensions au design que vous créez. Pour chaque nouvelle fonctionnalité Divi, nous essayons également de partager des tutoriels pour vous aider à visualiser la conception web sous différents angles. Dans ce tutoriel, nous vous montrerons comment limiter l’effet de défilement du module aux conteneurs de colonne. Cela signifie que quel que soit le type d’effet de défilement que vous ajoutez, l’effet de mouvement du module ne dépasse pas le conteneur de colonne. Cela se traduit par une belle boîte et un design interactif. Nous allons recréer un exemple à partir de zéro et vous pouvez également télécharger le fichier json gratuitement!
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 mise en page de l’effet Scroll sans limite pour obtenir la mise en page de l’effet Scroll sans limite, vous devez d’abord utiliser le bouton en bas pour télécharger. 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 accéder à l’édition hebdomadaire du pain Divi
INS header 3 font Weight: header 3 text color: rgba (0,0,0,0,0,15) title 3: Text size: 200 Px (Desktop), 150 Px (tablette), 100 Px (telephone) title 3 letter Spacing: – 12px (Desktop), – 10px (tablette), – 7px (telephone) Espacement pour augmenter la largeur du module, nous ajouterons des marges gauche et droite négatives dans le réglage de l’espacement. Marge gauche: – 50% marge droite: – 50% Mouvement horizontal nous complétons la configuration du module en ajoutant un mouvement horizontal à la configuration de l’effet de défilement. Vous pouvez utiliser n’importe quel autre type d’effet de défilement ici, peu importe ce que vous choisissez de faire, ne dépassera pas le conteneur de colonne parce que nous avons caché le débordement de colonne dans l’étape précédente de ce tutoriel. Activer le mouvement horizontal: est la déviation initiale: 5 (à 45%) déviation moyenne: 0 (à 75%) Compensation finale: – 4 activer l’effet du Mouvement: milieu de l’élément Ajouter le formulaire Texte 2 à la colonne 1 Ajouter le contenu au formulaire suivant, qui est un autre formulaire texte. Ajoutez du contenu descriptif de votre choix. Paramètres de texte passer à l’onglet conception et modifier les paramètres de texte en conséquence: police de texte: Open sans couleur de texte: # 969696 taille du texte: 18 Px (bureau), 16 Px (tablette), 14 Px (téléphone) hauteur de la ligne de texte: 2,4 em L’espacement complète le réglage du module en ajustant les valeurs de marge entre les différentes tailles d’écran. Marge supérieure: 100 pixels (bureau), 60 pixels (tablette), 50 pixels (téléphone mobile) marge inférieure: 200 pixels (bureau), 180 pixels (tablette), 100 pixels (téléphone mobile) Marge gauche: 100 pixels (bureau), 50 pixels (tablette et téléphone mobile) Marge droite: 100 pixels (bureau), 50 pixels (tablette et téléphone mobile) Ajouter un module bouton – poussoir à la colonne 1 Ajouter copier la colonne 1 le module suivant et le dernier module dont nous avons besoin sont les modules d’impulsion
E. entrez une copie de la sélection. Paramètres du bouton Modifier les paramètres du bouton du module comme suit: chaque bouton utilise un style personnalisé: est la taille du texte du bouton: 24 pixels (bureau), 20 pixels (tablette), 18 pixels (mobile) button text color: # 000000 Gradient Color 1: # f2f2f2f2f2f2 Gradient Color 2: # FFFFFF Gradient Type: Linear Gradient direction: 270 Degree start position: 50% end position: 50% Largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 0px espacement des lettres du bouton: – 1px caractères du bouton: Poppins poids de la police du bouton: affichage moyen icône du bouton: Oui positionnement de l’icône du bouton: afficher uniquement l’icône gauche lorsque la souris survole le bouton: Non L’espacement ajoute ensuite des valeurs d’espacement personnalisées. Marge inférieure: 50 Px marge supérieure: 50 Px marge inférieure: 50 px La position e complète la configuration du module en repositionnant le module bouton. Position: absolue: en bas à gauche Ajouter un module image dans la colonne 2 pour charger une image dans la colonne 2, le seul module dont nous avons besoin est le module image. Téléchargez l’image que vous avez sélectionnée. Ensuite, force toute la largeur dans le réglage de taille. Largeur totale: Oui Bordure ensuite, changez les paramètres de bordure sur différentes tailles d’écran. En haut à gauche: 0px (bureau), 20px (tablette et téléphone) en haut à droite: 20px en bas à gauche: 0 Px (bureau), 20 Px (tablette et téléphone) en bas à droite: 20 px Localiser et repositionner le module sur le Bureau. Retournez – le aux valeurs par défaut sur un écran plus petit. Emplacement: absolu (bureau), par défaut (tablette et téléphone) Emplacement: Central (bureau) Une fois la ligne et tous ses modules terminés, vous pouvez cloner la ligne entière autant de fois que nécessaire.