Usare Divi's Fold Animation per far fiorire i Blurb
Pubblicato: 2017-10-16Benvenuto nella parte 4 di questa serie di 6 parti che ti insegnerà come utilizzare le nuove opzioni di animazione di Divi per progettare fantastiche sezioni di pagina. Ti illustrerò come creare le diverse sezioni della nostra pagina demo dal vivo per mostrarti le tecniche per aggiungere animazioni al tuo sito web. Le funzioni di animazione sono davvero divertenti e facili da usare. E con Visual Builder, puoi vedere la tua creazione prendere vita in ogni fase del processo. Vieni e unisciti a me mentre esploriamo il potere delle animazioni Divi.
Nel nostro ultimo post, ti ho mostrato alcuni modi creativi per progettare e animare 4 moduli blurb organizzati per un processo passo dopo passo.
Oggi costruiremo la Sezione 6 della nostra pagina demo di animazione. Questa sezione mostra alcuni fantastici design e animazioni per la visualizzazione di prodotti o download in primo piano. L'uso del colore e l'effetto blooming dell'animazione su quei moduli blurb fanno davvero risaltare la sezione.
Immergiamoci!
Ecco un'anteprima di ciò che costruiremo nel post di oggi
Usare Divi's Fold Animation per far fiorire i Blurb
Iscriviti al nostro canale Youtube
Edificio Sezione 6
Aggiungi e personalizza la tua sezione
Utilizzando Visual Builder, iniziamo aggiungendo un'altra sezione normale al nostro layout. Quindi aggiungi una riga di tre colonne (mezzo un quarto un quarto) alla tua sezione.
Prima di aggiungere il nostro primo modulo, vai alle impostazioni della sezione e aggiorna quanto segue:
Nella scheda Contenuto...
Colore di sfondo: #00252d
Nella scheda Progettazione...
Imbottitura personalizzata: 80px in alto, 80px in basso
Salva le impostazioni
Aggiungi un'intestazione usando il modulo di testo
Ora torniamo alla nostra riga di tre colonne e aggiungiamo un modulo di testo nella colonna di sinistra. Aggiorna le impostazioni del testo come segue:
Nella scheda Contenuto...
Aggiungi la seguente intestazione h1 nella scheda di testo della casella del contenuto:
<h1>Build Like You Mean It</h1>
Nella scheda Progettazione...
Carattere intestazione: Lato, grassetto (B)
Dimensione carattere intestazione: 38 px
Colore del testo dell'intestazione: #ffffff
Altezza della riga di intestazione: 1,3 em
Margine personalizzato: 20 px in basso
Stile di animazione: diapositiva
Direzione animazione: Sinistra
Intensità animazione: 16%
Salva le impostazioni
Aggiungi testo usando un altro modulo di testo
Normalmente, probabilmente andresti avanti e aggiungeresti il resto del testo sotto l'intestazione h1 nello stesso modulo di testo. Ma poiché vogliamo aggiungere un diverso effetto di animazione all'intestazione h1 e al testo sottostante, dovremo creare un altro modulo di testo. Vai avanti e aggiungi un modulo di testo sotto quello appena creato e aggiorna le impostazioni come segue:
Nella scheda Contenuto...
Contenuto: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.”
Nella scheda Progettazione...
Colore del testo: chiaro
Dimensione carattere del testo: 18px
Colore del testo del testo: rgba (255,255,255,0.66)
Altezza riga di testo: 1,9 em
Margine personalizzato: 40 px in basso
Stile di animazione: diapositiva
Direzione animazione: Sinistra
Intensità animazione: 8%
Salva le impostazioni
Aggiungi un pulsante
Ora aggiungiamo un modulo pulsante sotto i due moduli di testo nella colonna di sinistra. Quindi aggiorna le impostazioni come segue:
Nella scheda Contenuto...
Testo in basso: Scarica tutto
URL del pulsante [inserisci l'URL]
Nella scheda Progettazione...
Usa stili personalizzati per il pulsante: S
Dimensione del testo del pulsante: 15 px
Colore del testo del pulsante: #01254c
Colore di sfondo del pulsante: #ffcd1c
Larghezza bordo pulsante: 0px
Raggio del bordo del pulsante: 65 px
Spaziatura tra le lettere dei pulsanti: 1px
Carattere pulsante: grassetto (B), maiuscolo (TT)
Imbottitura personalizzata: 10 pixel in alto, 30 pixel a destra, 10 pixel in basso, 30 pixel a sinistra
Stile di animazione: diapositiva
Direzione animazione: Sinistra
Intensità animazione: 16%
Non dimentichiamo di aggiungere quel meraviglioso effetto bagliore usando la proprietà box shadow css. Trova la casella Main Element sotto Custom CSS e aggiungi quanto segue:
box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);
Salva le impostazioni
Aggiungi il tuo primo modulo Blurb
Questo è tutto per la nostra colonna di sinistra. Ora aggiungiamo un modulo Blurb alla colonna centrale (che è la prima colonna di un quarto).
Aggiorna le impostazioni come segue:
Nella scheda Contenuto...
Titolo: Divi
Usa l'icona: S
Icona: [seleziona icona]
Colori sfumati di sfondo: #8b56ff, #5d3dff
Tipo di gradiente: lineare
Direzione del gradiente: 140 gradi
Nella scheda Progettazione...
Colore icona: #ffffff
Colore del testo: chiaro
Orientamento del testo: al centro
Carattere dell'intestazione: grassetto (B), maiuscolo (TT)
Spaziatura delle lettere dell'intestazione: 10px
Margine personalizzato: 12% inferiore
Imbottitura personalizzata: 40 px in alto, 30 px a destra, 30 px in basso, 30 px a sinistra
Stile di animazione: piega
Direzione animazione: Sinistra
Ritardo animazione: 200 ms
Nella scheda Avanzate...
Qui è dove possiamo aggiungere quell'effetto bagliore al nostro modulo e far rientrare l'intestazione solo un po'.
Aggiungi il seguente CSS alla casella Elemento principale:
border-radius: 6px; box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);
Aggiungi il seguente CSS alla casella Titolo Blurb:
text-indent: 10px;
Salva le impostazioni
Duplica il modulo Blurb per costruire i prossimi tre Blurb
Ora che abbiamo progettato e animato il nostro primo modulo Blurb, possiamo duplicare il modulo per creare i restanti blurb.
Passa il mouse sul modulo Blurb e fai clic sull'icona del modulo duplicato. Nel nuovo modulo duplicato che appare di seguito aggiorna le impostazioni come segue:
Nella scheda Contenuto...
Titolo: Bloom
Icona: [seleziona nuova icona]
Colori sfumati di sfondo: #ff56f9, #c43dff
Nella scheda Progettazione...
Direzione animazione: Giù
Nella scheda Avanzate...
Sostituisci il CSS nella casella Elemento principale con quanto segue:
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);
Salva le impostazioni
Crea un altro duplicato del modulo blurb e trascina quel duplicato nella colonna all'estrema destra. Quindi aggiorna quel Modulo Blurb con le seguenti impostazioni:
Nella scheda Contenuto...
Titolo: Extra
Icona: [seleziona nuova icona]
Colori sfumati di sfondo: #56ffda, #38d5ea
Nella scheda Progettazione...
Direzione dell'animazione: su
Nella scheda Avanzate...
Sostituisci il CSS nella casella Elemento principale con quanto segue:
border-radius: 6px; box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);
Crea un altro duplicato del modulo blurb che hai appena aggiornato nella colonna di destra in modo che appaia direttamente sotto. Quindi aggiorna quel Modulo Blurb con le seguenti impostazioni:
Nella scheda Contenuto...
Titolo: Monarch
Icona: [seleziona nuova icona]
Colori sfumati di sfondo: #f2743a, #ff5656
Nella scheda Progettazione...
Direzione dell'animazione: destra
Nella scheda Avanzate...
Sostituisci il CSS nella casella Elemento principale con quanto segue:
border-radius: 6px; box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
Salva le impostazioni
Ora otteniamo la spaziatura corretta aggiornando le impostazioni della riga come segue:
Nella scheda Progettazione...
Usa larghezza personalizzata: S
Larghezza personalizzata: 1366 px
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 2
Imbottitura personalizzata: 80 px in alto, 0 px a destra, 160 px in basso, 0 px a sinistra
Imbottitura personalizzata della colonna 1: 140 px in alto
Costruisci la seconda fila
Ora siamo pronti per creare la riga successiva per la nostra sezione. Per accelerare le cose, duplicheremo e copieremo elementi di design dalla nostra riga e dai moduli precedentemente progettati.
Per prima cosa aggiungiamo una nuova riga a una colonna alla nostra sezione. Quindi aggiorna le impostazioni della riga con quanto segue:
Usa larghezza personalizzata: S
Larghezza personalizzata: 1366 px
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 2
Salva le impostazioni
Quindi copia il primo modulo di testo nella prima riga che hai creato che contiene il titolo h1. Quindi aggiorna le impostazioni come segue:
Nella scheda Contenuto...
Sostituisci il tag h1 corrente con il seguente:
<h1>Don't Settle for Less</h1>
Nella scheda Progettazione...
Orientamento del testo: al centro
Stile di animazione: Flip
Intensità animazione: 70%
Salva le impostazioni
Quindi copia il modulo pulsante dalla riga precedente e incollalo sotto il modulo di testo che hai appena finito di aggiornare nella seconda riga. Quindi aggiornare il modulo pulsanti come segue:
Nella scheda Contenuto...
Testo del pulsante: Iscriviti oggi
Nella scheda Progettazione...
Allineamento dei pulsanti: centro
Stile di animazione: Flip
Intensità animazione: 70%
Salva le impostazioni
Ora per la nostra ultima riga. Crea una nuova riga con una struttura a metà metà colonna. Prima di aggiungere i tuoi moduli, aggiorna le impostazioni della riga come segue:
Nella scheda Progettazione...
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 2
Salva le impostazioni
Quindi, copia il modulo Blurb "Divi" viola dalla riga precedente e incollalo nella colonna di sinistra della nuova riga. Quindi aggiorna le seguenti impostazioni:
Nella scheda Contenuto...
Titolo: Builder
Icona: [seleziona nuova icona]
Colori sfumati di sfondo: #ff568e, #ff3d5d
Nella scheda Avanzate...
Sostituisci il CSS nella casella Elemento principale con quanto segue:
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);
Salva le impostazioni
Quindi copia il modulo blurb "Extra" bluverde nella parte superiore della colonna all'estrema destra nella prima riga che hai creato. Quindi incollalo nella colonna di destra della tua nuova terza riga.
Quindi aggiorna le impostazioni del blurb come segue:
Nella scheda Contenuto...
Titolo: Sereno
Icona: [seleziona nuova icona]
Colori sfumati di sfondo: #3da4ff, #385eea
Nella scheda Avanzate...
Sostituisci il CSS nella casella Elemento principale con quanto segue:
border-radius: 6px; box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);
Salva le impostazioni
Questo è tutto.
Bonus: scarica queste sezioni per una facile importazione
Come vantaggio bonus abbiamo impacchettato le sezioni integrate nel tutorial di oggi in un download gratuito che puoi ottenere utilizzando il modulo di attivazione e-mail di seguito. Inserisci semplicemente la tua email e apparirà il pulsante di download. Non preoccuparti di "ri-iscriverti" se fai già parte della nostra Newsletter Divi. Reinserire la tua email non comporterà più email o duplicati. Rivelerà semplicemente il download.
Divertiti!
Scarica il pacchetto di layout
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per utilizzare questi download, inizia individuando il file compresso chiamato Animation_Effects_Part_4.zip nella nostra cartella dei download. Decomprimilo per rivelare le seguenti importazioni.
Effetti di animazione Parte 4 (sezione 1).json
Effetti di animazione Parte 4 (sezione 2).json
Naviga nel tuo pannello di amministrazione di WordPress su Divi > Libreria Divi > Importa ed esporta. Quando viene visualizzata la modalità di portabilità, fai clic sulla scheda di importazione e sul pulsante con l'etichetta scegli file.
Seleziona il file json che preferisci e fai clic su "Importa layout Divi Builder". Una volta completata l'importazione, vai al post o alla pagina a cui desideri aggiungere una delle sezioni precedenti.
Attiva il visual builder. Passa alla parte della pagina a cui desideri aggiungere una delle sezioni precedenti. Quando fai clic sull'icona Aggiungi nuova sezione, ti verrà presentata l'opzione "Aggiungi dalla libreria". Scegli questa opzione e seleziona il layout che desideri.
Avvolgendo
Spero che vi siate divertiti a costruire insieme questa splendida sezione. La combinazione di colori, ombre luminose e animazione creativa lo rendono un layout eccezionale per mostrare i tuoi download o prodotti.
in arrivo
Nella parte 5 ti mostrerò come incorporare con successo lo stile di animazione Roll sui telefoni cellulari all'interno delle tue sezioni.
Non vedo l'ora di sentirti nei commenti qui sotto.
Saluti!