Lo más destacado del complemento Divi: superposiciones Divi

Divi Overlays es un complemento para Divi de DiviLife , una empresa de desarrollo de Divi de terceros del miembro de la comunidad Tim Strifler. Le permite crear fácilmente ventanas emergentes usando Divi Builder . No es solo un modal. Puede crear superposiciones de pantalla completa y agregar cualquier tipo de contenido que desee en la superposición usando Divi Builder, y luego activarlo con cualquier cosa en la página, incluidos botones, enlaces, imágenes, etc. Puede ajustar los colores de fondo, fuente colores y seleccione la animación de apertura.

Las superposiciones pueden incluir formularios, tablas de precios, carritos de compras, videos, imágenes, enlaces de descarga, mapas y mucho más. Incluso puede configurarlo para que abra una superposición cuando se carga la página. Le permiten mostrar contenido adicional sin tener que esperar a que se cargue la página.

La capacidad de usar Divi Builder, por supuesto, significa que tiene acceso a todos los módulos y configuraciones para crear su superposición. Esto significa que tiene acceso a cerca de 40 módulos y puede usar códigos abreviados de otros complementos. Con el acceso a esta cantidad de módulos, solo está limitado por su imaginación.

Descargar: Divi Overlays Descargar

En esta descripción general, analizo la versión 1.1, que incluye algunas funciones nuevas solicitadas por los clientes. Al final, cubriré algunas de las funciones que puede esperar ver en la versión 2.0. Para los ejemplos, estoy usando el kit de estructura alámbrica multipropósito vol. 1 . Vamos a profundizar en…

Instalación

Cargue, instale y active el complemento como lo haría con cualquier complemento premium. Una vez que esté activado, deberá ingresar su clave de licencia. Vaya a Configuración y seleccione Activación de Superposiciones Divi en el tablero.

Ingrese la clave API y el correo electrónico (de su cuenta en DiviLife) y seleccione Guardar cambios . Ahora está listo para comenzar a crear superposiciones.

Agregar nueva superposición Divi

Las superposiciones se crean por separado de su contenido y luego se abren desde su contenido usando códigos simples.

Para crear una superposición, vaya a Superposiciones de Divi y seleccione Agregar nuevo en el tablero. Desde aquí puede seleccionar usar Divi Builder. Esto funciona igual que cualquier página o publicación normal usando Divi Builder, incluidos los complementos y módulos especiales de Divi, e incluso puede ejecutar pruebas A/B usando Divi Leads . Incluso funcionan en un módulo global. También puede importar y exportar sus superposiciones.

Elija la animación superpuesta y la configuración del cuadro desplegable en la esquina superior derecha. Debajo de Divi Builder hay una selección para el fondo y los colores de fuente.

Se agregan algunas configuraciones al lado derecho. Un cuadro llamado Divi Overlay Animation incluye un cuadro desplegable donde puede elegir entre 11 animaciones. Esto determina cómo aparece la superposición en la pantalla.

Se agrega una casilla de verificación para evitar que la página principal se desplace cuando hay una superposición en la pantalla. Esto mantiene al usuario en la misma ubicación en la pantalla para que cuando cierre la superposición sepa dónde está. Esto es especialmente útil si hicieron clic en uno de los muchos botones para abrir la superposición. De esta manera, saben en qué botón hicieron clic y no pierden su lugar en la pantalla.

Agregué un módulo de video y seleccioné Genie para la animación de superposición y seleccioné para evitar el desplazamiento de la página principal.

Ahora que he creado la superposición, puedo usarla en una página. Para hacer esto, vaya a Divi Overlays en el tablero y seleccione Divi Overlays para ver la lista de superposiciones disponibles. Para usar la superposición, copie el código que desea usar y péguelo en la ubicación adecuada. Echemos un vistazo a cómo hacerlo en detalle.

Los enlaces se crean usando la ID de CSS. Copie el ID de CSS y agregue etiquetas de apertura <a id= y cierre </a> como se muestra en el ejemplo.

En este ejemplo, estoy usando una página de destino. Quiero agregar un activador al texto, el logotipo de la tienda de aplicaciones, a la imagen del teléfono, crear un botón y colocar un enlace dentro del menú.

Enlace de texto

Copie el código corto de contenido y péguelo en un código o módulo de texto (cualquier módulo que acepte códigos cortos) en su página. Lo pegué en un módulo de código. Puede colocar tantos shortcodes Divi Overlay dentro de este módulo como desee. No importa dónde coloque el módulo. Le recomiendo que pruebe para asegurarse de que el módulo no afecte su diseño.

Quiero usar el texto VER UNA DEMO como enlace para abrir el video. Para hacer esto, copie la ID de CSS de la lista de superposiciones en la pantalla del tablero.

Pegue el código en su módulo de texto y formatee su texto de esta manera:

En este caso, el texto ya está incrustado en algún HTML, pero está bien. Simplemente haga que coloque el código en la ubicación correcta dentro del HTML.

El texto ahora es azul para mostrar que es un enlace.

Cuando hago clic en el texto, se me presenta el video al que coloqué un enlace dentro de la superposición. La superposición se abre con la animación que elegí.

Enlace de imágen

Hay dos formas de agregar la ID de CSS a una imagen. El método que debe usar dependerá de cómo se coloque la imagen dentro de su contenido. Aquí hay dos ejemplos:

Módulo de texto

Quería que se pudiera hacer clic en la imagen de la tienda de aplicaciones, pero en lugar de llevarte a la tienda de aplicaciones, quería que proporcionara algunas opciones e información. Esto requiere una nueva superposición, que también requiere un nuevo código abreviado dentro del módulo de código.

