{"id":368284,"date":"2022-03-29T23:50:54","date_gmt":"2022-03-29T23:50:54","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=368284"},"modified":"2022-03-30T00:16:17","modified_gmt":"2022-03-30T00:16:17","slug":"comment-declencher-un-formulaire-optin-apres-la-visite-de-certaines-pages","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-declencher-un-formulaire-optin-apres-la-visite-de-certaines-pages\/","title":{"rendered":"Comment d\u00e9clencher un formulaire optin apr\u00e8s la visite de certaines pages ?"},"content":{"rendered":"
\n

Les formulaires optin pop-up sont \u00e0 la fois l’un des \u00e9l\u00e9ments les plus utiles et les plus ennuyeux de la conception Web. Sans eux, vous pouvez difficilement d\u00e9velopper une liste de clients fid\u00e8les, mais il est peu probable que les nouveaux visiteurs y pr\u00eatent attention. C’est pourquoi nous souhaitons vous expliquer comment utiliser les options de condition de Divi<\/a>pour d\u00e9clencher un formulaire d’optin apr\u00e8s que l’utilisateur a visit\u00e9 certaines pages. Non seulement ils sont plus susceptibles de se convertir parce qu’ils ont fait un peu le tour de votre site, mais aussi parce que vous ne les ennuyez pas avec une pop up qui ne les concerne pas. Allons-y et voyons comment nous pouvons am\u00e9liorer votre site !<\/p>\n

Comment d\u00e9clencher un formulaire Optin \u00e0 l’aide des options de condition<\/h2>\n

Pour cet article, nous allons utiliser les options de condition de Divi pour afficher un formulaire d’optin pour un code de r\u00e9duction apr\u00e8s que l’utilisateur ait visit\u00e9 deux pages particuli\u00e8res de votre site. Il n’appara\u00eetra qu’une fois ces conditions remplies, ce qui signifie que la remise n’est disponible que pour les utilisateurs sp\u00e9cifiquement cibl\u00e9s.<\/p>\n

Pour ce tutoriel, nous allons utiliser le constructeur de th\u00e8me Divi pour ajouter le module de formulaire d’optin \u00e0 la mise en page du corps des pages, mais si vous avez une page ou un message sp\u00e9cifique que vous voulez faire appara\u00eetre apr\u00e8s certaines visites de la page ou du message, vous pouvez suivre exactement le m\u00eame processus pour les options de condition.<\/p>\n

Vous pouvez trouver le constructeur de th\u00e8me Divi dans votre tableau de bord d’administration WordPress sous Divi – Theme Builder<\/strong> dans la barre lat\u00e9rale gauche.<\/p>\n

\"theme<\/p>\n

Cr\u00e9er un nouveau mod\u00e8le<\/h3>\n

Dans le Cr\u00e9ateur de th\u00e8mes de Divi, vous devez cliquer sur le bouton Ajouter un nouveau mod\u00e8le<\/strong>.<\/p>\n

\"optin<\/p>\n

Ensuite, s\u00e9lectionnez les pages sp\u00e9cifiques sur lesquelles vous souhaitez que le formulaire optin apparaisse. Puisque nous allons donner un code de r\u00e9duction en utilisant le module de formulaire d’optin, nous allons faire appara\u00eetre la mise en page uniquement sur les pages \u00c9v\u00e9nements<\/em> et Prix<\/em>.<\/p>\n

Copie du module optin d’e-mail<\/h3>\n

Puisque nous utilisons des packs de mise en page pr\u00e9\u00e9tablis, acc\u00e9dez \u00e0 la page de mise en page sur laquelle le formulaire d’adh\u00e9sion par courriel est d\u00e9j\u00e0 con\u00e7u et mis en \u0153uvre. Faites un clic droit sur la section qui le contient<\/strong> et s\u00e9lectionnez \u00a0\u00bb Copier la section\u00a0\u00bb<\/strong> dans le menu contextuel.<\/p>\n

\"copy<\/p>\n

Ensuite, supprimez la section de la page, car vous allez l’utiliser dans le Cr\u00e9ateur de th\u00e8me.<\/p>\n

Ajouter une mise en page de corps personnalis\u00e9e<\/h3>\n

Revenez ensuite au cr\u00e9ateur de th\u00e8me pour cr\u00e9er la disposition g\u00e9n\u00e9rale. Cliquez sur le bouton Ajouter un corps personnalis\u00e9<\/strong> dans ce mod\u00e8le et s\u00e9lectionnez Construire un corps personnalis\u00e9<\/strong>.<\/p>\n

\"custom<\/p>\n

\u00c0 l’int\u00e9rieur, s\u00e9lectionnez Start From Scratch<\/strong> et vous devriez avoir un mod\u00e8le vierge avec lequel travailler.<\/p>\n

Collez la section d’optin d’e-mail<\/h3>\n

Dans l’\u00e9diteur, faites un clic droit et s\u00e9lectionnez Coller la section<\/strong> dans le menu contextuel.<\/p>\n

\"paste<\/p>\n

L’optin d’email enti\u00e8rement stylis\u00e9 et con\u00e7u devrait \u00eatre ins\u00e9r\u00e9 directement.<\/p>\n

Ajoutez une copie pour offrir la remise conditionnelle<\/h3>\n

Ensuite, vous devez mentionner la remise que vous offrez. Pour ce module, nous allons modifier le titre dans un module Texte<\/strong>, mais vous pouvez aussi aller dans les param\u00e8tres<\/strong> du formulaire optin et modifier le texte du titre.<\/p>\n

\"email<\/p>\n

Ensuite, il est temps de passer \u00e0 l’affichage du contenu de la page.<\/p>\n

Ajout du contenu dynamique de la page<\/h3>\n

Ensuite, s’il n’y a pas d\u00e9j\u00e0 une section vide, ajoutez une nouvelle section<\/strong> en cliquant sur l’ic\u00f4ne bleue +<\/strong> et en s\u00e9lectionnant Section r\u00e9guli\u00e8re<\/strong>.<\/p>\n

\"add<\/p>\n

Une fois la section en place, ajoutez une ligne \u00e0 colonne unique<\/strong>.<\/p>\n

\"add<\/p>\n

S\u00e9lectionnez le module Post Content<\/strong> dans la liste d\u00e9roulante Ins\u00e9rer un module<\/strong>. Il s’agit d’un module dynamique qui affiche le design que vous avez d\u00e9j\u00e0 cr\u00e9\u00e9. Dans ce cas, les mod\u00e8les pr\u00e9m\u00e2ch\u00e9s \u00c9v\u00e9nements du<\/em> mus\u00e9e et Tarification<\/em> s’afficheront sur le front-end.<\/p>\n

\"post<\/p>\n

Dans ce cas, les mod\u00e8les pr\u00e9m\u00e2ch\u00e9s d’\u00e9v\u00e9nements<\/em> et de prix<\/em> du mus\u00e9e s’affichent en premi\u00e8re page.<\/p>\n

Modifiez la largeur du contenu de l’article<\/h3>\n

Ensuite, allez dans les param\u00e8tres de la ligne<\/strong> du module de contenu de l’article. Naviguez jusqu’\u00e0 l’espacement<\/strong> dans l’onglet Conception<\/strong> et r\u00e9glez la largeur<\/strong> et la largeur maximale<\/strong> sur 100 %<\/em>.<\/p>\n

\"width\"<\/p>\n

Supprimez le remplissage des rang\u00e9es et des sections<\/h3>\n

\u00c9tant donn\u00e9 que nous ajoutons du contenu dynamique \u00e0 des pages d\u00e9j\u00e0 con\u00e7ues, nous voulons que tout soit aussi transparent que possible. Allez donc dans l’onglet Param\u00e8tres de <\/strong> conception<\/strong> de toutes les sections et lignes individuelles et veillez \u00e0 d\u00e9finir le param\u00e8tre Rembourrage sup\u00e9rieur et inf\u00e9rieur<\/strong> sur 0 px<\/em> sous le titre Espacement<\/strong>. Ne laissez pas ce champ vide, car Divi a d\u00e9fini un espacement par d\u00e9faut pour ces \u00e9l\u00e9ments.<\/p>\n

\"padding\"<\/p>\n

Ajoutez une animation<\/h3>\n

Ensuite, allez dans les param\u00e8tres de la section<\/strong> contenant le formulaire d’opt-in par courriel. Sous l’onglet Design<\/strong> de la section, nous allons ajouter une animation<\/strong>. Comme cette section ne s’affichera que pour les visiteurs qui r\u00e9pondent \u00e0 certains crit\u00e8res, nous voulons attirer leur attention sur elle. Nous voulons nous assurer qu’ils ne pensent pas qu’il s’agit simplement d’une autre partie du site. Pour ce faire, nous allons animer la section enti\u00e8re pour qu’elle apparaisse apr\u00e8s une dur\u00e9e d\u00e9termin\u00e9e.<\/p>\n

Nous choisirons Bounce<\/strong> pour le style d’animation<\/strong> et 1000 ms (1 seconde)<\/em> pour le d\u00e9lai d’animation<\/strong>. Cette section n’appara\u00eetra donc qu’une seconde apr\u00e8s l’arriv\u00e9e du visiteur. Vous pouvez r\u00e9gler le d\u00e9lai comme bon vous semble, chaque tranche de 1000 ms correspondant \u00e0 1 seconde.<\/p>\n

\"delay\"<\/p>\n

Facultatif : D\u00e9finir une position fixe<\/h3>\n

Si vous souhaitez que l’utilisateur voit l’optin imm\u00e9diatement, plut\u00f4t que de devoir faire d\u00e9filer la page, vous pouvez l’apposer au bas de l’\u00e9cran. Allez dans l’onglet Avanc\u00e9<\/strong> de la section et trouvez les param\u00e8tres de Position<\/strong>. S\u00e9lectionnez Fixe<\/strong> dans la liste d\u00e9roulante, puis cliquez sur le carr\u00e9 central inf\u00e9rieur<\/strong> pour positionner la section. Ensuite, r\u00e9glez l’indice Z<\/strong> sur 999 afin qu’elle soit toujours plus haute que les autres contenus de la page.<\/p>\n

\"email<\/p>\n

Ajoutez une logique conditionnelle \u00e0 la section<\/h3>\n

Lorsque vous \u00eates encore dans les param\u00e8tres de la section de contenu, allez dans l’onglet Avanc\u00e9<\/strong> et trouvez les options Conditions<\/strong>. C’est ainsi que vous allez d\u00e9finir les pages qu’un visiteur doit voir sur votre site avant de recevoir ce formulaire optin. Cliquez sur l’ic\u00f4ne grise +<\/strong> qui indique Ajouter une condition<\/strong> pour commencer.<\/p>\n

\"condition<\/p>\n

Ensuite, choisissez Page Visit<\/strong> sous le sous-titre Interaction<\/strong>.<\/p>\n

\"page<\/p>\n

Il ne vous reste plus qu’\u00e0 choisir les pages exactes que le visiteur doit voir pour d\u00e9clencher le formulaire optin avec la remise. S\u00e9lectionnez les pages Prix<\/em> et \u00c9v\u00e9nements<\/em> dans la liste ici. Comme les deux pages sont s\u00e9lectionn\u00e9es et qu’<\/em> elles sont toutes deux affect\u00e9es au mod\u00e8le de construction de th\u00e8me, l’utilisateur verra l’optin sur l’une ou l’autre des pages, quel que soit l’ordre dans lequel elles sont visit\u00e9es. Mais les deux pages doivent \u00eatre visit\u00e9es pour que le formulaire optin s’affiche.<\/p>\n

\"condition<\/p>\n

Vous pouvez \u00e9galement proc\u00e9der de la m\u00eame mani\u00e8re avec la fonction \u00ab\u00a0Post-visite\u00a0\u00bb<\/strong>, qui se trouve \u00e9galement dans la sous-rubrique \u00a0\u00bb Interaction\u00a0\u00bb<\/strong>. Cela fonctionne exactement de la m\u00eame mani\u00e8re, mais avec des articles de blog au lieu de pages.<\/p>\n

Conclusion avec le formulaire optin conditionnel<\/h2>\n

Une fois tout cela enregistr\u00e9, votre formulaire d’optin conditionnel est en ligne. D\u00e9sormais, lorsqu’une personne visite des pages ou des articles sp\u00e9cifiques sur votre site, vous pouvez lui proposer un contenu sp\u00e9cial et cibl\u00e9. La possibilit\u00e9 de personnaliser votre contenu \u00e0 l’aide de ces options permet \u00e0 votre site d’offrir une exp\u00e9rience utilisateur incroyable. Ce qui est l’un des plus grands facteurs de conversions. Et maintenant, vous pouvez afficher le formulaire d’optin pour les convertir dans le cadre de cette exp\u00e9rience.<\/p>\n

Comment utiliseriez-vous les options de condition pour afficher un formulaire d’adh\u00e9sion ?<\/strong><\/p>\n

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

Les formulaires optin pop-up sont \u00e0 la fois l’un des \u00e9l\u00e9ments les plus utiles et les plus ennuyeux de la conception Web. Sans eux, vous pouvez difficilement d\u00e9velopper une liste de clients fid\u00e8les, mais il est peu probable que les nouveaux visiteurs y pr\u00eatent attention. C’est pourquoi nous souhaitons vous expliquer comment utiliser les options […]<\/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-368284","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\/368284","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=368284"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/368284\/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=368284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=368284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=368284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}