Lors de la conception de votre page de services, vous voulez vous assurer que vos visiteurs remarquent tous les différents services que vous fournissez. Dans de nombreux cas, ce ne sera qu’un seul service spécifique qu’ils recherchent, mais si vous fournissez une manière rationalisée dans votre structure de service, il est plus probable que vos visiteurs les traitent tous. 

Dans ce didacticiel, nous vous montrerons comment faire preuve de créativité avec les effets de défilement de Divi et créer une transition de service transparente. Vous pourrez également télécharger gratuitement le fichier JSON!

Allons-y.

Résultat Possible

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

Transition entre section divi

1, recréer la structure des éléments

Ajouter la section # 1

Espacement

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de section et modifiez les valeurs de remplissage sur différentes tailles d’écran.

  • Rembourrage supérieur: 80 px (ordinateur de bureau et tablette), 0 px (téléphone)
  • Rembourrage inférieur: 80px
Section paramètre divi

Ajouter une nouvelle ligne

Structure de colonne

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 et appliquez les modifications suivantes aux paramètres de dimensionnement:

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Largeur: 90%
  • Largeur max: 1580px
Configuration espacement divi

Espacement

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

  • Marge supérieure: 200px
  • Marge inférieure: 200px
Configuration espacement ligne divi

Ajouter un module de texte à la colonne 1

Ajouter du contenu H2

Il est temps d’ajouter des modules, en commençant par un module de texte dans la colonne 1. Entrez le contenu H2 de votre choix.

Nos services propose par les experts du moment

Paramètres de texte H2

Passez à l’onglet de conception du module et modifiez les paramètres de texte H2 comme suit:

  • Titre 2 Police: Questrial
  • En-tête 2 Taille du texte: 80 px (bureau), 50 px (tablette), 40 px (téléphone)
  • Hauteur de la ligne 2 de la tête: 1.2em
En tête police divi

Espacement

Ajoutez ensuite une marge inférieure sur la tablette et le téléphone.

  • Marge inférieure: 50 pixels (tablette et téléphone uniquement)
Configuration espacement texte divi

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne. Là, le premier module dont nous avons besoin est un module de texte avec un certain contenu de description.

Contenu zone de texte divi

Paramètres de texte

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

  • Police du texte: cabine
  • Style de police du texte: majuscule
  • Couleur du texte: # 000000
  • Taille du texte: 18 px (ordinateur de bureau), 15 px (tablette), 13 px (téléphone)
  • Espacement des lettres texte: 3px (bureau), 1px (tablette et téléphone)
  • Hauteur de la ligne de texte: 3em
Parametre texte divi

Ajouter un module de séparation à la colonne 2

Visibilité

Le module suivant et dernier dont nous avons besoin dans cette colonne est un module de séparation. Assurez-vous que l’option «Afficher le séparateur» est activée.

  • Afficher le séparateur: Oui
Séparateur divi visible

Ligne

Modifiez ensuite la couleur de ligne du module.

  • Couleur de la ligne: # 000000
Séparateur divi couleur arriere plan

Dimensionnement

Ensuite, apportez quelques modifications aux paramètres de dimensionnement.

  • Poids du diviseur: 3px
  • Largeur: 28%
Dimensionnement séparateur divi

Espacement

Nous ajoutons également une marge supérieure.

  • Marge supérieure: 10px
Espacement module separateur divi

Ajouter la section # 2

Espacement

Passons à la section régulière suivante. Supprimez le rembourrage supérieur par défaut de la section.

  • Rembourrage supérieur: 0px
Espacement section 2 divi

Débordements

Cachez aussi les débordements.

  • Débordement horizontal: caché
  • Débordement vertical: caché
Masquer les debordements module divi

Ajouter une nouvelle ligne

Structure de colonne

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

Choisir une mise ne page divi

Dimensionnement

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

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Égaliser les hauteurs de colonne: Oui
  • Largeur: 90%
  • Largeur max: 1580px
Configuration goutière section divi

Espacement

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

  • Rembourrage supérieur: 0px
  • Rembourrage inférieur: 0px
Reglages espacement module ligne divi 1

Paramètres de la colonne 1

Couleur de l’arrière plan

Ensuite, ouvrez les paramètres de la colonne 1 et modifiez la couleur d’arrière-plan.

  • Couleur d’arrière-plan: # f7f7f7
Configuration arriere plan module ligne divi

Espacement

Complétez les paramètres de la colonne en ajoutant des valeurs de remplissage personnalisées sur différentes tailles d’écran.

  • Rembourrage supérieur: 200px (bureau), 100px (tablette et téléphone)
  • Rembourrage inférieur: 200px (bureau), 100px (tablette et téléphone)
  • Rembourrage gauche: 8%
  • Rembourrage droit: 8%
Reglages colonne module ligne

Paramètres de la colonne 2

Espacement

Continuez en ouvrant les paramètres de la colonne 2. Accédez à l’onglet avancé et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d’écran.

  • Rembourrage supérieur: 100 px (ordinateur de bureau), 50 px (tablette et téléphone)
  • Rembourrage inférieur: 200px
  • Rembourrage gauche: 150 px (bureau), 0 px (tablette et téléphone)
Reglages espacement module divi

Ajouter un module de séparation à la colonne 1

Visibilité

Dans la première colonne, le premier module dont nous avons besoin est un module de séparation. Assurez-vous que l’option «Afficher le séparateur» est activée.

  • Afficher le séparateur: Oui
Afficher séparateur divi 1

Ligne

