skip to Main Content

Comment créer une transition transparente avec les effets de défilement sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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.

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

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

Espacement

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

  • Marge supérieure: 200px
  • Marge inférieure: 200px

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.

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

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)

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.

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

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

Ligne

Modifiez ensuite la couleur de ligne du module.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

  • Couleur de la ligne: # 000000

Dimensionnement

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

  • Poids du diviseur: 3px
  • Largeur: 28%

Espacement

Nous ajoutons également une marge supérieure.

  • Marge supérieure: 10px

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

Débordements

Cachez aussi les débordements.

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

Ajouter une nouvelle ligne

Structure de colonne

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

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

Espacement

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

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

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

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%

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.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • 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)

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

Ligne

Modifiez ensuite la couleur de ligne du module.

  • Couleur de la ligne: # 000000

Dimensionnement

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

  • Poids du diviseur: 3px
  • Largeur: 50%

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.

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

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.

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

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.

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
  • Button Font: Questrial
  • Poids de la police du bouton: gras

Espacement

Ajoutez également un rembourrage personnalisé.

  • Rembourrage supérieur: 50px
  • Rembourrage inférieur: 50px
  • Rembourrage gauche: 100px
  • Rembourrage droit: 100px

Position

Et repositionnez le bouton en conséquence:

  • Position: Absolute
  • Emplacement: en bas à gauche

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.

Changer tout le contenu

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

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

Fondu entrant et sortant

Utilisez également un effet de fondu entrant et sortant.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

  • 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

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

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

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

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

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.

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.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer