Sélectionner une page


Paramètres du module

CTA

Paramètres CTA pour le thème Divi

contenu

– Ajouter le titre et le texte du contenu

conception

– Justification du texte: définir justifié à gauche
– Le texte du titre doit se lire: H2, Montserrat, Gras, 48px, # 1f2532
– Corps du texte: Lato, Regular, 16px, # 757575, hauteur de la ligne du corps: 1,9em
– Dans la section Distance, ajoutez 0px à la marge personnalisée inférieure. Pour un remplissage personnalisé, ajoutez 0px à gauche

Avancée

– Ajoutez le CSS suivant dans le champ Titre de la promotion:

line-height: 120%!important;

Rembourrage ci-dessous: 30px;

Rembourrage droit: 2vw;

Cliquez sur Enregistrer et quitter

Diviseur

Paramètres de diviseur sur le thème de Divi

contenu

– Afficher les diviseurs – Régler sur oui

conception

– Couleur: faites-le: # 0080ff ou utilisez éventuellement votre propre couleur
– Séparateur positionné – Réglé sur centré verticalement
– Dans la section Taille, définissez le poids du diviseur sur 4 pixels et la hauteur sur 4

Avancée

– Ajout de la classe CSS: blue_lines
– Ajoutez ce CSS dans le champ Élément principal:

max-width: 130px;

Alignement du texte: gauche;

Verrouillage d’écran;

Marge gauche: 0! important;

– Désactivez également le module sur le téléphone et la tablette

Cliquez sur Enregistrer et quitter

Blurb
Paramètres du module de pliage

contenu

– Donnez un titre à votre texte de présentation et ajoutez du contenu
– Ajoutez également des images d’icônes.

Dans cet exemple, nous utilisons ces images: Image 1, Image 2, Image3 et Image4. Cependant, vous pouvez éventuellement ajouter vos propres images si vous préférez.

conception

– Le texte du titre doit se lire: Montserrat, Ultra Bold, 18px, noir
– Corps du texte: Lato, Regular, 16px, # 757575
– Ajouter un rembourrage personnalisé: haut: 20 pixels, gauche: 20 pixels, droite: 20 pixels, bas: 20 pixels

Avancée

– Ajoutez le CSS suivant dans le champ Blurb:

text-align: left;

– Dans le champ Blurb, ajoutez ce qui suit:

padding-bottom: 11px;

Cliquez sur Enregistrer et quitter.

CTA

Enfin, éditons les modules CTA sous le texte de présentation. Nous voulons que chaque CTA ait une limite qui entoure le texte de présentation.
Définissez d’abord les paramètres des modules CTA dans la colonne de gauche:

Modules CTA sur le thème de Divi

Une fois que cela est fait, vous pouvez dupliquer la même chose pour la colonne de droite.

Pour le premier CTA:

contenu

– Utilisez cette couleur d’arrière-plan: # 0f87ff. Vous pouvez ajouter « Top Line » dans le nom de l’administrateur.

conception

– Ajoutez zéro pour toutes les marges personnalisées et les tampons personnalisés.

Paramètres du module de thème Divi - Remplissage personnalisé

Avancée

Attribuez une classe CSS: ligne top_line
Dans le champ Élément principal, ajoutez ce CSS:

height: 4px;

Position: absolue;

Sortie sûre

Utilisez les mêmes paramètres pour le deuxième CTA. Vous pouvez dupliquer le premier si vous le souhaitez. Changez simplement le nom de la classe en: left_line line.
Sous l’onglet Avancé, dans la zone Élément principal, remplacez Hauteur par Largeur.
Si vous le souhaitez, modifiez le nom du libellé en « Ligne gauche ».

Il en va de même pour le troisième CTA. Changez simplement le nom de la classe en: right_line line et « height » en « width » dans l’élément principal (onglet « Advanced »).

Pour le dernier, changez le nom de la classe en: bottom_line line

– Dans la description de la promo:

padding: 0;

Chaque CTA qui représente une ligne devrait maintenant ressembler à ceci:

Modules CTA sur le thème de Divi



Source link

Recent Posts