Ahora, cuando hago clic en el logotipo de la aplicación, aparece una superposición con enlaces a dos tiendas de aplicaciones diferentes. Para una mejor UX/UI, cambiaría el gráfico del botón, pero esto muestra el potencial de proporcionar múltiples opciones mientras se mantiene limpio el contenido. Para este ejemplo, configuré el fondo de superposición en blanco con una opacidad de 90 y el color de la fuente en gris oscuro.

Módulo de imagen

En el ejemplo anterior, agregué el código al HTML porque la imagen se colocó dentro del módulo de texto. Otra opción es colocar la imagen dentro de un módulo de imagen y usar la ID de CSS en la pestaña CSS personalizado .

En este diseño, el teléfono móvil está en un módulo de imagen. Agregaré la ID de CSS para que abra la superposición de video.

En la URL del enlace, use #open-overlay (o un texto similar con el símbolo #). Ahora puedo hacer clic en la imagen y abrir una superposición.

Enlace de botón

Agregar el enlace superpuesto a un botón es lo mismo que agregarlo a una imagen. Recuerde agregar el shortcode al módulo de código.

Agregue el texto # a la URL del botón. Usé #open-overlay como antes porque es descriptivo (y se lo robé a Tim Strifler, pero no se lo digas).

Agregue el código de ID de CSS a la pestaña CSS personalizado .

¡Y eso es! El nuevo botón ahora abre el formulario de contacto.

Enlace del menú

Para crear un enlace de menú, copie la ID del menú y vaya a Apariencia , Menús , seleccione el menú al que desea agregar el enlace y cárguelo. (Consulte este artículo Cómo crear estructuras de menú personalizadas en WordPress para obtener más información).

Seleccione Opciones de pantalla en la esquina superior derecha y marque la casilla etiquetada Relación de enlace (XFN) .

Seleccione Enlace personalizado . Agregue el símbolo # como enlace, agregue el texto que desea que se muestre y seleccione Agregar al menú . Pegue el ID de menú en el campo Relación de enlace y guarde el menú. Asegúrese de asignar el menú a una ubicación de visualización en Configuración del menú si aún no lo ha hecho. En este ejemplo, lo configuré en Menú principal .

El elemento del menú ahora aparece dentro de la estructura del menú. Al hacer clic en él, se abrirá la superposición. Esto tiene la ventaja de proporcionar un CTA (llamado a la acción) dentro de la estructura de navegación y en todo el sitio.

Widget

El complemento también incluye una nueva área de widgets. La diferencia entre usar el widget y cualquiera de los otros métodos es dónde colocas el shortcode. En lugar de colocar el shortcode dentro de los módulos una y otra vez, puede colocarlo una vez, haciéndolo global. Luego puede activarlo desde cualquier elemento en cualquier página, desde la barra lateral, el menú principal o el menú de pie de página.

Esta es la página que estoy usando del kit de estructura alámbrica multipropósito vol. 1 . Quiero que se pueda hacer clic en el botón para que se abra el video en una superposición. Agregué mis códigos abreviados al área del widget (colocándolos dentro de un widget de texto) y agregué la ID de CSS a la imagen en la página.

Los códigos cortos en el widget funcionan sin que el widget sea visible. No tuve que colocar una barra lateral en la página ni ningún widget en el pie de página. Simplemente funciona porque esta nueva área de widgets se carga detrás de escena. Si coloca otros widgets en esta área de widgets, se mostrarán en la esquina superior izquierda de la página. Los códigos cortos no se muestran como texto de forma predeterminada, por lo que el widget puede permanecer invisible.

Cerrar la superposición

Las superposiciones se pueden cerrar con la X en la esquina, haciendo clic en el fondo de la superposición o presionando la tecla Escape.

Otra opción es agregar una clase cercana a un enlace dentro de la superposición. Con este método, puede crear un botón de cierre o texto. Esto le permite agregar un botón de cancelar a su CTA o hacer que el botón de cerrar sea más visible.

La clase cerrada se ve así:

class = “close-divi-overlay”>No, gracias

Próximamente en 2.0

Aquí hay algunas características que esperar:

Una función de retraso de tiempo permitirá que la superposición se abra en función de un tiempo establecido después de que se haya cargado la página, lo que permite al lector ver su contenido durante un período de tiempo específico antes de abrir automáticamente la superposición.

Una función de píxeles abrirá la superposición según la cantidad de píxeles que se hayan desplazado o el porcentaje de la página que se hayan desplazado.

Otra opción abrirá la superposición cuando el lector seleccione el botón Atrás o coloque el cursor sobre la barra de direcciones.

Documentación

La documentación se proporciona en el sitio web de DiviLife. Incluye una descripción general y ejemplos de las diversas formas en que puede usar el complemento. La documentación incluye texto, video y código de muestra.

Precios

Divi Overlays es un complemento premium . Cuesta $ 15 para usar en un solo sitio, $ 29 para tres sitios, $ 59 para sitios ilimitados y $ 129 para la licencia ilimitada de por vida. Cada una de las licencias incluye todas las características principales y la documentación. Los primeros tres incluyen un año de actualizaciones y soporte, mientras que el último incluye actualizaciones y soporte de por vida.

Pensamientos finales

Divi Overlays es una excelente manera de crear superposiciones utilizando Divi Builder. Divi Builder le permite agregar prácticamente cualquier tipo de contenido a la superposición utilizando los módulos Divi o códigos cortos de otros complementos. Es difícil imaginar una superposición que Divi Overlays no pueda crear. Se necesitan un par de pasos para agregar código donde sea necesario, pero es fácil de hacer y la documentación lo guía a través de él. La recompensa supera con creces los pocos minutos que lleva aprender a usarlo.

¡Queremos escuchar de ti! ¿Has probado las superposiciones de Divi? Cuéntanos tu experiencia en los comentarios.

Imagen destacada a través de brickclay / shutterstock.com