¿Cómo hacer que una ventana emergente se abra al hacer clic en un botón usando Elementor? [2022]

¿Se pregunta qué tan atractivo aparecerá su sitio web para los visitantes si se abre una ventana emergente al hacer clic en el botón ? Si desea ese tipo de botón interactivo que abre una ventana emergente, existen numerosas formas en el creador de sitios web más popular, Elementor . Hoy le mostraremos cómo puede crear fácilmente una ventana emergente impresionante con un clic de botón sin codificación.

5 mejores casos de uso de botón con ventana emergente modal de Elementor

Echemos un vistazo a los beneficios que disfrutará al hacer que se abra una ventana emergente modal de Elementor al hacer clic en el botón antes de comenzar con el tutorial. Básicamente, este tipo de ventana emergente modal interactiva se utiliza para campañas de marketing de sitios web . Además de estos, también hay muchos casos de uso versátiles para hacer que una ventana emergente se abra al hacer clic en un botón. Estos son los 5 casos de uso principales de la ventana emergente modal.

1. Para capturar clientes potenciales para empresas

Para administrar su negocio sin problemas y aumentar el crecimiento de la empresa, necesita clientes potenciales. Al nutrir a los clientes potenciales, puede convertirlos en sus clientes habituales. Y un sitio web es el mejor medio para captar clientes potenciales. Si hace que se abra una ventana emergente al hacer clic en un botón, puede recopilar fácilmente los nombres , números de teléfono, correos electrónicos y otros detalles de los clientes potenciales.

2. Recopilación de suscripción de correo electrónico

Por lo general, si agrega un botón básico para recopilar suscripciones de correo electrónico, llevará a sus usuarios a una nueva página web. En lugar de hacer esto, puede hacer que se abra una ventana emergente al hacer clic en un botón, luego sus usuarios no tendrán que abandonar la página web actual. Esta práctica aumenta sorprendentemente tu suscripción de correo electrónico contar sin problemas.

3. Promociones de marketing y ventas

Cuando ejecuta promociones de marketing a través de su sitio web, las ventanas emergentes que se abren al hacer clic en un botón pueden darle a su sitio un aspecto interactivo y aumentar las ventas . Puede agregar imágenes, formularios, cupones de descuento especiales, etc. en una sola ventana emergente de Elementor. Sin hacer que su sitio web no sea deseado junto con las secciones de promoción, puede reemplazarlo con una ventana emergente que se abre al hacer clic en un botón.

4. Compartir anuncios emocionantes

Si planea anunciar un gran lanzamiento u otros anuncios y promociones emocionantes, la ventana emergente que se abre al hacer clic en un botón puede ser la mejor manera. Le dará a su sitio web un aspecto impresionante y puede decorar el sitio web con confeti virtual y otras decoraciones festivas. Además, si planea anunciar alguna gran noticia "próximamente", la ventana emergente que se abre al hacer clic en un botón puede ayudarlo a crear el zumbido .

5. Usar como bloqueo de contenido

Cuando tiene un sitio web multipropósito, puede ser necesario proporcionar restricciones en el contenido según la edad, la membresía, la suscripción y muchos más. Si proporciona contenido restringido directamente en una sección del sitio web, definitivamente disminuirá su recuento de clics por acción. En lugar de esto, puede crear una ventana emergente atractiva que se abre instantáneamente al hacer clic en un botón.

¿Por qué Elementor es la mejor plataforma para crear ventanas emergentes en un botón?

En los sitios web, hay varias formas de crear una ventana emergente que se abre al hacer clic en un botón en WordPress. Una forma de hacerlo es mediante la codificación personalizada o la contratación de expertos. Si no eres un experto en tecnología, crear códigos o contratar expertos puede costarte una fortuna. Pero cuando usa Elementor , el creador de sitios web de WordPress más popular, puede hacerlo sin codificación .

Para crear una ventana emergente que se abre con un clic de botón, puede hacerlo simplemente arrastrando y soltando , sin necesidad de codificación. Además, con la ayuda del constructor Elementor Popup, crear una ventana emergente que se abre con un clic de botón es tan simple que puede crearlo usted mismo. Elementor ofrece opciones ilimitadas de personalización y personalización. Entonces, al alinear eso con el valor de la marca de su sitio web, puede crear cualquier tipo de ventana emergente que se abre al hacer clic en un botón al instante.

Tutorial sin código: ¿Cómo hacer que una ventana emergente modal de Elementor se abra al hacer clic en un botón?

Ahora entremos en el tutorial y comencemos a hacer que se abra una ventana emergente al hacer clic en el botón. Antes de comenzar a crear una ventana emergente de Elementor, todo lo que necesita es concentración de 5 minutos y seguir este sencillo tutorial paso a paso.

Paso 1: Comience con Elementor PRO

Si planea crear una ventana emergente modal que se abre con un clic de botón usando Elementor, entonces debe obtener Elementor PRO . Con la característica exclusiva de Elementor PRO, Elementor Popup Builder , puede crear instantáneamente ventanas emergentes que se abren con un clic de botón. Elementor viene con planes de precios versátiles, a partir de $49 . Después de obtener el complemento Elementor PRO, instálelo y actívelo en su sitio web de WordPress.

Paso 2: Cree una plantilla usando Elementor Popup Builder

