Comment utiliser les widgets d'appel à l'action (CTA) d'Elementor ?

L'appel à l'action (CTA) fait partie intégrante de la conception d'un site web. Elementor propose de puissants widgets CTA qui aident les concepteurs et développeurs web à créer facilement des boîtes de conversion visuellement attrayantes et interactives. Cet article explique en détail comment utiliser les widgets CTA d'Elementor, des paramètres de base aux personnalisations avancées, pour vous aider à créer une zone CTA efficace pour augmenter les conversions.

I. Qu'est-ce que le widget "call-to-action" ?

Les widgets "call-to-action" d'Elementor sont des outils conçus pour diriger les utilisateurs vers des actions spécifiques. En combinant du texte, des boutons et des images, le widget CTA crée des transitions convaincantes sur une page web qui attirent l'attention de l'utilisateur et l'incitent à cliquer ou à interagir. Le widget prend non seulement en charge les paramètres de base du texte et de l'image, mais il vous permet également d'enrichir l'expérience d'interaction avec l'utilisateur au moyen d'animations et d'effets CSS afin d'améliorer l'engagement général.

Caractéristiques principales :

• Combinaison de textes, de boutons et d'images
• De nombreuses options de style, y compris les couleurs, les polices, l'espacement, etc.
• Animations et effets CSS pour améliorer l'expérience interactive
• Options de mise en page flexibles pour de multiples scénarios d'utilisation

II - Cas d'utilisation courants des widgets d'appel à l'action

Les scénarios d'utilisation des widgets CTA sont très vastes et s'appliquent à presque tous les types de sites web et de modèles commerciaux. Voici quelques cas d'utilisation courants :

1. Plate-forme d'éducation en ligne
   John développe une plateforme de cours et de tutorat de codage en ligne. Il a utilisé le widget CTA pour créer une section stratégique sur la page d'accueil. Avec un titre convaincant, un texte descriptif et un bouton "Commencez à coder maintenant", John a réussi à attirer l'attention des visiteurs et à les diriger vers la page d'inscription.
2. organisation à but non lucratif
   Une organisation à but non lucratif a utilisé un CTA fort pour encourager les gens à faire des dons pour des causes humanitaires. Grâce à des boîtes de conversion bien conçues, l'organisation a pu faire passer efficacement son message et inciter davantage de personnes à faire des dons.
3. Boutique de commerce électronique
   Un magasin de commerce électronique a fait la promotion d'une offre à durée limitée au moyen d'une section CTA accrocheuse, qui a attiré un grand nombre d'acheteurs qui ont cliqué et participé à la promotion.
4. blog personnel
   En utilisant le widget CTA pour inviter les lecteurs à s'abonner à une lettre d'information hebdomadaire, le blogueur a considérablement augmenté le nombre d'abonnements grâce à une conception simple et attrayante.
5. Restaurants locaux
   Les restaurants locaux utilisent des sections CTA interactives sur leurs sites web pour inciter les clients à passer des commandes et à faire des réservations en ligne, ce qui améliore l'efficacité de leurs activités en ligne et la satisfaction de leurs clients.

III. comment ajouter et configurer des widgets d'appel à l'action : un guide étape par étape

Vous trouverez ci-dessous les étapes détaillées de l'ajout et de la configuration des widgets CTA à l'aide d'Elementor :

1. ajouter des widgets au canevas

Tout d'abord, faites glisser et déposez le widget "Call to Action" du panneau Widgets d'Elementor sur le canevas. Cela crée une boîte d'appel à l'action de base avec un titre, une description et des boutons par défaut.

2) Mise en place d'images et de mises en page

Dans l'onglet Contenu, vous pouvez choisir le type d'habillage du widget CTA : Classique ou Couverture.

• Peau classique :
  Classic Skin vous permet d'afficher des images côte à côte avec du texte et des boutons. Vous pouvez voir les images et les boutons dans la section "placementDéfinissez le positionnement de l'image dans le champ "Position de l'image" et sélectionnez "Gauche", "Au-dessus" ou "Droite" pour ajuster la position de l'image par rapport au contenu. Ensuite, vous pouvez sélectionner ou télécharger une image à partir de la bibliothèque multimédia et choisir la taille de l'image (de la vignette à la taille réelle ou à une taille personnalisée) dans le champ "Résolution de l'image".
• Peau de couverture :
  L'habillage utilise alors l'image comme arrière-plan de l'ensemble de la boîte CTA. Vous pouvez également sélectionner ou télécharger une image et en définir la résolution dans le champ Sélectionner une image.

3. ajouter des éléments graphiques

Dans le champ Éléments graphiques de la section Contenu, vous pouvez choisir d'afficher un élément graphique (une image ou une icône, par exemple) au-dessus du titre du CTA.

• Les images en tant qu'éléments graphiques :
  Après avoir sélectionné une image comme élément graphique, vous pouvez sélectionner ou télécharger une image à partir de la bibliothèque multimédia et définir la résolution de l'image.

• Les icônes en tant qu'éléments graphiques :
  Si vous choisissez une icône comme élément graphique, vous pouvez sélectionner une icône dans la bibliothèque d'icônes ou télécharger une image SVG. Ensuite, définissez l'affichage de l'icône dans le champ Affichage sur Défaut, Empilé ou Cadre. La vue "Empilé" remplit l'arrière-plan de l'icône, tandis que la vue "Cadre" affiche une bordure autour de l'icône.

4. personnaliser le contenu du texte

Dans l'onglet Contenu, vous pouvez personnaliser le contenu textuel de la boîte CTA :

• Titre :
  Ajoutez le texte de l'en-tête et sélectionnez les balises HTML (par exemple H1-H6, Div ou Span) dans le champ Balises HTML de l'en-tête.

• Description :
  Ajoutez une courte description dans le champ Description et sélectionnez des balises HTML dans le champ Description des balises HTML.

• Texte du bouton et liens :
  Spécifiez le texte à afficher sur le bouton et entrez l'URL du lien du bouton dans le champ Lien Vous pouvez choisir d'appliquer le lien à l'ensemble de la boîte CTA ou uniquement au bouton.

5. ajouter des domaines fonctionnels

Dans la section Ruban, vous avez la possibilité d'ajouter un ruban (par exemple, offre à durée limitée, vente en cours, etc.) à la boîte CTA.

• Définir le texte et la position du ruban :
  Ajoutez le texte du ruban dans le champ Titre et sélectionnez l'emplacement du ruban (gauche ou droite) dans le champ Position.

IV. les styles et la personnalisation avancée

Les widgets CTA d'Elementor offrent un ensemble riche de styles et d'options de personnalisation avancées, vous permettant d'adapter la boîte CTA à vos besoins spécifiques.

1. les options de style

Dans l'onglet Style, vous pouvez ajuster l'apparence de la boîte CTA, voici quelques paramètres courants :

• Hauteur et alignement :
  Définissez la hauteur de la boîte CTA et l'alignement du texte et des boutons. Vous pouvez centrer ou aligner le contenu à gauche ou à droite.

• Couleurs et polices :
  Personnalisez les couleurs du texte, des boutons et de l'arrière-plan, et choisissez la police et la taille appropriées pour que la boîte CTA soit cohérente avec le style général de la page.
• Effet de survol :
  Ajoutez des effets d'animation au survol des boutons et des images pour améliorer l'expérience d'interaction de l'utilisateur. Par exemple, lorsque l'utilisateur passe la souris sur un bouton, un changement de couleur ou un effet de micro-animation peut être défini pour inciter l'utilisateur à cliquer.

2. options avancées

Dans l'onglet Avancé, Elementor propose des options de paramétrage plus avancées :

• Position et espacement :
  Ajustez la position et l'espacement de la boîte CTA sur la page pour vous assurer qu'elle est coordonnée avec les autres éléments de la page.

• Code personnalisé :
  Si vous avez des besoins spécifiques, vous pouvez ajouter un code CSS ou JavaScript personnalisé pour améliorer la fonctionnalité ou la conception de la boîte CTA.

V. Questions fréquemment posées

Comment choisir la meilleure image pour le widget CTA ? Lorsque vous choisissez des images, assurez-vous qu'elles sont en rapport avec le contenu de l'appel à témoins et qu'elles sont suffisamment attrayantes. Des images de haute qualité qui se chargent rapidement peuvent augmenter de manière significative l'engagement des utilisateurs. En outre, tenez compte de la résolution et de la taille de l'image pour vous assurer qu'elle s'affiche correctement sur différents appareils.

Comment créer une phrase d'appel à l'action en plusieurs étapes ? Si vous souhaitez créer plusieurs étapes CTA sur une page, vous pouvez utiliser la fonction "interactive" d'Elementor. Par exemple, vous pouvez guider l'utilisateur tout au long du processus en lui demandant de cliquer sur un bouton dans la première boîte CTA, puis en chargeant la deuxième boîte CTA avec un contenu dynamique.

Quelles sont les meilleures pratiques pour utiliser les widgets CTA ?

• Veillez à ce que le contenu soit simple :
  Le texte doit être court, percutant et direct dans son message.
• L'accent est mis sur la valeur pour l'utilisateur :
  Mettre l'accent sur les avantages offerts à l'utilisateur plutôt que de se contenter de présenter les caractéristiques du produit.
• Créer un sentiment d'urgence :
  Créez un sentiment d'urgence avec des offres à durée limitée ou des zones de fonctionnalités qui encouragent les utilisateurs à agir le plus rapidement possible.

VI. résumé

Les widgets "call-to-action" d'Elementor sont un outil puissant pour vous aider à créer des boîtes CTA hautement interactives et visuellement attrayantes sur votre site web. Grâce au guide détaillé de cet article, vous devriez maintenant savoir comment ajouter et personnaliser les widgets CTA afin de stimuler l'engagement des utilisateurs et les taux de conversion de votre site web. Qu'il s'agisse d'une plateforme d'éducation en ligne, d'une boutique de commerce électronique, d'un blog personnel ou d'un restaurant local, une boîte CTA bien utilisée peut apporter une croissance significative à votre entreprise.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.