skip to Main Content

Comment créer des effets de défilement de diviseur de section dans 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é ]

La création d’effets de défilement en utilisant le séparateur de section est une technique simple et amusante qui peut ajouter de la vie à votre site Web utilisant le thème WordPress Divi. Un séparateur de section continue d’être un élément de conception polyvalent, utile pour ajouter une touche de créativité à vos transitions de contenu de page. 

Mais avec les effets de défilement de Divi, les séparateurs de section deviennent encore plus intéressants! L’astuce consiste à isoler une section dédiée au style de diviseur de choix. Ensuite, vous pouvez ajouter toutes sortes de mouvements générés par défilement à la section pour créer de beaux effets de défilement comme arrière-plan pour le contenu de la page.

Commençons !

Résultat possible

Voici un aperçu des conceptions que nous pourrez réaliser à l’issue de ce tutoriel.

Comment créer des séparateurs de section animés au défilement avec Divi

Création des deux sections de contenu

Ajouter une rangée

Pour commencer, créez une ligne à une colonne dans la section par défaut.

Marge de section (pour les tests)

À des fins de test, ajoutez une marge supérieure à la section afin que nous puissions avoir de la place pour le défilement. Ouvrez les paramètres de section et ajoutez les éléments suivants:

  • Marge supérieure: 80vh

Ajouter un module de texte

Dans la ligne d’une colonne, ajoutez un nouveau module de texte.

Contenu du module de texte

À l’intérieur du contenu du corps, ajoutez le titre H2 suivant:

<h2>Section Avec Séparateurs</h2>

Conception du module de texte

Sous les paramètres de conception, mettez à jour les éléments suivants:

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 ]

  • Police du texte: Roboto
  • Alignement du texte: centre
  • Rubrique 2 Couleur du texte: # bae0d8
  • En-tête 2 Taille du texte: 80 px (ordinateur de bureau), 50 px (tablette), 30 px (téléphone)

Ajouter une deuxième section de contenu

Sous la section précédente, ajoutez une nouvelle section régulière.

effets de défilement de diviseur de section de divi

Ajouter une rangée

Dans la nouvelle section, ajoutez une ligne à une colonne.

Ajouter un module de texte

Ajoutez ensuite un nouveau module de texte à la ligne.

Conception du module de texte

Nous pouvons conserver le contenu de remplissage par défaut à l’intérieur du corps pour l’instant. Passons à l’onglet conception et mettons à jour les éléments suivants:

  • Police du texte: Roboto
  • Couleur du texte du texte: #dddddd
  • Taille du texte: 16px
  • Hauteur de la ligne de texte: 1,5 em
  • Alignement du texte: gauche
  • Largeur maximale: 400 px
  • Alignement du module: centre

Paramètres de section

Assurez-vous de retirer la couleur d’arrière-plan par défaut de la section, mais en lui donnant un arrière-plan complètement transparent. Ensuite, nous pouvons retirer le rembourrage supérieur et ajouter une marge inférieure à des fins de test de défilement.

Pour ce faire, ouvrez les paramètres de section et mettez à jour les éléments suivants:

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]

  • Couleur d’arrière-plan: rgba (0,0,0,0)
  • Marge inférieure: 80vh
  • Rembourrage: 0px

Création du séparateur de section animée

Une fois que deux sections de contenu sont terminées, nous sommes prêts à ajouter la section pour nos séparateurs de section animés.

Ajouter une nouvelle section

Allez-y et créez une nouvelle section régulière au milieu des deux sections de contenu.

Contexte de la section

Et encore une fois, supprimez la couleur d’arrière-plan par défaut de la section, mais en mettant à jour les éléments suivants:

  • Couleur d’arrière-plan: rgba (0,0,0,0)

Conception du séparateur de section

Ne vous inquiétez pas, nous allons créer notre couleur de fond avec les séparateurs de section. Pour ce faire, cliquez sur l’onglet de conception et ajoutez un séparateur supérieur et inférieur à la section comme suit:

Conception supérieure du diviseur

  • Top Divider Style: voir capture d’écran
  • Couleur du séparateur supérieur: # 524fbf
  • Hauteur du diviseur supérieur: 20vw
  • Répétition horizontale du diviseur supérieur: 0,6x
  • Flip du diviseur supérieur: horizontal

Conception du diviseur inférieur

  • Style de diviseur inférieur: voir capture d’écran
  • Couleur du séparateur inférieur: # 524fbf
  • Hauteur du diviseur inférieur: 20vw
  • Répétition horizontale du diviseur inférieur: 0,5x
  • Bascule du diviseur inférieur: horizontal et vertical
Hauteur et rembourrage de la section

Étant donné que cette section est purement destinée à la conception du séparateur, nous pouvons nous débarrasser de la hauteur et du rembourrage de sorte que seul le style du séparateur s’affiche et qu’aucun espace inutile ne vienne entre les deux sections de contenu. Mettez à jour les éléments suivants:

  • Hauteur: 0px
  • Rembourrage: 0px haut, 0px bas
Effets de défilement du séparateur de section

Donnez ensuite à la section les effets de défilement suivants:

Sous l’ onglet Mouvement horizontal …

  • Activer le mouvement horizontal: OUI

Nous pouvons conserver les paramètres par défaut pour celui-ci sur la vue du bureau .

Mettez ensuite à jour les paramètres de mouvement horizontal sur la tablette :

  • Décalage de départ: 3 (à 0% de la fenêtre)
  • Décalage moyen: 0 (à 50% de la fenêtre d’affichage)
  • Décalage de fin: -3 (à 100% de la fenêtre d’affichage)

Sous l’onglet Scaling Up and Down Effect , mettez à jour les éléments suivants sur le bureau …

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é]

  • Échelle de départ: 200% (à 0% de la fenêtre)
  • Echelle moyenne: 150% (à 45% -65% de la fenêtre d’affichage)
  • Échelle de fin: 150% (à 100% de la fenêtre d’affichage)

Mettez ensuite à jour l’effet Scaling Up and Down sur la tablette comme suit:

  • Echelle de départ: 400% (à 0% de la fenêtre)
  • Echelle moyenne: 300% (à 45% -65% de la fenêtre d’affichage)
  • Échelle de fin: 400% (à 100% de la fenêtre d’affichage)

La principale raison pour laquelle nous devons ajuster les effets de mouvement sur la tablette (et le téléphone) est due aux valeurs de mouvement horizontales utilisant des unités de longueur de pixel (c.-à-d. 3 = 300 pixels), qui sont absolues et ne s’ajustent pas à la largeur du navigateur.

Voyons maintenant le résultat final de notre diviseur de section animée sur défilement.

Dernières pensées

L’animation des séparateurs de section sur le défilement est un moyen amusant et efficace de donner plus de vie à une page Web. J’espère que cela vous donnera un peu d’inspiration pour susciter vous-même des designs encore plus créatifs.

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
1 Partages
Partagez1
Tweetez
Enregistrer