Tutto ciò che devi sapere sulle interazioni Divi 5

Se vuoi attirare visitatori con pop-up dinamici, attivazioni e effetti di scorrimento senza un plug-in o CSS personalizzato, adorerai una delle ultime versioni di DivI 5 Public Alpha Feature. Le interazioni in Divi 5 consentono agli utenti Divi di creare elementi interattivi e coinvolgenti all'interno del Visual Builder. In questo post, ci immergeremo in tutto ciò che devi sapere sulle interazioni Divi 5, esplorando le sue caratteristiche, alcuni suggerimenti e applicazioni del mondo reale per aiutarti a familiarizzare con la funzione.

Nota importante: Divi 5 è attualmente in alfa pubblica e ottimizzata per nuovi siti Web. Non raccomandiamo di migrare i siti Divi 4 esistenti, ma a causa dello sviluppo in corso e dei potenziali problemi di compatibilità con i moduli legacy. Resta sintonizzato per gli aggiornamenti mentre Divi 5 si avvicina alla sua versione completa!

Ci arriviamo.

Quali sono le interazioni Divi 5?

Divi 5 Interactions è un costruttore di qualsiasi cosa che ti consente di creare elementi interattivi per il tuo sito Web direttamente all'interno del Visual Builder. Molto più di un semplice costruttore pop-up, questa funzione ti consente di creare una serie di interazioni personalizzate, dai pop-up alle animazioni innescate a scorrimento, il tutto senza toccare una riga di codice.

Iscriviti al nostro canale YouTube

Integrata perfettamente nella scheda avanzata di qualsiasi modulo, colonna, riga o sezione, le interazioni offrono una flessibilità illimitata per creare esperienze coinvolgenti e incentrate sull'utente.

I componenti principali delle interazioni Divi 5

Al centro delle interazioni Divi 5 ci sono tre componenti chiave che lavorano insieme per dare vita ai tuoi progetti:

Trigger eventi

I trigger sono gli eventi che iniziano un'interazione. Esempi includono azioni utente come fare clic su un pulsante o mollare su un'immagine, eventi basati su scorrimento come raggiungere un punto specifico in una pagina o trigger basati sul tempo come un ritardo dopo un caricamento della pagina.

I trigger disponibili includono:

• Fare clic : un utente fa clic su un pulsante, un'immagine o un altro elemento per avviare un'interazione.
• Mouse INVIO/ESCI: Un utente si libra o lascia un elemento.
• Viewport INVIO/ESCI: un elemento inserisce o esce dall'area visibile dello schermo mentre scorre l'utente.
• Carica: un'interazione inizia quando la pagina si carica, con un ritardo opzionale.

Ad esempio, è possibile attivare un pop-up a 5 secondi dopo che una pagina si carica o anima un elemento quando un utente scorre.

Azioni di effetto

Una volta attivato un trigger, gli effetti determinano cosa succede. Le opzioni includono elementi di visualizzazione o nascondiglio, animazione con svanisce, scale, rotazione o applicazione di transizioni preimpostate per uno stile coerente.

• Visibilità a disattivazione: commuta un elemento tra visibile e nascosto.
• Elemento mostra/nascondi: rende visibile o nascosto un elemento.
• Attiva / disattiva il preimpostazione: attiva o disattiva un preimpostazione per un elemento di progettazione con la possibilità di sostituire un preimpostazione esistente.
• Aggiungi preset: utilizzato per aggiungere una classe di stile preimpostata a un elemento. Puoi anche sostituire i preset esistenti.
• Rimuovere il preset: utilizzare per rimuovere uno stile preimpostata da un elemento.
• Attifica attributo: aggiunge o rimuove l'attributo HTML di un elemento, come una classe CSS o ID CSS.
• Aggiungi attributo: questo aggiunge un valore di attributo HTML specifico in cui non esiste attualmente.
• Rimuovi l'attributo: rimuove qualsiasi attributo applicato a un elemento.
• Cookie a disattivazione: aggiunge o rimuove un valore del cookie. Ad esempio, è possibile impostare un cookie quando appare un pop-up e impostarlo per apparire solo una volta usando le impostazioni delle condizioni di Divi 5.
• Aggiungi cookie: aggiunge un valore cookie che puoi definire al browser dell'utente.
• Rimuovere il cookie: rimuove un cookie precedentemente specificato.
• Scorri verso l'elemento: consente alla pagina di scorrere senza intoppi, mettendo alla vista l'elemento di destinazione.
• MOVIMENTO MOUSO SPECCHI: consente di impostare il movimento che segue i movimenti del mouse dell'utente. Le opzioni includono traduci, scala, opacità, inclinazione o rotazione. Puoi anche regolare la sensibilità del movimento.

