Cómo construir una ventana emergente con las interacciones de Divi 5 (descarga gratuita)

Las ventanas emergentes son una gran herramienta para captar la atención y la participación de la conducción en su sitio web. Ya sea que desee hacer crecer su lista de correo electrónico, promover una oferta especial o guiar a los visitantes hacia una acción específica, una ventana emergente bien diseñada puede marcar la diferencia. Con el lanzamiento de las interacciones Divi 5, la creación de ventanas emergentes dinámicas personalizadas nunca ha sido más fácil.

En esta publicación, lo guiaremos a través de la creación de una ventana emergente utilizando la función de interacciones de Divi 5. ¡Vamos a sumergirnos!

¿Qué son las interacciones Divi 5?

Divi 5 Interacciones es una nueva característica integrada en el Visual Builder, diseñado para hacer que los sitios web sean más dinámicos y atractivos. Le permite crear animaciones y respuestas personalizadas basadas en acciones del usuario o eventos de página, como clics, flotantes o desplazamiento. A diferencia de los diseños estáticos, las interacciones le permiten crear ventanas emergentes, alternar, movimientos del mouse y efectos de desplazamiento, todo con la interfaz familiar de Divi.

Suscríbete a nuestro canal de YouTube

Componentes clave de las interacciones Divi

Cada interacción en Divi 5 consta de tres componentes centrales:

• Disparador: el evento que inicia la interacción, como un clic, desplazamiento o un elemento que ingresa o sale de la ventana gráfica.
• Efecto: la acción que ocurre cuando se activa el disparador, como alternar la visibilidad, aplicar un estilo preestablecido o cambiar un atributo.
• Objetivo: el elemento específico afectado por la interacción, que puede ser el mismo elemento, otra sección, fila, columna o módulo en la página identificada por su etiqueta de administración.

Estos componentes funcionan juntos, lo que le permite crear interacciones complejas con una interfaz simple y sin código.

Por qué debería usar interacciones para crear ventanas emergentes

Las interacciones Divi 5 ofrecen varias ventajas para construir ventanas emergentes:

• No necesita ningún complemento: a diferencia de los constructores emergentes tradicionales, las interacciones Divi 5 se construyen directamente en el Visual Builder, eliminando la necesidad de complementos de terceros.
• Ubicado dentro del Visual Builder: puede construir ventanas emergentes utilizando la interfaz familiar, módulos y opciones de estilo de Divi, lo que facilita a los usuarios de cualquier nivel de habilidad.
• Opciones y efectos versátiles: combine las ventanas emergentes con otras interacciones, como animaciones basadas en desplazamiento o efectos de movimiento de ratones, para crear experiencias únicas y atractivas.
• Control completo: personalice los desencadenantes, los efectos y los objetivos para crear ventanas emergentes para sus objetivos específicos, todo sin escribir código.

Guía paso a paso para construir una ventana emergente en Divi 5

Crear una ventana emergente en Divi 5 es sencillo, lo que facilita la coincidencia del diseño existente de su sitio. En esta sección, demostraremos lo fácil que es crear una ventana emergente para que coincida con uno de nuestros diseños prefabricados, mostrarle cómo diseñarlo y establecer las interacciones para mostrar la ventana emergente con un retraso cronometrado.

1. Instale un paquete de diseño

Para este tutorial, simplificaremos las cosas comenzando con uno de nuestros diseños de paquete de diseño y luego construyendo una ventana emergente con los mismos estilos. Para hacerlo, haga clic en el icono + en la esquina superior izquierda del Visual Builder.

Cuando aparezca el cuadro de diálogo, elija un diseño prefabricado de las opciones disponibles.

Haga clic en la miniatura del paquete de diseño de aprendizaje en línea para resaltar las páginas disponibles.

Seleccione el diseño de la página de destino y haga clic en Usar este diseño para cargarlo en el Visual Builder.

El último paso para importar el paquete de diseño es elegir si importar presets. Después de tomar una decisión, haga clic en el botón Importar.

2. Cree una sección para la ventana emergente

Ahora que se importa el paquete de diseño, debemos crear una nueva sección para nuestra ventana emergente en la parte inferior de la página. Desplácese hasta el final de la página y agregue una nueva sección.

Haga clic en el icono para insertar una nueva fila. Elija la segunda opción en columnas de compensación .

3. Diseñe la ventana emergente

Ahora podemos comenzar a agregar contenido a nuestra ventana emergente. Cuando aparezca el cuadro de diálogo Insertar módulo o fila , haga clic para agregar un módulo de encabezado .

Ingrese "¿Quieres un 15% de descuento?" en el campo de encabezado debajo de la pestaña de contenido.

Para mantener los diseños consistentes en toda la página, puede usar la función de atributos de Divi 5 para copiar la configuración de otro módulo de encabezado para nuestra ventana emergente. En la sección directamente arriba, pase el módulo de encabezado, haga clic derecho y haga clic en Copiar atributos .

A continuación, pasee el módulo de encabezado que acabamos de crear, haga clic con el botón derecho, seleccione Pegar atributos y luego hacer clic en Pegar los atributos de diseño de texto . Esto pegará los estilos del otro módulo de encabezado, permitiendo la consistencia del diseño.

Debajo del módulo de encabezado, agregue un nuevo módulo de texto .

Al igual que con el módulo de encabezado, ubique el módulo de texto en la sección anterior, haga clic derecho y seleccione Copiar atributos . Desde allí, haga clic en el nuevo módulo de texto, toque Pegar atributos y luego pegar atributos de diseño de texto .

Puede agregar su texto al campo de texto o usar divi ai para generarlo para usted.

A continuación, agregaremos un módulo de opción de correo electrónico en el módulo de texto.

La sección anterior tiene un módulo de opción de correo electrónico, por lo que puede copiar sus atributos y pegarlos en la nueva opción de correo electrónico que agregamos a nuestra ventana emergente.

El último paso es agregar una imagen a la columna derecha de nuestra ventana emergente. Localice el módulo de imagen y agréguelo a la segunda columna de nuestro diseño.

Cargue una imagen y agréguela al módulo de imagen. En este punto, su sección debe parecer similar a esto:

4. Crea un botón de cierre

Ahora que el diseño de nuestra ventana emergente está en su lugar, necesitamos agregar una nueva fila encima para agregar un icono de botón de cierre. Esto permitirá a sus visitantes cerrar la ventana emergente a su conveniencia. Haga clic en el icono Green + para agregar una nueva fila.

Cuando aparezca el cuadro de diálogo Insertar fila , haga clic en el diseño de una sola columna en columnas iguales para agregarlo a la sección.

Haga clic para agregar un módulo de icono a la fila.

Seleccione el icono Cerrar de las opciones disponibles. Se puede ubicar fácilmente escribiendo "Cerrar" en el cuadro de búsqueda sobre la lista de iconos.

Cambie a la pestaña de diseño e ingrese la siguiente configuración de diseño:

• Color de icono: #5344b9
• Tamaño del icono: 36px
• Alineación: Correcto

El último paso es mover la fila por encima de la fila de dos columnas que contiene el contenido de nuestra ventana emergente. Use la vista de capas para reorganizar las filas en el orden correcto. Mientras esté allí, cambie el nombre de la sección a emergente .

5. Ajuste la configuración de la sección

Antes de crear nuestras interacciones, tenemos que asegurarnos de que la ventana emergente tenga el tamaño adecuado para el ancho del navegador. No queremos que sea una ventana emergente de ancho completo, así que navegue al diseño para hacer algunos ajustes. Expanda el menú desplegable de tamaño para revelar la configuración.

En el campo de ancho , ingrese al 80% para el ancho. A continuación, establezca la opción de alineación de la sección en el centro .

Debajo del borde , establezca un radio de borde de 10 px.

También agregaremos una sombra de caja para que nuestra ventana emergente se destaque sobre el resto del contenido. Localice el menú desplegable de la sombra de la caja y expanda. Bajo Box Shadow , elija Preset 1 .

Por último, diríjase a la pestaña de contenido para agregar un color para el fondo de nuestra sección emergente.

6. Cree la interacción para mostrar la ventana emergente

Con el diseño en su lugar, podemos establecer nuestras interacciones. Estableceremos nuestra sección emergente para mostrar 5 segundos después de que un usuario aterrice en la página. Navegue a la pestaña avanzada de la sección y localice el menú desplegable de interacciones . Haga clic en + Agregar interacción para comenzar.

Elija Carga de las opciones disponibles. Esta configuración permitirá que la ventana emergente aparezca en la carga de la página.

Cuando aparezca el cuadro de diálogo Editar interacción , ingrese la siguiente configuración y haga clic en Guardar :

• Etiqueta de administración: interacción emergente
• Evento de activación: carga
• Acción del efecto: Mostrar elemento
• Módulo de destino: sección (emergente)
• Retraso de tiempo: 5 segundos

A continuación, necesitamos agregar una interacción para nuestro botón de cierre. Seleccione el módulo de icono en la primera fila de nuestra sección emergente. Navegue a la pestaña Avanzada, haga clic en + Agregar interacción e ingrese la siguiente configuración y guarde:

• Etiqueta de administración: Pop-Up Close
• Evento de activación: haga clic
• Acción del efecto: alternar la visibilidad
• Módulo de destino: sección (emergente)
• Retraso de tiempo: 0

7. Pruebe y refine su ventana emergente con los puntos de interrupción sensibles de Divi 5.

Antes de continuar con el último paso, es una buena idea usar los puntos de interrupción sensibles de Divi 5 para garantizar que su ventana emergente se vea bien en todos los tamaños de pantalla. En Divi 5, ahora hay 7 puntos de interrupción para elegir.

Por defecto, solo tres están habilitados. Tener 7 le permite probar su ventana emergente en más puntos de interrupción, asegurando una experiencia de usuario perfecta con cualquier tamaño de pantalla. Para permitir todos los 7, haga clic en el menú Ellipsis en la parte superior de la barra de administración. A partir de ahí, habilite todos los puntos de interrupción al alternarlos.

El nuevo sistema de diseño FlexBox de Divi 5 le permite realizar fácilmente cambios para garantizar que su ventana emergente se vea muy bien en cualquier dispositivo. Por ejemplo, puede usar el campo de estructura de columna de cambio de Divi 5 para cambiar el número de columnas que se muestran en dispositivos más pequeños. Esta opción apilará el contenido en el móvil con un solo clic.

8. Establecer opciones de visualización

Para que su ventana emergente se muestre correctamente, necesitamos ajustar la visibilidad, el posicionamiento y el índice Z de la sección emergente. Esto permitirá que su ventana emergente muestre dónde desea, manténgala oculta hasta que se muestre y asegúrese de que aparezca por encima del resto del contenido de la página.

Navegue a la pestaña avanzada para la sección emergente. Localice el menú desplegable de visibilidad . Haga clic para deshabilitar la sección en todas las vistas (teléfono, tableta y escritorio).

A continuación, haga clic en el menú desplegable de posición. Establezca la posición para fijar y elija un origen de compensación. Finalmente, agregue un índice Z de 99999 para asegurarse de que la ventana emergente se muestre por encima del resto del contenido de la página.

Una vez que todas las configuraciones estén en su lugar, guárdelo y vista previa en otra pestaña. La ventana emergente debe mostrar en 5 segundos después de que se carga la página. También debería poder cerrar la ventana emergente utilizando la interacción cerrada que creamos.

Opciones avanzadas de personalización emergente

Las interacciones Divi 5 le permiten llevar su ventana emergente al siguiente nivel con características avanzadas como condiciones de visualización, combinar efectos o incluso usar divi ai para generar ventanas emergentes. Veamos algunas formas en que puede hacer que sus ventanas emergentes sean más avanzadas sin necesidad de fragmentos personalizados de CSS o JavaScript.

Visualización de condiciones

Puede usar las opciones de condición de Divi para mostrar la ventana emergente basada en el comportamiento del usuario, como los roles de usuario. Por ejemplo, puede mostrar la ventana emergente solo a los usuarios de registro de la salida para alentar las registros.

También puede habilitar las condiciones para mostrar la ventana emergente en función de las visitas de página. Por ejemplo, debe deshabilitar la ventana emergente si un usuario específico ya ha visitado la página. También puede configurarlo para mostrar solo si un usuario no ha visitado la página. Esto puede ser útil para los visitantes que encuentran su sitio a través de una página diferente y haga clic en la página de inicio a continuación.

Combinar efectos

Puede mejorar su ventana emergente con animaciones basadas en desplazamiento o efectos de movimiento del mouse. Estos se pueden agregar como interacciones adicionales seleccionando desencadenantes y efectos adicionales. Las interacciones se pueden combinar y no hay límite para el número que puede crear. Por ejemplo, puede aplicar fácilmente una interacción en la imagen en nuestra ventana emergente utilizando efectos de movimiento del mouse.

Integración de divi ai

Acelere el proceso de diseño utilizando divi ai para generar un diseño. Puede instruir a Divi AI para que cree secciones específicas, incluida una que puede convertir en una ventana emergente. En el siguiente ejemplo, le pedimos a Divi AI que creara un diseño para un entrenador de negocios, completa con una sección CTA que podemos convertir en una ventana emergente.

Las mejores prácticas para ventanas emergentes efectivas

Para garantizar que su ventana emergente mejore la experiencia del usuario e impulse los resultados, considere estas mejores prácticas:

1. Manténgalo fácil de usar

Evite las ventanas emergentes intrusivas utilizando retrasos cronometrados, entre 5 y 10 segundos, en lugar de desencadenantes inmediatos. Esto le da a los usuarios tiempo para interactuar con su contenido antes de que se le solicite. El lanzamiento de una ventana emergente demasiado pronto puede distraer, lo que hace que los usuarios cierren la ventana emergente y potencialmente se pierdan una promoción, registro del boletín o otra acción importante que desea que tomen.

Establezca un retraso cronometrado en su ventana emergente para evitar perder la participación del usuario.

Además, siempre incluya un botón de cierre claro e fácil de identificar para que los usuarios puedan descartar la ventana emergente y mantener una experiencia de navegación positiva.

2. Optimizar para el rendimiento

La optimización del rendimiento es crítica para ventanas emergentes efectivas. Para mantener los tiempos de carga rápido, minimice las animaciones pesadas o las imágenes grandes y no optimizadas. Opta por imágenes comprimidas y limite los efectos complejos para garantizar una experiencia rápida y perfecta, especialmente para los usuarios en conexiones más lentas o dispositivos móviles. Este enfoque mejora la satisfacción del usuario y admite una mejor participación y tasas de conversión.

3. Diseñe las ventanas emergentes con estándares de accesibilidad en mente

La accesibilidad es otra consideración clave para hacer que su ventana emergente sea inclusiva para todos los usuarios. Siempre agregue el texto alternativo descriptivo a las imágenes para ayudar a los lectores de pantalla, garantizar un alto contraste entre el texto y el fondo para la legibilidad, y use tamaños de fuentes de 16px o más grandes para acomodar a los usuarios con discapacidades visuales.

Estas prácticas ayudan a garantizar que su ventana emergente sea accesible para una audiencia diversa, alineándose con los estándares de accesibilidad web.

4. Prueba en todos los tamaños de pantalla

Finalmente, pruebe completamente su ventana emergente en todos los tamaños de pantalla para garantizar una experiencia consistente en todos los dispositivos. Aproveche los puntos de interrupción receptivos personalizables de Divi 5 para garantizar que su ventana emergente se vea genial y funciona como se pretende en escritorios, tabletas y teléfonos inteligentes.

Preste mucha atención al botón de cierre para asegurarse de que funcione como debería y ese texto es legible en pantallas más pequeñas. Además, verifique el espacio, el dimensionamiento y el diseño según sea necesario para proporcionar un aspecto profesional pulido.

Descargar los archivos

Descargar gratis

Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!

Crear ventanas emergentes con interacciones Divi 5

La función de interacciones de Divi 5 facilita la creación de una ventana emergente al permitirle construir diseños personalizados directamente dentro del Visual Builder. La combinación de desencadenantes, efectos y objetivos le permite crear ventanas emergentes que capturan la atención y generan conversiones mientras coinciden sin problemas con el diseño de su sitio. Explore otras características como grupos de módulos y filas anidadas para crear diseños emergentes aún más dinámicos.

¿Estás listo para probar Divi 5? Descargue el último alfa público de Divi 5, experimente con interacciones y comparta sus pensamientos en la sección de comentarios a continuación. Comparta sus creaciones con nosotros en nuestros canales de redes sociales y visite nuestro blog para obtener más tutoriales utilizando las características innovadoras de Divi 5. ¡Esperamos ver lo que creas!