Lo más destacado del complemento Divi: Solución de superposición simple


Encuéntrelo en Divi Marketplace

Divi SOS está disponible en Divi Marketplace! Eso significa que ha pasado nuestra revisión y se ha determinado que cumple con nuestros estándares de calidad. Puedes visitar Super vuelo en el mercado para ver todos sus productos disponibles. Los productos comprados en Divi Marketplace vienen con un uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días (al igual que Divi).

Compra en Divi Marketplace

Solución de superposición simple es un complemento de terceros para Divi que facilita la creación de superposiciones de pantalla completa, ventanas emergentes y mega menús con Divi Builder. Agrega varias superposiciones a cualquier página. Elija entre un clic o un disparador de retardo temporizado automático, un cargador claro u oscuro y un fondo claro u oscuro. Diseñe el botón de cierre o cree su propio fondo y botones con Divi Builder. Cada superposición tiene una cookie de 30 días.

Solución de superposición simple

Sube y activa el complemento como de costumbre. Luego, deberá activar la licencia. En el menú del panel, vaya a Configuraciones > Activación Divi SOS e ingrese su clave API y correo electrónico.

Importar muestras de SOS

El complemento SOS viene con un conjunto de demostraciones como un archivo JSON que puede importar a la biblioteca SOS. Primero, descomprima el archivo de descarga para acceder al archivo JSON. Estos son geniales para comenzar.

En el menú del panel, vaya a Divi > llamada de socorro. Seleccione Importar y exportar.

Importe el archivo JSON como cualquier diseño.

Ahora tiene 5 demostraciones en la biblioteca SOS. Puedes ver el población en el sitio web del desarrollador.

Creación de diseños SOS

Los diseños SOS también se crean en la biblioteca SOS. Vaya a la biblioteca y haga clic en Agregar nuevo.

Nombra el diseño con algo que tenga sentido para ti. Escoger Diseño para el Tipo de diseño.

Seleccione Diseños SOS para la categoría.

Elegí un diseño prediseñado y luego seleccioné la página Contacto del paquete de diseño del Resort. A la derecha (o en la parte inferior si está viendo en modo visual) está la configuración de diseño. Esto le proporciona el código HREF para el diseño para que pueda activarlo en cualquier página (en cualquier lugar que permita una URL). Este es el enlace que utilizará para botones, texto, etc., para activar la superposición.

También puede hacer que se muestre automáticamente (esto abre una configuración de tiempo y para habilitar una cookie para que sepa que el visitante ha visto la superposición o la ventana emergente). Establezca la transición en fundido, deslizamiento o ninguna. Elija un fondo claro, oscuro o sin fondo. Seleccione un color de cargador claro u oscuro. Seleccione si desea mostrar o no el botón de cierre. Puede diseñar el botón y su fondo.

El cargador puede ser claro u oscuro. Aquí está el cargador oscuro sobre un fondo claro.

Ejemplo de superposiciones SOS

Estoy creando una superposición que mostrará la información de la reserva cuando el visitante haga clic en el Reserve su escapada botón. Agregue el enlace a la URL de su botón para activar la superposición.

Configuré el fondo de la sección en transparente, elegí un fondo claro en la configuración de SOS y personalicé el diseño para usar solo una de las secciones. Al hacer clic en el Reserve su escapada El botón abre la sección para reservar la estancia. El fondo incluye la superposición blanca. También agregué el botón de cierre y lo diseñé para que coincida con el diseño. El diseño se coloca en la parte superior de la pantalla y ocupa todo el ancho. Esto se puede personalizar con relleno.

Agregué un poco de relleno en la parte superior de la sección. También he desactivado el fondo para poder controlarlo con Divi Builder.

Para este, estoy usando el formulario de contacto del mismo diseño. Esta vez, agregué una sombra de cuadro a la fila inferior para que se destaque del fondo de la superposición.

Agregué el enlace a un botón en la misma página que la primera superposición (puede agregar tantos como desee). Este abre un formulario de contacto cuando hacen clic en el Envíanos un mensaje botón.

El resultado parece interesante. No agregué un botón de cierre a este. El visitante puede hacer clic en cualquier parte del formulario para cerrar la superposición. Agregué un fondo a la fila y establecí la opacidad para que solo se vea un poco del fondo.

Este usa una sección del diseño de la Compañía de Inversiones. Quiero crear una ventana emergente con una llamada a la acción. Lo configuré para que se muestre automáticamente con un retraso de 1000 milisegundos. Cuando se muestra automáticamente, no es necesario que agregue el vínculo en ninguna parte. Se muestra automáticamente en cada página. También configuré la cookie para que solo muestre la ventana emergente una vez cada 30 días.

La ventana emergente muestra 1 segundo después de que se carga la página. Esto crea un CTA como una ventana emergente y solo se mostrará una vez cada 30 días. No se puede decir en esta imagen, pero también le di un fondo de paralaje, solo porque sí. Esto le permite ser tan creativo con las ventanas emergentes como con cualquier diseño de página.

Voy a mover la opción de cerrar del botón en la esquina superior derecha a un botón creado con Divi Builder. Cloné el botón del diseño, cambié el texto y agregué el enlace de cierre a la URL.

El resultado es un diseño limpio que funciona muy bien como CTA.

Volví al diseño y agregué un nuevo fondo y un botón que abre otra página.

Para este, creé una ventana emergente de boletín basada en el diseño de Esports. Configuré la ventana emergente para que se abra automáticamente después de 30 segundos. El fondo se establece en oscuro y el cargador se establece en claro. También incluiré un botón de cierre usando colores del diseño.

La ventana emergente de suscripción se ve muy bien y encaja perfectamente con el diseño del sitio porque en realidad es del diseño del sitio. Me gusta que pueda usar diseños Divi regulares para crear las ventanas emergentes.

Mega menús

También puede crear mega menús con SOS. Cree un vínculo personalizado como elemento de menú y luego agregue el vínculo de la superposición a la URL del elemento de menú.

He añadido la superposición a la Acerca de enlace en mi menú deslizante. Puede tener una superposición diferente para cada enlace en el menú si lo desea, y pueden ser cualquier cosa que pueda construir con Divi.

Precio de la solución de superposición simple

Hay dos licencias para SOS. Ambos tienen una tarifa única e incluyen actualizaciones de por vida.

  • 1 sitio web y 1 sitio de desarrollo – $ 25
  • Sitios web ilimitados – $ 45

Puede comprar SOS en el sitio web del desarrollador.

Pensamientos finales

Simple Overlay Solution es fácil de usar. Los controles simples e intuitivos. Construir las superposiciones es casi lo mismo que construir una página con Divi. Si puede usar Divi Builder, puede usar SOS. Las páginas Divi se cargan rápido porque las superposiciones no están precargadas. Las superposiciones y las ventanas emergentes también se cargan rápidamente.

Me gusta que tenga galleta. Esto le da cierto control sobre sus ventanas emergentes para que el mismo visitante no tenga que ver la oferta cada vez que visite el sitio web. Estoy seguro de que no sería fácil de hacer, pero me gustaría ver algunas opciones de cookies. Por ejemplo, puede configurarlo para que se muestre una vez por semana, una vez al día, dos veces al mes, etc. Algunas opciones de cargador también serían buenas. Quizás diferentes opciones y personalizaciones de color. También me gustaría poder excluir una página para que no muestre las superposiciones automáticas.

Me gusta que se pueda usar un botón Divi normal para el botón de cierre. Esto abre muchas posibilidades de diseño y no está limitado a usar el botón integrado. Si desea utilizar el botón, tiene muchas opciones de color.

SOS es un complemento fácil de recomendar. Si está interesado en una manera fácil de crear superposiciones, ventanas emergentes y mega menús con Divi Builder, Simple Overlay Solution (SOS) podría ser el complemento que necesita.

Queremos escuchar de ti. ¿Ha probado el complemento Simple Overlay Solution para crear superposiciones y ventanas emergentes? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de Bakhtiar Zein / shutterstock.com