L’envoi d’une invitation à agir sur votre site Web est l’un des moyens les moins intrusifs d’attirer l’attention des visiteurs. La plupart du temps, ils ignorent le CTA ou ferment le CTA pour continuer à naviguer sur la page, mais parfois vous gagnez leur soutien. Faire défiler l’invitation à l’action facilite grandement tout ce qui se trouve sur la page d’atterrissage. Dans ce tutoriel, nous concevons une invitation à l’action de défilement refermable que vous pouvez ajouter à n’importe quel coin de la page en utilisant Divi Theme Builder. Une fois terminé, vous serez en mesure de promouvoir vos produits et offres spéciales n’importe où sur la page sans avoir besoin d’un plug – in.
Allons – y! Voici un aperçu rapide des quatre CTA que nous ajouterons aux quatre coins du modèle de page. Bien entendu, il n’est pas nécessaire de distribuer les quatre en même temps. Notez que vous pouvez refermer chaque CTA en cliquant sur l’icône X, puis vous pouvez réactiver le CTA en cliquant sur l’icône plus. Téléchargement gratuit diaporama action invitation Divi modèles de page pour obtenir les modèles de page de ce tutoriel, vous devez d’abord les 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à inscrit, entrez votre adresse
Les stations de ligne sont les suivantes: utiliser une largeur de gouttière personnalisée: s largeur de gouttière: 1 largeur: 100% remplissage: 0px haut, 0px bas
Ajouter un formulaire d’invitation à une action en ligne, ajouter un formulaire d’invitation à une action. Invitez les paramètres d’action, puis mettez à jour les paramètres d’action de l’invitation. Titre: [insérer le texte sélectionné] bouton: [insérer le texte sélectionné] corps: [insérer le texte sélectionné] bouton lien URL: [insérer l’URL réelle ou #] Ensuite, supprimez la couleur de fond par défaut pour afficher l’arrière – plan de la section que vous avez ajoutée plus tôt.
Paramètres de conception (texte, boutons et espacement intérieur) sur l’onglet conception, Mettre à jour ce qui suit: police de titre: poids de la police de titre latéral: hauteur de la ligne de titre lourd: 1.3 em caractère du corps: poids de la police de texte latéral: gras pour le texte du bouton utiliser un style personnalisé: s taille du texte du bouton: 15 Px largeur de la bordure du bouton: 0px espacement des lettres du bouton: 1px caractère du bouton: poids de la police de côté Boutons: Double bouton style de police: tt button fill: Top 12 pixels, bottom 12 pixels, left 32 pixels, Right 32 pixels fill: TOP 40px, bottom 40px, left 40px, Right 40px
Ajoutez les icônes ouvrir et fermer à un formulaire Blurb. Une fois l’appel à l’action terminé, vous devez créer un bouton en utilisant l’icône pour ouvrir et fermer l’invitation à l’action de défilement. Pour créer ce contenu, ajoutez un formulaire d’introduction sous le formulaire d’appel à l’action. Les paramètres flous mettent à jour les paramètres de conception suivants. Contenu supprimer le titre et le corps par défaut utiliser l’icône: s icône: plus (voir capture d’écran) Couleur de l’icône de conception: # 000000 utiliser la taille de la police de l’icône: s taille de la police de l’icône: 40px largeur: 40px hauteur: 40 Px filet:
Code box.
– Oui. Glissez dans le CTA. Glissez dans la cible. Activation du commutateur de diapositives
Transition: tous les 400 MS entrent et sortent lentement;
}
– Oui. Activation du commutateur de diapositives
Dépôt de garantie: 0px 0px 0px 0px 0px! Important
}
– Oui. Le commutateur de diapositives est actif. Slide – in _ Target {
Transformation: aucune! Important
Contexte: rgba (0,0,0,0,2);
}
– Oui. Slide – in _ Target {
Curseur: pointeur;
}
(fonction ($)
USD (file). Ready (Function () {
$(\
$(destination de l’événement). Plus récemment (‘Slide in CTA’). Toggleclass (« Slide in TOGGLE active»);
});
});
}) (jquery);
Avec Divi, il n’est pas difficile de créer une invitation à une action de glissement. De plus, comme vous pouvez utiliser Theme Builder pour ajouter des invitations à l’action à un modèle de page, vous avez un meilleur contrôle sur les pages que le CTA affiche. N’hésitez pas à augmenter le délai d’animation de la section CTA afin que l’utilisateur puisse voir la diapositive CTA dans l’animation plus tard (ou plus tôt) après le chargement de la page. Vous pouvez également utiliser le fil Divi et activer le test de division pour améliorer la conversion de ces CTA et déterminer quel angle fonctionne le mieux. J’ai hâte d’entendre vos commentaires. Bonjour!