Resaltado del complemento Divi: Deslizables fáciles


Easy Slide-Ins es un complemento de terceros para Divi y Extra que le permite crear diapositivas (y ventanas emergentes) utilizando el generador Divi. Las diapositivas pueden mostrar cualquier cosa que se pueda construir con Divi Builder. Active las diapositivas con un porcentaje de desplazamiento, intención de salida, un botón con varias ubicaciones y con una clase CSS. Incluye actualizaciones y demostraciones de por vida.

En este artículo, analizaremos Easy Slide-Ins y veremos qué puede hacer y qué es fácil de usar. También echaremos un vistazo a algunas de las demostraciones que se incluyen con el complemento. El complemento está disponible en sitio web del desarrollador.

Instalación de Easy Slide-Ins

Primero, descomprime el archivo. Dentro de la carpeta, encontrará demostraciones, un archivo con un enlace a la documentación y el complemento Easy Slide-Ins.

Sube y activa el complemento como de costumbre.

Se agrega un nuevo menú al tablero llamado Easy Slide-Ins. Haga clic en este menú e ingrese su clave de licencia.

La activación de la licencia agrega dos elementos de menú (Todos los elementos y Agregar nuevo) donde puede ver sus diapositivas y crear nuevas diapositivas.

Crear una nueva diapositiva

Al hacer clic para agregar una nueva diapositiva, se abre un editor donde puede usar Divi Builder para crear la diapositiva.

También incluye muchas configuraciones. Se colocan debajo del Divi Builder. Elija la posición de izquierda, derecha, arriba a la izquierda, arriba a la derecha, abajo a la izquierda, abajo a la derecha, barra superior, barra inferior, barra lateral izquierda o barra lateral derecha. Configúrelo para que se active automáticamente al desplazarse y elija la cantidad de desplazamiento. También puede configurarlo para que se abra con la intención de salida. Configure el color de fondo, la sombra del cuadro y el ancho de deslizamiento.

Muestre el título e ingrese el texto para que se muestre. Elija los colores de fondo y texto del título, así como la familia, el tamaño y el peso de la fuente. Configure la redondez de la esquina, la altura de la etiqueta y el ancho de la etiqueta. Muestre el icono de cierre y elija el fondo y los colores del icono y el tamaño del icono.

Los controles son intuitivos de usar y comprender. Hay suficientes ajustes para diseñar la etiqueta para que coincida con su sitio web y controlar cómo funcionan las diapositivas.

Se agregan o eliminan otras funciones según las opciones que elija. Seleccioné Box Shadow y ahora ofrece opciones para la posición horizontal y vertical, el desenfoque y la fuerza de dispersión y el color.

La pestaña Avanzado le permite elegir las páginas en las que se puede mostrar la diapositiva. Puede seleccionar todas las páginas, páginas individuales y todas las publicaciones. Puede ocultar la diapositiva en ciertos dispositivos.

La pestaña Campos personalizados le permite agregar campos personalizados como cualquier página o publicación.

Ejemplos de diapositivas fáciles

Esta es la página de contacto del diseño de Gestión de riesgos. Estoy usando esto para crear la diapositiva para que el diseño se ajuste al diseño. He configurado para no mostrar la barra lateral ni la navegación por puntos. Puede obtener una vista previa como en una página estándar. Una vez que haya diseñado la diapositiva, publíquela con normalidad.

He habilitado la etiqueta en la configuración y configuré el fondo en negro y el texto en blanco. Mantuve el texto predeterminado (Contáctenos). Lo configuré para que se muestre en la esquina superior derecha. Esto está usando la altura predeterminada, pero se puede cambiar fácilmente.

Al hacer clic en la etiqueta, se abre la diapositiva, que se muestra sobre la pantalla que muestra el formulario de contacto del paquete de diseño de Gestión de riesgos. Al hacer clic en el botón Contáctenos nuevamente, se cierra la diapositiva. Tengo el ancho de deslizamiento establecido en 500 píxeles, la altura de la etiqueta en 150 y el ancho de la etiqueta en 60.

El ejemplo muestra la sombra del cuadro. Cambié la ubicación a la barra lateral derecha, que muestra el botón de cierre. He cambiado los colores de la etiqueta y el botón de cierre y he redondeado las esquinas de la etiqueta. También configuré el ancho de las diapositivas en 600 píxeles.

Para este, moví la etiqueta a la posición de la barra superior. Usé colores del diseño y cambié el ancho a 122 píxeles y el alto a 40 píxeles. Como puede ver en esta imagen, la etiqueta permanece en su lugar en el scroll.

Se abre en pantalla completa e incluye el botón de cierre.

