Utiliser Divi & # 39; S effondre l’animation pour que le flou fleurisse

Bienvenue à la partie 4 de cette série de 6 parties qui vous apprendra à utiliser les nouvelles options d’animation de Divi pour concevoir de grandes parties de page. Je vais vous montrer comment créer différentes sections de notre page de présentation en direct pour vous montrer comment ajouter des animations à votre site. L’animation est très intéressante et facile à utiliser. Avec Visual Builder, vous pouvez voir que votre création prend vie à chaque étape du processus. Venez explorer le pouvoir de l’animation Divi avec moi.

Dans notre dernier billet, je vous ai montré quelques façons créatives de concevoir et de produire 4 modules Blurb organisés pour réaliser un processus étape par étape.
Aujourd’hui, nous allons construire la partie 6 de la page de présentation animée. Cette section présente un certain nombre d’excellents dessins et animations utilisés pour afficher les produits au premier plan ou pour les télécharger. L’utilisation de couleurs et d’animations Halo sur ces modules Blurb fait vraiment ressortir cette section. Plongeons! Voici un aperçu que nous allons construire dans le post d’aujourd’hui Utilisez l’animation Collapse de Divi pour abonner Blurb Blossom à notre construction de canaux YouTube Section 6 utilisez Visual Builder pour ajouter et personnaliser vos sections, en commençant par ajouter une autre section normale à la mise en page. Ensuite, ajoutez une ligne et trois colonnes (une demi – colonne par quart) à votre partition. Avant d’ajouter le premier module, allez à la section paramètres et mettez à jour ce qui suit: dans l’onglet Contenu… Couleur de fond: # 00252d Sur l’onglet Design… Remplissage personnalisé: 80px top, 80px Bottom Save settings utilisez le formulaire texte pour ajouter un titre maintenant nous retournons à la ligne à trois colonnes et ajoutons le formulaire texte dans la colonne de gauche. Mettre à jour les paramètres de texte comme suit: sur l’onglet Contenu… Ajouter le titre H1 suivant à l’onglet texte de la zone de contenu:

Architecture
Période Même si les deux modules de texte ont besoin du même temps (durée) pour compléter l’animation, comme ils commencent à des niveaux d’intensité différents, ils se déplacent à des vitesses différentes. C’est comme si deux coureurs avaient commencé et terminé la course en même temps, l’un d’eux ayant un avantage significatif.

Enregistrer les paramètres ajouter un bouton maintenant nous ajoutons un module de bouton sous les deux modules de texte dans la colonne de gauche. Ensuite, mettez à jour les paramètres comme suit: sur l’onglet Contenu… Texte en bas: téléchargez toutes les URL des boutons de l’onglet design [insérer l’URL]… Utiliser un style personnalisé pour les boutons: s bouton taille du texte: 15 Px bouton couleur du texte: # 01254c bouton couleur de fond: # ffcd1c bouton largeur de la bordure: 0px bouton rayon de la bordure: 65 Px bouton espacement des lettres: 1px bouton caractères: gras (b), majuscules (TT) Remplissage personnalisé: 10 pixels en haut, 30 pixels à droite, 10 pixels en bas, 30 pixels à gauche style d’animation: direction de l’animation de diapositives: intensité de l’animation à gauche: 16% Note: cet effet d’animation correspond à la première animation du module texte. Mettre à jour les paramètres comme suit: sur l’onglet Contenu… Titre: Divi utilise l’icône: s icône: [choisir l’icône] couleur de la rampe de fond: # 8b56ff, # 5d3dff type de rampe: direction de la rampe linéaire: 140 degrés, dans l’onglet conception… Couleur de l’icône: # FFFFFF couleur du texte: direction du texte clair: caractères du titre central: gras (b), majuscules (TT) espacement des lettres du titre: 10px marge personnalisée: 12% limite inférieure remplissage personnalisé: 40 Px en haut, 30 Px à droite, 30 Px en bas, 30 Px styles d’animation à gauche: direction de l’animation pliante: latence de l’animation à gauche: 200 ms
Note: la direction d’animation de chaque module Blurb sera différente. C’est la première fois.
L module Blurb avec les paramètres suivants: dans l’onglet Contenu… Titre: Icône monar: [sélectionnez une nouvelle icône] gradient de fond: # f2743a, # ff5656 sur l’onglet conception… Direction de l’animation: droite Note: dans ce flou, l’animation se produit à droite. Sur l’onglet avancé… Remplacer CSS dans la zone de l’élément principal par ce qui suit: rayon de la bordure: 6px;
Ombre du cadre: 0 10px 60px – 10px # f2743a, insérer 0 1px 3px rgba (255255255,0.2);
Note: Comme les 4 blurbs ont le même style et le même retard, cela produit un effet de floraison inverse puisque les 4 modules se plient dans des directions différentes. Enregistrer les paramètres maintenant, nous obtenons l’espacement correct en mettant à jour les paramètres de ligne comme suit: dans l’onglet conception… Utiliser la largeur personnalisée: s largeur personnalisée: 1366 Px utiliser la largeur personnalisée de la gouttière: s largeur personnalisée de la gouttière: 2 remplissage personnalisé: 80 Px en haut, 0 Px à droite, 160 Px en bas, 0 Px à gauche colonne 1 remplissage personnalisé: 140 Px en haut construire la deuxième ligne maintenant nous pouvons construire la prochaine ligne pour la section. Pour accélérer, nous reproduirons les éléments de conception de nos gammes de produits et des modules précédemment conçus. Tout d’abord, nous ajoutons de nouvelles lignes aux colonnes de la section. Ensuite, mettez à jour les paramètres de ligne en utilisant la largeur personnalisée: s largeur personnalisée: 1366 Px utilisez la largeur personnalisée de l’espacement: s largeur de l’espacement: 2 enregistrez les paramètres et copiez le premier formulaire de texte sur la première ligne que vous avez créée qui contient le titre H1. Ensuite, mettez à jour les paramètres comme suit: sur l’onglet Contenu… Remplacer l’étiquette H1 actuelle par ce qui suit: Ne vous contentez pas de moins <Under the Advanced tab… Non dimentichiamo di aggiungere quel meraviglioso effetto bagliore usando la proprietà box shadow css. Trova la casella Main Element sotto Custom CSS e aggiungi quanto segue:box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);

Salva le impostazioni Aggiungi il tuo primo modulo Blurb Questo è tutto per la nostra colonna di sinistra. Ora aggiungiamo un modulo Blurb alla colonna centrale (che è la prima colonna di un quarto).