{"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\/es\/como-crear-una-ventana-emergente-de-suscripcion-efectiva-activada-por-clic-en-elementor","title":{"rendered":"C\u00f3mo crear una eficaz ventana emergente de suscripci\u00f3n activada por clic en Elementor"},"content":{"rendered":"

Una ventana emergente de suscripci\u00f3n activada por un clic puede aumentar eficazmente la tasa de suscripci\u00f3n por correo electr\u00f3nico de su sitio web al tiempo que mejora la experiencia del usuario. Elementor ofrece potentes herramientas para crear y personalizar ventanas emergentes, lo que facilita la configuraci\u00f3n de un \"clic para abrir\" ventana emergente de suscripci\u00f3n<\/strong>. Este tutorial le guiar\u00e1 paso a paso para crear una ventana emergente de suscripci\u00f3n que s\u00f3lo aparezca cuando los usuarios hagan clic en un enlace o bot\u00f3n espec\u00edfico.<\/p>

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

Introducci\u00f3n<\/h3>

Las ventanas emergentes de suscripci\u00f3n pueden ser una excelente forma de atraer a los visitantes y animarles a suscribirse a su bolet\u00edn de noticias, promociones o actualizaciones. A diferencia de las ventanas emergentes activadas autom\u00e1ticamente, que pueden interrumpir la experiencia del usuario, una ventana emergente activada por clic se abre s\u00f3lo cuando el usuario est\u00e1 preparado para verla, lo que la hace m\u00e1s f\u00e1cil de usar y con mayores probabilidades de conversi\u00f3n. Exploremos c\u00f3mo puede crear una ventana emergente de suscripci\u00f3n en Elementor que se abra al hacer clic en un enlace o bot\u00f3n.<\/p>

Paso 1: Crear la plantilla de ventana emergente de suscripci\u00f3n<\/h3>
  1. Elemento de acceso o plantillas emergentes<\/strong>
    • Acceda a su panel de control de WordPress y navegue hasta Plantillas > Ventanas emergentes<\/strong>.<\/li>\n\n
    • Haga clic en A\u00f1adir nueva ventana emergente<\/strong> para crear una nueva plantilla emergente.<\/li><\/ul><\/li><\/ol>
      \"\"<\/figure>
      1. Nombre y cree su plantilla de ventanas emergentes<\/strong>
        • D\u00e9 a su ventana emergente un nombre relevante, como \"Ventana emergente de suscripci\u00f3n<\/strong><\/mark>\" y luego haga clic en Crear plantilla<\/strong>.<\/li><\/ul><\/li><\/ol>
          \"\"<\/figure><\/div>
          1. Elija o dise\u00f1e el dise\u00f1o de su ventana emergente<\/strong>
            • Elementor le mostrar\u00e1 una gran variedad de plantillas de ventanas emergentes predise\u00f1adas. Seleccione una que se adapte a sus necesidades, o comience con una plantilla en blanco<\/mark>.<\/li>\n\n
            • Haga clic en Inserte<\/strong> para abrir la plantilla seleccionada en el editor de Elementor. Al hacer clic en el icono \"x<\/strong>\" le lleva a la p\u00e1gina de la plantilla en blanco.<\/li><\/ul><\/li><\/ol>
              \"\"<\/figure><\/div>
              1. A\u00f1adir un formulario de suscripci\u00f3n<\/strong>
                • Arrastre el Formulario<\/strong> widget<\/mark> en la ventana emergente para a\u00f1adir un formulario de suscripci\u00f3n.<\/li>\n\n
                • Configure los campos del formulario para capturar la informaci\u00f3n necesaria, normalmente:
                  • Nombre<\/strong> (opcional) - para una experiencia m\u00e1s personalizada.<\/li>\n\n
                  • Correo electr\u00f3nico<\/strong> (obligatorio) - como informaci\u00f3n principal para una suscripci\u00f3n.<\/li><\/ul><\/li>\n\n
                  • Mant\u00e9ngalo sencillo con s\u00f3lo un campo de correo electr\u00f3nico para aumentar la probabilidad de inscripci\u00f3n.<\/li><\/ul><\/li><\/ol>
                    \"\"<\/figure><\/div>
                    1. Configurar las acciones de env\u00edo de formularios<\/strong>
                      • Actualice el texto del bot\u00f3n de env\u00edo del formulario a algo atractivo, como \"Suscr\u00edbase ahora\" u \"Obtenga actualizaciones\".<\/li>\n\n
                      • En el Acciones tras el env\u00edo<\/strong> seleccione Correo electr\u00f3nico<\/strong> o MailChimp<\/strong> (si utiliza MailChimp para el marketing por correo electr\u00f3nico).<\/li>\n\n
                      • Personalice las acciones posteriores al env\u00edo, como enviar un mensaje de agradecimiento o a\u00f1adir un notificaci\u00f3n de \u00e9xito<\/strong>.<\/li><\/ul><\/li><\/ol>
                        \"\"<\/figure><\/div>
                        \"\"
                        enviar notificaci\u00f3n<\/figcaption><\/figure><\/div>
                        \"\"\/<\/figure>
                        1. Estilice su ventana emergente<\/strong>
                          • Utilice las opciones de estilo de Elementor para personalizar el colores del formulario<\/strong>, fuentes<\/strong>y espaciado<\/strong> para que coincida con la marca de su sitio web.<\/li>\n\n
                          • Para llamar la atenci\u00f3n, a\u00f1ada un titular como \"\u00a1Mant\u00e9ngase al d\u00eda!\" o \"Suscr\u00edbase a las \u00faltimas noticias<\/strong>. “<\/li><\/ul><\/li><\/ol>
                            \"\"<\/figure>
                            \"\"<\/figure>
                            1. Guardar y publicar la ventana emergente<\/strong>
                              • Una vez que est\u00e9 satisfecho con el dise\u00f1o, haga clic en Publique<\/strong>. Ahora se le pedir\u00e1 que configure los ajustes de visualizaci\u00f3n de la ventana emergente.<\/li><\/ul><\/li><\/ol>

                                Paso 2: Configure los ajustes de visualizaci\u00f3n y activaci\u00f3n de la ventana emergente<\/h3>
                                1. Establecer las condiciones de visualizaci\u00f3n<\/strong>
                                  • Haga clic en A\u00f1adir condici\u00f3n<\/strong> y elija Todo el sitio<\/strong> o una p\u00e1gina espec\u00edfica en la que desee que se pueda acceder a la ventana emergente.<\/li><\/ul><\/li><\/ol>
                                    \"\"<\/figure><\/div><\/div>\n\n
                                    \"\"<\/figure><\/div><\/div>
                                    1. Configurar activadores<\/strong>
                                      • Desactive cualquier activador autom\u00e1tico (como \"Al cargar la p\u00e1gina\" o \"Al desplazarse\"). Este paso garantiza que la ventana emergente s\u00f3lo aparezca cuando el usuario haga clic en un enlace o bot\u00f3n designado.<\/li><\/ul><\/li><\/ol>
                                        \"\"<\/figure><\/div>
                                        1. Guardar ajustes de pantalla<\/strong>
                                          • Confirme sus ajustes pulsando Guardar y cerrar<\/strong>.<\/li><\/ul><\/li><\/ol>

                                            Paso 3: Crear el enlace o bot\u00f3n para activar la ventana emergente<\/h3>
                                            1. Edite la p\u00e1gina o el post donde desea el enlace<\/strong>
                                              • Abra la p\u00e1gina o la entrada en la que desea a\u00f1adir el enlace o bot\u00f3n activador en Elementor.<\/li><\/ul><\/li>\n\n
                                              • A\u00f1adir un enlace o bot\u00f3n para el activador de la ventana emergente<\/strong>
                                                • Inserte un Bot\u00f3n<\/strong> o un widget de enlace de texto que sirva como disparador de la ventana emergente. Utilice texto atractivo como \"Suscr\u00edbase ahora\" o \"Suscr\u00edbase para recibir actualizaciones\".<\/li>\n\n
                                                • Puede adjuntar el activador de la ventana emergente a una imagen, un icono u otro elemento en el que se pueda hacer clic para conseguir un aspecto personalizado.<\/li><\/ul><\/li><\/ol>
                                                  \"\"<\/figure>
                                                  1. Establezca la acci\u00f3n desencadenante para abrir la ventana emergente<\/strong>
                                                    • Seleccione el enlace o el bot\u00f3n y vaya a Ajustes de enlace<\/strong> en el editor de Elementor.<\/li>\n\n
                                                    • Establezca el tipo de enlace en Etiquetas din\u00e1micas<\/strong>y seleccione Acciones > Ventana emergente<\/strong> de la lista desplegable.<\/li><\/ul><\/li><\/ol>
                                                      \"\"<\/figure><\/div>\n\n
                                                      \"\"<\/figure><\/div><\/div>
                                                      1. Elija la acci\u00f3n y el nombre de la ventana emergente<\/strong>
                                                        • Elija Abrir ventana emergente<\/strong> como acci\u00f3n y seleccione el nombre de la ventana emergente de suscripci\u00f3n que cre\u00f3 anteriormente.<\/li>\n\n
                                                        • Tambi\u00e9n puede establecer una acci\u00f3n de cierre de la ventana emergente si desea que los usuarios puedan cerrarla manualmente.<\/li><\/ul><\/li><\/ol>
                                                          \"\"<\/figure><\/div>
                                                          1. Guarde sus cambios<\/strong>
                                                            • Haga clic en Actualizaci\u00f3n<\/strong> para guardar sus cambios en la p\u00e1gina.<\/li><\/ul><\/li><\/ol>

                                                              Paso 4: Probar la ventana emergente<\/h3>
                                                              1. Vista previa de la p\u00e1gina<\/strong>
                                                                • Visite la p\u00e1gina en la que a\u00f1adi\u00f3 el activador de la ventana emergente, haga clic en el enlace o bot\u00f3n y aseg\u00farese de que la ventana emergente de suscripci\u00f3n se muestra correctamente.<\/li><\/ul><\/li><\/ol>