Comment ajouter un arrière-plan dégradé animé à une section dans Divi
Au fur et à mesure que vous commencez à en apprendre davantage sur la méthodologie de conception que WordPress a activée avec Divi, vous découvrirez qu’il est possible d’ajouter un fond dégradé animé au sein de votre site Web.
Ce célèbre modèle WordPress fonctionne à travers des sections ou des modules entre lesquels il est capable de diviser le contenu de la page et d’ajouter un design à chacun .
Grâce à cette compétence, vous pourrez découvrir le moyen d’éviter la monotonie des arrière-plans de pages Web unicolores ou avec des images téléchargées à partir du Web.
Bien que Divi vous donne la possibilité de concevoir votre propre page, si vous le souhaitez, vous pouvez télécharger les designs préétablis.
Par conséquent, nous expliquons comment créer ce design particulier dans votre modèle WordPress pour améliorer l’affichage de votre page.
Que sont les sections dans Divi et comment pouvez-vous les insérer sur votre page?
Ce ne sont rien de plus que des blocs horizontaux, considérés comme les plus grandes sections du constructeur Divi.
Ils ont la particularité d’être empilés pour classer le contenu qui sera saisi dans la conception du site Web, il peut donc être considéré comme le » wrapper «.
Parmi les paramètres que ces blocs contiennent, il est possible d’ajouter manuellement un arrière-plan avec un dégradé animé dans les » Options de conception «.
Étapes pour créer un bloc de section et accéder à ses paramètres
Après vous être assuré d’avoir activé le constructeur visuel Divi, vous devez cliquer sur le bouton de couleur « + » pour ajouter la section. Ensuite, il vous montrera une fenêtre qui vous permettra d’ajouter trois types d’options: » Standard «, » Pleine largeur » et » Spécial «.
Une fois que vous avez sélectionné l’un d’entre eux, vous aurez la possibilité de choisir la structure de colonne pour les lignes que la section contiendra.
Enfin, vous pourrez insérer des modules et l’option » Paramètres de la section » apparaîtra, où vous verrez la liste des modifications pour » Contenu «, » Conception » et » Avancé «.
Comment ajouter un fond dégradé animé avec Divi? Pas à pas
La méthode qui sera utilisée est de créer l’arrière-plan dégradé souhaité en ajustant l’arrière-plan qui contient le constructeur Divi avec des extraits de code CSS. Alors, commencez par créer une nouvelle page sur la plateforme WordPress et utilisez le constructeur Divi pour choisir l’option » Construire à partir de zéro «.
Avant de vous, vous aurez une toile vierge. Ici, vous allez ajouter une seule ligne de colonne comme expliqué ci-dessus.
Dans la configuration de la section, vous devez configurer le contenu de « Padding » en haut 12vw et ajouter « Hauteur: 40vw » dans la case grise qui apparaît sous « Éléments CSS principaux ».
À partir de là, vous commencerez à configurer le fond dégradé, où vous accéderez à l’option » Arrière-plan » pour appuyer sur le bouton » Dégradé «.
En dessous, vous pouvez choisir les couleurs des dégradés, le type de dégradé souhaité et la direction à prendre.
En faisant cela, redimensionnez votre bloc à 100% de largeur et de hauteur pour commencer à créer l’animation souhaitée.
Cela se fera via une modification CSS personnalisée, vous devez donc ajouter une classe spécifique à la section que vous éditez; par conséquent, vous devez entrer dans l’onglet » Avancé » et placer le nom de l’animation sous » Classe CSS «.
Code pour ajouter un arrière-plan animé dans Divi
Une fois cette classe ajoutée, vous pouvez ajouter le module de code et placer ce qui suit dans la case » Code » à l’intérieur des balises <style> </style>.
. cheer up-gradient {
Taille du fond: 400% 400%;
Animation: dégradé 5s facilité infinie;
}
@keyframes gradient {
0% {
Position de fond: 0% 50%;
}
cinquante% {
Position de fond: 100% 50%;
}
100% {
Position de fond: 0% 50%;
}
}
De cette façon, vous avez réussi à définir votre arrière-plan dégradé à une amplitude de 400% par rapport à la taille d’origine, et son animation est un mouvement des deux côtés.
Outre les avantages de conception que Divi vous offre, il dispose également de nombreux outils pour faire de votre page le favori des internautes, comme pouvoir utiliser BreadCrumbs pour améliorer le référencement de la page ou insérer un menu déroulant pour son utilisation. et la manipulation est plus facile.
