Ajouter un mouvement à l’image de fond lors du défilement avec Divi

Avec le nouvel effet de défilement de Divi, vous pouvez créer n’importe quel type de design en utilisant les options intégrées de Divi et ajouter quelques beaux effets de mouvement de défilement pour élever votre design à un nouveau niveau. Dans le tutoriel d’aujourd’hui, nous ajouterons une technologie innovante à votre liste que vous pouvez utiliser pour les projets à venir. Plus précisément, nous vous montrerons comment ajouter un mouvement à l’image de fond en utilisant le module image et la position absolue de Divi. 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.
Déplacer l’image de fond # 1 Bureau Mobile Déplacer l’image de fond # 2 Bureau Mobile Téléchargement gratuit des mises en page d’arrière – plan mobiles pour obtenir des mises en page d’arrière – plan peintes à la main, vous devez d’abord les télécharger en utilisant les boutons en bas. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. 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 Obtenez gratuitement le paquet hebdomadaire Divi Layout! Étapes générales ajouter une nouvelle section commence par ajouter une nouvelle si
Activé.
Afficher les séparateurs: Oui Puis changez la couleur de la ligne du module. Couleur de ligne: # FFFFFF Le redimensionnement modifie également les paramètres de taille. Poids du séparateur: 6px largeur: 100% Ensuite, ajoutez la marge supérieure à différentes tailles d’écran. Marge supérieure: 30 pixels (bureau), 20 pixels (tablette et téléphone) La position e repositionne le module distributeur en utilisant la position absolue de Divi. Emplacement: emplacement absolu: Centre Ajouter un formulaire texte à la colonne 1 ajouter du contenu H2 dans la première colonne, le formulaire suivant dont nous avons besoin est un formulaire texte qui contient du contenu H2. Paramètres de texte H2 passer à l’onglet conception du formulaire et modifier les paramètres de texte H2 en conséquence: Police de titre 2: raleway title 2 font Weight: bold title text Color 2: # FFFFFF title 2: Text size: 70 pixels (Desktop), 50 pixels (tablette), 40 pixels (mobile) Titre 2 couleur de l’ombre du texte: rgba (0,0,0,0,95) Puis ajoutez un remplissage personnalisé en haut et en bas. Remplissage supérieur: 150 Px remplissage inférieur: 150 px Position e repositionner le module dans l’onglet avancé. Emplacement: emplacement absolu: Centre Ajouter le tableau de texte 1 à la colonne 2 et le contenu H3 à la colonne suivante. Ajoutez le premier formulaire texte qui contient du contenu H3 de votre choix. Paramètres de texte H3 passer à l’onglet conception du module et modifier les paramètres de texte H3 comme suit: titre 3 caractères: raleway titre 3: taille du texte: 50 Px (bureau), 35 Px (tablette), 30 Px (téléphone) Titre 3 poids de ligne: 1,2em L’espacement augmente également la marge inférieure. Marge inférieure: 50 pixels Ajouter le tableau de texte no 2 à la colonne 2 ajouter un autre tableau de texte sous le tableau de texte précédent, dont le contenu descriptif est à votre choix. Configuration des te
Pour modifier les paramètres de texte d’un formulaire: caractères de texte: hauteur de la ligne de texte raleway: 2,5 em Ajouter un module bouton – poussoir à la colonne 2 ajouter copier le module suivant et le dernier module dont nous avons besoin dans la colonne 2 sont des modules bouton – poussoir. Saisissez une copie de la sélection. Le bouton est défini pour modéliser le bouton suivant. Chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 25 Px couleur du texte du bouton: # 000000 largeur de la bordure du bouton: 0px Police du bouton: raleway police du bouton poids: gras afficher l’icône du bouton: Oui couleur de l’icône du bouton: # 000000 L’espacement e complète la configuration du module en ajoutant des marges plus élevées. Marge supérieure: 50 pixels Maintenant, ajoutez l’arrière – plan de mouvement # 1 au module image en mouvement vertical, et vous n’avez qu’à ajouter n’importe quel type d’effet de défilement que vous avez sélectionné au module image dans la colonne 1. Pour recréer le premier exemple affiché dans cet aperçu, ouvrez le module image et utilisez les paramètres de mouvement vertical suivants: activer le mouvement vertical: est la compensation initiale: 0 décalage moyen: 0 (69%) Compensation finale: – 2 Le mouvement horizontal ajoute également un mouvement horizontal.
Activer le mouvement horizontal: est la compensation initiale: – 2 compensation moyenne: 0 décalage final: 0 Utilisez l’effet d’échelle pour redimensionner vers le haut et vers le bas. Activer l’échelle supérieure et inférieure: est l’échelle initiale: 70% (21%) moyenne: 80% (39%) finale: 100% (54%) Ajouter l’arrière – plan mobile no 2 au module d’image de mouvement horizontal si vous souhaitez recréer un deuxième exemple d’image de fond mobile, ajoutez l’effet de mouvement horizontal suivant: activer le mouvement horizontal: est la compensation initiale: – 10 décalage moyen: – 10 (40%) décalage final: 0 (50%) Atténuation des entrées et des sorties
De plus, l’effet fade – in – fade: activer fade – in – fade: est l’opacité initiale: 0% opacité moyenne: 0% (35%) opacité finale: 100% (45%) Rotation e en ajoutant un effet de rotation: activer la rotation: est la rotation initiale: 30° rotation moyenne: 0° (40%) rotation finale: 0° (50%) terminer le réglage de l’effet de roulement du module Une fois la ligne clonée et tous ses modules terminés, vous pouvez cloner la ligne entière n’importe quel nombre de fois. Changez l’image de fond changez l’image de fond du module image pour chaque copie. Complétez avec le contenu et le jeu! Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Déplacer l’image de fond # 1 Bureau Mobile Déplacer l’image de fond # 2 Bureau Mobile Dans ce tutoriel, nous vous montrons comment utiliser l’effet de défilement de Divi pour créer. Nous avons recréé un bel exemple à partir de zéro, où nous ajoutons l’effet de défilement à l’image de fond. Nous utilisons les paramètres de position absolue intégrés à Divi et vous pouvez télécharger gratuitement les fichiers 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 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.