Para este, agregué una nueva diapositiva en la barra lateral izquierda. Lo diseñé para que coincida con el sitio y dejé las esquinas de la etiqueta al cuadrado. Estoy usando un margen superior de etiqueta del 50%, que coloca la parte superior de la etiqueta en el centro de la altura de mi pantalla.

Se abre por la izquierda. Le di un ancho de píxeles de 1000, por lo que cubre gran parte de mi pantalla. La diapositiva de contacto todavía se muestra en la parte superior, aunque el menú está cubierto por la diapositiva del boletín.

Las diapositivas le dan una clase de disparador de botón. Puede usar esto con botones para abrir la diapositiva.

Copie la clase y péguela en el campo Clase CSS del botón.

Ahora, al hacer clic en el botón se abre la diapositiva. No es necesario que haya etiquetas en ningún lugar, pero se deslizará hacia adentro desde la dirección en la que colocó la diapositiva. Este se colocó a la izquierda, por lo que viene de la izquierda. Establecí el ancho en 1000 píxeles.

Demostraciones fáciles de deslizar

El archivo de descarga incluye 12 demostraciones. Estos son diseños prefabricados (archivos JSON) que puede cargar en la biblioteca Divi. Importarlos a la biblioteca Divi como diseños regulares. Incluyen módulos con estilo, pero tendrás que configurar los ajustes de diseño. Éstos son algunos de ellos.

Este es el correo electrónico de colección con intención de salida. Incluye varios módulos de texto, un formulario de contacto y un módulo de imagen.

Así es como se ve en la pantalla. Dejé todo en la configuración predeterminada aquí, por lo que el botón aún muestra el texto, la ubicación y el estilo originales.

Este es el correo electrónico de colección con intención de desplazamiento. Incluye una imagen de fondo, dos módulos de texto y un módulo de correo electrónico.

Así es como se ve en la página usando la configuración predefinida. Esto muestra la capacidad de respuesta de la diapositiva (que es exactamente lo que esperaríamos, ya que muestra un diseño Divi). Si desea mostrar más de la imagen, simplemente amplíe la diapositiva.

Éste es Guíe a sus visitantes. Incluye un módulo de código (para Google Maps), varios anuncios, texto y un formulario de contacto.

Así es como se ve en la página con la configuración predeterminada.

Esta es una promoción con una etiqueta. Incluye un módulo de texto, varias tablas de precios y un botón.

Así es como se ve en la pantalla. Lo configuré en 800 píxeles para que mostrara el ancho completo si la diapositiva entra. Quité la etiqueta y la configuré para que se muestre cuando el desplazamiento de la página alcance el 60%.

Este es el mismo diseño cuando se ve con Extra. Me alegra ver que funciona muy bien tanto con Divi como con Extra.

Precio y documentación fáciles de deslizar

Easy Slide-Ins está disponible en el sitio web del desarrollador. Tiene dos opciones de compra:

  • Sitio único – $ 27
  • Sitios ilimitados – $ 97

Ambas licencias incluyen demostraciones y actualizaciones de por vida.

La documentación se proporciona con el desarrollador página de documentación y soporte. La página incluye un recorrido por cada uno de los puntos con imágenes para demostrarlos. La página también incluye un enlace al soporte por correo electrónico.

Pensamientos finales

Easy Slide-Ins facilita la creación de diapositivas y ventanas emergentes para Divi y Extra. Lo encontré fácil de usar. Nunca necesité la documentación, pero está ahí si es necesario. Es una forma interesante de incorporar elementos de página ocultos. Dado que se puede usar cualquier cosa en la diapositiva, puede mostrar formularios de contacto, suscripciones a boletines, llamadas a la acción, videos, módulos de la tienda, etc. Puede ser un módulo único o un diseño de página completa.

Me gusta que tiene múltiples opciones de activación. La intención de salida y el disparo automático lo convierten en una buena opción para crear ventanas emergentes de correo electrónico y CTA. Abrir haciendo clic en la etiqueta es una buena forma de agregarlos a múltiples ubicaciones en sus páginas. Me gusta que pueda agregar múltiples diapositivas en una sola página y que pueda determinar en qué páginas se muestran. Agregar la clase CSS a los botones es una excelente manera de revelar información cuando el visitante elige verla.

Puede crear la diapositiva desde la interfaz, pero no vi cómo acceder a la configuración. Sin la configuración, no podría mover las etiquetas y ver su ubicación en tiempo real. Tuve que cargar una página para verlos. Aún así, no fue difícil de usar, pero hubo algunas conjeturas involucradas. Esto es tan pequeño que no me impediría usarlo o recomendarlo.

Si está buscando una forma simple e intuitiva de crear diapositivas con Divi Builder, vale la pena echarle un vistazo a Easy Slide-Ins.

Queremos escuchar de ti. ¿Has probado Easy Slide-Ins para Divi? Háganos saber lo que piensa al respecto en los comentarios.

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