Interazioni per Divi 5 (pop-up, interruttori, effetti del mouse e altro)

Oggi siamo entusiasti di rilasciare interazioni per Divi 5, un sistema robusto per la creazione di elementi interattivi come popup e interruttori ed effetti creativi basati su scorrimento e mouse basati sul mouse.

Non è un costruttore pop-up; È un costruttore di qualsiasi cosa . Crea un trigger, assegna un effetto, scegli un obiettivo e dà vita alle tue interazioni personalizzate. Puoi fare così tante cose straordinarie con questo sistema e non vedo l'ora di mostrarti come funziona, quindi saltiamo dentro.

Guarda il seguente video per vedere la nuova funzionalità in azione.

Costruisci i tuoi elementi interattivi

Noterai un nuovo gruppo di interazioni nella scheda avanzata di tutti gli elementi. Facendo clic sul pulsante Aggiungi interazione aprirà l'editor di interazione, in cui è possibile configurare il trigger, l'effetto e il targeting di ogni interazione.

Il trigger inizia l'interazione, ad esempio quando si fa clic o in bilico. L'effetto si verifica quando viene attivata l'interazione, come visibilità a disattivazione, preimpostazione o attributo, e il target è l'elemento interessato nella pagina.

Esempi di interazione

Prima di approfondire queste impostazioni, lascia che ti mostri alcuni esempi di quali interazioni possono raggiungere.

Esempio 1: costruire un pop-up

Nell'esempio video seguente, ho usato le interazioni per creare un pop-up.

Ho aggiunto un trigger di visualizzazione ENTER a una sezione, che applica l'effetto di visibilità alternato al mio pop-up. La sezione entra nel mio punto di vista, innescando la visibilità del popup e scorre nell'uso delle impostazioni di animazione di Divi.

Inoltre, un modulo icona all'interno del popup ha un'interazione basata su clic, che attiva la visibilità sul popup per chiuderlo. Puoi creare qualsiasi tipo di banner pop-up o galleggiante!

Esempio 2: costruire un interruttore

Nell'esempio video seguente, ho usato le interazioni per attivare le tabelle dei prezzi mensili e annuali.

Ho aggiunto due interazioni a una riga per attivare la visibilità di alternare sezioni prezzi annuali e mensili. Successivamente, ho aggiunto altre due interazioni per attivare la visibilità di due moduli icona, dando all'utente un feedback aggiuntivo su clic.

Esempio 3: transizione tra preset

Uno degli effetti più potenti è l'effetto preimpostazione a levetta. Poiché i preset ti consentono di modificare le impostazioni di un elemento, non c'è limite a ciò che puoi fare. Quando un trigger cambia il preimpostazione su un elemento target, può trasformarlo in molti modi.

Nell'esempio video seguente, ho impostato due interazioni per aggiungere e rimuovere un preimpostazione di riga mentre entra ed esce dal punto di vista. L'evidenziazione preimpostata cambia il colore e la scala dello sfondo della riga e aggiunge un'ombra della scatola, attirando l'attenzione degli utenti mentre scorrono verso il basso la pagina!

Esempio F: effetti del movimento del mouse

Gli effetti basati sul mouse dei sistemi di interazione sono molto divertenti.

Nell'esempio video seguente. Ho aggiunto diverse interazioni a una sezione di eroi, prendendo di mira vari elementi con effetti basati su mouse di sensibilità variabili.

Le interazioni si innescano sull'inserimento del mouse, applicando opinioni, movimenti e effetti di inclinazione sugli elementi che cambiano mentre il mio mouse si muove. Ho anche aggiunto un'interazione al modulo pulsante, che attiva un preimpostazione per cambiare lo stile del contorno quadrato.

Le possibilità sono infinite!

Potrei continuare all'infinito con diversi esempi e sono entusiasta di vedere cosa ti viene in mente.

Guardando più da vicino l'editor di interazione, puoi vedere alcuni effetti aggiuntivi con cui non ho ancora menzionato, come attributi, cookie e scorrere gli elementi.

Ad esempio, è possibile utilizzare gli effetti degli attributi per modificare le classi CSS di un elemento, l'ID o qualsiasi altra cosa.

La versione uno delle interazioni supporta i seguenti effetti:

• Visibilità a disattivazione : commuta automaticamente un elemento tra gli stati visibili e nascosti.
• Show Element : rende visibile un elemento nascosto.
• Nascondi elemento : fa nascere un elemento visibile.
• Attiva/disattiva il preimpostazione : commuta una preimpostazione/spegnimento per un elemento, con sostituzione opzionale dei preset esistenti.
• Aggiungi preimpostazione : applica una classe di stile preimpostazione a un elemento, con una sostituzione opzionale di preset esistenti.
• Rimuovi Preset : rimuove una classe di stile preimpostata da un elemento.
• Attifica attributo : aggiunge o rimuove il valore dell'attributo HTML specifico di un elemento, come una classe CSS e ID.
• Aggiungi attributo : aggiunge un valore di attributo HTML specifico a un elemento se non esiste già.
• Rimuovere l'attributo : rimuove un valore di attributo HTML specifico da un elemento.
• Cookie a disattivazione : aggiungi o rimuovi un valore del cookie da un cookie. Ad esempio, imposta un cookie quando un pop-up sembra monitorare quando un utente ha visto un pop-up. Quindi, usa le opzioni delle condizioni di Divi per nascondere il popup nelle future visite di pagina per quell'utente.
• Aggiungi cookie : aggiunge un valore di cookie e cookie che definisci al browser del visitatore.
  Rimuovere il cookie : rimuovere un cookie specificato.
• Scorri su Element : scorre senza problemi la pagina per mettere in vista l'elemento target.
• Muovo del mouse speculare : fa seguire l'elemento target nel movimento del mouse all'interno dell'elemento di grilletto usando vari tipi di movimento (traduzione, scala, opacità, inclinazione o ruotare) con sensibilità regolabile.

Prova Divi 5 oggi

Le interazioni per Divi 5 sono disponibili oggi ed è una delle tante caratteristiche che arrivano a Divi quest'anno.

Puoi seguire mentre progrediamo attraverso la versione finale di Divi 5 e oltre, con aggiornamenti ogni due settimane. A seconda delle tue priorità, puoi usare Divi 5 ora per costruire nuovi siti Web o attendere fino a quando non aggiungiamo più funzionalità, qualunque cosa funzioni meglio per te.

Come indicato nel programma di rilascio multi-fase originale di Divi 5, l'Alpha pubblico Divi 5 è come "Divi 5 Lite". Mancano alcune funzionalità e potrebbe non essere adatto per i siti Web esistenti, ma è pronto per essere utilizzato su nuovi siti Web se si preferisce l'esperienza a Divi 4.

Vogliamo che tu lo provi e, se lo ami, lo usi; Quando tutti lo adorano, lo renderemo ufficiale.

Hai provato i colori relativi?

Nel caso in cui l'avessi perso, abbiamo recentemente rilasciato i colori relativi per Divi 5, rendendo Divi il chiaro leader nella gestione dei colori e nel sistema di colori avanzato. Ti consente di creare sistemi a colori matematicamente belli a base variabile con relazioni di colore nidificato usando HSL. Non vuoi dormire su questa funzione.

Guarda questo video per tutti i dettagli.

Altri aggiornamenti di Divi 5 sono in arrivo

2025 è l'anno di Divi 5 . Il lavoro noioso è dietro di noi. Abbiamo costruito la Fondazione Super Bast e ora è tempo che Divi torni.

Se sei qui per il ritorno Divi, facci un enorme favore e facci sapere amando questo video e lasciando un commento. Significa molto per noi vederti incoraggiare Divi ed è essenziale alimentare l'algoritmo e spargere la voce.

Non dimenticare di seguirci su YouTube e iscriviti alla newsletter Divi in ​​modo da non perdere mai un aggiornamento. Ci vediamo presto per un altro annuncio di Divi 5, che prometto che sarà dietro l'angolo.