Divi Builder Addons es un complemento de terceros que agrega una gran cantidad de scripts jQuery que utilizan los sitios web de alta gama a Divi Builder. Simplemente alterne los scripts que desee y agregue las clases de CSS a los módulos de Divi Builder. Es fácil de usar e incluye muchas características y animaciones.
Cargue y active el complemento de forma normal. Se agrega un nuevo elemento de menú al menú del tablero llamado Ultimate Divi Builder Addons. Al hacer clic en esto, se abre una pantalla con muchas funciones en la ventana izquierda. Al hacer clic en cualquiera de ellos, se muestra un interruptor e información en la ventana derecha. La ventana derecha también incluye clases CSS para algunos de los efectos y muestra cómo usarlos. Otros incluyen múltiples conmutadores para más funciones y opciones, como colores, tamaños de imagen, duraciones, etc. Todos están deshabilitados de manera predeterminada.
Las funciones que se muestran en púrpura están habilitadas, mientras que las que están atenuadas están deshabilitadas. En el ejemplo anterior, la función incluye otras opciones además de una clase CSS. Toda la información que necesita sobre cómo usar una función en particular se muestra en la ventana derecha cuando hace clic en ella.
Las características incluyen:
- Barra de desplazamiento personalizada
- Deslizar Horizontal
- Desvanecerse en la vista
- Voltear texto
- Ocultar el encabezado del tema Divi al desplazarse hacia abajo
- jQuery Cambio de página Desplazamiento vertical
- jQuery Cambio de página Desplazamiento horizontal
- flujo de desplazamiento de jQuery
- jQuery ScrollFX
- Activador de desplazamiento de jQuery
- Cuadro de página final de jQuery
- Cargando encabezado mientras se desplaza Effect1
- Cargando encabezado mientras se desplaza Effect2
- Cargando encabezado mientras se desplaza Effect3
- Cargar encabezado mientras se desplaza Effect4
- Animación del revelador
- Duración de respuesta de ScrollMagic
- DesplazamientoRevelar
- StickyStack: efecto de apilamiento de jQuery
- Desplazamiento de ventanas
- Rotador de texto súper simple/Ticker
- Guau Animación
Ejemplos de complementos de Ultimate Divi Builder
Aquí hay algunos ejemplos de las características cuando se usan con diseños Divi .
Barra de desplazamiento personalizada
La barra de desplazamiento personalizada le permite colocar barras de desplazamiento en su contenido. Tiene 8 efectos diferentes. Pegue la clase CSS en el campo Clase CSS de la sección, fila o módulo donde desea usar el efecto. En este, agregué un efecto de barra de desplazamiento personalizado al contenido del módulo de texto en el diseño de Esports.
Ahora aparece una barra de desplazamiento al pasar el mouse para que pueda desplazarme y ver más contenido en el mismo espacio. Este es el efecto 1. Tiene un diseño diferente en el sitio en vivo. He aclarado el fondo para que destaque.
Este es el efecto 3. Agrega flechas en la parte superior e inferior de la diapositiva.
El efecto 5 cambia el controlador de una línea a un punto y cambia el estilo de las flechas.
Voltear texto
Flipping Text es un efecto de escritura de texto que crea una animación de introducción. Tiene 5 efectos. Para este ejemplo, agregué Flipping Text al diseño Paralegal. Este es el primer efecto de escritura Flipping Text. Escribe una letra a la vez. Hay varias clases diferentes que puede utilizar. Cada uno escribe a una velocidad diferente.
flujo de desplazamiento de jQuery
jQuery Scroll Flow agrega animaciones de desplazamiento a filas o módulos. Tiene 5 animaciones. He agregado este a una fila en el diseño Paralegal para que afecte a todos los módulos juntos. También puede agregarlo a solo uno de los módulos de la fila para que se deslice en su lugar y encaje con el resto del contenido que ya está allí.
A medida que me desplazo a la fila, el contenido comienza a mostrarse. Es más pequeño de lo normal y tiene la opacidad lo suficientemente baja como para permitir que se vea el fondo.
Desplazarse un poco más aumenta el tamaño del contenido y la opacidad hasta que se revela en todo su ancho y opacidad. Disminuye de nuevo a medida que me desplazo hacia arriba. Este permanece en las mismas ubicaciones, pero tiene varias otras clases, por lo que puede hacer que se deslice hacia adentro desde la derecha, hacia la izquierda o hacia arriba o hacia abajo mientras ajusta su tamaño y opacidad.
jQuery ScrollFX
jQuery ScrollFX escala el texto y cambia la opacidad del fondo. La clase scrollfx se agrega a la sección. Los módulos de esta sección se muestran normalmente cuando se desplaza hasta ellos y mientras están en la pantalla.
A medida que los pasa, el contenido de la sección se reduce en tamaño y ellos se reducen en opacidad.
Activador de desplazamiento de jQuery
El activador de desplazamiento de jQuery desliza un módulo en el desplazamiento de la página. Agregue la clase de activador de desplazamiento a la sección. Este es el diseño del Resort. La imagen de fondo se mueve automáticamente a un lado cuando se agrega la clase.
Todo el contenido, incluidas imágenes, botones, texto, etc., se desliza en su lugar a medida que llega a esa sección.
Y luego se asienta una vez que todo está en su lugar.
Cuadro de página final de jQuery
jQuery End Page Box coloca un cuadro que permanece en la parte inferior de la pantalla. Se crea agregando código a un módulo de texto al final de una sección.
Esto agrega un cuadro que aparece en la parte inferior de la pantalla y cambia para mostrar contenido diferente que especifique para cada sección.
Aquí está la siguiente sección. La caja se desliza hacia afuera y hacia adentro desde diferentes direcciones o con diferentes animaciones para cada una de las secciones.
Cargando encabezado mientras se desplaza
Cargar encabezado mientras se desplaza agrega una barra al menú que muestra cuánto de una página ha visto. No requiere una clase CSS. Puede personalizar el color de la barra de desplazamiento. Hay cuatro estilos para elegir.
Este es el efecto 1. Agrega una línea de desplazamiento en la parte superior de la pantalla. Aumenta de tamaño a medida que se desplaza, mostrando cuánto de la página ha visto el visitante.
Este es el efecto 2. Muestra una barra mucho más ancha.
Este es el efecto 3. Crece verticalmente a medida que se desplaza, ocupando la altura del logotipo. No se vuelve muy grande, pero aún muestra el efecto de desplazamiento.
El efecto 4 toma el ancho del logo.
revelador
Revealator agrega animaciones activadas por desplazamiento a secciones, filas o módulos. Tiene cerca de 40 opciones. Estoy agregando a una propaganda en el diseño de panadería. Falta la propaganda hasta que el contenedor sea completamente visible en la pantalla.
Se anima en la pantalla según la clase que elijas. Este tiene muchas opciones de animación que incluyen desvanecerse, rotar a la izquierda, rotar a la derecha, deslizar a la izquierda, deslizar a la derecha, deslizar hacia arriba, deslizar hacia abajo, acercar y alejar.
Toallitas Scroll Magic Section
Scroll Magic Section Wipes crea una animación que borra el contenido de la pantalla a medida que se desplaza. Creo que este es mi favorito de todos los efectos. Se agrega a la sección.
Una vez que esa sección se muestra completamente en la pantalla, se congela en su lugar y la siguiente sección se desplaza sobre ella. Puede agregar esto a tantas secciones para crear un método de desplazamiento interesante para toda la página. Si desea que todas las secciones se superpongan, entonces le interesará la función StickyStack.
Revelar pergamino
Scroll Reveal revela módulos en scroll. Elige entre 17 animaciones diferentes. Puede agregarlo a secciones, filas o módulos. La sección en la parte inferior se acerca al lector en el desplazamiento.
Este es el efecto 1f. La fila gira en su lugar a medida que se desplaza hacia ella.
StickyStack: efecto de apilamiento de jQuery
StickyStack: jQuery Stacking Effect apila paneles a medida que alcanzan la parte superior de una ventana gráfica. En otras palabras, cada sección se congela en la pantalla a medida que se desplaza y la siguiente sección se desplaza para superponerse. El resultado se ve increíble en el desplazamiento. Este es el diseño de Gestión de riesgos.
Aquí hay otra sección de la misma página. Las porciones superpuestas funcionan perfectamente.
Rotador de texto súper simple/Ticker
Super Simple Text Rotator/Ticker le permite agregar marcas al texto y rotar varias palabras. Tiene 5 estilos de animación. Este está rotando entre las palabras Simple y Personalizable.
Aquí, se gira para mostrar la segunda palabra. Ambas palabras aparecen y desaparecen.
Precio de los complementos Ultimate Divi Builder
Ultimate Divi Builder Addons cuesta $ 59 para usar en sitios web ilimitados e incluye actualizaciones de por vida. Las actualizaciones a menudo agregan nuevas funciones. Puedes probar una demo gratis para ver si te gusta.
- Puede comprar los complementos Ultimate Divi Builder en DiviBuilderAddons.com .
pensamientos finales
Ultimate Divi Builder Addons tiene mucho que ofrecer y puede ahorrar mucho tiempo en el desarrollo de funciones y animaciones. Me impresionó la cantidad de funciones que se incluyen y lo fáciles que son de usar.
Algunos son más difíciles de mostrar sin llenar este artículo con GIF grandes. Por ejemplo, Wow Animation tiene 75 animaciones para elegir, y puedes cambiar el retraso, la duración, la distancia y la cantidad de veces que se repite.
El complemento requiere que se sienta cómodo pegando una clase CSS en una sección, fila o módulo. Afortunadamente, esto es fácil de hacer y hay mucha información en la documentación de Divi sobre cómo pegar clases CSS.
Si está interesado en una manera fácil de agregar muchas características y animaciones a Divi , vale la pena echarle un vistazo a Ultimate Divi Builder Addons.
Queremos escuchar de ti. ¿Has probado los complementos de Ultimate Divi Builder? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada a través de GoodStudio / shutterstock.com