Comment utiliser Divi pour guider les gens à travers différentes étapes difficiles

Lorsque vous essayez de convaincre les visiteurs de visiter votre site, il est essentiel de leur donner les bonnes récompenses. Lorsque vous pensez aux mesures d’incitation, un appel clair et irrésistible à l’action vous vient à l’esprit. Mais la LTC est souvent la dernière étape du processus d’acquisition. Il est probable que vous vous construirez en montrant la valeur de votre entreprise. Une des meilleures façons est de partager votre approche et votre proposition de valeur unique. Si vous cherchez un moyen facile de concevoir votre méthode, vous aimerez ce tutoriel. Aujourd’hui, nous vous montrerons comment inclure plusieurs étapes permanentes qui changent au fur et à mesure que les gens défilent et lisent. Vous pouvez également télécharger gratuitement le fichier json!
Allons – y! Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Télécharger et coller la mise en page des étapes pour obtenir la mise en page des étapes de collage gratuites, vous devez d’abord 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 allez à Layout packages Weekly Divi gr
Artuti! 1. Créer un élément de section ajouter un fond de gradient de section normal commence par ajouter une nouvelle section à la page que vous travaillez. Allumez les paramètres de cette section et appliquez l’arrière – plan de la rampe: couleur 1: # FFFFFF couleur 2: # e5e5e5 type de rampe: direction de la rampe linéaire: 150 degrés L’image de fond charge l’image de fond suivante. Vous trouverez ce que nous avons utilisé dans ce tutoriel dans le dossier téléchargements au début de cet article. Vous pouvez utiliser l’image de fond gratuitement, sans aucune restriction.
Taille de l’image de fond: emplacement approprié de l’image de fond: coin supérieur gauche L’espacement supprime le remplissage inférieur par défaut en ajoutant \
Hauteur de colonne équilibrée: alignement des lignes: Centre L’espacement applique également des valeurs d’espacement personnalisées. Marge supérieure: 5% marge supérieure: 0px marge inférieure: 0px marge gauche: 5% marge droite: 5% Bordure ensuite, allez à la configuration de la bordure et utilisez des filets. Tous les angles: 10px Débordement nous changeons également le débordement de ligne en visible. Cela permettra de s’assurer que le contenu des conteneurs de voyage ne sera pas caché. Débordement horizontal: débordement vertical visible: visible La colonne définit l’espacement 1, puis ouvre les paramètres de la colonne 1 et ajoute des remplissages personnalisés en haut et en bas.
Coussin supérieur: coussin inférieur 5%
Et: 5% La colonne définit l’arrière – plan de la rampe 2 en avant, et nous ajouterons l’arrière – plan de la rampe à la colonne 2. Couleur 1: # 7b47ff couleur 2: # 6929aa type de gradient: direction de gradient linéaire: 158 degrés Espacement nous ajouterons également un remplissage personnalisé à la colonne. Remplissage supérieur: 5% remplissage inférieur: 5% remplissage gauche: 5% remplissage droit: 5% Les limites et quelques filets. Tous les angles: 10px Échelle de transformation e nous allons augmenter la taille des colonnes dans les paramètres de transformation en appliquant les valeurs d’échelle de transformation suivantes:
Les deux: 107% Ajouter un formulaire texte à la colonne 1 ajouter du contenu H3 il est temps d’ajouter un module, en commençant par le formulaire texte dans la colonne 1. Saisissez une partie du contenu H3 que vous avez sélectionné. Paramètres de texte H3 passer à l’onglet conception du module et modifier les paramètres de texte H3: titre 3 caractères: Poppins titre couleur du texte 3: # 6929aa titre 2: taille du texte: 35px titre 3 espacement des lettres: – 1px Ajouter le module séparateur à la visibilité de la colonne 1 ensuite, nous insérons le module séparateur dans la colonne 1. Assurez – vous que l’option afficher le séparateur est activée.
Afficher les séparateurs: Oui La ligne passe à l’onglet conception du module et change la couleur de la ligne. Couleur de ligne: # f5ca4e Le redimensionnement modifie également les paramètres de taille. Poids du séparateur: 6px largeur: 20% hauteur: 6px La bordure complète la configuration du module en incluant des filets dans la configuration de la bordure. Tous les angles: 20px Ajouter un formulaire texte à la colonne 2 ajouter du contenu à la colonne 2 le seul formulaire dont nous avons besoin est un formulaire texte avec un contenu descriptif. Les paramètres de texte passent à l’onglet conception du formulaire et changent les paramètres de texte comme suit:
Police di testo: afficher la dimension Playfair del Testo: 16px
3 nous ajoutons également des remplissages personnalisés en haut et en bas dans la colonne 3. Remplissage supérieur: 2% remplissage inférieur: 2% Ajouter un formulaire texte à la colonne 1 ajouter du contenu il est temps d’ajouter le formulaire à notre barre de ligne collée. Ajouter un formulaire de texte dans la colonne 1 et mentionner cette étape dans la zone de contenu. Ensuite, l’arrière – plan de la rampe est appliqué. Couleur 1: # 7b47ff couleur 2: # 6929aa type de gradient: direction de gradient linéaire: 158 degrés Les paramètres de texte passent à l’onglet conception du formulaire et modélisent le texte en conséquence: police de texte: Poppins poids de la police de texte: gras couleur du texte: # FFFFFF taille du texte: 27px Vous pouvez également apporter quelques modifications aux paramètres de taille. Largeur: module 60% aligné: Centre L’espacement ajoute ensuite un remplissage personnalisé au – dessus et au – dessous du réglage de l’espacement. Remplissage supérieur: 20px remplissage inférieur: 20px La bordure ajoute des filets aux paramètres de la bordure suivante. Tous les angles: 10px Nous avons également utilisé l’ombre mince de la boîte. Couleur de l’ombre: rgba (0,0,0,0,3) Transform translate, nous compléterons la configuration du module en repositionnant légèrement le module en utilisant les paramètres de conversion Divi. Droite: – 20px Ajouter un formulaire texte à la colonne 2 ajouter le contenu H2 à la colonne 2 nous ajoutons un formulaire texte qui contient du contenu H2 qui décrit les étapes que nous avons suivies. Configuration du texte H2 passer à l’onglet conception du module et modéliser le texte H2 comme suit: titre 2 caractères: Poppins titre 2 poids de police: titre moyen 2 alignement du texte: Bureau: tablette gauche et téléphone mobile: titre couleur du texte titre 2: # 6d40ed titre 2 espacement des lettres: – 1px Espacement

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *