Cómo agregar fácilmente una ventana emergente modal en un sitio web de WordPress: Tutorial de 3 pasos

¿Sabías que un estudio reciente sobre 2 mil millones de ventanas emergentes modales tuvieron un ¿Tasa de conversión de 9.28% entre las 10% más importantes?(1)

Sí. Las ventanas emergentes hacen que las visitas al sitio web sean fáciles de usar y le ayudan a obtener más suscripciones al boletín rápidamente. Las ventanas emergentes han cambiado drásticamente en su apariencia y funcionamiento. Como resultado, se están volviendo más populares que nunca en los sitios web modernos.

¿También quieres agregar modales de WP a tu sitio web y aprovechar los beneficios que tiene para ofrecer?

Entonces este blog es exactamente lo que necesitas. Esta es la única guía que necesitará para aprender sobre los modales emergentes y cómo agregarlos fácilmente a su sitio web de WordPress. 

Fuente: (1) Estadísticas de ventanas emergentes: resultados del análisis de 2 mil millones de ejemplos de ventanas emergentes

¿Qué es una ventana emergente modal?

Las ventanas emergentes modales son muy comunes y es muy poco probable que no te hayas encontrado con una. ¿Pero conoces las definiciones de la ventana emergente modal? Echemos un vistazo.

Un modal (también llamado ventana modal o caja de luz) es un elemento de la página web que se muestra delante y desactiva el resto del contenido de la página. Para volver al contenido principal, el usuario debe interactuar con el modal completando una acción o cerrándolo.

– Hubspot

Las ventanas modales son diferentes de los cuadros de diálogo de modelos antiguos. En las ventanas emergentes no modelo, los usuarios tienen acceso a toda la ventana incluso cuando la ventana emergente está activada. Entonces, pueden ignorar la ventana emergente y continuar haciendo su trabajo.

Por otro lado, la nueva ventana emergente modal crea un nuevo "modo" en forma de ventana secundaria y desactiva la ventana principal. Como resultado, el usuario no puede trabajar en la ventana original hasta que realice alguna acción o cierre la ventana emergente modal. 

¿Cuál es el beneficio? El beneficio es que usted capta la atención de los visitantes de su sitio web incluso si es por uno o dos segundos. Y lograr que el usuario se centre en su mensaje es lo que necesita, ¿verdad? 

Porque si ven lo que tienes para ofrecer, se quedarán más de un segundo, lo que te asegurará una ventaja.

¿Por qué utilizar el modo emergente en su sitio web de WordPress?

La mayoría de la gente piensa que las ventanas emergentes son molestas. Por supuesto, no los culpo. Vas a un sitio a hacer tu trabajo y de repente surge una ventana emergente y te interrumpe, seguramente es molesto. 

Pero como propietario de un negocio, debes ver una ventana emergente de manera diferente. Porque lo creas o no, estas molestas ventanas emergentes funcionan de maravilla. Los modales emergentes han demostrado ser extremadamente exitosos, especialmente en la colección de clientes potenciales.

Según Sumo, recopilaron alrededor de 23.645.948 direcciones de correo electrónico en menos de dos años utilizando un modo emergente. ¡En muchos casos, la tasa de conversión llegó hasta 50,2%! 

Entonces, si está buscando aumentar su lista de correo electrónico y acelerar su tasa de conversión, el pop modal es lo suyo, ya que son imanes de clientes potenciales comprobados.

Además, los modales son simples y flexibles y no es necesario enviar a los usuarios a otra página para completar una acción. Más clientes potenciales con una mejor experiencia de usuario. Por lo tanto, nunca piense que los modales son inútiles o están muertos y comience a usarlos hoy.

Usos comunes de una ventana modal en el diseño web moderno

Los modales son muy efectivos siempre que necesite que los visitantes del sitio web realicen alguna acción o noten algún mensaje importante. Algunos de los usos comunes de una ventana modal en diseño web incluyen:

• Mostrar mensaje de bienvenida
• Recopile correos electrónicos y solicite la suscripción al boletín
• Formulario de inicio de sesión
• Mostrar un mensaje de advertencia antes de actuar
• Mostrar política de cookies
• Mostrar medios como galería de imágenes (producto) o video, etc.  
• Para formularios de varios pasos para una mejor experiencia de usuario.

He enumerado sólo algunas de las muchas formas de utilizar modal en el diseño web. Una vez que sepa cómo crear ventanas emergentes personalizadas en WordPress, encontrará varias formas de usarlas en su sitio web para obtener resultados óptimos. 

Entonces empecemos.

Configuración que necesita para comenzar

Supongo que tienes WordPress instalado en tu sitio web. Además de eso, necesitará un creador de páginas y un complemento emergente de WordPress para crear modal en su sitio web:

1. Elementor (versión gratuita)
2. Kit de elementos (versión gratuita y pro)

Elementor es un creador de páginas gratuito y ElementsKit es uno de los mejores complementos emergentes modales de WordPress.

¿Terminaste de instalar? ¡Ahora ya está todo listo para crear una ventana emergente personalizada de WordPress al hacer clic en WordPress! Comencemos el proceso principal ahora.

Cómo agregar una ventana emergente modal en WordPress en 3 pasos en Elementor usando ElementsKit

Si cree que agregar una ventana emergente a su sitio de WordPress es difícil, prepárese para sorprenderse. Siga los pasos a continuación y cree fácilmente una ventana emergente modal de Elementor en wp. Este es el tutorial más sencillo sobre cómo agregar ventanas emergentes en WordPress.

Paso 1: habilite el widget emergente modal

Una vez que haya instalado los complementos de ElementsKit, puede habilitarlos Widget de ventana emergente modal de Elementor desde el panel de WordPress

• Ir a  Kit de elementos  > widgets > Activar Moda emergentel > Haga clic Guardar cambios

Paso 2: Agregar el widget emergente WP Modal 

• Busque un modal emergente, arrastrar y soltar el widget en la sección donde desea que aparezca su Modal.

Paso 3: configurar los ajustes para completar

Haga clic en el icono Editar en la sección emergente para ir a las opciones de edición.

• Para cambiar el texto del botón, vaya a Contenido > Botón de activación > Etiqueta y editar

• Para cambiar el título y subtitular ir a Contenido > Encabezamiento y cambie las opciones con su texto personalizado.

• Para cambiar el contenido del cuerpo, expanda la sección de contenido y editar el texto para crear un mensaje emergente de WordPress.

• Ir a Contenido > Pie de página > Botón > CTA y cambie la etiqueta CTA y la URL con ElementsKit, un generador de ventanas emergentes personalizado.

• Finalmente, haga clic en Actualizar ahorrar.

Listo. Ahora haz clic en el botón de vista previa para ver los resultados y comprobar cómo se ve tu ventana emergente de WordPress:

¡Bien hecho! Ha creado su ventana emergente modal de Elementor.

Configuraciones adicionales para modal

Ahora echemos un vistazo a las configuraciones modales adicionales que puedes personalizar:

Disposición:

Expanda la opción de diseño para cambiar el tipo de palanca, la posición de la ventana emergente y la opción de visualización de la ventana emergente.

Tipo de alternador:

No necesariamente es necesario tener un modal que se active cuando alguien hace clic en un botón. ElementsKit le ofrece 2 opciones más para elegir además del botón

Imagen: Puede elegir cualquier imagen personalizada de cualquier tamaño en lugar de un botón como alternador para su modal. Para elegir una imagen personalizada 

• Ir a Contenido > Tipo de alternador > Elige Imagen
• Vaya a Alternar imagen > Elija una imagen, tamaño de imagen y alineación

Tiempo: También puede configurar el modal para que se active después de un tiempo específico sin ninguna acción por parte del usuario. Por ejemplo, para configurar su modal para que aparezca después de 3 segundos

• Ir a Contenido > Tipo de alternador > Hora
• Agregar tiempo en Alternar después (en segundos)

Tipo de presentación emergente:

Tiene dos opciones para el tipo de presentación emergente: modal y deslizante.

Posición emergente: 

Puede optar por colocar su ventana emergente en cualquier lugar de la ventana. Las opciones de posición disponibles para elegir son:

• Arriba a la izquierda
• Centro Superior
• Parte superior derecha
• Centro izquierda
• Centro
• Centro derecha
• Abajo a la izquierda
• Parte inferior central
• Abajo a la derecha

Surgir: 

Expanda la opción emergente para elegir el ancho y alto mínimo. Aquí también tienes la opción de mostrar u ocultar el icono de cierre, encabezado y pie de página. Tú también puedes ajustar la posición horizontal y vertical y añadir animación según tu deseo.

Cubrir: 

En caso de que no desee forzar al usuario a hacer clic en su modal para cerrarlo, active el Cerrar ventana emergente al hacer clic en superposición opción. De esta manera, el usuario puede hacer clic en cualquier lugar de la ventana para descartar el modal.

Icono Cerrar: 

Aquí puede cambiar la posición del icono de cerrar. Puede configurar la ventana emergente arriba a la derecha, la ventana emergente arriba a la izquierda, la ventana arriba a la derecha, la ventana arriba a la izquierda. También puede cambiar las posiciones vertical y horizontal. Además, puede elegir cualquier icono de la biblioteca o utilizar una imagen SVG como icono.

Encabezamiento:

Además de cambiar el título y el subtítulo, también puedes mostrar u ocultar el divisor desde aquí.

Pie de página:

Expanda la opción de pie de página para cambiar la Etiqueta, Variante y Alineación de los botones del pie de página. También puedes optar por ocultarlos si lo deseas desde aquí. 

¡Y ya lo tienes! Ahora puedes usar las ventanas emergentes atractivas y de aspecto moderno en tu sitio web.

Para obtener más detalles, lea la documentación de Widget modal emergente de ElementsKit para Elementor.

Cómo agregar un diseño personalizado en Elementor Modal con el generador de ventanas emergentes ElementsKit

Ahora ya sabes cómo cambiar el texto, la posición, animar y mucho más para personalizar tu ventana modal en WordPress. Pero aún parece un poco aburrida, ¿verdad? Como cualquier otra ventana modal emergente de WordPress Elementor.

Si pudieras agregar una imagen personalizada, un video o cualquier otro widget en tu ventana modal como si fuera una página, sería fantástico. Puede agregar cualquier diseño personalizado a su modelo con ElementsKit.

Siga los pasos para crear fácilmente el diseño personalizado que desee en modal:

• Vaya a Contenido > Contenido > Encender Habilitar plantilla
• Haga clic en el botón modal y una vez que se abra el modal, haga clic en el opción de edición para abrir el área de widgets

• Una vez que el área de widgets esté abierta, puede buscar para cualquier widget > arrastrar y soltar > actualizar a ahorrar.

Por ejemplo, si desea agregar un video, busque el video en el área de widgets y arrástrelo y suéltelo para agregarlo en su modelo y actualizarlo. Ahora, el vídeo debería aparecer en la ventana modal.

Utilice secciones prefabricadas de ElementsKit para obtener un modal hermoso

¿No tienes tiempo para crear un diseño de ventana emergente modal desde cero? No te preocupes. El generador de ventanas emergentes de ElementsKit ofrece muchas secciones integradas que puedes elegir para crear ventanas emergentes atractivas para resaltar tu mensaje al espectador.

Para utilizar los widgets integrados de ElementsKit, siga los pasos a continuación:

• Clickea en el opción de edición en el modal  para abrir el área de widgets
• Haga clic en el botón EK para abrir otra ventana de widget con las secciones prefabricadas.

• Ir a > Secciones > Elegir la sección que te gusta > Insertar

• Después de la inserción, puede cambiar la imagen, el texto o el color de fondo según sus preferencias y actualizar.

¡Y aquí está el resultado final!

ElementsKit ofrece más de 60 widgets y más de 500 secciones listas. Más información sobre ElementsKit y cómo utilizarlos para mejorar su sitio web.

Agregar formulario de contacto 7 en modal con ElementsKit

