Vai al contenuto principale

Come creare sezioni animate facendo clic su Divi Builder

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Le opzioni di trasformazione integrate di Divi si sono dimostrate uno strumento di progettazione estremamente utile, che ti consente di ridimensionare, ruotare, inclinare o posizionare qualsiasi elemento su una pagina con facilità. E puoi anche scegliere di trasformare gli elementi in stato di hover per effetti hover impressionanti. Quindi oggi ti mostreremo come distribuire queste animazioni con un clic.

Questo metodo richiede l'uso di jQuery. La cosa grandiosa di questa tecnica è che puoi utilizzare le impostazioni di progettazione integrate di Divi per definire lo stile delle proprietà di trasformazione e quindi attivare (o disattivare) quelle proprietà di trasformazione con un clic del mouse. Questo aprirà un sacco di possibilità uniche per rivelare contenuti nascosti spostando gli elementi con un clic anziché al passaggio del mouse. E aiuta anche a ridurre la necessità di sapere molto sui CSS.

Cominciamo.

Cosa ti serve per iniziare

Per questo tutorial, tutto ciò di cui hai bisogno è Divi. Per iniziare, vai alla dashboard di WordPress. Crea una nuova pagina, dai un titolo alla tua pagina e continua il design sul generatore Divi in ​​primo piano. Seleziona l'opzione "Crea da zero". Ora sei a posto!

L'idea di base spiegata

Prima di entrare troppo nei dettagli in questo tutorial, ti guiderò attraverso come funziona questa tecnica in poche parole.

Ogni volta che personalizzi un elemento (sezione, riga o modulo) in Divi, aggiungi CSS personalizzati a questo elemento in background. Ad esempio, utilizzando le impostazioni integrate di Divi, puoi aggiungere una proprietà di rotazione della trasformazione a un modulo blurb in modo che ruoti il ​​modulo lungo l'asse Z di 20 gradi.

Impostazioni Div Blurb

Ma dietro le quinte, crei un CSS personalizzato che viene aggiunto a questo modulo di testo e assomiglia a questo:

.et_pb_text_0 {transform: rotateZ (20deg); }

Abbastanza semplice. E diciamo che volevi aggiungere la stessa opzione di trasformazione al passaggio del mouse. Devi solo applicare la proprietà di trasformazione per lo stato del passaggio del mouse nelle impostazioni di Divi Builder.

Animazione al passaggio del mouse Divi

E il codice sarà simile a questo dietro le quinte:

.et_pb_text_0: hover {transform: rotateZ (20deg); }

Tuttavia, se si desidera distribuire la proprietà di trasformazione al clic, le cose dovranno funzionare in modo leggermente diverso. Dovrai inserire un codice javascript per attivare un evento clic sull'elemento (o modulo di testo).

Con il nostro esempio attuale, il nostro obiettivo principale è fondamentalmente quello di attivare e disattivare la proprietà di trasformazione "transform: rotateZ (20deg)" al clic. Un modo semplice per farlo è creare una classe CSS personalizzata con la proprietà "transformer: none!" Importante "nelle impostazioni della pagina (o del foglio di stile esterno). Sarebbe simile a questo.

.toggle-transform-animation {transform: none! important; }

Parametri della pagina divi

Con quel CSS in atto. Possiamo aggiungere la classe CSS "toggle-transform-animation" all'elemento del modulo blurb che ha la nostra proprietà di trasformazione.

Riepilogo dei parametri

Ciò disabiliterà (sovrascriverà) la proprietà di trasformazione e ne impedirà l'attivazione iniziale anche se lo stile della proprietà di trasformazione è già stato aggiunto ad essa.

Ora tutto ciò che devi fare è attivare (aggiungere e rimuovere) questa classe CSS personalizzata quando fai clic sull'elemento. Quindi, ogni volta che clicchiamo sull'elemento, la classe verrà eliminata e le proprietà di trasformazione (quelle che hai aggiunto con Divi) verranno distribuite.

Ecco un semplice esempio di come farlo. Innanzitutto, aggiungi un'altra classe CSS al modulo blurb denominata "transform_target".

Divi Transform Properties on Click

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Quindi vai a Divi> Opzioni tema> Integrazione e aggiungi il seguente script jQuery all'inizio del tuo blog:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Aggiungi sezione integrazione divi

È tutto ! Ora, ogni volta che fai clic sul modulo di presentazione, la proprietà di trasformazione che hai aggiunto alla presentazione in Divi verrà attivata o disattivata.

Colpo di animazione

Facciamo ora un esempio in modo che tu possa vedere come questo potrebbe essere utile per i tuoi progetti.

Come attivare le proprietà di trasformazione Fare clic per visualizzare il contenuto in Divi

Per questo esempio, ci limiteremo a un semplice esempio blurb usato sopra. Successivamente, aggiungeremo un po 'di blurb in più dietro di esso in modo che ogni volta che fai clic sul blurb in alto, salta fuori strada per rivelare il contenuto di blurb extra che si trova dietro la parte superiore. documento.

Creazione di moduli Blurb fronte e retro

Quindi aggiungere un modulo di presentazione alla colonna 1.

Modulate divi summaryAggiorna il contenuto del testo del layout per includere solo un titolo (rimuovi il contenuto del corpo predefinito) e aggiungi un'icona di presentazione.

Personalizza il modulo di riepilogo diviQuindi aggiornare i parametri di progettazione come segue:

Colore di sfondo: #4c5866
Colore icona: #ffffff
Orientamento del testo: centro
Colore del testo
: Margine personalizzato leggero: 0px nella parte inferiore
Imbottitura personalizzata: 15% nella parte superiore, 15% nella parte inferiore, 10% a sinistra, 10% a destra

Modifica la spaziatura dei moduli divi

Torneremo su questo modulo in seguito, ma per ora, dobbiamo creare il nostro secondo modulo Blurb che servirà da modulo "di ritorno" con contenuti aggiuntivi.

Per fare ciò, duplica il modulo di presentazione che hai appena creato.

Duplica modulo di riepilogo divi

Quindi, sul secondo modulo, rimuovi l'icona della presentazione (e l'immagine predefinita) e aggiungi il contenuto del corpo al modulo. Quindi aggiornare i parametri di progettazione come segue:

Colore di sfondo: rgba (76,88,102,0.3)
Colore del testo: nero
Imbottitura personalizzata: 20% superiore

Modifica il carattere e lo sfondo Divi

Posizionare il modulo prima del Riepilogo

Ora che i nostri due blurb sono in stile, dobbiamo tornare al nostro blurb anteriore (in alto) e posizionarlo sopra il blurb posteriore (in basso). Per fare ciò, gli daremo una posizione assoluta con un'altezza del 100% e una larghezza del 100%.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Innanzitutto, apri le impostazioni del modulo di presentazione superiore / anteriore e aggiorna quanto segue:

altezza: 100%;
larghezza: 100%;

Divi Transform Properties on Click

Quindi aggiungi il seguente codice CSS personalizzato all'elemento principale:

posizione: assoluta! importante; transizione: tutti .5s;

Quindi aggiorna l'indice z come segue:

Indice Z: 2000

Personalizza modulo css divi

La posizione assoluta, combinata con l'altezza e la larghezza del 100% e l'indice z, assicura che il modulo blurb rimanga sopra il modulo blurb dietro di esso. La proprietà di transizione è infatti la durata della transizione delle opzioni di trasformazione che implementeremo al clic successivo. E il "cursore: puntatore" serve a cambiare il cursore in modo che l'elemento risulti cliccabile dall'utente.

Aggiunta di opzioni di trasformazione e classi personalizzate al front blurb

Ora è il momento di aggiungere le nostre proprietà di trasformazione alla copertina. Aggiungeremo quindi le classi CSS personalizzate necessarie al nostro jQuery per attivare queste proprietà al clic.

Sotto i parametri di progettazione del blurb frontale, aggiungi le seguenti proprietà di trasformazione:

Scala di trasformazione X e Y: 20%

Trasformazione Divi

Trasforma origine: in alto al centro

Modifica trasformazione divi

Ricorda che il progetto di trasformazione che vedi a questo punto sarà quello attivato al clic. Approfittiamo semplicemente del costruttore Divi per ottenere il design desiderato. In questo caso, la copertina si contrae e viene centrata nella parte superiore come un'icona cliccabile.

Una volta terminato, aggiungi le due classi CSS necessarie per indirizzare il front blurb con jQuery come segue:

Classe CSS: toggle-transform-animation transform_target

(assicurati di separare ogni nome di classe con uno spazio)

Divi Transform Properties on Click

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Quindi aggiungi il seguente frammento di codice CSS personalizzato che verrà utilizzato per abilitare e disabilitare le proprietà di trasformazione con jQuery.

.toggle-transform-animation {transform: none! important; }

Impostazioni della pagina DiviNoterai che le proprietà di trasformazione blurb aggiunte in precedenza sono state disabilitate perché questa classe è stata applicata ad essa.

Ora vai su Divi> Opzioni tema> Integrazione e aggiungi il seguente script jQuery all'inizio del blog:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Aggiungi sezione integrazione divi

Vediamo il risultato finale.

Blurb modulo animazione divi

Puoi usare questo esempio per creare disegni ancora più impressionanti. Non esitare a condividere la tua opinione nella sezione commenti.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer