Pour créer une superposition de fond de rampe en utilisant les paramètres de fond Divi

Po décrit étape par étape comment créer cette apparence afin que vous puissiez l’utiliser sur votre site Web. Pas à pas: partie héroïque Dans la première partie de cet article, Nous recréerons une partie des héros. Cet exemple montre comment la fonction de conception de fond change la couleur utilisée dans l’image. Bien que nous utilisions la superposition de fond graduée, nous avons fait des changements très mineurs. Nous combinons différentes couleurs du ciel pour ajouter une teinte plus foncée à l’image.
Commençons par créer une nouvelle page sur le site WordPress. Ajoutez maintenant une section standard à la page avec une ligne pleine largeur. Ensuite, placez différents modules sur votre ligne. Nous avons utilisé deux modules texte et un module bouton. Configuration du premier module de texte le premier module de texte est l’emplacement où le titre de la section héros est affiché. Dans la Sous – catégorie texte de l’onglet contenu, tapez le texte que vous souhaitez afficher dans la zone de contenu et naviguez vers l’onglet conception. Dans l’onglet conception, apporter les modifications suivantes à la Sous – catégorie texte:
Direction du texte: taille centrale de la police de texte: 30 couleur de la police de texte: # FFFFFF Les paramètres du deuxième formulaire de texte ouvrent maintenant le formulaire de texte suivant et saisissent le texte dans la zone de contenu. Ensuite, allez à l’onglet conception et effectuez les changements suivants à la Sous – catégorie de texte: direction du texte: taille de la police de texte centrée: 16 couleur de la police de texte: # FFFFFF Faites défiler le même onglet vers le bas pour ajouter 500px à la largeur maximale de la Sous – catégorie dimensions et 2% à la marge inférieure de la Sous – catégorie espacement. Enfin, ouvrez les paramètres du module bouton. Tapez le CTA à lier au bouton dans le texte de la Sous – catégorie SC
N’oubliez pas de les noter parmi les sources du site indiquées dans leur FAQ.
Nous avons également rendu l’icône bleue légèrement transparente pour afficher la rampe. Bien que chaque flou ait le même réglage, la couleur à travers l’icône est légèrement différente et correspond à la couleur de gradient que nous utilisons. Commencez à créer un démarrage en ajoutant une section standard à une nouvelle page ou à une page existante. Dans cette section, nous aurons besoin d’une ligne avec trois colonnes. Continuez en ajoutant le module Blurb à la première colonne de la ligne. Nous utiliserons les mêmes paramètres que le module Blurb dans chaque colonne. C’est pourquoi nous n’avons besoin de créer le module Blurb qu’une seule fois et de le cloner pour les deux autres colonnes.
Paramètres flous activez les paramètres du module flou et tapez un titre et un contenu dans la Sous – catégorie texte de l’onglet contenu. Passer à l’onglet conception et apporter les modifications suivantes aux images et aux icônes de la Sous – catégorie: couleur de l’icône: rgba (255255255,0.36) icône circulaire: est une couleur circulaire: rgba (255255255,0.0) afficher une bordure circulaire: est une couleur de bordure circulaire: rgba (255255255,0.36) position de l’image \/ de L’icône: en haut utiliser la taille de la police de l’icône: est une taille de police de l’icône: 96 px Faites défiler le même onglet vers le bas et placez l’orientation du texte au centre de la Sous – catégorie texte. Faites défiler et ouvrez la Sous – catégorie texte du titre. Continuer et utiliser les paramètres suivants: taille de la police de titre: 18couleur du texte de titre: # FFFFFF hauteur de la ligne de titre: 1EM Maintenant, la seule chose à changer est le corps de la Sous – catégorie texte. Assurez – vous que les paramètres suivants sont appliqués: taille de la police du corps: 14couleur du corps du texte: # FFFFFF hauteur de la ligne du corps: 1,5 em N’oubliez pas de cloner les modules Blurb deux fois, de les placer dans les deux colonnes restantes et de les modifier.
Première colonne, nous les clonons plus tard aux deux autres colonnes. Le premier paramètre de formulaire de texte ajoute un nouveau formulaire de texte à la première colonne, ajoute le type de paquet de prix à la zone de contenu de la Sous – catégorie de texte de l’onglet contenu, puis passe à l’onglet conception. Appliquer les modifications suivantes à la Sous – catégorie de texte de l’onglet conception: orientation du texte: taille centrale de la police de texte: 24 couleur de la police de texte: # FFFFFF hauteur de la ligne de texte: 1,5 em Faire défiler le même onglet vers le bas et apporter les modifications suivantes à l’espacement des sous – catégories: marge supérieure: 50 Px marge inférieure: 20 px Le deuxième paramètre de formulaire texte ajoute un autre formulaire texte à la même colonne. Notez le prix du paquet dans la zone de contenu de la Sous – catégorie texte de l’onglet contenu, puis passez à l’onglet conception. Dans l’onglet conception, effectuez les changements suivants: direction du texte: taille centrale de la police de texte: 82px couleur de la police de texte: # FFFFFF hauteur de la ligne de texte: 1,1em Faites défiler le même onglet vers le bas et ajoutez 10px dans l’espace en bas. Troisième configuration du formulaire de texte pour le formulaire de texte le plus récent, ajoutez du texte à la zone de contenu de la Sous – catégorie de texte de l’onglet contenu. Ensuite, allez à l’onglet conception et effectuez les changements suivants à la Sous – catégorie de texte: direction du texte: taille de la police de texte centrée: 16 couleur de la police de texte: # FFFFFF hauteur de la ligne de texte: 1,1em Faites défiler le même onglet vers le bas pour ajouter 33 Px à la marge inférieure de la Sous – catégorie espacement. Paramètres du bouton le module suivant que nous ajouterons à cette colonne est le module bouton. Tapez l’invitation à l’action que vous souhaitez afficher dans la zone de contenu de la Sous – catégorie texte de l’onglet contenu, puis naviguez vers l’onglet conception. A.
Les exemples que nous vous montrons dans ce billet de blog ne sont qu’une petite partie des résultats que vous pouvez obtenir avec la nouvelle fonctionnalité de conception de fond. Dans le prochain article, nous vous présenterons certainement d’autres exemples qui vous aideront à créer un excellent design pour votre site Web. Si vous avez des questions, des commentaires ou des suggestions; Laissez un commentaire dans la section commentaires ci – dessous! Assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous ne manquiez pas de belles annonces, des conseils utiles ou des cadeaux Divi!