{"id":5204,"date":"2024-11-01T16:33:48","date_gmt":"2024-11-01T08:33:48","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=5204"},"modified":"2024-11-01T16:33:48","modified_gmt":"2024-11-01T08:33:48","slug":"how-to-create-an-effective-click-triggered-subscription-popup-in-elementor","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/fr\/comment-creer-une-popup-dabonnement-efficace-et-declenchee-par-un-clic-dans-elementor","title":{"rendered":"Comment cr\u00e9er un Popup d'abonnement efficace d\u00e9clench\u00e9 par le clic dans Elementor"},"content":{"rendered":"

Un popup d'abonnement d\u00e9clench\u00e9 par un clic peut augmenter efficacement le taux d'inscription \u00e0 votre site web tout en am\u00e9liorant l'exp\u00e9rience de l'utilisateur. Elementor offre des outils puissants pour cr\u00e9er et personnaliser les popups, ce qui facilite la mise en place d'un popup \"click-to-open\" (cliquer pour ouvrir) fen\u00eatre contextuelle d'abonnement<\/strong>. Ce tutoriel vous guidera \u00e0 travers chaque \u00e9tape de la cr\u00e9ation d'une fen\u00eatre contextuelle d'abonnement qui ne s'affiche que lorsque les utilisateurs cliquent sur un lien ou un bouton sp\u00e9cifique.<\/p>

\"\"<\/figure><\/div>

Introduction<\/h3>

Les fen\u00eatres contextuelles d'abonnement peuvent \u00eatre un excellent moyen d'attirer l'attention des visiteurs et de les encourager \u00e0 s'inscrire \u00e0 votre lettre d'information, \u00e0 vos promotions ou \u00e0 vos mises \u00e0 jour. Contrairement aux popups \u00e0 d\u00e9clenchement automatique, qui peuvent interrompre l'exp\u00e9rience de l'utilisateur, un popup \u00e0 d\u00e9clenchement par clic ne s'ouvre que lorsque l'utilisateur est pr\u00eat \u00e0 le voir, ce qui le rend plus convivial et plus susceptible de convertir. Voyons comment vous pouvez cr\u00e9er une fen\u00eatre contextuelle d'abonnement dans Elementor qui s'ouvre en cliquant sur un lien ou un bouton.<\/p>

\u00c9tape 1 : Cr\u00e9er le mod\u00e8le de fen\u00eatre contextuelle d'abonnement<\/h3>
  1. Mod\u00e8les d'\u00e9l\u00e9ments d'acc\u00e8s ou de fen\u00eatres contextuelles<\/strong>
    • Connectez-vous \u00e0 votre tableau de bord WordPress et naviguez vers Mod\u00e8les > Popups<\/strong>.<\/li>\n\n
    • Cliquez sur Ajouter une nouvelle fen\u00eatre pop-up<\/strong> pour cr\u00e9er un nouveau mod\u00e8le de fen\u00eatre contextuelle.<\/li><\/ul><\/li><\/ol>
      \"\"<\/figure>
      1. Nommez et cr\u00e9ez votre mod\u00e8le de fen\u00eatre contextuelle<\/strong>
        • Donnez \u00e0 votre popup un nom pertinent, tel que \"Popup d'abonnement<\/strong><\/mark>\"Cliquez ensuite sur Cr\u00e9er un mod\u00e8le<\/strong>.<\/li><\/ul><\/li><\/ol>
          \"\"<\/figure><\/div>
          1. Choisissez ou concevez la mise en page de votre fen\u00eatre contextuelle<\/strong>
            • Elementor vous pr\u00e9sentera une vari\u00e9t\u00e9 de mod\u00e8les de popups pr\u00e9con\u00e7us. S\u00e9lectionnez celui qui correspond \u00e0 vos besoins, ou commencez par une mod\u00e8le vierge<\/mark>.<\/li>\n\n
            • Cliquez sur Ins\u00e9rer<\/strong> pour ouvrir le mod\u00e8le s\u00e9lectionn\u00e9 dans l'\u00e9diteur Elementor. En cliquant sur l'ic\u00f4ne \"x<\/strong>\"vous permet d'acc\u00e9der \u00e0 la page vierge du mod\u00e8le.<\/li><\/ul><\/li><\/ol>
              \"\"<\/figure><\/div>
              1. Ajouter un formulaire d'abonnement<\/strong>
                • Faites glisser le Formulaire<\/strong> widget<\/mark> dans la fen\u00eatre contextuelle pour ajouter un formulaire d'abonnement.<\/li>\n\n
                • Configurez les champs du formulaire pour capturer les informations n\u00e9cessaires, typiquement :
                  • Nom<\/strong> (facultatif) - pour une exp\u00e9rience plus personnalis\u00e9e.<\/li>\n\n
                  • Courriel<\/strong> (obligatoire) - en tant qu'information principale pour un abonnement.<\/li><\/ul><\/li>\n\n
                  • Restez simple avec un simple champ d'email pour augmenter la probabilit\u00e9 d'inscription.<\/li><\/ul><\/li><\/ol>
                    \"\"<\/figure><\/div>
                    1. Configurer les actions de soumission de formulaire<\/strong>
                      • Mettez \u00e0 jour le texte du bouton d'envoi du formulaire en le rendant plus attrayant, par exemple \"S'abonner maintenant\" ou \"Recevoir les mises \u00e0 jour\".<\/li>\n\n
                      • Dans le cadre de la Actions apr\u00e8s l'envoi<\/strong> s\u00e9lectionnez Courriel<\/strong> ou MailChimp<\/strong> (si vous utilisez MailChimp pour le marketing par courriel).<\/li>\n\n
                      • Personnalisez les actions post\u00e9rieures \u00e0 la soumission, telles que l'envoi d'un message de remerciement ou l'ajout d'un avis de r\u00e9ussite<\/strong>.<\/li><\/ul><\/li><\/ol>
                        \"\"<\/figure><\/div>
                        \"\"
                        envoyer une notification<\/figcaption><\/figure><\/div>
                        \"\"\/<\/figure>
                        1. Style de votre popup<\/strong>
                          • Utilisez les options de style d'Elementor pour personnaliser l'\u00e9l\u00e9ment couleurs du formulaire<\/strong>, polices de caract\u00e8res<\/strong>et espacement<\/strong> pour correspondre \u00e0 l'image de marque de votre site web.<\/li>\n\n
                          • Pour attirer l'attention, ajoutez un titre tel que \"Restez inform\u00e9\" ou \".S'abonner aux derni\u00e8res nouvelles<\/strong>. “<\/li><\/ul><\/li><\/ol>
                            \"\"<\/figure>
                            \"\"<\/figure>
                            1. Enregistrer et publier la fen\u00eatre contextuelle<\/strong>
                              • Une fois que vous \u00eates satisfait du design, cliquez sur Publier<\/strong>. Vous \u00eates maintenant invit\u00e9 \u00e0 configurer les param\u00e8tres d'affichage de la fen\u00eatre contextuelle.<\/li><\/ul><\/li><\/ol>

                                \u00c9tape 2 : Configurer les param\u00e8tres d'affichage et de d\u00e9clenchement de la fen\u00eatre contextuelle<\/h3>
                                1. D\u00e9finir les conditions d'affichage<\/strong>
                                  • Cliquez sur Ajouter une condition<\/strong> et choisissez Tout le site<\/strong> ou une page sp\u00e9cifique o\u00f9 vous souhaitez que la fen\u00eatre contextuelle soit accessible.<\/li><\/ul><\/li><\/ol>
                                    \"\"<\/figure><\/div><\/div>\n\n
                                    \"\"<\/figure><\/div><\/div>
                                    1. Configurer les d\u00e9clencheurs<\/strong>
                                      • D\u00e9sactivez tout d\u00e9clencheur automatique (comme \"Au chargement de la page\" ou \"Au d\u00e9filement\"). Cette \u00e9tape permet de s'assurer que la fen\u00eatre contextuelle n'appara\u00eet que lorsque l'utilisateur clique sur un lien ou un bouton d\u00e9sign\u00e9.<\/li><\/ul><\/li><\/ol>
                                        \"\"<\/figure><\/div>
                                        1. Sauvegarder les param\u00e8tres d'affichage<\/strong>
                                          • Confirmez vos r\u00e9glages en cliquant sur Enregistrer et fermer<\/strong>.<\/li><\/ul><\/li><\/ol>

                                            \u00c9tape 3 : Cr\u00e9er le lien ou le bouton qui d\u00e9clenchera la fen\u00eatre contextuelle<\/h3>
                                            1. Modifiez la page ou le message dans lequel vous souhaitez ins\u00e9rer le lien.<\/strong>
                                              • Ouvrez la page ou l'article o\u00f9 vous souhaitez ajouter le lien ou le bouton d\u00e9clencheur dans Elementor.<\/li><\/ul><\/li>\n\n
                                              • Ajouter un lien ou un bouton pour le d\u00e9clencheur de la fen\u00eatre contextuelle<\/strong>
                                                • Ins\u00e9rer un Bouton<\/strong> ou un widget de lien textuel pour servir de d\u00e9clencheur \u00e0 la fen\u00eatre contextuelle. Utilisez un texte engageant comme \"S'inscrire maintenant\" ou \"S'abonner aux mises \u00e0 jour\".<\/li>\n\n
                                                • Vous pouvez associer le d\u00e9clencheur de la fen\u00eatre contextuelle \u00e0 une image, \u00e0 une ic\u00f4ne ou \u00e0 un autre \u00e9l\u00e9ment cliquable pour obtenir un aspect personnalis\u00e9.<\/li><\/ul><\/li><\/ol>
                                                  \"\"<\/figure>
                                                  1. D\u00e9finir l'action de d\u00e9clenchement de l'ouverture de la fen\u00eatre contextuelle<\/strong>
                                                    • S\u00e9lectionnez le lien ou le bouton, puis allez \u00e0 Param\u00e8tres des liens<\/strong> dans l'\u00e9diteur Elementor.<\/li>\n\n
                                                    • D\u00e9finissez le type de lien sur Tags dynamiques<\/strong>puis s\u00e9lectionnez Actions > Popup<\/strong> dans la liste d\u00e9roulante.<\/li><\/ul><\/li><\/ol>
                                                      \"\"<\/figure><\/div>\n\n
                                                      \"\"<\/figure><\/div><\/div>
                                                      1. Choisissez l'action et le nom de la fen\u00eatre contextuelle<\/strong>
                                                        • Choisissez Ouvrir la fen\u00eatre pop-up<\/strong> comme action et s\u00e9lectionnez le nom de la fen\u00eatre contextuelle d'abonnement que vous avez cr\u00e9\u00e9e pr\u00e9c\u00e9demment.<\/li>\n\n
                                                        • Vous pouvez \u00e9galement d\u00e9finir une action de fermeture de la fen\u00eatre contextuelle si vous souhaitez que les utilisateurs puissent la fermer manuellement.<\/li><\/ul><\/li><\/ol>
                                                          \"\"<\/figure><\/div>
                                                          1. Sauvegarder vos modifications<\/strong>
                                                            • Cliquez sur Mise \u00e0 jour<\/strong> pour enregistrer les modifications apport\u00e9es \u00e0 la page.<\/li><\/ul><\/li><\/ol>

                                                              \u00c9tape 4 : Tester la fen\u00eatre contextuelle<\/h3>
                                                              1. Pr\u00e9visualiser la page<\/strong>
                                                                • Visitez la page o\u00f9 vous avez ajout\u00e9 le d\u00e9clencheur de fen\u00eatre contextuelle, cliquez sur le lien ou le bouton et assurez-vous que la fen\u00eatre contextuelle d'abonnement s'affiche correctement.<\/li><\/ul><\/li><\/ol>