{"id":371899,"date":"2023-04-04T13:18:00","date_gmt":"2023-04-04T10:18:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371899"},"modified":"2023-04-04T13:18:32","modified_gmt":"2023-04-04T10:18:32","slug":"le-moyen-le-plus-simple-dajouter-un-appel-a-laction-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/le-moyen-le-plus-simple-dajouter-un-appel-a-laction-wordpress\/","title":{"rendered":"Le moyen le plus simple d’ajouter un appel \u00e0 l’action WordPress"},"content":{"rendered":"\n

L’appel \u00e0 l’action WordPress ou CTA est le plus souvent un bouton sur un site Web qui invite l’utilisateur \u00e0 effectuer une action sp\u00e9cifique<\/strong>. Mais un CTA peut \u00e9galement prendre la forme d’une image, d’un contenu, d’un texte, etc.<\/p>\n

Les CTA WordPress sont un excellent moyen d’encourager l’interaction sur votre site Web, de promouvoir les ventes, d’inciter l’utilisateur \u00e0 entreprendre une action sp\u00e9cifique<\/strong>, et bien plus encore. Contrairement aux publicit\u00e9s, aux popups et aux moyens de marketing similaires, ils sont simples, discrets et conduisent \u00e0 des r\u00e9sultats tangibles. Ils peuvent \u00eatre d’une grande aide pour rendre la navigation sur votre site simple et limpide<\/strong>. Le r\u00f4le essentiel d’un appel \u00e0 l’action WordPress est de provoquer les visiteurs \u00e0 prendre l’action que vous voulez qu’ils prennent – et cela peut \u00eatre litt\u00e9ralement n’importe quoi, de l’achat et de l’abonnement \u00e0 votre liste de diffusion \u00e0 l’invitation \u00e0 lire l’int\u00e9gralit\u00e9 du texte.<\/p>\n

Savoir o\u00f9 placer un CTA<\/strong> est un art \u00e0 part enti\u00e8re. Saupoudrer votre site Web avec trop de CTA peut submerger et emp\u00eacher l’utilisateur de prendre la moindre mesure. D’autre part, ne pas avoir de CTA du tout laisse l’utilisateur dans une position passive et rend m\u00eame votre site Web moins attrayant<\/strong>.<\/p>\n

Il existe de nombreuses fa\u00e7ons d’ajouter un appel \u00e0 l’action WordPress \u00e0 votre site Web. Presque tous les constructeurs de pages vous permettent de cr\u00e9er un CTA \u00e0 l’aide d’une image, d’un bouton et d’un texte. Il existe \u00e9galement de nombreux plugins WP CTA efficaces<\/a> parmi lesquels choisir. Mais le moyen le plus rapide et le plus simple d’ajouter des CTA beaux et efficaces est avec Qi Addons pour le plugin Elementor.<\/p>\n

Pourquoi choisir Qi pour ajouter des CTA<\/h2>\n

Qi Addons for Elementor<\/a> est une excellente solution compl\u00e8te pour tout type de site Web Elementor. Il comprend 60 widgets gratuits et plus de 40 widgets premium qui vous permettent de cr\u00e9er tous les \u00e9l\u00e9ments n\u00e9cessaires \u00e0 un site Web fonctionnel et beau<\/strong>. Il est intuitif et extr\u00eamement convivial<\/strong> – pas m\u00eame un tutoriel n’est n\u00e9cessaire et apr\u00e8s quelques exp\u00e9rimentations avec ses options, vous le trouverez incroyablement polyvalent et puissant.<\/p>\n

En ce qui concerne les CTA, nous pouvons voir d’excellents exemples de CTA<\/a> r\u00e9alis\u00e9s par les auteurs de l’outil sur la page de Qi Addon qui peuvent \u00e9galement \u00eatre utilis\u00e9s comme source d’inspiration.<\/p>\n

\"Le<\/a><\/p>\n

Ce qu’il est important de comprendre d\u00e8s le d\u00e9part, c’est ce qu’un CTA peut contenir. Le titre est facultatif, vous pouvez ou non l’avoir. Le texte est \u00e9galement facultatif et sert \u00e0 donner plus d’informations sur l’action elle-m\u00eame. Le bouton d’action peut \u00eatre stylis\u00e9 de diff\u00e9rentes mani\u00e8res et poss\u00e8de sa propre animation. Avec ce widget, non seulement le lien doit \u00eatre cliquable, mais l’ensemble du champ CTA peut \u00e9galement l’\u00eatre. La prochaine chose qui peut faire partie du CTA est l’arri\u00e8re-plan, et il est facultatif ainsi que la bordure.<\/p>\n

Comment cr\u00e9er un appel \u00e0 l’action WordPress avec Qi Addons<\/h2>\n

Apr\u00e8s avoir install\u00e9 les addons Qi<\/strong>, vous trouverez tous ses \u00e9l\u00e9ments dans les widgets. Trouvez simplement l’\u00e9l\u00e9ment CTA et glissez-d\u00e9posez l\u00e0 o\u00f9 vous voulez que le CTA soit<\/strong>.<\/p>\n

\"Le<\/a><\/p>\n

Apr\u00e8s l’avoir ins\u00e9r\u00e9, comme pour tout widget, vous trouverez les param\u00e8tres sur la gauche<\/strong>. Apr\u00e8s avoir ins\u00e9r\u00e9 le widget CTA, certains formulaires par d\u00e9faut sont \u00e0 votre disposition et vous pouvez les modifier et les aligner pour qu’ils correspondent au style de votre page.<\/p>\n

Les onglets Contenu et Style<\/strong> sont les param\u00e8tres du widget CTA. Ici, vous d\u00e9finirez les \u00e9l\u00e9ments que vous souhaitez voir et styliserez votre champ CTA. L’onglet avanc\u00e9 est, comme vous le savez, l’onglet d’\u00e9l\u00e9ment par d\u00e9faut avec des param\u00e8tres li\u00e9s aux param\u00e8tres de la colonne elle-m\u00eame ou de tout autre \u00e9l\u00e9ment.<\/p>\n

\"Le<\/a><\/p>\n

Param\u00e8tres de l’onglet Contenu<\/h3>\n

Commen\u00e7ons par les param\u00e8tres g\u00e9n\u00e9raux dans l’ onglet Contenu<\/strong>.<\/p>\n

\"Le<\/a><\/p>\n

C’est ici que nous ins\u00e9rons le titre et le texte<\/strong>. Comme nous l’avons d\u00e9j\u00e0 mentionn\u00e9, ce ne sont pas des champs obligatoires, si vous ne les saisissez pas, vous n’aurez tout simplement pas de texte<\/strong>. Cela n’est presque jamais n\u00e9cessaire car le bouton d’appel \u00e0 l’action n\u00e9cessite que l’utilisateur soit invit\u00e9 \u00e0 effectuer une action d’une mani\u00e8re ou d’une autre<\/strong>. Si le bouton vide lui-m\u00eame \u00e9tait suffisant pour inciter l’utilisateur \u00e0 effectuer l’action, n’importe quel bouton ferait le travail, mais ce n’est pas le cas.<\/p>\n

L’option suivante est le bouton ci-dessous et certaines valeurs sont propos\u00e9es. Qu’est-ce que cela signifie r\u00e9ellement?<\/p>\n

\"Le<\/a><\/p>\n

Cela signifie que l’on d\u00e9finit la taille de l’\u00e9cran au bout de laquelle le bouton sera en dessous du titre et du texte et non dans l’alignement du texte<\/strong> comme c’est le cas sur les grands \u00e9crans. C’est une excellente option car il n’y a aucune raison pour que cette mise en page soit \u00e9galement utilis\u00e9e sur les appareils mobiles. Il serait beaucoup plus difficile \u00e0 lire et \u00e0 comprendre et attirerait moins l’attention.<\/p>\n

\"Le<\/a><\/p>\n

Ici, nous pouvons remarquer une chose importante<\/strong> et c’est que le bouton est assez coll\u00e9 au texte. Bien s\u00fbr, cela est facile \u00e0 r\u00e9soudre et nous montrerons comment r\u00e9soudre ce probl\u00e8me plus tard. Pour l’instant, notez-le simplement pour vous assurer de v\u00e9rifier la r\u00e9activit\u00e9 des appareils plus petits.<\/p>\n

Enable link-overlay<\/strong>, la derni\u00e8re option de la partie g\u00e9n\u00e9rale indique si seul le bouton ou tout l’espace d’appel \u00e0 l’action sera cliquable. Dans notre cas, c’est actuellement toute la partie noire qui est cliquable. Faites attention, au d\u00e9but nous n’avons pas d\u00e9fini le lien vers lequel l’action m\u00e8nera et tant que le lien n’est pas d\u00e9fini, rien n’est cliquable.<\/p>\n

Le chapitre suivant traite de Button<\/strong>. Ici, nous ajustons la composition de notre bouton, mais pas son style. Ici aussi, nous s\u00e9lectionnons le texte qui s’y trouvera et ajouterons un lien.<\/p>\n

\"Le<\/a><\/p>\n

En ce qui concerne les mises en page, trois options sont disponibles<\/strong>.<\/p>\n

\"Le<\/a><\/p>\n

La mise en page remplie comporte un bouton d’arri\u00e8re-plan et de texte<\/strong>. Avec ce bouton, nous pouvons ajouter une bordure plus tard dans les options de style. La mise en page d\u00e9crite n’a que bordure et texte<\/strong>, il n’est pas possible de changer la couleur de l’arri\u00e8re-plan ult\u00e9rieurement. La disposition du texte ne contient que du texte<\/strong> et aucun arri\u00e8re-plan ou bordure ne peut y \u00eatre ajout\u00e9.<\/p>\n

En outre, trois types de boutons diff\u00e9rents sont disponibles pour la mise en page remplie et encadr\u00e9e, mais pas pour le texte.<\/p>\n

Le type standard est la valeur par d\u00e9faut. L’ option de type de bordure int\u00e9rieure<\/strong> ajoute la bordure int\u00e9rieure \u00e0 la mise en page s\u00e9lectionn\u00e9e. Iconed Boxed type<\/strong> est utilis\u00e9 uniquement pour le bouton qui a une ic\u00f4ne et o\u00f9 nous voulons mettre une bo\u00eete sp\u00e9ciale pour l’ic\u00f4ne comme celle-ci. Faites attention, nous avons ajout\u00e9 et stylis\u00e9 l’ic\u00f4ne et son arri\u00e8re-plan ci-dessous.<\/p>\n

\"Le<\/a><\/p>\n

Ici, nous avons \u00e9galement l’ option Activer le soulignement du texte du bouton<\/strong> si nous voulons que le texte soit soulign\u00e9, le soulignement a \u00e9galement une animation.<\/p>\n

\"Le<\/a><\/p>\n

Dans les param\u00e8tres du bouton, nous pouvons \u00e9galement choisir la taille<\/strong>, mais plus tard dans le style, nous pouvons le d\u00e9finir plus pr\u00e9cis\u00e9ment et faire en sorte que les tailles correspondent aux autres \u00e9l\u00e9ments du site. Nous saisissons \u00e9galement le texte du bouton et le lien<\/strong>.<\/p>\n

Les param\u00e8tres d’ic\u00f4ne de bouton<\/strong> sont utilis\u00e9s pour ajouter une ic\u00f4ne \u00e0 partir de la biblioth\u00e8que d’ic\u00f4nes ou en t\u00e9l\u00e9chargeant votre ic\u00f4ne svg, nous sp\u00e9cifions \u00e9galement la position de l’ic\u00f4ne (droite\/gauche) ici.<\/p>\n

\"Le<\/a><\/p>\n

Comme nous l’avons d\u00e9j\u00e0 vu, nous pouvons utiliser l’ic\u00f4ne avec le type Iconed Boxed<\/strong>, mais cela ne s’applique qu’au bouton o\u00f9 nous voulons que l’ic\u00f4ne soit dans notre bo\u00eete, sinon, nous pouvons ajouter n’importe quelle ic\u00f4ne \u00e0 tous les autres types et mises en page.<\/p>\n

\"Le<\/a><\/p>\n

Param\u00e8tres de l’onglet Style<\/h3>\n

Ce sont les param\u00e8tres de style. Tous les param\u00e8tres sont par groupes et il est assez \u00e9vident \u00e0 quoi chaque param\u00e8tre se r\u00e9f\u00e8re<\/strong>. Bien s\u00fbr, si nous n’avons pas s\u00e9lectionn\u00e9 l’option de bouton de soulignement pour notre bouton, nous n’aurons m\u00eame pas de param\u00e8tres pour cela.<\/p>\n

\"Le<\/a><\/p>\n

Le style est utilis\u00e9 pour d\u00e9finir la typographie et la couleur du texte et du titre<\/strong>.<\/p>\n

\"Le<\/a><\/p>\n

Nous d\u00e9finissons \u00e9galement l’arri\u00e8re-plan du champ d’appel \u00e0 l’action ici. Vous pouvez choisir une couleur ou un d\u00e9grad\u00e9, et ce qui est utile, c’est que si vous ne voulez pas d’arri\u00e8re-plan, c’est-\u00e0-dire transparent, c’est une option pour \u00e7a<\/strong>. Ce tableau est marqu\u00e9 d’une fl\u00e8che, il suffit de mettre cette boule au d\u00e9but. Seul le champ par d\u00e9faut a une couleur et si vous changez l’arri\u00e8re-plan et mettez la m\u00eame couleur d’arri\u00e8re-plan que le site, cela signifie que si vous changez la couleur de la page, vous avez besoin de l’arri\u00e8re-plan. Si vous mettez un fond transparent, il n’est pas n\u00e9cessaire de changer le fond du champ avec le changement du fond de la page.<\/p>\n

\"Le<\/a><\/p>\n

Nous pouvons \u00e9galement ajouter un arri\u00e8re-plan, il existe plusieurs options d’image.<\/p>\n

\"Le<\/a><\/p>\n

Les styles d’espacement sont des options permettant de d\u00e9terminer l’ espacement entre les sous-titres, le texte, les boutons<\/strong>.<\/p>\n

Le rembourrage<\/strong> du support fait r\u00e9f\u00e9rence \u00e0 l’espace autour du contenu.<\/p>\n

\"Le<\/a><\/p>\n

Text Margin Top<\/strong> \u2013 la marge au-dessus du texte est d\u00e9termin\u00e9e, c’est-\u00e0-dire que nous arrangeons l’espace entre le texte et le titre.<\/p>\n

Remplissage du contenu \u00e0 droite<\/strong> – Rembourrage autour du texte \u00e0 droite, sert \u00e0 s\u00e9parer le texte du bouton s’il est trop long.<\/p>\n

\"Le<\/a><\/p>\n

Marge du bouton<\/strong> – en d\u00e9finissant la valeur, nous pouvons d\u00e9finir la position du bouton, d\u00e9terminer les marges autour du bouton. Ici, nous devons particuli\u00e8rement faire attention au bouton de texte r\u00e9actif et espac\u00e9. La marge du bouton sup\u00e9rieur est utilis\u00e9e pour ajuster cet espacement.<\/p>\n

\"Le<\/a><\/p>\n

Le menu Style de bouton<\/strong> vous permet de d\u00e9finir une vari\u00e9t\u00e9 de d\u00e9tails de vos boutons comme la couleur de la police, la couleur de la bordure, la largeur et le rayon, ainsi que la couleur d’arri\u00e8re-plan et le rembourrage. Le param\u00e8tre le plus important ici est de savoir si vous voulez que votre bouton fonctionne au survol, ce qui signifie qu’il suffit de le survoler pour cliquer<\/strong>. Si vous choisissez l’option Normal<\/strong> ici, le bouton fonctionnera lorsque vous cliquerez dessus.<\/p>\n

\"Le<\/a><\/p>\n

Dans les param\u00e8tres de style d’ic\u00f4ne de bouton,<\/strong> vous pouvez d\u00e9finir la taille de l’ic\u00f4ne avec un curseur, vous pouvez \u00e9galement choisir entre l’option normale et l’option de survol et d\u00e9finir \u00e9galement la couleur et la marge de l’ic\u00f4ne.<\/p>\n

\"Le<\/a><\/p>\n

Les param\u00e8tres de la bordure int\u00e9rieure du bouton<\/strong> vous permettent de d\u00e9finir la couleur, la largeur et le d\u00e9calage de la bordure int\u00e9rieure.<\/p>\n

\"Le<\/a><\/p>\n

Les param\u00e8tres de style<\/strong> de soulignement du bouton vous permettent de d\u00e9finir la couleur, la largeur, le d\u00e9calage, l’\u00e9paisseur et l’alignement du soulignement du bouton. Il est tr\u00e8s pratique que vous puissiez voir imm\u00e9diatement toutes les modifications que vous apportez.<\/p>\n

\"Le<\/a><\/p>\n

C’est pratiquement tout. Si vous \u00eates satisfait de l’apparence de votre bouton, vous pouvez fermer l’\u00e9diteur et v\u00e9rifier son apparence en direct sur la page.<\/p>\n

Maintenant que vous savez \u00e0 quel point il est facile d’ajouter des CTA n’importe o\u00f9 sur votre site Web, il ne vous reste plus qu’\u00e0 r\u00e9fl\u00e9chir soigneusement \u00e0 l’endroit exact o\u00f9 vous pouvez placer des CTA sur votre site Web. Bien conna\u00eetre votre public vous aidera \u00e0 cr\u00e9er les CTA les plus efficaces, et il existe \u00e9galement de nombreux outils qui peuvent vous aider \u00e0 mieux comprendre les traits et le comportement de votre public. Si vous avez des questions concernant l’utilisation de Qi Addons, n’h\u00e9sitez pas \u00e0 les poser dans la section des commentaires – nous sommes plus qu’heureux de partager notre exp\u00e9rience et nos connaissances.<\/p>\n

Source d’enregistrement: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Apprenez \u00e0 ajouter des CTA WordPress \u00e0 votre site de la mani\u00e8re la plus simple et la plus rapide avec Qi Addons for Elementor.<\/p>\n","protected":false},"author":1,"featured_media":279438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-371899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/371899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=371899"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/371899\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/279438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=371899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=371899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=371899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}