Le nouvel effet de défilement de Divi peut facilement amener votre expérience de conception web à un nouveau niveau. Bien sûr, vous pouvez l’appliquer directement aux éléments de la zone, mais vous pouvez également choisir d’ajouter le Mouvement aux éléments suivants. La méthode de base permet de maintenir le contenu statique pendant le mouvement de fond. Dans ce tutoriel, nous utiliserons les formes de mouvement transformées comme éléments de base pour créer des sections d’animation. Nous aborderons deux exemples différents, mais les possibilités sont infinies. Vous pouvez également télécharger gratuitement le fichier json!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Exemple 1 Bureau
Télécharger le fichier
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et accéder au paquet Divi sett Layout
Imali gratuit! La procédure générale pour ajouter une nouvelle section de fond de rampe commence par ajouter une nouvelle section à la page en cours de traitement. Ouvrez les paramètres de section et appliquez l’arrière – plan du gradient.
Couleur 1: # FFFFFF couleur 2: # 97c6fc type de gradient: direction de gradient linéaire: 306 degrés position de départ: 50% position finale: 50% L’espacement passe à l’onglet conception de section et utilise des marges personnalisées et des valeurs de remplissage. Marge gauche: 4% marge droite: 4% marge supérieure: 11% marge inférieure: 11% Nous avons également utilisé l’ombre mince de la boîte. Intensité du flou de l’ombre de la boîte: 80 Px couleur de l’ombre: rgba (0,0,0,0,1) Emplacement de l’ombre de la boîte: ombre extérieure Visibilité, nous complétons le réglage de la section en définissant le débordement à masquer. Cela garantit que lorsque vous ajoutez des formes de mouvement transformées, elles ne dépassent pas le conteneur de section.
Débordement horizontal: masquer le débordement vertical: masquer Ajouter une nouvelle ligne – structure de colonne ajouter une nouvelle ligne à la Section pour continuer en utilisant la structure de colonne suivante: Redimensionnez sans ajouter de module, ouvrez les paramètres de ligne et changez la largeur maximale dans les paramètres de redimensionnement. Largeur maximale: 1580 px Espacement des colonnes 1 Nous avons également ajouté un peu plus de remplissage que le réglage de l’espacement de la première colonne. Remplissage supérieur: 9% Ajouter un formulaire de texte 1 à la colonne 1 ajouter du contenu H2 une fois la configuration de la ligne terminée, vous pouvez ajouter des modules, en commençant par le formulaire de texte dans la colonne 1. Ajoutez la teneur en H2 de votre choix.
Paramètres de texte H2 passer à l’onglet conception du module et modifier les paramètres de texte H2 en conséquence: caractère de titre 2: Abril fatface titre couleur de texte 2: # 7206a0 titre 2: dimensions
Un texte: 80 pixels (bureau), 65 pixels (tablette), 50 pixels (téléphone) Ajouter le formulaire de texte no 2 à la colonne 1 Paramètres de texte ajouter un autre formulaire de texte directement sous le formulaire de texte précédent, dont le contenu descriptif est à votre choix. Paramètres de texte modifier les paramètres de texte du formulaire comme suit: caractères de texte: ouvrir sans couleur de texte: # 7206a0hauteur de la ligne de texte: 2em
Ajouter un module bouton à la colonne 1 Ajouter copier la colonne 1 le dernier module dont nous avons besoin est un module bouton. Saisissez une copie de la sélection. Ensuite, passez à l’onglet conception et modélisez les boutons en conséquence: chaque bouton utilise un style personnalisé: Oui bouton taille du texte: 20 Px bouton couleur du texte: # FFFFFF bouton couleur de fond: # 077bff bouton largeur de la bordure: 0px Police du bouton: Abril fatface Nous avons également ajouté des valeurs de remplissage personnalisées pour l’espacement. Remplissage en haut: 20px remplissage en bas: 20px remplissage à gauche: 50 Px remplissage à droite: 50 px
Ajoutez le module image à la deuxième colonne de la ligne 2 pour charger l’image, et le seul module dont nous avons besoin est le module image. Téléchargez l’illustration de votre choix. Si vous souhaitez utiliser ce que nous avons utilisé dans ce tutoriel, vous pouvez le trouver dans le dossier téléchargements, que vous pouvez télécharger au début de cet article. Alignement passez à l’onglet conception du formulaire et changez l’alignement de l’image. Alignement de l’image: à droite Complétez la configuration du module en changeant la largeur sur différentes tailles d’écran.
Largeur: 100% (bureau), 50% (tablette et téléphone) Recréer l’exemple # 1 Ajouter le texte en haut de la colonne 1 une fois que toutes les formes régulières sont prêtes, vous pouvez ajouter le mouvement transformé! Nous ajouterons
à: 270% Espacement nous avons également ajouté des valeurs d’espacement personnalisées. Marge inférieure: 1vw (bureau), 2vw (tablette), 3vw (téléphone mobile) Marge supérieure: 29% marge inférieure: 29% Tourner l’inclinaison, et nous appliquerons l’effet d’inclinaison de transformation dans les paramètres de transformation. Droite: – 54° Ensuite, nous allons à l’onglet avancé et changeons les paramètres de localisation du module. Position: position absolue: décalage vertical supérieur gauche: – 50% décalage horizontal: – 50% Déplacez l’effet de défilement verticalement, puis nous ajouterons l’effet de défilement. Commencez par un mouvement vertical. Activer le mouvement vertical: est la compensation initiale: 4 Écart moyen: 0 (à 50%) Compensation finale: – 4 Effet de défilement du mouvement horizontal, nous allons compléter la configuration du module en ajoutant un peu de mouvement horizontal! Activer le mouvement horizontal: est la compensation initiale: 4 Écart moyen: 0 (à 50%) Compensation finale: – 4 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 Dans cet article, nous vous montrons comment ajouter de façon créative des formes de mouvement transformées à la conception de votre section. Les formes de mouvement transformées suivantes vous aident à ajouter une animation fine à votre conception de section. Vous pouvez également télécharger gratuitement le fichier json! Si vous avez des questions, 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 plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.
Imali gratuit! La procédure générale pour ajouter une nouvelle section de fond de rampe commence par ajouter une nouvelle section à la page en cours de traitement. Ouvrez les paramètres de section et appliquez l’arrière – plan du gradient.
Couleur 1: # FFFFFF couleur 2: # 97c6fc type de gradient: direction de gradient linéaire: 306 degrés position de départ: 50% position finale: 50%
Débordement horizontal: masquer le débordement vertical: masquer
Un texte: 80 pixels (bureau), 65 pixels (tablette), 50 pixels (téléphone)
Largeur: 100% (bureau), 50% (tablette et téléphone)
à: 270%