Comment créer un modèle de bibliothèque de défilement en utilisant les nouvelles options de débordement de Divi

Vous cherchez un moyen créatif de voir les images sur le site? Assurez – vous de continuer car dans cet article, nous vous montrerons comment modéliser une bibliothèque de défilement en utilisant uniquement les options intégrées de Divi. Plus précisément, nous transformerons une partie en modèle, et toutes les lignes de cette partie feront partie du modèle. Une fois que vous avez maîtrisé cette technologie, vous pouvez afficher tout type de contenu que vous voulez dans le modèle de téléphone et ajouter des interactions à vos pages immédiatement. Allons – y! 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 modèles de galerie de diapositives pour obtenir des modèles de galerie de diapositives gratuits, vous devez d’abord les 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! Commençons à recréer!
Abonnez – vous à notre canal YouTube ajouter une nouvelle taille de partition commence par créer une nouvelle page ou ouvrir une page
Sections existantes et ajout de sections normales. Active les paramètres de section et modifie la largeur maximale et la largeur dans les paramètres de dimension. Largeur: 25vw (bureau), 60vw (tablette), 80vw (téléphone) largeur maximale: 25vw (bureau), 60vw (tablette), 80vw (téléphone) Espacement ensuite, allez aux paramètres d’espacement, supprimez tous les remplissages par défaut en haut et en bas, et ajoutez des marges supérieures et inférieures pour créer de l’espace. Marge supérieure: 9vw marge inférieure: 9vw marge supérieure: 0px marge inférieure: 0px Les limites continuent en allant à la section paramètres des limites et en ajoutant 30px à chaque coin pour créer la forme du modèle solide en mouvement. La boîte d’ombre ajoute une ombre mince pour que la forme apparaisse. Force de flou de l’ombre de la boîte: 100 Px couleur de l’ombre: rgba (0,0,0,0,18) Ajouter une structure de ligne 1 continuer d’ajouter la première ligne à la section en utilisant la structure de colonne suivante: Couleur de fond sans ajouter de module, ouvrez les paramètres de ligne et changez la couleur de fond. Couleur de fond: # FFFFFF Ensuite, allez aux paramètres de taille et laissez la ligne prendre toute la largeur de la section. Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 100% largeur maximale: 100% Ensuite, supprimez les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Boîte d’ombre, vous pouvez également ajouter une boîte d’ombre. Intensité du flou de l’ombre de la boîte: 80 Px couleur de l’ombre: rgba (0,0,0,0,92) Enfin, et ce n’est pas le moins important, nous veillerons à ce que la ligne (en particulier son ombre de cadre) chevauche la ligne suivante en ajoutant un index Z dans les paramètres de visibilité.
Indice Z: 99 Ajouter du contenu à une colonne formulaire texte ajouter du contenu H2 module unique ABB
Dans cette ligne, nous avons besoin d’un module texte qui contient du contenu H2. Paramètres de texte H2 après avoir ajouté une copie de H2, allez aux paramètres de texte H2 et faites quelques modifications. Caractère de titre 2: Abril fatface title 2 text alignment: Text Color Center title 2: # 000000 title 2: Text size: 1.5vw (Desktop), 3.5vw (tablette), 5vw (mobile) Espacement, puis ajouter des marges supérieures et inférieures personnalisées. Marge supérieure: 1,5vw (bureau et tablette), 3,5vw (téléphone mobile), marge inférieure: 1,5vw (bureau et tablette), 3,5vw (téléphone mobile) Ajouter la deuxième ligne de la structure de colonne de la ligne # 2! Ici, nous utilisons la structure de colonne suivante: Sans ajouter de module, ouvrez les paramètres de ligne et laissez la ligne prendre toute la largeur de la section. Nous modifions également la hauteur maximale et la hauteur pour créer un effet de glissement vertical dans les prochaines étapes. Utiliser la largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 100% largeur maximale: 100% hauteur: 38vw (bureau), 100vw (tablette), 120vw (téléphone mobile) Hauteur maximale: 38vw (bureau), 100vw (tablette), 120vw (téléphone mobile) L’espacement va ensuite au réglage de l’espacement et supprime toutes les écoutilles par défaut en haut et en bas. Remplissage supérieur: 0px remplissage inférieur: 0px Comme indiqué ci – dessus, nous faisons glisser la ligne verticalement. Pour ce faire, nous devons changer le débordement vertical dans les paramètres de visibilité de ligne. Débordement vertical: défilement Ajoutez le module image à la colonne télécharger l’image pour continuer, ajoutez le premier module image à la ligne, puis Téléchargez l’image que vous avez sélectionnée. Vous pouvez télécharger les images que nous utilisons dans ce tutoriel en accédant à l’article du paquet de mise en page du planificateur de mariage. Assurez – vous que l’option force Full Width est activée dans le module imm