Ce célèbre modèle WordPress fonctionne à travers des sections ou des modules comprenant est capable de décomposer le contenu de la page et d'ajouter un design à chaque.
Grâce à cette compétence, vous pourrez découvrir le moyen d'éviter la monotonie des arrière-plans des pages Web monochromes ou des images téléchargées à partir du Web.
Bien que Divi vous offre la possibilité de concevoir votre propre page, vous pouvez télécharger les conceptions prédéfinies si vous le souhaitez.
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 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 inséré dans la conception du site Web, il peut donc être considéré comme le " enveloppe " .
Parmi les paramètres qui contiennent ces blocs, vous pouvez ajouter manuellement un arrière-plan avec un dégradé animé à l'intérieur du " 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. Il vous montrera alors une fenêtre qui vous permettra d'ajouter trois types d'options : " Standard "," Pleine largeur "E" Speciale " .
Une fois que vous en aurez sélectionné une, vous aurez la possibilité de choisir la structure des colonnes pour les lignes que contiendra la section.
Enfin, vous pourrez insérer des modules et l'option " Paramètres de section ", où vous verrez la liste des modifications pour" Teneur "," Conception "E" Avancé " .
Comment ajouter un fond dégradé animé avec Divi ? Pas à pas
La méthode que nous utiliserons consiste à créer l'arrière-plan dégradé souhaité en ajustant l'arrière-plan qui contient le constructeur Divi ainsi que les extraits 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 " .
Devant 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, il est nécessaire de configurer le contenu de " Rembourrage "Up haut 12vw et ajouter " Hauteur: 40vw "Dans la case grise qui apparaît ci-dessous" Éléments CSS de base " .
À partir de ce point, vous commencerez à configurer le fond dégradé, où vous accéderez à l'option " Arrière-plan ou toile de fond « Appuyer sur le bouton » Ombre " .
En dessous, vous pouvez choisir les couleurs des dégradés, le type de dégradé que vous souhaitez et la direction qu'il doit prendre.
De cette façon, redimensionnez votre bloc à 100% de largeur et de hauteur pour commencer à créer l'animation que vous souhaitez.
Cela se fera via une modification CSS personnalisée, vous devez donc ajouter une classe spécifique pour la section que vous éditez ; ensuite, vous devez entrer le formulaire " Avancé "Et placez le nom de l'animation sous" Classe CSS " .
Code pour ajouter un fond d'écran animé dans Divi
Une fois cette classe ajoutée, vous pouvez ajouter le module de code et insérer ce qui suit dans la case " code "À l'intérieur des balises .
. égayer le dégradé {
Taille de l'arrière-plan : 400 % 400 % ;
Animation : dégradé 5s aisance infinie ;
}
@dégradé d'images clés {
0% {
Position d'arrière-plan : 0 % 50 % ;
}
cinquante% {
Position d'arrière-plan : 100 % 50 % ;
}
100% {
Position d'arrière-plan : 0 % 50 % ;
}
}
De cette façon, vous avez pu définir votre fond dégradé avec une largeur de 400% de la taille d'origine et son animation est un mouvement des deux côtés.
En plus des avantages de conception que vous offre Divi, il dispose également de nombreux outils pour faire de votre page un 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 sa manipulation. .. c'est plus facile.
