Tutorial Divi: Cómo hacer un POPUP en Divi con plugin gratuito

Inicio / Blog / Divi plugins / Tutorial Divi: Cómo hacer un POPUP en Divi con plugin gratuito

Autor: Jefferson M

Publicación: 08 Sep, 2020

En este video tutorial gratuito te enseñaremos como crear un popup en Divi con el plugin gratuito Popup for Divi de divimode. Éste plugin nos permite hacer cualquier sección popup de una manera bastante sencilla y rápida.

Si quieres aprender a crear un video popup en Divi sin plugins, checa este tutorial premium.

Tiempo de lectura estimado: 3 minutos

Índice

Generalmente, no recomiendo que se usen popups de manera agresiva dentro del sitio web, pero en ciertos casos podría ser interesante agregar elementos de popup en Divi, y popup for divi nos lo pone bastante fácil. Echemos un vistazo.

Hacer cualquier elemento popup en Divi con popup for Divi

El plugin gratuito de la gente de Divi mode funciona de una manera muy sencilla, básicamente puedes transformar cualquier sección dentro de Divi a “popeable” con un simple selector.

Como funciona:

  1. Instalar el plugin Popup for Divi desde el instalador de plugins de WordPress.
  1. Instalar el plugin Popup for Divi desde el instalador de plugins de WordPress.
  2. Abre el editor visual de Divi y crea una Sección y editála con los elementos que quieres que sean popup
  3. Abre las opciones de la sección y verás una nueva pestaña llamada “Ventana emergente” o “Popup” accede a ella.
  4. Cambia el selector la opción “Esto es un popup” y asignále un “ID” o identificador único a la ventana. Es importante que coloques un texto único sin espacios y que sea claro, pues te funcionará como texto ancla o disparador (Trigger) para activar el popup. Por ejemplo, “newsletter-optin”. Cierre la sección configuración.
  5. Agrega un módulo de botón en cualquier lugar de la página que quieras y coloca en la “URL del enlace” el ID que definiste a la sección del popup, con un hashtag «#» inicial, por ejemplo, “#newsletter-optin”
  6. Y eso es todo. Guarda la página y sal del editor visual. Haz clic en el botón y verás el popup funcionar ¡WOOHOO!

Características del plugin Popup for divi

  • Simple de usar, no requiere configuración
  • Es Flexible
  • Es rápido, tiene el código optimizado
  • La creatividad es el limite. Puedes diseñar cualquier elemento con Divi y hacerlo Popup
  • Es totalmente responsive
  • Los desarrolladores aman este plugin por su estable JavaScript API
  • Los creadores están respondiendo sus preguntas constantemente.
  • Y lo mejor, según el autor “Gratis para siempre”

Conclusión.

Siempre he mencionado que hay que ir con cuidado con los popups, pero en depende de que situación o necesidad, podría ser necesario usar esta funcionalidad. Con popup for divi puedes crear un popup totalmente personalizado dentro de Divi de una manera muy sencilla en menos de 60 segundos.

¿Te ha gustado el plugin? ¿Dinos qué piensas de esta funcionalidad?

22 Comentarios

  1. Miquel

    Estoy probando el plugin y en verdad tiene cosas muy chulas, incluyendo que he probado entrelazando varios popup en la misma página.

    Mi problema viene por que me abre el popup principal en el momento de intentar salir de la web o subir el puntero por encima de la web.

    Seguiré investigando.

    Responder
    • Jefferson M

      Qué tal Miguel. Debes desactivar la opción de “Enable Exit Intent” Esa opción déjala en Off. Con eso lo tienes resuelto. Un abrazo.

      Responder
  2. Maite

    Hola! Hago todos los pasos pero no me sale la ventana emergente. Yo creo que el problema está en cuando tengo que activar la ventana emergente, me podrías ayudar? Gracias!!

    Responder
    • Jefferson M

      Hola Maite, seguramente debes estar pasando por alto algún paso, por favor revísalo con detenimiento y vuélvelo a intentar.

      Responder
  3. Katherine

    Hola Jefferson, instalé el popup, pero en la versión móvil no me aparece, Me puedes ayudar con esto por fa! Gracias

    Responder
    • Jefferson M

      Revisa que tengas la última versión del plugin. Y tambien que tienes habilitada la sección del popup para móvil.

      Responder
  4. Cristian F

    Hola Jefferson, excelentes explicaciones, muchas gracias. En mi caso, seguí los pasos de instalación (realmente sencillos) pero nunca me aparece la pestaña de popup en las opciones de sección. Espero me puedas ayudar. Gracias

    Responder
    • Jefferson M

      Debes revisar que estés trabajando con las últimas versiones de Divi, así como que tengas correctamente activado el plugin. Tambien que no haya algún otro plugin que esté generando conflicto, o que tengas algún plugin de caché que te esté afectando.

      Responder
  5. juan

    Se utilizar para que el pop up se abra solo en un determinado momento? sin necesidad de presionar un botón ni nada, es decir regulando uno los segundos cuando queres que el pop up se dispare

    Responder
  6. Lulu G

    Esto es perfecto, justo lo que llevaba tiempo buscando!! Muchas gracias!! 😀

    Responder
  7. danny

    te consulto, si quiero hacer un formulario que se active con un click en una imagen y que una vez la gente deje su e-mail, lo dirija a otra pagina que seria el destino inicial, se puede?

    Responder
  8. Yecid

    Hola Jefferson, un pregunta, me funciona bien como “Exit Intent”, pedro si quiero que mi disparador sea la pagina al cargar, es decir que tan pronto entre a la pagina se salga el popup, este plugin me sirve?

    Responder
    • Jefferson M

      Échale un vistazo a la versión pro. Esa versión es la que te ofrece esa funcionalidad.

      Responder
  9. Daniel

    Muchas gracias, muy útil el tutorial

    Responder
  10. Webion

    Gracias, muy muy util 🙂

    Responder
  11. Anais

    ¡Hola Jefferson!
    Gracias por este fabuloso contenido!!! 😀
    Me gustaría colocar el popup en el Head de la web para hacer un boton “Te llamamos” y que se accione al pulsarlo, pero no logro dar con el código a integrar en el apartado “agregar código al head” del tema divi para que funcione.
    Mil Gracias por tu trabajo.

    Responder

Enviar un comentario

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

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

11 + 10 =


Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi