Comment combiner les chevauchements avec les options collantes de Divi pour créer des transitions sans effort

Alors que la technologie continue d'évoluer, le design évolue aussi. Plus que jamais, vous pouvez tomber sur des sites Web qui vous émerveillent et vous demandent comment ils ont été créés. Bien que les sites Web qui ont des interactions de défilement ne conviennent pas à tous les types d'entreprises, savoir comment faire un effort supplémentaire est particulièrement utile pour laisser une bonne impression. Avec Divi, beaucoup de choses sont déjà possibles sans avoir à toucher une seule ligne de code. Le tutoriel d'aujourd'hui vous aide à comprendre Divi sous un autre angle. Nous allons vous montrer comment combiner les options persistantes de Divi avec d'autres paramètres intégrés pour créer des transitions sans effort. 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. Recréer la structure de conception

Ajouter une nouvelle section

Espacement

Dans la première partie de ce tutoriel, nous nous concentrerons sur la recréation de la structure de conception dans Divi. Ensuite, dans la deuxième partie, nous passerons du temps à parcourir toutes les options collantes pour obtenir l'effet que vous pouvez remarquer dans l'aperçu de cet article. Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section, accédez à l'onglet Conception et ajoutez du rembourrage inférieur.

• Rembourrage inférieur : 100vh

Ajouter la ligne n° 1

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, accédez à l'onglet Conception et modifiez les paramètres de dimensionnement en conséquence :

• Largeur: 90%
• Largeur maximale : 100 %

Indice Z

Attribuez également un index az à cette ligne.

• Indice Z : 1

Ajouter un module d'image à la colonne

Laisser la zone d'image vide

Il est temps d'ajouter des modules, en commençant par un module Image. Laissez la zone de contenu vide.

Utiliser l'image d'arrière-plan à la place

Et utilisez plutôt une image de fond de votre choix.

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

Dimensionnement

Modifiez ensuite la largeur du module.

• Largeur : 100 %

Espacement

Ensuite, appliquez un rembourrage supérieur et inférieur personnalisé aux paramètres d'espacement.

• Rembourrage supérieur : 40vh
• Rembourrage inférieur : 40vh

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Passons au module suivant, qui est un module de texte contenant du contenu H2 de votre choix.

Paramètres de texte H2

Modifiez les paramètres de texte H2 du module en conséquence :

• Police de la rubrique 2 : Montserrat
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte :
  • Ordinateur de bureau : 10vw
  • Tablette : 14vw
  • Téléphone : 15vw
• Espacement des lettres de l'en-tête 2 : -0,5 vw

Dimensionnement

Assurez-vous également que le module est à « 100% ».

• Largeur : 100 %

Position

Et repositionnez le module dans l'onglet avancé.

• Position : Absolu
• Lieu : Centre

Ajouter la ligne n° 2

Structure des colonnes

Passons à la rangée suivante. Utilisez la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, accédez à l'onglet Conception et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur: 90%
• Largeur maximale : 100 %

Indice Z

Attribuez également un index az à cette ligne.

• Indice Z : 2

Espacement de la colonne 1

Complétez les paramètres de ligne en ouvrant les paramètres de la première colonne et en attribuant un rembourrage à gauche et à droite.

• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Ajouter un module de texte à la colonne 1

Ajouter du contenu H3

Maintenant que les paramètres de ligne sont en place, il est temps d'ajouter des modules. Ajoutez un module de texte à la colonne 1 avec du contenu H3 de votre choix.

Paramètres de texte H3

Passez à l'onglet de conception du module et modifiez les paramètres de texte H3 en conséquence :

• Police de la rubrique 3 : Montserrat
• Titre 3 Style de police : Souligné
• Titre 3 Couleur de soulignement : #ffffff
• Titre 3 Style de soulignement : solide
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte :
  • Ordinateur de bureau : 4vw
  • Tablette et téléphone : 10vw
• En-tête 3 Espacement des lettres : -3px

Espacement

Ajoutez un rembourrage droit sur les tailles d'écran plus petites.

• Rembourrage droit : 20 % (tablette et téléphone uniquement)

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Ajoutez un autre module de texte à la colonne 2 avec un contenu de description de votre choix.

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan.

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

Paramètres de texte

Ensuite, modifiez les paramètres de texte comme suit :

• Police du texte : affichage Playfair
• Style de police de texte : italique
• Taille du texte:
  • Ordinateur de bureau : 1.6vw
  • Tablette : 3vw
  • Téléphone : 4vw
• Hauteur de la ligne de texte : 1,5 em

Espacement

Appliquez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 10vh
• Rembourrage inférieur : 10vh
• Rembourrage gauche : 10 %
• Rembourrage droit : 10 %

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Le prochain et dernier module que nous ajouterons est un module de bouton à la colonne 2. Ajoutez une copie de votre choix.

Paramètres des boutons

Passez à l'onglet de conception du module et modifiez les paramètres des boutons comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton :
  • Ordinateur de bureau : 1.2vw
  • Tablette : 2.5vw
  • Téléphone : 3.5vw
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton : #ffffff
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Police des boutons : Montserrat

• Style de police des boutons : Souligné
• Couleur de soulignement du bouton : #000000
• Style de soulignement du bouton : solide

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Position

Et repositionnez le module dans l'onglet avancé.

• Position : Absolu
• Emplacement : En bas à droite

2. Appliquer des effets collants

Module d'image dans la rangée n° 1

Paramètres collants

Maintenant que nous avons construit les bases de notre conception, il est temps de commencer à appliquer les effets collants personnalisés. Ouvrez le module Image dans la rangée n° 1 et faites pivoter le module comme suit :

• Position collante : coller au sommet
• Limite collante inférieure : section
• Décalage par rapport aux éléments collants environnants : Non

Dimensionnement collant

Une fois les paramètres collants appliqués, nous pouvons également modifier les styles collants de notre module. La première chose que nous allons faire est de modifier la largeur dans un état collant.

• Largeur collante: 80%

Espacement collant

Ensuite, nous allons modifier le rembourrage collant supérieur et inférieur.

• Rembourrage supérieur collant: 50vh
• Rembourrage inférieur collant: 50vh

Fond dégradé collant

Nous appliquerons également un fond dégradé collant à notre module.

• Couleur 1 : #00336b
• Couleur 2: rgba(41,196,169,0)
• Type de dégradé : Linéaire
• Direction du gradient : 90 degrés
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Transition

Et pour assurer une transition en douceur, nous allons augmenter la durée de transition du module.

• Durée de transition : 1500 ms

Colonne 2 de la ligne 2

Colonne 2 Paramètres collants

Ensuite, nous allons également rendre la deuxième colonne de notre deuxième ligne collante.

• Position collante : coller au sommet
• Décalage supérieur collant: 150px
• Limite collante inférieure : section
• Décalage par rapport aux éléments collants environnants : Non
• Transition par défaut et styles persistants : non

Module de texte dans la colonne collante

Couleur de fond collante

Maintenant que la colonne 2 de la ligne 2 est devenue collante, nous pouvons appliquer des styles collants au module de texte à l'intérieur de cette colonne. Commencez par changer la couleur de fond dans un état collant.

• Couleur de fond collante : #333333

Couleur du texte collant

Ensuite, modifiez la couleur du texte dans un état collant.

• Couleur du texte collant : #ffffff

Transition

Et complétez les réglages du module en augmentant la durée de transition dans l'onglet avancé. C'est ça!

• Durée de transition : 1000 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 montré comment faire preuve de créativité avec les options persistantes de Divi. Plus précisément, nous vous avons montré comment combiner les chevauchements avec les options collantes de Divi pour créer des transitions sans effort. Une fois que vous aurez compris l'approche utilisée tout au long de ce didacticiel, vous serez en mesure de créer une infinité de variations différentes. 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.