La façon dont les parties héroïques de la page sont conçues détermine les attentes pour le reste de la page. Si vous planifiez une page d’atterrissage pour célébrer quelque chose, qu’il s’agisse d’un anniversaire ou d’une grande vente, elle peut apporter une atmosphère festive à votre design. Une façon de résoudre ce problème est d’ajouter une animation de croquis couleur à l’arrière – plan de la section héros. Toutefois, veuillez prendre note des copies écrites fournies et de la LTC. Dans ce tutoriel, nous vous montrerons comment utiliser les paramètres intégrés de Divi pour créer de belles sections d’animation avec des croquis en couleur. 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. Bureau Mobile Téléchargement gratuit Splash animation Heroes part Layout pour obtenir une partie gratuite de Splash animation Heroes part Layout, vous devez d’abord utiliser les boutons ci – dessous pour télécharger. 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 accédez à l’édition hebdomadaire Divi gra bread
Suivant. Styles d’animation: orientation de l’animation à l’échelle: délai d’animation centré: 250 MS intensité de l’animation: 100%
Animation de la troisième colonne, nous utilisons également l’animation de la troisième colonne. Styles d’animation: orientation de l’animation à l’échelle: délai d’animation centré: 500 ms intensité de l’animation: 100% Ajouter le module image à la colonne 1 charger l’éclaboussure d’image il est temps d’ajouter le module, en commençant par le module image dans la colonne 1. Téléchargez l’image Splash que vous pouvez trouver dans le dossier de téléchargement que vous pouvez télécharger au début de ce tutoriel. Passez à l’onglet conception du module et forcez toute la largeur dans les paramètres de taille.
Largeur totale: Oui Le filtre change ensuite la couleur du module en utilisant les paramètres du filtre. Ombres: 303 degrés de saturation: 200% Nous redimensionneons également l’image dans les paramètres de transformation. En bas: 150% à droite: 150% L’effet de défilement du Mouvement vertical passe ensuite à l’onglet avancé et active un certain mouvement vertical. Activer le mouvement vertical: Oui compensation initiale: 0 compensation moyenne: Bureau: 0 (50%) tablette: 0 (70%) Téléphone: 0 (85%) Déplacement final: 2 effet de mouvement actif: bas de l’élément
Mouvement horizontal effet de roulement nous utilisons également le mouvement horizontal. Activer le mouvement horizontal: est la compensation initiale: Bureau: – 10 tablette et téléphone: 0 compensation moyenne: 0 déplacement final: 4 effet de mouvement actif: bas de l’élément Redimensionner l’effet de défilement vers le haut et vers le bas et l’effet de redimensionnement vers le haut et vers le bas. Activer l’échelle supérieure et inférieure: est l’échelle initiale: 100% moyenne: 150% finale: 200% effets de mouvement actifs: bas de l’élément Cloner le module image deux fois et placer des duplicatas dans les colonnes
60% (bureau), 100% (tablette et téléphone) L’espacement e complète la configuration du module en ajoutant des marges supérieures et inférieures à différentes tailles d’écran. Marge supérieure: 6% (bureau), 10% (tablette), 14% (téléphone) marge inférieure: 6% (bureau), 10% (tablette), 14% (téléphone) Ajouter un module bouton Ajouter une colonne dupliquée le dernier module dont nous avons besoin dans la colonne est un module bouton. Ajoutez une copie de votre choix. Ensuite, allez à l’onglet conception et modélisez les boutons comme suit: chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 17 Px couleur du texte du bouton: # FFFFFF couleur de fond du bouton: # ea01a6 largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 100 px Police de bouton: Rubik poids de police de bouton: gras style de police de bouton: majuscules L’espacement ajoute également des valeurs de remplissage personnalisées aux paramètres d’espacement. Remplissage supérieur: 20px remplissage inférieur: 20px remplissage gauche: 60px remplissage droit: 60px La boîte d’ombre e complète la configuration du module en ajoutant des ombres de boîte. Position horizontale de l’ombre du cadre: 5px position verticale de l’ombre du cadre: 5px couleur de l’ombre: # 30005b Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment créer avec l’animation intégrée et les effets de défilement de Divi. Plus précisément, nous vous avons montré comment créer une Section d’animation colorée avec des croquis de héros pour la page d’atterrissage que vous avez configurée pour une occasion spéciale. L’occasion peut être, sans s’y limiter, l’anniversaire de votre entreprise ou une vente spéciale. Vous pouvez également télécharger gratuitement le fichier json! Si vous avez des questions ou des suggestions, veuillez