Utilisez l’animation Divi pour ouvrir le contenu contenant des diapositives

Renvoie 600 × 400. Aucun Code avancé n’est nécessaire pour utiliser Visual Builder ici. Nous n’utiliserons que Visual Builder pour concevoir les deux prochaines parties de la page que nous avons créée dans la partie 1 de cette série. Puisque votre page est déjà configurée, vous êtes prêt à commencer. Utilisez Divi animation pour ouvrir le contenu avec des images de défilement Abonnez – vous à notre présentation de construction de canaux YouTube section 3 Section 3, qui est un bon exemple de la façon d’invoquer le module d’exploitation en utilisant la conception d’images et l’animation qui l’accompagne.
Plongeons. En utilisant Visual Builder, ajoutez une section générale avec deux lignes de colonne. Dans la colonne de gauche, ajoutez un module image.

Mettre à jour les paramètres de l’image comme suit: sur l’onglet Contenu… URL de l’image: [insérer l’image 880 × 600] dans l’onglet conception… Largeur pleine puissance: style d’animation s: direction de l’animation de diapositives: intensité de l’animation à gauche: 20% opacité initiale de l’animation: 100% Note: cette animation ne fait glisser l’image que de droite à gauche. La clé de l’animation ici est l’intensité. Le réglage de l’intensité d’animation à 20% réduit la distance nécessaire pour que l’image atteigne sa position de repos finale. Enregistrer les paramètres ajouter un module de séparateur dans la colonne de droite, Nous afficherons le contenu en utilisant le module de séparateur et le module d’opération d’appel. Le module séparateur est utilisé pour ajouter une ligne de séparation courte au texte. Ajoutez le module séparateur à la colonne de droite. Ensuite, mettez à jour les paramètres comme suit: sur l’onglet Contenu… Afficher le séparateur sur l’onglet conception… Couleur: # e4ca77 poids du séparateur: 4px largeur: 80px (vous devez saisir cette valeur parce que la valeur par défaut est un pourcentage) Alignement du module: par défaut (à gauche) Marges personnalisées: 60 Px en haut, 0 Px en bas
ST
Image lorsque l’image défile à gauche. Enregistrer les paramètres maintenant Cliquez pour modifier les paramètres de ligne et mettre à jour ce qui suit: sur l’onglet conception… Utiliser la largeur personnalisée dans l’onglet avancé: s largeur personnalisée: 1366 Px… Ajoutez les CSS personnalisés suivants à la zone des éléments principaux de la colonne 1:
Indice Z: 999;
Note: pendant l’automatisation, le texte à droite chevauche l’image. Ce CSS garantit que l’image (colonne 1) reste au – dessus du texte pendant l’animation, créant ainsi un effet plus clair. Enregistrer les paramètres copier votre ligne et la mettre à jour est tout le contenu de la première ligne. Pour gagner du temps en créant une deuxième ligne, copiez la ligne nouvellement créée. Modifier les paramètres de ligne dupliqués comme suit: sur l’onglet avancé… Extraire le CSS personnalisé de l’élément principal de la colonne 1 et l’ajouter à la zone de l’élément principal de la colonne 2:
Indice Z: 999;
Parce que notre image sera dans la colonne de droite, nous avons besoin que la colonne soit en haut du texte animé à gauche. Enregistrez les paramètres du formulaire de mise à jour de l’image et du formulaire d’invitation à l’action sur la deuxième ligne, puis faites glisser le formulaire d’image dans la colonne de droite et faites glisser le formulaire de partition et le formulaire d’invitation à l’action dans la colonne de gauche. La structure des colonnes de cette section est légèrement différente. Cliquez sur l’icône modifier la ligne de structure de colonne (à côté de l’icône copier la ligne) et sélectionnez les deux tiers et un tiers de la disposition de colonne. Tout ce que nous avons à faire maintenant est d’accéder à nouveau à chaque module de la ligne et d’apporter quelques changements. Tout d’abord, mettez à jour les paramètres du module séparateur comme suit: sur l’onglet conception… Alignement du formulaire: direction de l’animation à droite: enregistrer les paramètres à gauche, puis mettre à jour les paramètres du formulaire d’invitation à l’action comme suit: Titre: « parler de »
N ce qui suit: sur l’onglet Contenu… URL de l’image: [insérer une nouvelle image 600 × 400] dans l’onglet conception… Direction de l’animation: note de gauche: ceci crée la même animation de défilement que l’image de la ligne précédente, mais maintenant l’image défile à gauche. Sur l’onglet avancé… Si vous pensez que l’image est floue. Réfléchis encore! Pour ajouter cet effet de flou, il suffit d’ajouter les lignes CSS personnalisées suivantes dans la zone de l’élément principal: filtre: opacité floue (5px) (.6);
En plus de l’effet flou, ce CSS rend l’image translucide avec une opacité de 60%. Enregistrer les paramètres mettre à jour le formulaire de texte dans la colonne de droite mettre à jour le contenu du formulaire de texte supérieur avec un titre H1 plus court en se déplaçant vers la colonne de droite: Elite sacrificatrice Enregistrer les paramètres, regardez! La Section 4 est terminée. Voyons notre résultat final. Bonus: télécharger ces chapitres pour faciliter l’importation est un avantage supplémentaire, nous avons emballé les chapitres intégrés dans le tutoriel d’aujourd’hui en téléchargement gratuit que vous pouvez obtenir en utilisant le formulaire d’activation de courriel ci – dessous. Il suffit de saisir votre e – mail et le bouton téléchargement apparaît. Si vous faites déjà partie du bulletin Divi, ne vous inquiétez pas de vous abonner à nouveau. La ré – insertion d’un courriel ne produira plus de courriel ou de messages en double. Il n’affichera que le contenu téléchargé. Amusez – vous bien. Télécharger le paquet de mise en page 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 Indi