Target un modulo

Il bersaglio è l'elemento che l'interazione influenza, come un modulo, riga, colonna o intera sezione. È possibile colpire l'elemento stesso o un altro elemento sulla pagina, offrendo flessibilità per creare interazioni complesse.

Caratteristiche chiave delle interazioni Divi 5

Le interazioni Divi 5 si distinguono per il set di funzionalità intuitivo e versatile:

• Nessuna interfaccia di codice: configurare trigger, effetti e target attraverso un'interfaccia intuitiva all'interno della scheda avanzata di qualsiasi elemento senza utilizzare alcun CSS o JavaScript.
• Diversi tipi di interazione: creare pop-up per l'acquisizione di piombo, attivare le interruzioni per le domande frequenti, sdolcini innescati a scorrimento per sezioni di eroi o effetti del mouse simili a parallasse per i portafogli.
• Prestazioni leggere: integrato direttamente in Divi 5, le interazioni eliminano la necessità di plug-in di terze parti, riducendo il gonfiore del sito e migliorando i tempi di caricamento.
• Combinazioni di trigger dinamico: combinare più trigger, come un evento di scorrimento con un ritardo, per interazioni sofisticate come un pop-up che appare dopo che un utente scorre la pagina.
• Design reattivo: personalizzare le interazioni desktop, tablet e mobili utilizzando i punti di interruzione reattive personalizzabili di Divi 5.

Come accedere e utilizzare le interazioni Divi 5

La creazione di un'interazione in Divi 5 è semplice, grazie alla sua integrazione all'interno del Visual Builder. Segui questi semplici passaggi per iniziare:

Inizia aprendo una pagina in Divi 5. Scegli un modulo, una riga, una colonna o una sezione a cui si desidera aggiungere un'interazione. Ad esempio, selezionare un modulo immagine sulla tua pagina.

Passare alla scheda avanzata e fare clic sul discesa delle interazioni . Fai clic sul pulsante + Aggiungi interazione da lì.

Vogliamo creare un effetto di inclinazione/trasformare il mouse-over per la nostra immagine. Per fare ciò, dovremo creare due interazioni: una per l'immagine e un'altra per la colonna che contiene l'immagine. Inizia dando alla tua interazione un nome nell'etichetta di amministrazione , quindi immettere le seguenti impostazioni:

• Evento trigger: mouse Enter
• Azione dell'effetto: movimento del mouse specchio
• Modulo target: immagine
• Ritardo: 0
• Tipo di movimento: traduci
• Sensibilità: 10

Una volta che tutte le impostazioni sono in atto, fai clic sul pulsante Salva interazione per continuare.

Successivamente, creeremo l'interazione di trasformazione sulla colonna. Fai clic su + Aggiungi nuovamente l'interazione. Immettere le seguenti impostazioni per creare l'interazione:

• Etichetta di amministrazione: colonna di inclinazione
• Evento trigger: mouse Enter
• Azione dell'effetto: movimento del mouse specchio
• Modulo target: colonna
• Ritardo: 0
• Tipo di movimento: inclinazione
• Sensibilità: 30

Una volta inserite le impostazioni, l'interazione dovrebbe apparire così:

Usa il pulsante Anteprima per visualizzare l'interazione.

La tua pagina apparirà in una nuova scheda, permettendoti di visualizzare in anteprima e testare l'interazione.

Tipi di interazioni che puoi creare

Ecco alcuni esempi pratici per mostrare la versatilità delle interazioni Divi 5, completa di trigger, effetti e applicazioni del mondo reale.

Popup di benvenuto per i nuovi visitatori

I pop-up sono ottimi per esortare i visitatori a iscriversi a newsletter, promozioni o eventi. Con le interazioni Divi 5, è possibile creare un pop-up di benvenuto che appare dopo un caricamento di una pagina.

Per creare questa interazione, dovrai creare una sezione per il tuo pop-up e assegnare le seguenti impostazioni:

• Etichetta di amministrazione: popup
• Evento trigger: caricamento
• Azione dell'effetto: mostra l'elemento
• Modulo target: sezione (pop-up)-Assicurati di nominare la sezione prima di creare l'interazione
• Ritardo: 5 secondi

Dovremo anche creare un'interazione per chiudere il pop-up. Il modo più semplice è aggiungere un modulo icona all'angolo in alto a destra della sezione pop-up e assegnare le seguenti impostazioni:

• Etichetta di amministrazione: pulsante Chiudi
• Evento trigger: clicca
• Azione dell'effetto: nascondi elemento
• Modulo target: sezione (popup)
• Ritardo: 0

Per controllare il posizionamento del popup, utilizzare le impostazioni della posizione di Divi 5. Nella scheda avanzata , individuare il menu a discesa posizione e impostare la posizione su fissa . Da lì, scegli la posizione in cui vorresti che il pop-up venga visualizzato sulla pagina. In questo esempio, l'abbiamo impostato sul centro . È anche una buona idea impostare l' indice Z in modo che il pop-up appaia sopra tutto il resto sulla pagina, come 99999 .

L'ultimo passo è impostare la visibilità del pop-up su nascosto su tutti i dispositivi. Per fare ciò, vai alla scheda avanzata , scorri al menu a discesa di visibilità e attiva tutte le opzioni per nascondere la sezione pop-up su tutti i dispositivi.

Attiva la visibilità di un elemento

Le levelterie sono perfette per la creazione di sezioni di contenuto pieghevole come FAQ, menu di fisarmonica, tabelle dei prezzi o servizi. Consentono agli utenti di espandere o crollare il contenuto con un clic, mantenendo la pagina pulita e interattiva. Ad esempio, è possibile rivelare un elenco completo di servizi che è visibile solo una volta fatto clic su un pulsante.

Per creare questo effetto, imposterà un'interazione sul pulsante che si desidera impostare come trigger per la tua sezione. Immettere le seguenti impostazioni per l'interazione:

• Etichetta di amministrazione: mostra i servizi
• Evento trigger: clicca
• Azione dell'effetto: mostra l'elemento
• Modulo target: sezione (Rivela servizi)
• Ritardo: 0

Quindi, impostare il collegamento di ancoraggio per aprire la sezione. Apri le impostazioni del pulsante e inserisci #Services nel campo URL del collegamento pulsante della scheda Contenuto.

Fare clic sulla sezione Funzionalità sotto il pulsante e passare alla scheda Advanced. Imposta l'ancora aggiungendo servizi al campo ID CSS nel menu ID & Classi CSS.

Mentre nella scheda avanzata, dovrai anche impostare la visibilità della sezione su nascosta, come abbiamo fatto con il nostro pop-up.

Effetti del movimento del topo

Le interazioni Divi 5 consentono di creare effetti di movimento dinamico del mouse quando un utente si libra su un elemento di progettazione. Ad esempio, è possibile combinare interazioni per creare un effetto di inclinazione su un'intestazione e sulla colonna genitore.

