Evidenziazione del plug-in Divi: componenti aggiuntivi di Divi Builder Ultimate

Divi Builder Addons è un plug-in di terze parti che aggiunge molti script jQuery utilizzati da siti Web di fascia alta a Divi Builder. Basta attivare o disattivare gli script desiderati e aggiungere le classi CSS ai moduli Divi Builder. È facile da usare e include molte funzionalità e animazioni.

Menu dei componenti aggiuntivi di Ultimate Divi Builder

Carica e attiva il plugin normalmente. Una nuova voce di menu viene aggiunta al menu della dashboard chiamata Ultimate Divi Builder Addons. Facendo clic su questo si apre una schermata con molte funzionalità nella finestra di sinistra. Facendo clic su uno di essi vengono visualizzati un interruttore e le informazioni nella finestra di destra. La finestra di destra include anche le classi CSS per alcuni degli effetti e mostra come usarli. Altri includono più interruttori per più funzioni e opzioni come colori, dimensioni dell'immagine, durate, ecc. Sono tutti disabilitati per impostazione predefinita.

Le funzionalità visualizzate in viola sono abilitate, mentre quelle in grigio sono disabilitate. Nell'esempio sopra, la funzione include altre opzioni oltre a una classe CSS. Tutte le informazioni di cui hai bisogno su come utilizzare una particolare funzionalità vengono mostrate nella finestra di destra quando fai clic su di essa.

Le caratteristiche includono:

• Barra di scorrimento personalizzata
• Fai scorrere in orizzontale
• Dissolvenza in visualizzazione
• Capovolgimento del testo
• Nascondi l'intestazione del tema Divi durante lo scorrimento verso il basso
• jQuery Pagescorrimento verticale scorrimento
• jQuery Pagescorrimento scorrimento orizzontale
• jQuery Scrollflow
• jQuery ScrollFX
• jQuery ScrollTrigger
• jQuery Fine Pagina Box
• Caricamento dell'intestazione durante lo scorrimento Effect1
• Caricamento dell'intestazione durante lo scorrimento Effect2
• Caricamento dell'intestazione durante lo scorrimento Effect3
• Caricamento dell'intestazione durante lo scorrimento Effect4
• Animazione rivelatore
• Durata reattiva ScrollMagic
• ScrollReveal
• StickyStack: effetto di sovrapposizione jQuery
• Finestre a scorrimento
• Rotatore/ticker di testo super semplice
• Animazione Wow

Esempi di componenti aggiuntivi di Ultimate Divi Builder

Di seguito sono riportati alcuni esempi delle funzionalità utilizzate con i layout Divi.

Barra di scorrimento personalizzata

La barra di scorrimento personalizzata ti consente di posizionare barre di scorrimento sui tuoi contenuti. Ha 8 effetti diversi. Incolla la classe CSS nel campo Classe CSS della sezione, riga o modulo in cui desideri utilizzare l'effetto. In questo, ho aggiunto un effetto barra di scorrimento personalizzato al contenuto del modulo di testo nel layout Esports.

Una barra di scorrimento ora appare al passaggio del mouse in modo che io possa scorrere per vedere più contenuti nello stesso spazio. Questo è l'effetto 1. Ha un design diverso sul sito live. Ho schiarito lo sfondo in modo che risalti.

Questo è l'effetto 3. Aggiunge frecce nella parte superiore e inferiore della diapositiva.

L'effetto 5 cambia la maniglia da una linea a un punto e cambia lo stile delle frecce.

Capovolgimento del testo

Capovolgimento del testo è un effetto di digitazione del testo che crea un'animazione introduttiva a ticchettio. Ha 5 effetti. Per questo esempio, ho aggiunto Flipping Text al layout Paralegal. Questo è il primo effetto di digitazione del testo capovolto. Digita una lettera alla volta. Ci sono diverse classi che puoi usare. Ognuno digita a una velocità diversa.

jQuery ScrollFlow

jQuery Scroll Flow aggiunge animazioni di scorrimento a righe o moduli. Ha 5 animazioni. Ho aggiunto questo a una riga nel layout Paralegal in modo che influisca su tutti i moduli insieme. Puoi anche aggiungerlo a uno solo dei moduli nella riga in modo che scorra in posizione per adattarsi al resto del contenuto già presente.

Mentre scorro fino alla riga, il contenuto inizia a essere visualizzato. È più piccolo del normale e ha l'opacità impostata su un livello sufficientemente basso da consentire la visualizzazione dello sfondo.

Scorrere un po' di più aumenta la dimensione del contenuto e l'opacità fino a quando non viene rivelato nella sua piena larghezza e opacità. Diminuisce di nuovo mentre scorro verso l'alto. Questo rimane nelle stesse posizioni, ma ha diverse altre classi in modo che tu possa farlo scorrere da destra, sinistra o scorrere verso l'alto o verso il basso mentre ne regoli le dimensioni e l'opacità.

jQuery ScrollFX

jQuery ScrollFX ridimensiona il testo e modifica l'opacità dello sfondo. La classe scrollfx viene aggiunta alla sezione. I moduli in questa sezione vengono visualizzati normalmente quando li scorri e mentre sono sullo schermo.

Mentre li scorri, il contenuto della sezione si riduce di dimensioni e si riduce in opacità.

jQuery Scroll Trigger

Il trigger di scorrimento jQuery fa scorrere un modulo sullo scorrimento della pagina. Aggiungi la classe trigger di scorrimento alla sezione. Questa è la disposizione del Resort. L'immagine di sfondo viene automaticamente spostata di lato quando viene aggiunta la classe.

