Respaldo del complemento de la Divica: luz de deslizamiento

Easy Slide-Ins es un complemento de terceros para DIV y extra que le permite crear diapositivas (y ventanas emergentes) utilizando el generador de divicidad. El control deslizante puede mostrar lo que se pueda construir con Divi Builder. Encienda las diapositivas con un porcentaje, intención de salida, un botón con múltiples ubicaciones y una clase CSS. Incluye actualizaciones y demostraciones a lo largo de la vida. En este artículo, analizaremos las diapositivas fáciles y veremos lo que puede hacer y fácil de usar. También echaremos un vistazo a algunas de las demostraciones incluidas en el complemento. El complemento está disponible en el sitio web del desarrollador.
Instalación fácil de deslizamiento

Primero, descomprima el archivo. En el archivo, encontrará demostraciones, un archivo con un enlace a la documentación y los fáciles de deslizamiento.

Cargue y active el complemento normalmente.

Se agrega un nuevo menú al tablero llamado fácil deslizamiento. Haga clic en este menú e ingrese la clave de licencia.

La activación de la licencia agrega dos elementos de menú (todos los artículos y agregue nuevos) en los que puede ver las diapositivas y crear nuevas diapositivas. Creando un nuevo deslizamiento

Si hace clic para agregar una nueva diapositiva, se abre un editor en el que puede usar Divi Builder para crear el deslizamiento.

También incluye muchas configuraciones. Se colocan bajo el constructor Div. Elija la posición a la izquierda, derecha, superior a la izquierda, a la derecha derecha, abajo a la izquierda, abajo a la derecha, una barra superior, una barra inferior, una barra lateral izquierda o una barra lateral derecha. Configure para activar automáticamente el desplazamiento y elija la cantidad de desplazamiento. También puede configurarlo para abrir a la intención de salir. Establezca el color de fondo, el tono de la caja y el ancho de deslizamiento. Muestre el título e ingrese el texto que se mostrará. Elija el fondo y los colores del texto, así como la familia de fuentes, el tamaño y el peso. Establezca el redondeo 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 estilizar la etiqueta para adaptarse a su sitio web y controlar cómo funcionan las presentaciones.
Otras características se agregan o eliminan de acuerdo con las opciones que elija. Hemos seleccionado Box Shadow y ahora ofrece opciones para la posición horizontal y vertical, el desvanecimiento y la intensidad de la propagación y el color.

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

La pestaña de campo personalizada le permite agregar campos personalizados como cualquier página o publicación. Ejemplos de diapositivas de luz

Esta es la página de contacto en el aspecto de gestión de riesgos. Utilizo esto para construir deslizamiento para que el diseño se ajuste al look. He configurado no mostrar la barra lateral o la navegación por puntos. Puede obtener una vista previa de lo mismo que una página estándar. Después de crear la diapositiva, normalmente se publicó. Activé la etiqueta en la configuración y establecí el fondo en negro y texto en blanco. Mantuvimos el texto predeterminado (contáctenos). Lo puse para mostrar en la esquina superior derecha. Utiliza la altura predeterminada, pero se puede cambiar fácilmente.

Si hace clic en la etiqueta, se abre la diapositiva, que se muestra en la pantalla, mostrando el formulario de contacto en el paquete de gestión de riesgos. Si hace clic en el botón de contacto nuevamente, cerramos el deslizamiento. Tengo el ancho de deslizamiento en 500 píxeles, la altura de la etiqueta en 150 y el ancho de la etiqueta a 60.

El ejemplo muestra la sombra de la caja. Cambié la ubicación en la barra lateral derecha que muestra el botón de cierre. Cambié los colores de la etiqueta y el botón de cierre e hice que las esquinas de la etiqueta fueran más redondeadas. También establecemos el ancho de las diapositivas a 600 píxeles.

Para esto, moví la etiqueta a la posición superior de la barra. Usé colores en apariencia 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 posición en el pergamino.

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

Para esto, agregué un nuevo deslizamiento a la barra lateral izquierda. Lo diseñé para adaptarse al sitio y dejé las esquinas de la etiqueta al cuadrado. Utilizo el margen superior de la etiqueta en un 50%, lo que coloca la parte superior de la etiqueta en el centro de la altura de la pantalla. Se abre desde la izquierda. Le di un ancho de 1000 píxeles, por lo que cubre una gran parte de mi pantalla. La diapositiva de contacto todavía se muestra en la parte superior, incluso si el menú está cubierto por la presentación del boletín informativo.

Los controles deslizantes le dan un botón en el botón. Puede usar esto con botones para abrir el deslizamiento.

Copie la clase y pegue al campo de clase CSS del botón.


Ahora, hacer clic en el botón abre el deslizamiento. No debe haber etiquetas en ningún lado, pero se deslizarán desde la dirección en la que colocó la diapositiva. Se colocó a la izquierda, por lo que viene de la izquierda. Establecí el ancho en 1000 píxeles. Demostraciones fáciles para diapositivas

El archivo de descarga incluye 12 demostraciones. Estos son modelos prealizados (archivos JSON) que puede cargar en la biblioteca de la Divic. Importarlos a la biblioteca de la Divic como modelos ordinarios. Estos incluyen módulos de estilo, pero deberá configurar la configuración de diseño. Éstos son algunos de ellos.

Este es el correo electrónico de colección con la intención de salir. 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 de forma 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 la intención de desplazarse. 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 utilizando la configuración prefabricada. Esto muestra cuán receptivo es el deslizamiento (exactamente lo que esperaríamos, porque muestra una división). Si desea mostrar más imágenes, deje que la diapositiva sea más amplia. Esta es la guía de visitantes. Incluye un módulo de código (para Google Maps), más borrones, texto y un formulario de contacto.

Así es como parece la página usando la configuración predeterminada.

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

Así es como se ve en la pantalla. Lo configuré en 800 píxeles, para mostrar el ancho completo si se ingresó la diapositiva. Eliminé la etiqueta y la configuré para que se muestre cuando la página se alcanza el 60%.

Aquí está el mismo aspecto cuando se ve con extra. Me alegra ver que funciona excelente con div y extra.

Precio y documentación fácil para diapositivas

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 a lo largo de la vida.

La documentación se proporciona en la página de documentación y asistencia del desarrollador. La página incluye una presentación general de cada punto con imágenes para demostrarlas. La página también incluye un enlace a la asistencia por correo electrónico. Pensamientos finales fáciles de deslizar sobre las diapositivas facilitan la creación de diapositivas y ventanas emergentes para div y extra. Me resultó fácil de usar. Nunca necesité documentación, pero está allí si es necesario. Es una forma interesante de traer elementos de página ocultos. Dado que cualquier cosa se puede usar en deslizamiento, puede mostrar formularios de contacto, boletín de información, llamadas de acción, videos, módulos de tiendas, etc. Puede ser un solo módulo o una página completa. Me gusta tener más opciones de activación. La salida intencional y el disparador automático lo convierten en una buena opción para crear ventanas emergentes y CTA. Abrir haciendo clic en la etiqueta es una buena manera de agregarlos a varias ubicaciones en sus páginas. Agregar la clase CSS a los botones es una excelente manera de revelar información cuando el visitante elige verlos. Puede construir el front-end deslizante, pero no vi cómo acceder a la configuración. Sin configuración, no pude mover las etiquetas y no puedo ver su ubicación en tiempo real. Tuve que cargar una página para verlos. Todavía no fue difícil de usar, pero fue un poco de suposiciones involucradas. Esto es tan menor que no me evitaría usarlo o recomendarlo.