Le opzioni di trasformazione integrate di Divi hanno dimostrato di essere uno strumento di progettazione estremamente utile, che consente di ridimensionare, ruotare, inclinare o posizionare qualsiasi elemento su una pagina con facilità. E puoi anche scegliere di trasformare gli oggetti in uno stato al passaggio del mouse per fantastici effetti al passaggio del mouse. 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 usare i parametri di progettazione integrati di Divi per assegnare uno stile alle proprietà di trasformazione, quindi attivare (o disattivare) queste proprietà di trasformazione con un clic del mouse. Ciò aprirà un sacco di possibilità uniche per rivelare contenuti nascosti spostando gli elementi al clic anziché al passaggio del mouse. E aiuta anche a ridurre la necessità di conoscere molti 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, assegna un titolo alla tua pagina e continua il design sul generatore Divi in primo piano. Seleziona l'opzione "Crea da zero". Ora sei pronto per partire!
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.
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.
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; }
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.
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".
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');
});
});
È 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.
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.
Aggiorna il contenuto del testo del layout per includere solo un titolo (rimuovi il contenuto del corpo predefinito) e aggiungi un'icona di presentazione.
Quindi 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
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.
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
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%.
Innanzitutto, apri le impostazioni del modulo di presentazione superiore / anteriore e aggiorna quanto segue:
altezza: 100%;
larghezza: 100%;
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
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%
Trasforma origine: in alto al centro
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)
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; }
Noterai 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');
});
});
Vediamo il risultato finale.
Puoi usare questo esempio per creare disegni ancora più impressionanti. Non esitare a condividere la tua opinione nella sezione commenti.
