Comment créer un masque de fond collant avec Divi

Les options persistantes de Divi vous permettent de créer une tonne de conceptions différentes pour vos sites Web. L'article d'aujourd'hui ajoute un autre didacticiel à la liste des choses que vous pouvez réaliser et, espérons-le, contribuera à stimuler la créativité. Nous allons vous montrer comment créer un masque d'arrière-plan collant et faire en sorte que ce masque suive le visiteur en défilement jusqu'à la fin de la section. Ce tutoriel combine les options collantes de Divi avec les modes de fusion des filtres. Vous pourrez également télécharger le fichier JSON gratuitement !

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 la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez 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 !

1. Créer un design dans Divi

Ajouter une nouvelle section

Image de fond

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Téléchargez une image de fond de votre choix.

• Taille de l'image d'arrière-plan : couverture

Espacement

Passez à l'onglet de conception de la section et supprimez tous les rembourrages supérieur et inférieur par défaut dans les paramètres d'espacement.

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

Débordements

Masquez les débordements de la section dans l'onglet avancé suivant.

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez également tous les rembourrages supérieur et inférieur par défaut.

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

Filtres

Nous ajoutons également un mode de fusion à cette ligne. Ce mode de fusion nous aidera à créer un masque plus tard dans le didacticiel.

• Mode de fusion : écran

Indice Z

Pour nous assurer que cette ligne reste sous la deuxième ligne que nous ajouterons à la section, nous modifions l'index z dans l'onglet avancé.

• Indice Z : 9

Paramètres de colonne

Ensuite, nous allons ouvrir les paramètres de la colonne.

Couleur de l'arrière plan

Nous utilisons une couleur de fond complètement blanche. Toute autre couleur que vous utilisez ici apparaîtra à travers l'image d'arrière-plan de la section, il est donc important de s'en tenir à une couleur entièrement blanche.

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

Élément principal CSS

Nous ajoutons également une valeur de hauteur à l'élément principal dans l'onglet avancé. Une fois que nous avons rendu la ligne collante, cette hauteur garantira que la colonne couvre à tout moment l'intégralité de l'image d'arrière-plan de la section.

height: 100vh;

Ajouter un module de texte à la ligne

Laisser la zone de contenu vide

Une fois que vous avez terminé les paramètres de ligne, ajoutez un module de texte à sa colonne. Laissez la zone de contenu vide. Nous utilisons plutôt ce module pour créer une forme qui révèle une partie de l'image d'arrière-plan de la section.

Couleur de l'arrière plan

Pour permettre au mode de fusion d'afficher une partie de l'image d'arrière-plan de la section, nous utilisons une couleur d'arrière-plan plus sombre pour ce module.

• Couleur d'arrière-plan : #0b3835

Dimensionnement

Ensuite, nous accéderons à l'onglet Conception et modifierons les paramètres de dimensionnement comme suit :

• Largeur:
  • Ordinateur de bureau : 20 vw
  • Tablette et téléphone : 70 vw
• Hauteur:
  • Ordinateur de bureau : 30 vh
  • Tablette et téléphone : 10vh

Espacement

Nous ajoutons également une marge supérieure.

• Marge supérieure : 3vh

Frontière

Et nous allons inclure des coins arrondis.

• Tous les coins : 15px

Ajouter la ligne n° 2

Structure des colonnes

Continuez en ajoutant une autre ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et apportez les modifications suivantes aux paramètres de dimensionnement :

• Largeur : 100 %
• Largeur maximale : 100 %

Indice Z

Augmentez également l'index z de la ligne. Cela aidera à garantir que le contenu de la ligne reste au-dessus de la ligne précédente.

• Indice Z : 12

Ajouter un module de texte à la ligne

Ajouter du contenu H2

Il est temps d'ajouter des modules, en commençant par un premier module de texte contenant du contenu H2 de votre choix.

Paramètres de texte H2

Stylisez les paramètres de texte H2 comme suit :

• Police du titre 2 : affichage Playfair
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #0b3835
• Titre 2 Taille du texte :
  • Bureau : 150px
  • Tablette et téléphone : 45 px
• En-tête 2 Hauteur de ligne : 1,2 em

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement et appliquez les paramètres suivants :

• Largeur maximale : 980 px
• Alignement du module : Centre

Espacement

Incluez également une marge supérieure négative.

Ajouter un module de bouton à la ligne

Ajouter une copie

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

Alignement des boutons

Passez à l'onglet de conception du module et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Ensuite, accédez aux paramètres des boutons et appliquez les styles suivants :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 15 px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels

• Police des boutons : Montserrat
• Poids de la police du bouton : semi-gras
• Style de police des boutons : majuscules

Espacement

Nous ajoutons également des valeurs de marge et de remplissage personnalisées aux paramètres d'espacement.

• Marge inférieure : 60vh
• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px
• Rembourrage gauche : 40 px
• Rembourrage droit : 40 px

2. Appliquer des effets collants

Ouvrir la ligne n° 1

Maintenant que nous avons construit les bases de notre conception, il est temps d'appliquer les styles collants. Ouvrez les paramètres de la première ligne.

Appliquer des options persistantes

Accédez à l'onglet avancé et appliquez les paramètres persistants suivants :

• Position collante : coller au sommet
• Limite collante inférieure : section
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles collants : oui

Options persistantes du module de texte

Maintenant que la ligne est devenue collante, nous pouvons appliquer des styles collants au module de texte à l'intérieur de la ligne. Ouvrez les paramètres du module.

Dimensionnement collant

Ensuite, accédez aux paramètres de dimensionnement et appliquez les valeurs de dimensionnement suivantes :

• Largeur collante: 80vw
• Hauteur collante: 90vh

Durée de la transition

Enfin, accédez à l'onglet avancé et augmentez la durée de la transition. C'est ça!

• Durée de transition : 500 ms

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, une fois de plus, montré comment faire preuve de créativité avec les options persistantes de Divi. Plus précisément, nous vous avons montré comment combiner les paramètres de filtres et les options collantes de Divi pour créer un masque d'arrière-plan collant. Vous avez également pu télécharger le fichier JSON gratuitement. Si vous avez des questions ou des suggestions, n'hésitez pas à 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.