Créer une animation post – override en utilisant Divi
Les structures de colonnes suivantes:
Redimensionnez sans ajouter de module, activez les paramètres de ligne et laissez la ligne prendre toute la largeur de l’écran. La raison pour laquelle nous le faisons est de supprimer tous les espaces de pixels par défaut. Dans les prochaines étapes, nous utiliserons les cellules d’affichage pour ajouter tout l’espace nécessaire. Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Ajouter un formulaire texte à la colonne ajouter du contenu H2 commençons à ajouter un formulaire! Le premier module dont nous avons besoin est un module texte avec un certain contenu H2. N’oubliez pas que ce module \Remplissage à gauche: 15vw remplissage à droite: 39vw Ajoutez le module séparateur à la colonne de visibilité du module suivant, qui est le module séparateur. Nous utilisons cette forme pour \
Afficher les séparateurs: Non Ensuite, allez aux paramètres de fond et ajoutez une couleur de fond.
Assurez – vous d’utiliser la même couleur de fond que la Section pour créer un effet uniforme. Couleur de fond: # f3f3ec En ajoutant un point de remplissage vers le haut et vers le bas dans le réglage de l’espacement pour fournir une plus grande taille au module séparateur, l’espacement se poursuit. Emballage supérieur: 9vw emballage inférieur: 9vw L’animation e complète la configuration du diviseur en ajoutant une animation retardée. Styles d’animation: direction de l’animation de diapositives: activer la durée de l’animation: 1200 MS retard de l’animation: 1500 ms intensité de l’animation: 50% opacité initiale de l’animation: 50% Ajouter la deuxième ligne de la structure de colonne de la ligne # 2! Sélectionnez la structure de colonne suivante: Redimensionnez sans ajouter de module, activez les paramètres de ligne et laissez la ligne prendre toute la largeur de l’écran. Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Ensuite, ajoutez un peu de remplissage à gauche et à droite de la ligne dans les paramètres d’espacement. Remplissage à gauche: 10vw (bureau), 2vw (tablette et téléphone) remplissage à droite: 10vw (bureau), 2vw (tablette et téléphone) Écran nous nous assurons également que les colonnes sont affichées côte à côte sur des écrans plus petits en ajoutant une ligne de code CSS à l’élément principal de la ligne. Affichage: Flex; Ajouter un module Blurb à la colonne 1 ajouter du contenu il est temps de commencer à ajouter des modules! Ajoutez un module Blurb à la colonne 1 et entrez une partie de votre sélection. Sélectionnez l’icône continuer en sélectionnant l’icône que vous avez sélectionnée. Paramètres de l’icône modifier l’apparence de l’icône plus tard. Couleur de l’icône: \ # dbd6bd icône circulaire: est une icône circulaire: \ # FFFFFF image \/ emplacement de l’icône: en haut utiliser la taille de la police de l’icône: est la taille de la police de l’icône: 2,5vw (bureau), 1,7vw (tablette), 1,9vw (téléphone) Il modifie également le délai d’animation. Délai d’animation: 2400 MS Ajouter un module séparateur à la visibilité de la colonne 3 le module séparateur est le module suivant et le dernier module dont nous avons besoin dans cette ligne. Encore une fois, nous utilisons ce module pour créer une superposition retardée, ce qui aidera à \