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

add_modal_popup_in_wordpress

¿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. 

Source: (1) Pop-up Statistics: Findings From Analyzing 2 Billion Pop-up Examples

¿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

Once you have installed ElementsKit plugins, you can enable the Elementor Modal Popup widget from the WordPress dashboard

  • Ir a  Kit de elementos  > widgets > Activar Moda emergentel > Haga clic Guardar cambios
Habilitar el widget emergente ElementsKit para crear una ventana emergente modal de WordPress Elementor
Habilitar widget modal

Step 2: Add WP Modal Popup Widget 

  • Busque un modal emergente, arrastrar y soltar el widget en la sección donde desea que aparezca su Modal.
Arrastre y suelte un elemento emergente modal para agregar una ventana emergente en WordPress
Widget de arrastrar y soltar

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
Cambiar el texto del botón de alternancia usando el complemento emergente modal de WordPress, ElementsKit
Cambiar el texto del botón de alternancia
  • Para cambiar el título y subtitular ir a Contenido > Encabezamiento y cambie las opciones con su texto personalizado.
Cambiar título y subtítulo del modal de WP
Cambiar título y subtítulo
  • Para cambiar el contenido del cuerpo, expanda la sección de contenido y editar el texto para crear un mensaje emergente de WordPress.
editar ventana emergente modal del texto del cuerpo
Cambiar el texto del cuerpo
  • 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.
Cambiar el texto y la URL del CTA para agregar una ventana emergente modal en WordPress
Cambiar CTA y URL
  • 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:

Vista previa de la ventana emergente modal en WordPress
Avance

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

Configuraciones adicionales para modal

Configuraciones adicionales con ElementsKit, un generador de ventanas emergentes modales de Elementor
Ajustes adicionales

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í. 

There you have it! You can now use the modern looking engagging popups on your website.

For more details, read the documentation of ElementsKit Popup Modal widget for 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
Habilitar plantilla del generador de ventanas emergentes de Elementskit Elementor
Habilitar plantilla
  • 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.

 Cómo agregar una ventana emergente en WordPress: video en la ventana emergente modal de WordPress Elementor
Vista previa modal con vídeo
Descargar gif de ElementsKit

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.

Ventana emergente modal de WordPress Elementor
Abra la sección de widgets de ElementsKit

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
Inserte una sección prefabricada de ElementsKit en su ventana emergente modal de WordPress Elementor
Buscar e 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!

Ventana emergente modal de WordPress Elementor con sección predefinida de ElementsKit
Vista previa de modal con sección prefabricada

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.
Ventana emergente modal de WordPress Elementor con formulario de contacto 7
Modal con vista previa del formulario de contacto 7

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

Puede crear una ventana emergente modal de WordPress sin un complemento utilizando código personalizado o temas que admitan la funcionalidad modal. Sin embargo, el uso de un complemento de WordPress emergente modal, por ejemplo, ElementsKit, simplifica el proceso y proporciona funciones adicionales.

Debe evitar el uso de ventanas emergentes modales en situaciones en las que puedan alterar la experiencia del usuario, como en dispositivos móviles con pantallas pequeñas o durante interacciones críticas del usuario, como procesos de pago.

Las ventanas emergentes modales en sí mismas no tienen un impacto directo en el SEO, pero su implementación puede afectar la experiencia del usuario y las clasificaciones de búsqueda. Por lo tanto, debes asegurarte de que las ventanas emergentes no sean intrusivas y estén diseñadas siguiendo las pautas de Google para intersticiales para evitar implicaciones negativas para el SEO.

Se recomienda ElementsKit como un complemento emergente modal de WordPress potente y rico en funciones. Proporciona una variedad de opciones de personalización, plantillas y compatibilidad con varios creadores de páginas, lo que la convierte en una opción popular entre los usuarios de WordPress.

Descargar gif de ElementsKit

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.


Comentarios

  1. Avatar de Steve

    Debería haber una opción para crear una ventana emergente modal usando un enlace de anclaje de texto.
    Entonces esto podría usarse con enlaces de texto simples e íconos, etc.
    Personalmente, no quiero hacer clic en un botón o imagen, simplemente me gustaría hacer clic en un enlace de texto y aparece el modal.

    1. Avatar de Dipa Shaha
      Dipa Shaha

      Steve,
      Espero que lo estás haciendo bien. Desafortunadamente, no tenemos la opción que deseas en este momento.
      Pero además del botón y la imagen, también tenemos un tipo de alternancia de tiempo que hace que la ventana emergente aparezca después de un cierto tiempo que puedes configurar manualmente. Puedes probar ese también.
      Y damos la bienvenida a cualquier idea nueva. Si desea esta función, puede solicitarla utilizando este enlace. https://wpmet.com/plugin/elementskit/roadmaps/

  2. Avatar de Quinto

    ¿Se pueden activar varios modales haciendo clic en un botón? Por ejemplo, cuando se hace clic en un botón, se representan dos modales uno al lado del otro o verticalmente (dependiendo del tamaño de la ventana), donde se solicita al usuario que seleccione el botón en el modal uno o en el modal dos: diseños A/B, por ejemplo. La idea aquí es gestionar/divertir la capacidad de atención presentando información/visuales en trozos pequeños.

    1. Avatar de Dipa Shaha
      Dipa Shaha

      Querido Quinto
      Lamentablemente, la función que desea no está disponible. Sin embargo, puede solicitar esta función. El equipo de ElementsKit siempre está feliz de recibir sugerencias de funciones.
      Puede solicitar la función utilizando este enlace https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *