Comment créer une maquette de galerie de défilement avec les nouvelles options de débordement de Divi

Vous cherchez un moyen créatif d'afficher des images sur votre site Web ? Assurez-vous de continuer à lire car, dans cet article, nous vous montrerons comment créer une maquette de galerie de défilement en utilisant uniquement les options intégrées de Divi. Concrètement, nous allons transformer une section en maquette et faire en sorte que toutes les lignes de la section fassent partie de la maquette. Une fois que vous maîtriserez la technique, vous pourrez présenter tout type de contenu que vous souhaitez dans une maquette mobile et ajouter une interaction à vos pages en un rien de temps.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la maquette de la galerie de défilement

Pour mettre la main sur la conception de maquette de galerie de défilement gratuite, vous devez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Dimensionnement

Commencez par créer une nouvelle page ou ouvrez une page existante et ajoutez-y une section régulière. Ouvrez les paramètres de la section et modifiez la largeur et la largeur maximale dans les paramètres de dimensionnement.

• Largeur : 25 vw (ordinateur de bureau), 60 vw (tablette), 80 vw (téléphone)
• Largeur maximale : 25 vw (ordinateur de bureau), 60 vw (tablette), 80 vw (téléphone)

Espacement

Ensuite, accédez aux paramètres d'espacement, supprimez tous les rembourrages supérieur et inférieur par défaut et ajoutez des marges supérieure et inférieure pour créer de l'espace.

• Marge supérieure : 9vw
• Bas : 9vw
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

Continuez en allant dans les paramètres de bordure de la section et créez la forme d'une maquette mobile en ajoutant "30px" à chacun des coins.

Boîte ombre

Ajoutez une ombre de boîte subtile pour permettre à la forme de passer.

• Force de flou d'ombre de boîte : 100px
• Couleur de l'ombre : rgba(0,0,0,0.18)

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant la première ligne à la section en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #ffffff

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et laissez la rangée occuper 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 %

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Boîte ombre

Et ajoutez également une ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.92)

Indice Z

Enfin, nous allons nous assurer que la ligne (et surtout son ombre de boîte) chevauche la ligne suivante en augmentant l'index Z dans les paramètres de visibilité.

• Indice Z : 99

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Le seul module dont nous avons besoin dans cette ligne est un module de texte avec du contenu H2.

Paramètres de texte H2

Une fois que vous avez ajouté la copie H2, accédez aux paramètres de texte H2 et apportez quelques modifications.

• Police du titre 2 : Abril Fatface
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 1.5vw (ordinateur de bureau), 3.5vw (tablette), 5vw (téléphone)

Espacement

Ajoutez ensuite une marge supérieure et inférieure personnalisée.

• Marge supérieure : 1,5 vw (ordinateur de bureau et tablette), 3,5 vw (téléphone)
• Marge inférieure : 1,5 vw (ordinateur de bureau et tablette), 3,5 vw (téléphone)

Ajouter la ligne n° 2

Structure des colonnes

Passons au deuxième rang ! Ici, nous utilisons la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de la section. Nous modifions également la hauteur et la hauteur maximale pour créer un effet de défilement vertical dans les prochaines étapes.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %
• Hauteur : 38 vw (ordinateur de bureau), 100 vw (tablette), 120 vw (téléphone)
• Hauteur maximale : 38 vw (ordinateur de bureau), 100 vw (tablette), 120 vw (téléphone)

Espacement

Ensuite, accédez aux paramètres d'espacement et supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Débordement vertical

Comme mentionné précédemment, nous rendons cette ligne déroulante verticalement. Pour ce faire, nous devrons modifier le débordement vertical dans les paramètres de visibilité de la ligne.

• Débordement vertical : défilement

Ajouter un module d'image à la colonne

Télécharger une image

Allez-y et ajoutez un premier module d'image à la ligne et téléchargez une image de votre choix. Vous pouvez télécharger les images que nous utilisons tout au long de ce didacticiel en accédant à la publication Wedding Planner Layout Pack.

Dimensionnement

Assurez-vous d'activer l'option « Forcer la pleine largeur » dans le module Image pour garantir un résultat réactif.

• Forcer la pleine largeur : Oui

Espacement

Accédez ensuite aux paramètres d'espacement et créez un espace entre ce module et le module suivant en ajoutant une marge inférieure.

• Marge inférieure : 1vw

Clonez le module d'image autant de fois que vous le souhaitez

Une fois que vous avez terminé de modifier le premier module Image, vous pouvez le cloner autant de fois que vous le souhaitez.

Télécharger différentes images

Bien sûr, vous voudrez changer l'image dans chacun des doublons.

Ajouter la ligne n° 3

Structure des colonnes

Passons au troisième et dernier rang ! Nous utilisons la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan blanche.

• Couleur d'arrière-plan : #ffffff

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et laissez la rangée occuper 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 %

Espacement

Ajoutez ensuite des valeurs de remplissage haut et bas personnalisées.

• Rembourrage supérieur : 2.1vw (ordinateur de bureau), 3.5vw (tablette), 5vw (téléphone)
• Rembourrage inférieur : 2.1vw (ordinateur de bureau), 3.5vw (tablette), 5vw (téléphone)

Boîte ombre

Et ajoutez une ombre de boîte pour créer de la profondeur.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.92)

Indice Z

Pour s'assurer que cette ligne (et surtout son ombre de boîte) chevauche la ligne précédente, nous allons augmenter l'index Z.

• Indice Z : 99

Ajouter un module de bouton à la colonne

Ajouter une copie

Le seul module dont nous avons besoin dans cette rangée est un module de bouton. Ajoutez une copie de votre choix.

Alignement

Ensuite, accédez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Modifiez également les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1 vw (ordinateur de bureau), 2,5 vw (tablette), 3,5 vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 1px
• Police des boutons : Abril Fatface

Espacement

Et créez la forme que vous souhaitez en utilisant des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 0.5vw (ordinateur de bureau), 1vw (tablette), 2vw (téléphone)
• Rembourrage inférieur : 0.5vw (ordinateur de bureau), 1vw (tablette), 2vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 7vw (tablette), 9vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 7vw (tablette), 9vw (téléphone)

Barre de défilement des styles

Ajouter un identifiant CSS à la ligne 2

C'est à vous de décider si vous souhaitez ou non styliser la barre de défilement. Si vous le faites, ouvrez la deuxième ligne et ajoutez-y une classe CSS.

• Classe CSS : image-scrollbar

Ouvrir les paramètres de la page

Ensuite, ouvrez les paramètres de ligne.

Barre de défilement de style utilisant CSS

Et ajoutez les lignes de code CSS suivantes dans la zone CSS personnalisée de l'onglet avancé :

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer une belle maquette de galerie de défilement avec les options intégrées de Divi uniquement. Au début de cet article, vous avez également pu télécharger gratuitement la mise en page JSON et l'utiliser sur n'importe quel site Web sur lequel vous travaillez. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.