Créer l’effet de glissement du séparateur de section dans Divi

La section paramètres par défaut, mais fournit un fond entièrement transparent. Ensuite, nous pouvons supprimer le remplissage supérieur et ajouter une marge inférieure à des fins d’essai de glissement.
Pour ce faire, ouvrez la section paramètres et mettez à jour ce qui suit: couleur de fond: rgba (0,0,0,0) marge inférieure: 80vh remplissage: 0px

Créer un séparateur de partitions d’animation une fois les deux partitions de contenu terminées, nous pouvons ajouter des partitions au séparateur de partitions d’animation. Ajouter une nouvelle section continuer en créant une nouvelle section générale entre les deux sections de contenu. Supprimer à nouveau la couleur de fond par défaut pour la section, mais mettre à jour ce qui suit: couleur de fond: rgba (0,0,0,0) Ne vous inquiétez pas, nous allons créer notre propre couleur de fond avec le diviseur. Pour ce faire, cliquez sur l’onglet conception et ajoutez des séparateurs de haut et de bas à la section comme suit:
Haut de la page séparateur Design haut de la page séparateur style: voir capture d’écran haut de la page séparateur couleur: # 524fbf haut de la page séparateur hauteur: 20vw horizontal dupliquer haut de la page séparateur: 0.6x haut de la page séparateur Flip: horizontal Séparateur inférieur conception du séparateur inférieur style du séparateur inférieur: voir capture d’écran couleur du séparateur inférieur: # 524fbf hauteur du séparateur inférieur: 20vw répétition horizontale du séparateur inférieur: 0,5x inversion du séparateur inférieur: horizontale et verticale

Comme cette section n’est utilisée que pour la conception des délimiteurs, nous pouvons éliminer la hauteur et le remplissage afin que seuls les styles des délimiteurs soient affichés et qu’il n’y ait pas d’espace inutile entre les deux parties du contenu. Mettre à jour ce qui suit:
Hauteur: 0px remplissage: 0px haut, 0px bas

L’effet de défilement du séparateur de zone fournit ensuite l’effet de défilement suivant pour la zone: sur l’onglet mouvement horizontal… Activer movim
Réajustez le diviseur à afficher en haut en mettant à jour l’index Z de cette section. Dans cet exemple, nous mettons à jour le premier séparateur de segment avec un excellent index Z comme suit: index Z: 1 Masquer le débordement comme dernière étape, nous devons nous assurer que la partie redimensionnée ne déborde pas à l’extérieur du conteneur de page. Pour vous assurer que cela ne se produira pas, ouvrez la configuration de la page et ajoutez le CSS personnalisé suivant:. Et _ Builder Internal content {overflow: hidden;} Résultat final il s’agit de la conception statique finale. C’est la conception de l’utilisateur lorsqu’il fait défiler la page. Attention aux belles couleurs du sport! Animer une partition sur un défilement est un moyen intéressant et efficace de rendre une page Web vivante. J’espère que cela vous donnera de l’inspiration et vous permettra de créer plus de projets créatifs vous – même. J’ai hâte d’entendre vos commentaires. Bonjour!

Laisser un commentaire

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