Easy Slide-Ins es un complemento de terceros para Divi y Extra que le permite crear diapositivas (y ventanas emergentes) utilizando el constructor Divi. Las diapositivas pueden mostrar cualquier cosa que se pueda construir con Divi Builder . Active las diapositivas con un porcentaje de desplazamiento, una intención de salida, un botón con múltiples ubicaciones y con una clase CSS. Incluye actualizaciones y demostraciones de por vida.
En este artículo, veremos Easy Slide-Ins y veremos lo que puede hacer y lo fácil que es usarlo. También veremos algunas de las demostraciones que se incluyen con el complemento. El complemento está disponible en el sitio web del desarrollador.
Primero, descomprima el archivo. Dentro de la carpeta, encontrará demostraciones, un archivo con un enlace a la documentación y el complemento Easy Slide-Ins.
Cargue y active el complemento de forma normal.
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.
Creación de 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 una gran cantidad de ajustes. 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 dispare automáticamente al desplazarse y elija la cantidad de desplazamiento. También puede configurarlo para que se abra al intentar salir. Establezca 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 el fondo del título y los colores del texto, y la familia de fuentes, el tamaño y el peso. Configure la redondez de las esquinas, la altura de la etiqueta y el ancho de la etiqueta. Muestre el ícono de cierre y elija los colores de fondo e ícono y el tamaño del ícono.
Los controles son intuitivos de usar y entender. 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 características 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 el deslizamiento en ciertos dispositivos.
La pestaña Campos personalizados le permite agregar campos personalizados como cualquier página o publicación.
Ejemplos fáciles de deslizar hacia adentro
Esta es la página de contacto del diseño de Gestión de riesgos. Estoy usando esto para construir la diapositiva para que el diseño se ajuste al diseño. He configurado para no mostrar la barra lateral o la navegación de puntos. Puede obtener una vista previa como una página estándar. Una vez que haya diseñado la diapositiva, publíquela normalmente.
Habilité 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 deslizable 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 cerrar. Cambié los colores de la etiqueta y el botón de cierre y redondeé más 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 la altura a 40 píxeles. Como puede ver en esta imagen, la etiqueta permanece en su lugar al desplazarse.
Se abre en pantalla completa e incluye el botón de cerrar.
Para este, agregué un nuevo deslizamiento en la barra lateral izquierda. Lo diseñé para que coincida con el sitio y dejé las esquinas de la etiqueta cuadradas. 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 desde la izquierda. Le di un ancho de píxel 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 de boletín informativo.
Los complementos le brindan 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 ninguna parte, pero se deslizará desde la dirección en la que colocó el deslizador. Este se colocó a la izquierda, por lo que viene de la izquierda. He establecido 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á que configurar los ajustes de diseño. He aquí un vistazo a algunos de ellos.
Este es un 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 imágenes.
Así es como se ve en la pantalla. He dejado todo en su forma predeterminada aquí, por lo que el botón aún muestra el texto, la ubicación y el estilo originales.
Este es un 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 prefabricada. Esto muestra qué tan receptivo es el deslizamiento (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 el deslizamiento.
Este es Guía a tus visitantes. Incluye un módulo de código (para Google Maps), varios anuncios publicitarios, texto y un formulario de contacto.
Así es como se ve en la página usando la configuración predeterminada.
Esta es 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 muestre el ancho completo si se desliza hacia adentro. Eliminé la etiqueta y lo configuré para que se muestre cuando el desplazamiento de la página alcance el 60%.
Aquí está 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 de Easy Slide-Ins
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 en la página de soporte y documentación del desarrollador . La página incluye un tutorial de cada uno de los puntos con imágenes para demostrarlos. La página también incluye un enlace a soporte por correo electrónico.
pensamientos finales
Easy Slide-Ins facilita la creación de diapositivas y ventanas emergentes para Divi y Extra. Me pareció 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 compras, 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 disparador automático lo convierten en una buena opción para crear correos electrónicos y ventanas emergentes de CTA. Abrir haciendo clic en la etiqueta es una buena manera de agregarlos a múltiples ubicaciones en sus páginas. Me gusta que pueda agregar varias 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 el deslizamiento desde el front-end, pero no vi cómo acceder a la configuración. Sin la configuración, no podía mover las etiquetas y ver su ubicación en tiempo real. Tuve que cargar una página para verlos. Todavía no era difícil de usar, pero había 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 usando 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