Modifiez ensuite la couleur de ligne du module.

  • Couleur de la ligne: # 000000
Reglages séparateur divi

Dimensionnement

Apportez également des modifications aux paramètres de dimensionnement.

  • Poids du diviseur: 3px
  • Largeur: 50%
Dimensionnement séparateur divi

Ajouter un module de texte à la colonne 1

Ajouter du contenu H3

Le prochain module dont nous avons besoin dans la colonne 1 est un module de texte avec du contenu H3.

Reglage section contenu divi

Paramètres de texte H3

Passez à l’onglet de conception du module et modifiez les paramètres de texte H3:

  • Titre 3 Police: Questrial
  • Couleur du texte de la rubrique 3: # 000000
  • Rubrique 3 Taille du texte: 50 px (ordinateur de bureau), 40 px (tablette), 35 px (téléphone)
  • Hauteur de la ligne 3 de la tête: 1.1em
Reglage ongle design divi

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Dans la deuxième colonne, le premier module dont nous avons besoin est un module de texte avec un certain contenu de description.

Reglage module texte divi

Paramètres de texte

Modifiez les paramètres de texte du module comme suit:

  • Police du texte: cabine
  • Style de police du texte: majuscule
  • Taille du texte: 18 px (ordinateur de bureau), 15 px (tablette), 13 px (téléphone)
  • Espacement des lettres texte: 3px (bureau), 1px (tablette et téléphone)
  • Hauteur de la ligne de texte: 3em
Reglage police moule texte divi

Ajouter un module de boutons à la colonne 2

Ajouter une copie

Le module suivant et dernier dont nous avons besoin est un module de bouton. Entrez une copie de votre choix.

Reglage contenu module texte

Paramètres des boutons

Stylisez ensuite le bouton.

  • Utiliser des styles personnalisés pour le bouton: Oui
  • Taille du texte du bouton: 20 pixels
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # 000000
  • Largeur de bordure de bouton: 0px
Reglage style bouton divi
  • Button Font: Questrial
  • Poids de la police du bouton: gras
Reglages couleur bouton divi

Espacement

Ajoutez également un rembourrage personnalisé.

  • Rembourrage supérieur: 50px
  • Rembourrage inférieur: 50px
  • Rembourrage gauche: 100px
  • Rembourrage droit: 100px
Reglages espacement bouton module divi

Position

Et repositionnez le bouton en conséquence:

  • Position: Absolute
  • Emplacement: en bas à gauche
Reglage position module bouton divi

Cloner la ligne autant de fois que nécessaire

Une fois que vous avez terminé la ligne entière et tous ses modules, vous pouvez cloner la ligne entière trois fois.

Cloner module divi

Changer tout le contenu

Assurez-vous de modifier tout le contenu dans des lignes en double.

Modifier contenu section divi

2. Appliquer des effets de défilement

Effets de défilement de la première rangée

Mouvement horizontal

Une fois que vous avez terminé toutes les lignes de votre section, il est temps d’ajouter les effets de défilement. Ouvrez la première ligne de la section et ajoutez un mouvement horizontal.

  • Activer le mouvement horizontal: Oui
  • Décalage de départ: -5
  • Décalage moyen: 0 (à 26%)
  • Décalage de fin: 0
  • Déclenchement d’effet de mouvement: milieu de l’élément
Appliquer effets defilement divi

Fondu entrant et sortant

Utilisez également un effet de fondu entrant et sortant.

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 100%
  • Opacité moyenne: 100% (à 50%)
  • Opacité de fin: 0% (à 53%)
  • Déclenchement d’effet de mouvement: milieu de l’élément
Configurer animation fondu section divi

Effets de défilement des rangées moyennes

Mouvement vertical

Ensuite, nous ajouterons des effets de défilement à toutes les lignes entre la première et la dernière ligne de la section. Utilisez d’abord un mouvement vertical:

  • Activer le mouvement vertical: Oui
  • Décalage de départ: -4
  • Décalage moyen: 0 (à 26%)
  • Décalage de fin: 0
  • Effet de déclenchement de mouvement: milieu de l’élément
Configuration aniation au défilement divi

Fondu entrant et sortant

Activez également un effet de fondu entrant et sortant.

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 0%
  • Opacité moyenne: 100% (de 27% à 50%)
  • Décalage de fin: 0 (à 53%)
  • Déclenchement d’effet de mouvement: milieu de l’élément
Animation fondu ligne divi

Effets de défilement de dernière ligne

Mouvement vertical

Ensuite, ouvrez la dernière ligne de la section et ajoutez le mouvement vertical suivant:

  • Activer le mouvement vertical: Oui
  • Décalage de départ: -4
  • Décalage moyen: 0 (à 26%)
  • Décalage de fin: 0
  • Déclenchement d’effet de mouvement: milieu de l’élément
Animation défilement module ligne divi

Fondu entrant et sortant

Avec un effet de fondu entrant et sortant et vous avez terminé!

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 0%
  • Opacité moyenne: 100% (de 27% à 50%)
  • Opacité de fin: 100% (à 53%)
  • Déclenchement d’effet de mouvement: milieu de l’élément
Reglages animation apparition module ligne divi

Résultat Final

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

Demo finale

Dernières pensées

Dans cet article, nous vous avons montré comment créer une belle transition de service avec les effets de défilement de Divi. Avant même qu’un service ne disparaisse, l’autre commence à apparaître, donnant une belle transition agréable à l’œil. Cette approche vous aidera à mettre en évidence chaque service à un niveau individuel. Vous avez également pu télécharger gratuitement le fichier JSON! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.