Comment créer de belles transitions lorsque vous passez le curseur sur un fond de gradient en utilisant Divi

Récemment, nous avons ajouté quelques options supplémentaires de curseur de souris dans Divi pour vous permettre de créer des effets plus intéressants sans toucher une ligne de code. Par exemple, vous pouvez maintenant créer des transitions incroyables pendant que vous survolez un fond de rampe. Une conception unique peut être réalisée en combinant les gradients des colonnes, des rangées et des sections. Dans ce tutoriel, nous vous expliquerons en détail comment le faire. Nous commencerons par les étapes générales suivantes. Ensuite, nous examinerons chacun des trois exemples de conception. Vous pouvez également télécharger gratuitement le fichier json! On y va.
Avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide à trois exemples différents qui seront recréés dans ce tutoriel. Exemple 1 Exemple # 2 Exemple # 3 Téléchargement gratuit de la section héros Abonnez – vous à notre chaîne YouTube pour obtenir ces sections héros gratuites, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. 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! Procédure générale pour ajouter un nouvel espacement de section
Quelques paragraphes généraux. Ajoute une nouvelle section à la page en cours de traitement et supprime toute population par défaut. Plus tard, l’enlèvement de tous les remblais supérieurs et inférieurs nous aidera à combiner l’arrière – plan ombragé des colonnes, des lignes et des sections.
Remplissage supérieur: 0px remplissage inférieur: 0px Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Sans ajouter de module, ouvrez le réglage de ligne et laissez la ligne occuper toute la largeur du conteneur de section. Largeur: 100% largeur maximale: 100% L’espacement passe aux paramètres d’espacement et supprime tous les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Ajoutez le module Texte 1 à la colonne ajouter du contenu H1 commençons à ajouter des modules! La première chose dont nous avons besoin est un formulaire texte qui contient du contenu H1. Paramètres de texte H1 passer à l’onglet conception et modifier les paramètres de texte H1 en conséquence: caractères de titre: Montserrat titre alignement de texte: Centre titre couleur du texte: # 000000 titre taille du texte: 3vw (bureau), 6vw (tablette et téléphone) espacement des lettres de titre: 0,7vw Ensuite, ouvrez les paramètres de taille et changez la largeur et l’alignement du module. Largeur: 48% (bureau), 60% (tablette et téléphone) Alignement du module: milieu La conception du module est complétée par l’ajout d’une marge supérieure. Marge supérieure: 10vw Ajoutez le module séparateur à la colonne de visibilité du module suivant! Ajoutez le module séparateur et assurez – vous que l’option séparateur d’affichage est activée. Afficher les séparateurs: Oui La ligne change de couleur plus tard. Couleur de ligne: # 000000 Redimensionner pour passer aux paramètres