{"id":368236,"date":"2022-03-30T02:36:23","date_gmt":"2022-03-30T02:36:23","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=368236"},"modified":"2022-03-30T02:36:26","modified_gmt":"2022-03-30T02:36:26","slug":"comment-ajouter-un-cta-different-par-categorie-darticle-a-laide-du-createur-de-theme-de-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-ajouter-un-cta-different-par-categorie-darticle-a-laide-du-createur-de-theme-de-divi\/","title":{"rendered":"Comment ajouter un CTA diff\u00e9rent par cat\u00e9gorie d’article \u00e0 l’aide du cr\u00e9ateur de th\u00e8me de Divi"},"content":{"rendered":"
\n

Les utilisateurs de sites Web peuvent \u00eatre passifs et ind\u00e9cis s’ils ne sont pas incit\u00e9s \u00e0 agir. C’est pourquoi des outils tels que Divi Theme Builder sont si pratiques. Pour les sites Web qui utilisent plusieurs cat\u00e9gories de contenu, un seul module Call-To-Action (CTA) ou optin ne peut pas \u00eatre optimis\u00e9 pour tous les types de visiteurs. Cependant, en utilisant les mises en page du constructeur de th\u00e8mes et la fonction de contenu dynamique de Divi, vous pouvez afficher des appels \u00e0 l’action vari\u00e9s en fonction du contenu du message que l’utilisateur consulte. Vous ferez ainsi grimper en fl\u00e8che vos taux de conversion tout en offrant \u00e0 vos visiteurs une exp\u00e9rience plus personnalis\u00e9e.<\/p>\n

Comment ajouter un appel \u00e0 l’action diff\u00e9rent par cat\u00e9gorie d’article ?<\/h2>\n

Pour r\u00e9aliser cette fonction, nous allons utiliser le constructeur de th\u00e8me Divi. Vous pouvez le trouver dans votre panneau d’administration WordPress sous Divi – Theme Builder<\/strong>.<\/p>\n

\"theme<\/p>\n

Le cr\u00e9ateur de th\u00e8me est un outil incroyablement polyvalent, et nous allons l’utiliser pour ajouter un CTA \u00e0 plusieurs cat\u00e9gories d’articles. Pour cette raison, nous partons du principe que vous disposez d\u00e9j\u00e0 d’un design pour vos blogs.<\/p>\n

Cr\u00e9er un nouveau mod\u00e8le de cr\u00e9ateur de th\u00e8me<\/h3>\n

Tout d’abord, nous devons cr\u00e9er un nouveau mod\u00e8le. Vous pouvez le faire en cliquant sur Ajouter un nouveau mod\u00e8le<\/strong> dans le tableau de bord du constructeur de th\u00e8me.<\/p>\n

\"add<\/p>\n

Choisissez les cat\u00e9gories sp\u00e9cifiques<\/h3>\n

Divi vous demandera ensuite de choisir le contenu auquel appliquer le mod\u00e8le. S\u00e9lectionnez Postes dans des cat\u00e9gories sp\u00e9cifiques<\/strong>. Ensuite, vous allez s\u00e9lectionner les cat\u00e9gories sp\u00e9cifiques dans lesquelles vous souhaitez que ce CTA apparaisse.<\/p>\n

\"posts<\/p>\n

Enfin, vous r\u00e9p\u00e9terez ce processus pour choisir d’autres<\/em> cat\u00e9gories pour les diff\u00e9rents<\/em> CTA \u00e0 afficher. Pour ce tutoriel, nous choisissons une seule cat\u00e9gorie par CTA, mais vous pouvez utiliser un nouveau mod\u00e8le pour chaque cat\u00e9gorie que vous souhaitez diff\u00e9rencier.<\/p>\n

Modifier le corps du message<\/h3>\n

Lorsque le mod\u00e8le a \u00e9t\u00e9 cr\u00e9\u00e9, vous pouvez cliquer sur Ajouter un corps personnalis\u00e9<\/strong> pour entrer dans le constructeur de Divi.<\/p>\n

\"add<\/p>\n

Une fois \u00e0 l’int\u00e9rieur, vous ajouterez un module d’appel \u00e0 l’action<\/strong> dans la section et la rang\u00e9e existantes en cliquant sur l’ic\u00f4ne + noire<\/strong>.<\/p>\n

\"add<\/p>\n

Ajouter un module de contenu de message<\/h3>\n

Ensuite, cliquez \u00e0 nouveau sur l’ic\u00f4ne noire +<\/strong>, en s\u00e9lectionnant cette fois le module Post Content<\/strong> dans le menu<\/p>\n

\"post<\/p>\n

Le module Contenu de l’article affiche un contenu dynamique en fonction de ce que contient l’URL de la page associ\u00e9e. Qu’il s’agisse d’un article ou d’une page d’accueil enti\u00e8rement con\u00e7ue, le module Contenu de l’article est suffisamment intelligent pour afficher ce contenu con\u00e7u et r\u00e9dig\u00e9 de mani\u00e8re unique.<\/p>\n

Modifiez les param\u00e8tres de la rang\u00e9e<\/h3>\n

Puisque nous appliquons ce mod\u00e8le \u00e0 des pages et des articles existants, nous devons nous assurer que la conception n’est pas perturb\u00e9e. Allez donc dans les param\u00e8tres de la rang\u00e9e<\/strong> et trouvez l’onglet Design<\/strong>.<\/p>\n

\"row<\/p>\n

Faites d\u00e9filer l’\u00e9cran jusqu’\u00e0 ce que vous trouviez l’option Dimensionnement<\/strong>. D\u00e9finissez les valeurs Width <\/strong>et Max Width<\/strong> sur 100 %<\/em>. Cela devrait permettre \u00e0 tout design que vous avez d\u00e9j\u00e0 cr\u00e9\u00e9 pour les articles de blog de s’afficher correctement.<\/p>\n

Donnez du style \u00e0 votre module CTA<\/h3>\n

Une fois que les deux modules sont en place et que la largeur de la ligne a \u00e9t\u00e9 fix\u00e9e \u00e0 100 %, allez dans le module CTA et donnez-lui le style que vous souhaitez. Les principaux d\u00e9tails dont vous devez vous pr\u00e9occuper en ce qui concerne la sp\u00e9cificit\u00e9 de la cat\u00e9gorie se trouvent sous l’onglet Contenu<\/strong>.<\/p>\n

\"cta<\/p>\n

La section Texte<\/strong> de l’onglet Contenu est l’endroit o\u00f9 vous pouvez le plus diff\u00e9rencier vos diff\u00e9rents appels \u00e0 l’action. Vous devez avoir un titre<\/strong> unique, ainsi qu’un texte de bouton<\/strong> convaincant. Le corps<\/strong> peut consister en une description de la raison pour laquelle cette cat\u00e9gorie particuli\u00e8re a cet appel \u00e0 l’action sp\u00e9cifique. Il peut s’agir d’une lettre d’information \u00e9lectronique sur un sujet sp\u00e9cifique, d’une tactique de conversion pour votre nouveau cours en ligne ou m\u00eame d’un appel aux nouveaux cr\u00e9ateurs de contenu dans les cat\u00e9gories sp\u00e9cifiques.<\/p>\n

D\u00e9finissez la couleur d’arri\u00e8re-plan<\/h4>\n

Les options de conception d’un appel \u00e0 l’action sont infinies, mais l’une des plus frappantes et des plus simples consiste \u00e0 modifier simplement la couleur d’arri\u00e8re-plan. Comme vous avez d\u00e9fini la rang\u00e9e du module en pleine largeur, la d\u00e9finition d’une couleur compl\u00e9mentaire dans la section Arri\u00e8re-plan<\/strong> de l’onglet Contenu<\/strong> peut faire toute la diff\u00e9rence.<\/p>\n

\"background<\/p>\n

Ajustez les styles de police<\/h3>\n

Sous l’onglet Conception<\/strong>, vous voudrez \u00e9galement vous assurer que les diff\u00e9rentes polices correspondent au reste de votre site. V\u00e9rifiez les sections Texte<\/strong>, Texte du corps<\/strong> et Texte du titre <\/strong>pour vous assurer que la police<\/em>, le poids de la police<\/em> et les autres styles sont d\u00e9finis par d\u00e9faut (ou qu’ils correspondent aux param\u00e8tres primaires du reste du site).<\/p>\n

\"font<\/p>\n

En outre, pour vous assurer que le texte et les styles des boutons<\/strong> correspondent, vous devez activer la case \u00e0 cocher Utiliser des<\/strong> styles personnalis\u00e9s pour les boutons<\/strong>.<\/p>\n

\"button<\/p>\n

Animez le module d’appel \u00e0 l’action<\/h3>\n

Les appels \u00e0 l’action doivent se d\u00e9marquer du reste de votre contenu. L’ajout d’une br\u00e8ve animation au module peut attirer l’attention de l’utilisateur sans trop d’efforts suppl\u00e9mentaires. Dans le module d’appel \u00e0 l’action<\/strong>, trouvez Animation<\/strong> sous l’onglet Conception<\/strong>.<\/p>\n

\"call<\/p>\n

Nous avons choisi d’utiliser l’animation Zoom<\/strong> animant vers le bas<\/strong> (ce qui signifie que l’animation part du haut et se d\u00e9place vers le bas). Nous n’avons pas ajout\u00e9 de d\u00e9lai \u00e0 l’animation parce qu’elle se trouve en haut de l’\u00e9cran. Avec une vitesse de chargement de la page faible, l’animation devrait \u00eatre incontournable.<\/p>\n

Facultatif : Position adh\u00e9sive<\/h3>\n

Sous l’onglet Avanc\u00e9<\/strong> des param\u00e8tres de<\/strong> l’appel \u00e0 l’action<\/strong>, vous trouverez la rubrique Effets de d\u00e9filement<\/strong>.<\/p>\n

\"cta<\/p>\n

D\u00e9finissez la position d’accrochage<\/strong> sur Coller en haut<\/em> et la limite d’accrochage en bas<\/strong> sur Section<\/em>. L’appel \u00e0 l’action s’attachera au haut de l’\u00e9cran une fois que l’utilisateur aura fait d\u00e9filer l’\u00e9cran au-del\u00e0 de l’endroit d’o\u00f9 provient l’appel \u00e0 l’action, il continuera \u00e0 travers le contenu principal de l’article ou de la page, mais s’arr\u00eatera lorsqu’il atteindra la fin de sa section conteneur.<\/p>\n

Si vous souhaitez que le CTA suive l’utilisateur sur toute la longueur de la page, vous pouvez toujours d\u00e9finir la limite inf\u00e9rieure collante<\/strong> sur Aucun<\/em>. Le CTA restera ainsi en haut de l’\u00e9cran de l’utilisateur, quelle que soit la distance de d\u00e9filement.<\/p>\n

Autres cat\u00e9gories de pages<\/h3>\n

Retournez dans le tableau de bord du constructeur de th\u00e8me et vous verrez que le corps personnalis\u00e9<\/em> que vous avez con\u00e7u est en direct dans le mod\u00e8le intitul\u00e9 Posts in Specific Categories :<\/strong> Nom de la cat\u00e9gorie<\/strong>.<\/p>\n

\"complete<\/p>\n

Comme cet appel \u00e0 l’action ne s’applique qu’aux cat\u00e9gories s\u00e9lectionn\u00e9es, vous pouvez cliquer sur l’ic\u00f4ne Dupliquer le mod\u00e8le<\/strong> qui appara\u00eet lorsque vous survolez le mod\u00e8le.<\/p>\n

Divi peut alors vous inviter \u00e0 choisir le contenu auquel le mod\u00e8le dupliqu\u00e9 est affect\u00e9. Si ce n’est pas le cas, vous pouvez le faire manuellement en cliquant sur l’ic\u00f4ne d’engrenage dans le nouveau mod\u00e8le. S\u00e9lectionnez les nouvelles cat\u00e9gories d’articles pour lesquelles vous souhaitez utiliser un appel \u00e0 l’action diff\u00e9rent<\/strong>.<\/p>\n

\"other<\/p>\n

Ensuite, il vous suffit de modifier le Custom Body<\/strong> du nouveau mod\u00e8le et de r\u00e9p\u00e9ter les \u00e9tapes de cr\u00e9ation et de style du module d’appel \u00e0 l’action qui correspond \u00e0 la nouvelle cat\u00e9gorie sp\u00e9cifique que vous avez choisie. Et voil\u00e0, c’est fait ! Vous avez termin\u00e9 !<\/p>\n

Conclusion<\/h2>\n

Apr\u00e8s avoir effectu\u00e9 toutes les \u00e9tapes ci-dessus pour autant de cat\u00e9gories sp\u00e9cifiques que vous voulez d’appels \u00e0 l’action distincts, chaque fois qu’un visiteur charge la cat\u00e9gorie en question, le module CTA correspondant s’affiche. Mais un autre utilisateur peut regarder un article dans une autre cat\u00e9gorie et \u00eatre appel\u00e9 \u00e0 l’action d’une mani\u00e8re totalement diff\u00e9rente. Ces options de personnalisation et de ciblage augmenteront la conversion et am\u00e9lioreront l’exp\u00e9rience globale de l’utilisateur sur votre site.<\/p>\n

Comment allez-vous utiliser le fait d’avoir un appel \u00e0 l’action diff\u00e9rent pour des cat\u00e9gories sp\u00e9cifiques ?<\/strong><\/p>\n

\u00a0<\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Les utilisateurs de sites Web peuvent \u00eatre passifs et ind\u00e9cis s’ils ne sont pas incit\u00e9s \u00e0 agir. C’est pourquoi des outils tels que Divi Theme Builder sont si pratiques. Pour les sites Web qui utilisent plusieurs cat\u00e9gories de contenu, un seul module Call-To-Action (CTA) ou optin ne peut pas \u00eatre optimis\u00e9 pour tous les types […]<\/p>\n","protected":false},"author":1,"featured_media":368237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[106],"tags":[],"class_list":["post-368236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/368236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=368236"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/368236\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/368237"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=368236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=368236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=368236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}