3 effets de mouvement de défilement faciles que vous pouvez ajouter au titre en utilisant Divi

Ajouter une nouvelle couleur de fond de partition à une nouvelle page ou à une page existante ajoute d’abord une nouvelle partition à la page que vous travaillez. Ouvrez certains paramètres et changez la couleur de fond en blanc. Couleur de fond: # FFFFFF L’espacement passe à l’onglet conception et modifie les valeurs d’espacement. Remplissage en haut: 15vw (bureau), 20vw (tablette), 25vw (téléphone mobile) remplissage en bas: 0vw Débordement, pour s’assurer que l’effet de défilement n’affiche aucune barre de défilement horizontale, nous cacherons également le débordement de section. Débordement horizontal: masquer le débordement vertical: masquer Ajouter une structure de ligne 1 continuer à ajouter de nouvelles lignes à la section en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, ouvrez les paramètres de ligne et changez la largeur maximale et la largeur dans les paramètres de redimensionnement. Largeur: 90% largeur maximale: 100% Supprime tous les remblais supérieurs et inférieurs par défaut.
Remplissage supérieur: 0px remplissage inférieur: 0px Ajouter un formulaire Texte 1 à la colonne ajouter du contenu H1 le seul formulaire requis dans cette ligne est un formulaire texte qui contient du contenu H1. Paramètres de texte H1 modifier les paramètres de texte du module en conséquence H1: police d’en – tête: Playfair afficher le poids de la police d’en – tête: alignement du texte d’en – tête en gras: couleur centrale du texte d’en – tête: # 000000 taille du texte d’en – tête: 6vw Ajouter une structure de colonne de ligne # 2, puis ajouter une autre ligne en utilisant la structure de colonne suivante: Fond de rampe sans ajouter de module, activez les paramètres de ligne et utilisez le fond de rampe. Color 1: # 444444 Color 2: # 000000 Gradient Type: Linear Gradient direction: 237deg Taille
Entrées et sorties: Oui opacité initiale: 100% opacité moyenne: 100% 0% – 90% (bureau) 0% – 95% (tablette et téléphone) opacité finale: 0% Nous appliquerons également l’effet de rotation. Activer la rotation: est la rotation initiale: 0° rotation moyenne: 0° 0% – 90% (bureau) 0% – 95% (tablette et téléphone) rotation finale: 90° Module de texte # 2 mouvement horizontal ensuite, ouvrez le deuxième module de texte dans la partition et appliquez les paramètres de mouvement horizontal suivants: activer le mouvement horizontal: est la compensation initiale: 0compensation moyenne: 0 0% à 90% compensation finale: – 10 Utilisez l’effet de mouvement fade – out pour fade – out continu. Activer le fondu d’entrée et de sortie: est l’opacité initiale: 100% opacité moyenne: 100% 0% – 80% (bureau) 0% – 95% (tablette et téléphone) opacité finale: 0% La rotation e complète la configuration du module en ajoutant un effet de défilement de rotation. Activer la rotation: est la rotation initiale: 0° rotation moyenne: 0° 0% – 80% (bureau) 0% – 90% (tablette et téléphone) rotation finale: – 90° Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Exemple 1 Bureau Mobile Exemple # 2 Bureau Mobile Exemple # 3 Bureau Mobile Dans cet article, nous vous montrons comment utiliser le nouvel effet de défilement de Divi pour ajouter un effet de mouvement de défilement au titre. Nous avons discuté de trois exemples différents, mais les possibilités sont infinies. Vous pouvez également télécharger gratuitement le fichier json! Si vous avez des questions ou des suggestions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir d’autres cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours parmi les premiers à en apprendre davantage sur Divi et à en bénéficier.