Como dije antes, los modales son efectivos para obtener más suscripciones a boletines y recopilar datos de los usuarios. Pero para eso, necesitas agregar un formulario de contacto en tu modal, ¿verdad? 

Que no cunda el pánico, no necesitarás otro complemento emergente de WordPress para agregar un formulario de contacto en tu ventana emergente. El complemento ElementsKit WordPress es un complemento para crear ventanas emergentes todo en uno.

Siga las instrucciones a continuación para agregar el popular Formulario de contacto 7 en su modal con el complemento de creación de ventanas emergentes ElementsKit.

Antes de seguir estos pasos, asegúrese de haber creado un formulario de contacto en su sitio web usando el Formulario de contacto 7, Elementor Page Builder y ElementsKit.

También puedes echar un vistazo al vídeo tutorial a continuación para crear un formulario de contacto.

Empecemos.

• Ir a Contenido > Contenido > Encender Habilitar plantilla
• Clickea en el opción de edición para abrir el área de widgets
• Buscar Formulario de contacto, arrastrar y soltar en la sección donde deseas agregarlo.
• Expandir la opción de estilo en el formulario de contacto 7
• Elija entre el prefabricado forma y actualizar.

Aquí tienes una ventana emergente modal con un formulario de contacto para mejorar tu lista de correo electrónico.

¿Sabías que puedes crear un widget personalizado sin tener ningún conocimiento profundo de codificación? Comprueba cómo construir un widget personalizado fácilmente sin ningún código usando ElementsKit.

Consejos efectivos para agregar una ventana emergente modal a Elementor en WordPress

Las ventanas emergentes modales de WordPress pueden mejorar significativamente la participación del usuario, transmitir mensajes importantes e impulsar acciones específicas por parte de sus visitantes. Aquí están los 7 consejos efectivos para implementar ventanas emergentes modales impactantes en su sitio de WordPress.

1️⃣ Elija un complemento confiable

Seleccione un complemento modal de WordPress en buen estado, como Elementor” o “ElementsKit” para crear la ventana modal en su sitio web.

2️⃣ Defina objetivos claros

Describe claramente el propósito de tu ventana emergente modal de WordPress, ya sea recopilar correos electrónicos, promocionar ofertas o transmitir información importante.

3️⃣ El tiempo es clave

Utilice activadores como retraso de tiempo, profundidad de desplazamiento o intención de salida para mostrar la ventana emergente en el momento adecuado. Eso ayudará a evitar interrupciones inmediatas en la carga de la página.

4️⃣ Capacidad de respuesta móvil

Asegúrese de que su ventana emergente modal de WordPress sea compatible con dispositivos móviles para brindar una experiencia positiva en varios dispositivos.

5️⃣Diseño para la experiencia del usuario

Diseñe ventanas emergentes modales de WordPress concisas y visualmente atractivas con contenido de alta calidad. Incluya una opción de fácil acceso para cerrar la ventana emergente para los usuarios que no estén interesados en el contenido.

6️⃣ Pruebas A/B para optimización

Implemente pruebas A/B para refinar su modal en WordPress creando variaciones e identificando los elementos más efectivos para su audiencia.

7️⃣ Cumplimiento de las normas de privacidad

Asegúrese de que su ventana emergente modal de WordPress cumpla con las regulaciones de privacidad, incluida la comunicación transparente de su política de privacidad y la obtención de consentimiento explícito para la recopilación de datos.

Preguntas frecuentes

Envolver

¡Felicitaciones! Ahora ya sabes cómo crear ventanas emergentes modales de Elementor en WordPress usando un Complemento ElementorCree ventanas emergentes de formularios de contacto y personalice su sitio de WordPress sin esfuerzo utilizando el complemento de creación de ventanas emergentes ElementsKit Pro y el generador de páginas Elementor.

No te quedes aquí. Sigue experimentando para descubrir de qué manera puedes usar el modal emergente de WordPress en tu sitio web. Y si necesitas ayuda para crear ventanas emergentes de WordPress con ElementsKit, deja un comentario a continuación.