Lo más destacado del complemento Divi: Complementos definitivos de Divi Builder


Complementos de Divi Builder es un complemento de terceros que agrega muchos scripts de jQuery que utilizan los sitios web de alta gama a Divi Builder. Simplemente cambie los scripts que desee y agregue las clases CSS a los módulos Divi Builder. Es fácil de usar e incluye muchas funciones y animaciones.

Menú de complementos de Ultimate Divi Builder

Sube y activa el complemento como de costumbre. Se agrega un nuevo elemento de menú al menú del tablero llamado Ultimate Divi Builder Addons. Al hacer clic aquí, 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 de la derecha también incluye clases de 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 forma predeterminada.

Las funciones que se muestran en violeta están habilitadas, mientras que las que están en gris 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 utilizar una función en particular se muestra en la ventana de la derecha cuando hace clic en ella.

Las características incluyen:

  • Barra de desplazamiento personalizada
  • DoSlide Horizontal
  • Fundirse en la vista
  • Voltear texto
  • Ocultar el encabezado del tema Divi al desplazarse hacia abajo
  • jQuery Pageflipping Vertical Scroll
  • Desplazamiento horizontal de jQuery Pageflipping
  • jQuery Scrollflow
  • jQuery ScrollFX
  • jQuery ScrollTrigger
  • Cuadro de página final de jQuery
  • Carga de encabezado mientras se desplaza Effect1
  • Carga de encabezado mientras se desplaza Effect2
  • Carga de encabezado mientras se desplaza Effect3
  • Carga de encabezado mientras se desplaza Effect4
  • Animación Revealator
  • Duración de respuesta de ScrollMagic
  • ScrollReveal
  • StickyStack: efecto de apilamiento jQuery
  • Desplazamiento de ventanas
  • Rotador / Ticker de texto súper simple
  • Animación Wow

Ejemplos de complementos de Ultimate Divi Builder

A continuación se muestran algunos ejemplos de las funciones que se utilizan 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 desee utilizar 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 para 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 se 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 con tictac. Tiene 5 efectos. Para este ejemplo, agregué Flipping Text al diseño Paralegal. Este es el primer efecto de mecanografía Flipping Text. Escribe una letra a la vez. Hay varias clases diferentes que puede utilizar. Cada uno escribe a una velocidad diferente.

jQuery ScrollFlow

jQuery Scroll Flow agrega animaciones de desplazamiento a filas o módulos. Tiene 5 animaciones. Agregué 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 en 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 una 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 su ancho completo 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 desde la derecha, 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 hacia ellos y mientras están en la pantalla.

A medida que se desplaza por ellos, el contenido de la sección se reduce de tamaño y se reduce su opacidad.

Activador de desplazamiento de jQuery

El activador de desplazamiento de jQuery desliza un módulo en el desplazamiento de página. Agregue la clase de disparador de desplazamiento a la sección. Este es el diseño del Resort. La imagen de fondo se mueve automáticamente hacia 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 calma 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 usted especifica 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

La carga de encabezado mientras se desplaza agrega una barra al menú que muestra la cantidad de página que ha visto. No requiere una clase de 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 qué parte 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 la 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 elija. Este tiene muchas opciones de animación que incluyen atenuar, girar a la izquierda, girar 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 agregó 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 estaría interesado en la función StickyStack.

Desplazamiento Revelar

Scroll Reveal revela módulos en scroll. Elija 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 jQuery

StickyStack: jQuery Stacking Effect apila los paneles a medida que llegan a 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 scroll. 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 / Ticker de texto súper simple

El rotador / teletipo de texto súper simple le permite agregar marcas al texto y rotar varias palabras. Tiene 5 estilos de animación. Éste está rotando entre las palabras simple y personalizable.

Aquí, se gira para mostrar la segunda palabra. Ambas palabras aparecen y desaparecen.

Precio de Ultimate Divi Builder Addons

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. Puede probar una demostración de forma gratuita para ver si le gusta.

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 puede 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 en 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 Ultimate Divi Builder? Háganos saber lo que piensa al respecto en los comentarios.

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