Ahora es el momento de crear una plantilla para que se abra una ventana emergente con un clic de botón. Para hacer esto, vaya a su tablero de WordPress, vaya a Plantillas → Ventana emergente . Al hacer clic en la pestaña, lo llevará instantáneamente al generador de elementos emergentes de Elementor. Luego haga clic en el botón 'Agregar nueva ventana emergente' . Aparecerá una ventana emergente. Allí, el tipo de plantilla se selecciona automáticamente como ventana emergente. Puede dar un nombre a la plantilla si lo desea y luego hacer clic en el botón 'Crear plantilla' .

Luego será redirigido a la biblioteca de plantillas de Elementor . Hay más de 100 colecciones emergentes disponibles en categorías versátiles. Según los requisitos de su sitio web de WordPress, seleccione una plantilla emergente de Elementor adecuada. Haga clic en la plantilla para obtener una breve vista previa. Luego haga clic en el botón 'Insertar' para que la ventana emergente modal se abra al hacer clic en un botón.

Paso 3: configure y personalice la plantilla emergente

Después de eso, se abrirá el panel del editor de Elementor con todas las opciones de configuración en el lado izquierdo. Desde allí, puede personalizar fácilmente la ventana emergente que se abre al hacer clic en un botón. Puede mantener la ventana emergente modal con Boxed o Full Width . Del mismo modo, puede configurar la altura emergente modal, el espacio entre columnas, la posición de la columna, la alineación vertical, el desbordamiento, las etiquetas HTML y muchos más. Diferentes tipos de ancho ofrecen diferentes tipos de configuración.

Para personalizar el contenido emergente modal, simplemente haga clic en el texto, la imagen o los botones. Al instante, el panel de edición se abrirá a la izquierda. Puede cambiar fácilmente el contenido de la ventana emergente, la familia de fuentes, etc. También agregue varias secciones de salida de correo electrónico, la altura, el ancho, el color, el texto y mucho más del botón. Hay una opción disponible para establecer acciones después del envío, administrar envíos, agregar contenido de correo electrónico personalizado, correo electrónico del destinatario, ID de correo electrónico del remitente, etc. Después de realizar todos los cambios, haga clic en el botón 'Publicar' .

Paso 4: configurar condiciones y disparadores

Puede aprovechar la ventana emergente que se abre con un clic de botón para todo el sitio web de WordPress o páginas seleccionadas. También puede incluir o excluir la ventana emergente de Elementor de las páginas seleccionadas. Todas estas configuraciones están disponibles en la pestaña 'Condición' .

Desde la pestaña 'Activadores' , debe establecer cuándo desea que se abra la ventana emergente al hacer clic en un botón. Como queremos obtener una vista previa de la ventana emergente haciendo clic en el botón, alterne para habilitar 'Al hacer clic' . Desde 'Reglas Avanzadas' puedes configurar condiciones como a quién mostrar popup, mostrar cuando llega el formulario, y muchas más. Luego haga clic en el botón 'Guardar y cerrar' . Así de fácil puede crear una plantilla emergente de Elementor. Luego regrese al tablero de WordPress.

Paso 4: agregue un botón de Elementor donde lo necesite

Ahora, abra una página en la que desee establecer que se abra una ventana emergente al hacer clic en un botón. Si desea crear una nueva página, vaya a Páginas → Agregar nuevo . para este tutorial, vamos a conectar el modal emergente con el botón Elementor. Arrastra y suelta el botón Elementor en tu página.

Personalice la apariencia del botón, el texto, etc. para ajustarlo con el color de la marca de su sitio web. El siguiente paso es vincular el botón con el modal emergente. Para hacer esto, haga clic en el 'Tipo dinámico' del campo 'Enlace' , elija Ventana emergente de Acciones . Luego, haga clic en el ícono 'Configuración' junto a la ventana emergente y seleccione la plantilla emergente creada anteriormente. ¡Eso es todo!

El vistazo final de la ventana emergente se abre al hacer clic en el botón Elementor

Así de fácil puede crear una ventana emergente que se abre con un clic de botón. Después de realizar otras personalizaciones, publique la página. Ahora a la vista previa para ver cómo se abre una ventana emergente al hacer clic en un botón.

Si desea utilizar el mismo botón para diferentes páginas, copie y pegue el botón en una nueva página web. Además, puede copiar el código abreviado de la plantilla emergente de Elementor y usarlo en cualquier lugar donde desee agregar una ventana emergente que se abre con un clic de botón.

Bono para complementos esenciales para usuarios de Elementor

Essential Addons For Elementor es la biblioteca de Elementor más poderosa con más de 1 millón de usuarios activos y más de 85 widgets únicos. Y su widget Creative Button viene con un diseño más versátil y una usabilidad multipropósito para sus clientes. Si está utilizando el widget de botón Complementos esenciales, de manera similar al botón Elementor, puede hacer que se abra una ventana emergente con un clic de botón fácilmente.

Elementor ha facilitado el desarrollo de sitios web. Al igual que la ventana emergente se abre al hacer clic en un botón, puede crear funcionalidades más sorprendentes y versátiles para su sitio web de WordPress. Aquí está el final de este tutorial. Si ha encontrado útil este tutorial, no olvide compartirlo con otros.

Háganos saber cómo crea una ventana emergente que se abre al hacer clic en un botón usando Elementor en nuestra comunidad de Facebook . Además, suscríbete a nuestro blog para mantenerse actualizado sobre este tipo de tutoriales, consejos y trucos.