Come creare un Blur animato con DIVI è il tuo sogno da sempre: spesso abbiamo bisogno di realizzare contenuti che non siano subito visibili all’utente. Come per esempio le informazioni riguardo ad un servizio oppure un’operazione da svolgere. Qualcosa che insomma aiuti il navigatore, ma solo in caso di necessità. Wp-Win ha costruito questa guida ispirandosi al mini how-to del sito ufficiale di Elegant Themes: non vogliamo in alcun modo rubarne il merito, ma solo rendere disponibile in italiano un ‘trucchetto’ davvero utile.
Sommario
Anteprima
Diamo subito uno sguardo al risultato finale. Desktop o Mobile, il Blur rivelerà i nostri contenuti in tre mosse.
Desktop
Mobile
Scarica subito il Layout
Puoi scegliere di seguire tutti i passaggi elencati in questo tutorial su come creare un Blur animato in tre mosse oppure scaricare il layout e inserirlo subito nella libreria. Per fare il download del contenuto ti basterà completare l’iscrizione alla nostra newsletter: il contenuto diventerà visibile e scaricabile tramite apposito pulsante.
La struttura completa per il Blur a comparsa
Prima di analizzare nel dettaglio come rendere visibili i contenuti, scopriamo come modificare l’intestazione. Aggiungiamo quindi una nuova sezione e modifichiamo lo sfondo introducendo due valori per il gradiente. Il primo è #ffa3ad, mentre il secondo #ffcea3. La direzione invece andrà diminuita fino a 122deg.
Attiviamo la freccia per aggiungere una modifica dell’hover dello sfondo, inserendo i seguenti parametri:
- Colore 1: #000000
- Colore 2: #ffffff
- Tipo gradiente: Radiale
- Direzione: In cima
- Posizione di partenza: 36%
- Posizione finale: 26%
Spostiamoci nella categoria Design e andiamo alla voce Spaziatura. Dobbiamo modificare il padding superiore e inferiore. In entrambi i casi il parametro è 1vw.
Nel corso della guida su come creare un Blur a comparsa faremo dei cambiamenti sull’altezza della sezione. Per essere sicuri che tutto possa funzionare al meglio, facciamo alcune modifiche al contenuto delle sezione grazie alla scheda Avanzate. Alla voce Visibilità, mettiamo nascosto sia per l’Overflow orizzontale sia per quello verticale.
La riga dell’intestazione
Passiamo ora a creare la prima riga, scegliendo il layout con un box singolo. All’interno mettiamo un modulo di testo con la scritta che vogliamo compaia nell’intestazione. La frase dovrà essere in H2 (o Titolo 2) e dovremo modificare anche lo stile del testo, spostandoci all’interno della voce Testo del Sottotitolo presente nella scheda Design. Inseriamo queste caratteristiche:
- Font: Montserrat
- Luce Soffusa: Semi bold
- Allineamento: centrale
- Colore testo: #ffffff (Bianco)
- Dimensioni del testo: 2vw (Desktop), 5vw (Tablet), 6vw (Mobile)
- Spaziatura lettere: -2px
Seconda riga a tre campi
Rimanendo nella stessa sezione, aggiungiamo un’altra riga. Questa volta però selezioniamo la terza possibilità, quella a tre box per intenderci. Prima di aggiungere qualsiasi modulo, cambiamo alcuni dettagli della riga stessa. In particolare, andremo a modificare il padding superiore e inferiore:
- Padding in cima: 2vw (Desktop), 4vw (Tablet), 5vw (Mobile)
- Padding in fondo: 2vw (Desktop), 4vw (Tablet), 5vw (Mobile)
Per essere sicuri che la vista sia identica sia per gli schermi grandi che per quelli più piccoli, aggiungiamo una singola linea di CSS in Avanzate/Elemento principale:
Prima colonna
Adesso possiamo arricchire i contenuti, iniziando dalla prima colonna. Aggiungiamo un modulo di testo e inseriamo solo il simbolo ↓ all’interno del box. Nella scheda Design modifichiamo alcuni dettagli che riguardano il simbolo, ovvero il testo:
- Allineamento: Destra
- Colore: #ffa3ad
- Dimensione testo: 4vw (Desktop), 6vw (Tablet), 8vw (Phone)
Poi aggiungiamo un po’ di margine. La voce si trova in Design, Spaziatura:
- In cima -3vw
- In fondo: 8vw
Per non farci mancare nulla, trasformiamo la rotazione del testo e portiamo a 45deg l’angolo di rotazione, come nell’immagine qui sotto.
Alla voce successiva troviamo Animazione. Selezioniamo Diapositiva e assegniamo Centro alla direzione del gradiente, 1600ms all’animazione. Attenzione: nella traduzione in italiano potremmo trovare tre Animazione senza alcuna distinzione. Il primo si riferisce alla durata e di default è impostato a 1000ms. Il secondo invece al ritardo. Di base è a 0 e nel nostro caso lo porteremo fino a 1600ms. La terza voce riguarda l’intensità, che va lasciata al 50% come di default.
Seconda colonna
Per andare un po’ più veloci, possiamo duplicare il modulo di testo appena creato e applicarlo anche alla seconda colonna. Dovremo però fare delle modifiche all’allineamento del testo, selezionando la posizione centrale. Come margine di spaziatura invece cancelliamo i parametri In fondo e inseriamo invece 1vw per In cima. Ricordiamoci anche di azzerare la trasformazione, riportando a zero la voce modificata poco prima. Infine riportiamo al punto di partenza anche l’Animazione, togliendo i 1000ms che abbiamo aggiunto al ritardo.
Terza colonna
Duplichiamo ancora una volta il modulo testo e spostiamolo nella terza colonna della riga. Modifichiamo l’allineamento, scegliendo Sinistra. Il margine, alla voce Spaziatura, dovrà essere solo -3vw per In Cima, mentre cancelliamo il dettaglio di In fondo. La rotazione (Trasformazione) dovrà essere invece di 315deg. Lasciamo invece intatti i particolari dell’Animazione, ovvero Diapositiva e 1000ms di ritardo.
Prepariamoci al Blur a comparsa: nel dettaglio
Ultimata la riga con le frecce, adesso possiamo andare direttamente al cuore del tema dell’articolo: creare un Blur a comparsa con DIVI. Aggiungiamo un’altra riga da tre box e modifichiamo subito il Dimensionamento. Attiviamo Personalizzate Grondaia Larghezza e aumentiamo al 100% sia la prima voce Larghezza Massima sia la seconda Larghezza massima [l’unica differenza è la ‘m’ della seconda parola, ndr]. Modifichiamo anche il padding (Spaziatura):
- In cima: 2vw (Desktop), 8vw (Tablet), 6vw (Mobile)
- In fondo: 2vw (Desktop), 8vw (Tablet), 6vw (Mobile)
- Sinistra: 10vw (Desktop), 0vw (Tablet & Mobile)
- Destra: 10vw (Desktop), 0vw (Tablet & Mobile)
Anche in questo caso ci dovremo assicurare che ogni elemento rimanga flessibile e proporzionato. Come? Aggiungendo una riga di codice in Avanzate/CSS personalizzato/Elemento Principale:
Nella parte finale del tutorial andremo a cambiare la domensione della riga. Per prepararci a questo step, abbiamo bisogno di essere sicuri che nessun contenuto ecceda il box riga. Come? Nascondendo l’Overflow, accedendo a Avanzate/Visabilità. Dovremo mettere su nascosto sia quello orizzontale sia quello verticale.
Prima colonna
Nella prima colonna della riga che abbiamo appena creato, inseriamo un modulo testo e aggiungiamo un numero nel box dedicato al contenuto. Poi modifichiamo lo sfondo, selezionando la modalità Gradiente (Contenuti/Sfondo). I parametri dovranno essere:
- Colore 1: #ffa3ad
- Colore 2: #ffcea3
- Direzione: 122deg
Nella scheda Design/Testo inseriamo invece:
- Font: Montserrat
- Luce: Ultra grassetto
- Allineamento: Centro
- Colore: #ffffff
- Dimensioni testo: 2vw (Desktop), 4vw (Tablet), 8vw (Mobile)
- Interlinea: 1em
Aggiungiamo anche un po’ di padding nella sezione Design/Spaziatura, in modo che il contenuto sia della giusta dimensione a prescindere dallo schermo che si usa:
- In cima: 1vw (Desktop), 2vw (Tablet), 3vw (Mobile)
- In fondo: 1vw (Desktop), 2vw (Tablet), 3vw (Mobile)
Spostiamoci poi alla voce Bordo e portiamo a 20px tutti e quattro i lati.
A questo punto ci basta clonare due volte il modulo appena creato e spostare i doppioni nelle altre due colonne. L’unica cosa che dobbiamo ricordarci di fare è modificare il numero presente nel testo.
Il Blur che si attiva al click
Finalmente entriamo nel vivo di questo tutorial: creare un Blur animato con la tecnica hover. Iniziamo dalla prima colonna, inserendo nella stessa riga e al di sotto del precedente testo, un modulo Blur. Modifica titolo e testo a tuo piacimento in Contenuti/Testo. Togli l’immagine di default da Immagine & Icona, attiva Usa Icona e scegline una di tuo gradimento. Come sfondo scegli il colore bianco (#ffffff). In Design/Immagine & Icona modifichiamo invece l’altro colore, che per ora dovrebbe apparirti come un verdino da ospedale. Visto che fino ad ora abbiamo giocato con colori che vanno dal rosa all’arancione, la nostra scelta ricade su #ffcea3.
Assicuriamoci che Posizionamento Immagine/Icona sia In Cima e attiviamo il box Usa Dimensione Icona Personalizzata. Come parametro per tutti e tre i device scegliamo 4vw. Andiamo più sotto, alla voce Titolo Testo, e inseriamo:
- Font: Montserrat
- Luce: Grassetto
- Allineamento: Centro
- Colore: #000000
- Dimensione testo: 1vw (Desktop), 2vw (Tablet), 4vw (Mobile)
Per il Body Testo scegliamo invece i seguenti:
- Allineamento: Centro
- Dimensione: 0.6vw (Desktop), 1.3vw (Tablet), 2vw (Mobile)
- Interlinea: 2.5em
In Spaziatura, modifichiamo il padding:
- In Cima: 3vw (Desktop), 5vw (Tablet), 7vw (Mobile)
- In Fondo: 3vw (Desktop), 5vw (Tablet), 7vw (Mobile)
- Sinistra: 1vw
- Destra 1vw
Attenzione: assicurati che il padding sinistra e destra siano identici per tutti e tre tipi di schermo. Per il Bordo aggiungiamo ancora una volta 20px per ogni angolo. Questa volta però inseriamo anche un Box Shadow, ovvero un’ombra al modulo Blur. Basta scegliere la prima opzione, ovvero l’ombra per tutti e quattro i lati.
Spostiamoci alla voce Animazione e scegliamo la diapositiva, aumentando il ritardo a 3000ms, come nell’immagine qui sotto.
Adesso basterà clonare il Blur per due volte e modificare titolo e testo a seconda dei casi.
Modificare righe e sezione
Adesso che abbiamo completato ogni passaggio, possiamo cambiare alcuni parametri assegnati in precedenza ad una riga ed alla sezione. Fino ad ora abbiamo evitato infatti di attivare l’hover che ci servirà per creare l’effetto desiderato. Modifichiamo quindi l’altezza dell’ultima riga creata, quella che contiene i tre step per intenderci. Andiamo su Dimensionamento e cambiato l’altezza:
- Height: 6vw (Desktop), 18vw (Tablet), 24vw (Mobile)
L’hover (librarsi) dovrà invece essere auto.
Per la sezione invece usiamo quest’altezza: 7vw (Desktop), 15vw (Tablet), 20vw (Mobile). L’hover invece dovrà essere sempre auto.
Conclusioni
Abbiamo completato l’opera! Adesso sappiamo come creare un Blur animato in tre mosse con DIVI. Di sicuro potremo usare questo effetto in molti contesti, ad esempio una landing page oppure una presentazione, per illustrare i nostri servizi e molto altro ancora.