Tutto il contenuto, incluse immagini, pulsanti, testo, ecc., scorre in posizione quando si arriva a quella sezione.

E poi si sistema una volta che tutto è a posto.

jQuery Fine Pagina Box

jQuery End Page Box posiziona una casella che rimane nella parte inferiore dello schermo. Viene creato aggiungendo codice a un modulo di testo alla fine di una sezione.

Questo aggiunge una casella che appare nella parte inferiore dello schermo e cambia per mostrare contenuti diversi specificati per ciascuna sezione.

Ecco la prossima sezione. La scatola scorre fuori e dentro da direzioni diverse o con animazioni diverse per ciascuna delle sezioni.

Caricamento dell'intestazione durante lo scorrimento

Il caricamento dell'intestazione durante lo scorrimento aggiunge una barra al menu che mostra quanto di una pagina hai visto. Non richiede una classe CSS. Puoi personalizzare il colore della barra di scorrimento. Ci sono quattro stili tra cui scegliere.

Questo è l'effetto 1. Aggiunge una linea di scorrimento nella parte superiore dello schermo. Aumenta di dimensioni man mano che si scorre, mostrando quanta parte della pagina ha visto il visitatore.

Questo è l'effetto 2. Visualizza una barra molto più ampia.

Questo è l'effetto 3. Cresce verticalmente mentre scorri, occupando l'altezza del logo. Non diventa molto grande, ma mostra comunque l'effetto di scorrimento.

L'effetto 4 prende la larghezza del logo.

rivelatore

Revealator aggiunge animazioni attivate a scorrimento a sezioni, righe o moduli. Ha quasi 40 opzioni. Sto aggiungendo un blurb nel layout Bakery. Il blurb manca finché il contenitore non è completamente visibile sullo schermo.

Si anima sullo schermo in base alla classe scelta. Questo ha molte opzioni di animazione tra cui dissolvenza, rotazione a sinistra, rotazione a destra, scorrimento a sinistra, scorrimento a destra, scorrimento in alto, scorrimento in basso, zoom avanti e zoom indietro.

Salviette per sezioni magiche di scorrimento

Scroll Magic Section Wipes crea un'animazione che cancella il contenuto sullo schermo mentre si scorre. Penso che questo sia il mio preferito di tutti gli effetti. Viene aggiunto alla sezione.

Una volta che quella sezione è completamente visualizzata sullo schermo, si blocca sul posto e la sezione successiva scorre su di essa. Puoi aggiungerlo a tutte le sezioni per creare un metodo di scorrimento interessante per l'intera pagina. Se vuoi che ogni sezione si sovrapponga, ti interesserebbe la funzione StickyStack.

Scorri rivelazione

Scroll Reveal rivela i moduli sullo scroll. Scegli tra 17 diverse animazioni. Puoi aggiungerlo a sezioni, righe o moduli. La sezione in basso sta ingrandendo verso il lettore durante lo scorrimento.

Questo è l'effetto 1f. La riga ruota in posizione mentre si scorre su di essa.

StickyStack: effetto di sovrapposizione jQuery

StickyStack: jQuery Stacking Effect impila i pannelli quando raggiungono la parte superiore di una finestra. In altre parole, ogni sezione si blocca sullo schermo mentre si scorre e la sezione successiva scorre per sovrapporsi. Il risultato sembra sorprendente su scroll. Questo è lo schema di gestione del rischio.

Ecco un'altra sezione della stessa pagina. Le porzioni sovrapposte funzionano perfettamente.

Rotatore/ticker di testo super semplice

Super Simple Text Rotator/Ticker ti consente di aggiungere markup al testo e ruotare più parole. Ha 5 stili di animazione. Questo sta ruotando tra le parole Semplice e Personalizzabile.

Qui, viene ruotato per visualizzare la seconda parola. Entrambe le parole svaniscono dentro e fuori.

Prezzo dei componenti aggiuntivi Ultimate Divi Builder

Ultimate Divi Builder Addons costa $ 59 per l'uso su siti Web illimitati e include aggiornamenti a vita. Gli aggiornamenti spesso aggiungono nuove funzionalità. Puoi provare una demo gratuitamente per vedere se ti piace.

• Puoi acquistare Ultimate Divi Builder Addons da DiviBuilderAddons.com.

Pensieri finali

Ultimate Divi Builder Addons ha molto da offrire e può far risparmiare molto tempo nello sviluppo di funzionalità e animazioni. Sono rimasto impressionato dal numero di funzioni incluse e dalla facilità di utilizzo.

Alcuni sono più difficili da mostrare senza riempire questo articolo con GIF di grandi dimensioni. Ad esempio, Wow Animation ha 75 animazioni tra cui scegliere e puoi modificare il ritardo, la durata, la distanza e il numero di volte che si ripete.

Il plugin richiede che tu sia a tuo agio nell'incollare una classe CSS in una sezione, riga o modulo. Fortunatamente, questo è facile da fare e ci sono molte informazioni nella documentazione Divi su come incollare nelle classi CSS.

Se sei interessato a un modo semplice per aggiungere molte funzionalità e animazioni a Divi, vale la pena dare un'occhiata a Ultimate Divi Builder Addons.

Vogliamo sentire da voi. Hai provato i componenti aggiuntivi di Ultimate Divi Builder? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite GoodStudio / shutterstock.com