Dovrai prima creare un'interazione per l'intestazione per realizzare questa interazione. Immettere le seguenti impostazioni nella scheda avanzata dell'immagine:

• Etichetta di amministrazione: intestazione animata
• Evento trigger: mouse Enter
• Azione dell'effetto: movimento del mouse specchio
• Modulo target: testo
• Ritardo: 0
• Tipo di movimento: inclinazione
• Sensibilità: 30

Quando vengono inserite le impostazioni, dovrebbero assomigliare allo screenshot qui sotto.

Quindi, impostare un'interazione sulla colonna contenente l'intestazione utilizzando le seguenti impostazioni:

• Etichetta di amministrazione: inclinazione della colonna
• Evento trigger: mouse Enter
• Azione dell'effetto: movimento del mouse specchio
• Modulo target: colonna
• Ritardo: 0
• Tipo di movimento: inclinazione
• Sensibilità: 50

Una volta completato, le tue impostazioni dovrebbero apparire simili allo screenshot di seguito.

Interazioni basate su preset

È possibile utilizzare le interazioni Divi 5 insieme ai preset per creare effetti con i trigger di mouse o viewport. Ad esempio, se desideri mostrare una sezione sulla tua pagina modificando il colore di sfondo o aggiungendo uno stile ombra di bordo, puoi usare le interazioni per farlo. Nell'esempio seguente, il colore di sfondo, la larghezza e il bordo cambiano quando un utente si libra sulla sezione.

Per creare questo effetto, dovrai prima creare un preset per mostrare la sezione prima e dopo il mouse. In questo esempio, ne abbiamo creati due: uno con uno sfondo giallo solido e un altro con vari effetti e uno sfondo verde.

Una volta creati i preset, è possibile utilizzare le interazioni per attivare le modifiche al mouse. Inizia creando la prima interazione con le seguenti impostazioni:

• Etichetta di amministrazione: sfondo giallo
• Evento trigger: mouse Enter
• Azione effetto: attiva predefinire
• Modulo target: sezione (prezzi)
• Ritardo: 1 secondo
• Preimpostazione: sfondo giallo

Quindi, crea una seconda interazione per il mouse-over inserendo le seguenti impostazioni:

• Etichetta di amministrazione: sfondo verde
• Evento trigger: uscita del mouse
• Azione effetto: attiva predefinire
• Modulo target: sezione (prezzi)
• Ritardo: 0
• Preimpostazione: preimpostazione verde

Vantaggi dell'utilizzo delle interazioni Divi 5

Le interazioni Divi 5 offre un approccio potente e snello alla costruzione di siti Web, offrendo una serie di vantaggi che lo rendono una caratteristica straordinaria per gli utenti Divi. Ecco uno sguardo più profondo al motivo per cui questa funzione è un'aggiunta così utile a Divi 5:

1. Nessun plugin richiesto

Poiché le interazioni Divi 5 sono integrate nel nucleo di Divi, elimina la necessità di plugin di terze parti per creare pop-up e altre interazioni. Questo approccio nativo riduce il numero di script in esecuzione sul tuo sito, portando a tempi di caricamento più rapidi e metriche di prestazioni migliorate.

Ad esempio, invece di fare affidamento su un plug-in pop-up, Divi 5 interazioni gestisce tutto all'interno del Visual Builder, garantendo una base di codice più snella e un'esperienza utente più fluida. Ciò significa anche meno aggiornamenti per gestire e ridurre i rischi di conflitti di plug -in, rendendo il tuo sito più affidabile.

2. È facile da usare

Le interazioni Divi 5 sono progettate intuitivamente, richiedendo solo pochi clic per creare interazioni. I principianti possono cogliere rapidamente le basi e gli sviluppatori professionisti possono immergersi in combinazioni complesse senza scrivere una singola riga di codice.

Le impostazioni delle interazioni sono ordinatamente organizzate all'interno della scheda avanzata di qualsiasi elemento, con etichette chiare e titoli che ti guidano attraverso l'intero processo. Ad esempio, la configurazione di un pop-up richiede alcuni clic per selezionare un trigger ed effetto, rendendo facile da utilizzare per chiunque.

3. Libertà di personalizzare

La flessibilità delle interazioni Divi 5 e delle sue vaste impostazioni - innesco, effetti e obiettivi - ti consentono di creare esperienze uniche per i visitatori del tuo sito. È possibile mescolare più trigger, come combinare un viewport basato su scroll con un ritardo, per creare interazioni sofisticate, come un banner promozionale che svanisce dopo che un utente scorre a metà della pagina.

La possibilità di colpire qualsiasi modulo, riga, colonna o sezione significa che è possibile applicare effetti proprio dove necessario, sia che si tratti di un singolo pulsante o di trasformare un'intera sezione di eroi.

4. Massoso coinvolgimento degli utenti

Gli elementi interattivi aumentano il coinvolgimento degli utenti rendendo i siti Web più coinvolgenti e reattivi. Le interazioni di Divi 5 aiutano a mantenere i visitatori sul tuo sito incoraggiando l'interazione, come fare clic su Leveling per rivelare prezzi alternativi o attivare i pop-up per l'acquisizione di piombo. Ad esempio, un sito Web del ristorante potrebbe utilizzare un'animazione innescata a scorrimento per rivelare una sezione di menu.

Suggerimenti pratici per iniziare

Per sfruttare al meglio le interazioni Divi 5, avvicinarsi strategicamente per garantire risultati ottimali. Ecco alcuni suggerimenti per guidarti attraverso il processo:

• Inizia semplice: inizia con interazioni semplici come i pop-up o le disattivazioni per familiarizzare con la funzione prima di affrontare effetti avanzati come il movimento del mouse o animazioni multi-trigger.
• Usa il campo dell'etichetta amministrativa: l'etichettatura delle interazioni e degli elementi è cruciale, specialmente su pagine complesse con sezioni multiple. L'aggiunta di un nome al campo dell'etichetta di amministrazione nella scheda Contenuto di ciascun modulo consente di mantenere le cose organizzate e riconoscere facilmente l'elemento target giusto.
• Usa i preset: il sistema preimpostazione di Divi 5 è ottimo per risparmiare tempo e mantenere la coerenza tra le interazioni. I preset consentono di definire stili riutilizzabili, come un'animazione di dissolvenza o una transizione di colore, e applicarli a più elementi.
• Test accuratamente: visualizza sempre l'anteprima delle interazioni utilizzando la funzione di anteprima di Divi 5 per risolvere eventuali problemi prima della pubblicazione. È inoltre possibile utilizzare i punti di interruzione personalizzabili personalizzabili di Divi 5 per testare come si comportano le interazioni su tutti i dispositivi.

Eleva il tuo sito web con interazioni Divi 5

Le interazioni Divi 5 sono la caratteristica perfetta per la creazione di elementi interattivi coinvolgenti e senza codice per aumentare l'esperienza utente del tuo sito Web. Dai pop-up che catturano porta alle animazioni innescate a scorrimento che danno vita ai tuoi progetti, questa funzione consente a chiunque di creare siti Web dinamici e professionali senza toccare una linea di codice. La sua integrazione leggera e le diverse opzioni di innesco lo rendono uno strumento essenziale per il moderno web design.

Pronto per iniziare? Scarica le ultime alpha Divi 5 e tuffati nelle interazioni per creare pop-up, contenuti attivati, effetti di scorrimento e altro ancora. Una nota veloce: Divi 5 è pronta per nuovi siti Web, ma non consigliamo ancora di usarlo su siti esistenti.

Commenta di seguito o contatta i nostri canali di social media per condividere le tue creazioni con noi. Ci piacerebbe vederli!