Utilizzo delle animazioni di Divi per visualizzare i tuoi contenuti

Benvenuto nella parte 5 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 abbiamo creato la sezione 6 della nostra pagina demo di animazione. Ti ho mostrato come progettare un layout per visualizzare i download di prodotti con colori brillanti, ombre luminose e animazioni precise.

Oggi costruiremo la Sezione 7 della nostra pagina demo di animazione, che è un perfetto esempio di come utilizzare l'effetto di animazione roll per aggiungere un movimento realistico ai tuoi contenuti. Il prodotto finale darà l'impressione di testo e telefoni cellulari che scorrono e ruotano in vista da diverse angolazioni mentre si scorre la pagina.

Questa è una delle mie animazioni preferite. Iniziamo.

Ecco un'anteprima del design e dell'animazione che costruiremo nel post di oggi

Preparazione degli elementi di design

Avrai bisogno di tre immagini per questo tutorial. Le prime due immagini verticali dovrebbero essere di circa 580×950 ruotate con un angolo del 10% in senso antiorario. L'immagine orizzontale dovrebbe essere 1250×608 (ruotata anche di un angolo del 10% in senso antiorario) con circa 300 px di spazio di sfondo extra trasparente a destra dell'immagine in modo che si adatti perfettamente alla colonna fornita. Assicurati che le immagini del telefono siano in formato png con uno sfondo trasparente. Ecco le immagini che ho usato per il post di oggi.

Immagine telefono verticale n. 1

Immagine telefono verticale #2

Immagine telefono verticale n. 3

Utilizzo delle animazioni di Divi per visualizzare i tuoi contenuti

Iscriviti al nostro canale Youtube

Costruzione della sezione 7 della demo

Prima di iniziare il processo di costruzione, ecco uno sguardo alla vista wireframe del layout della sezione che creeremo utilizzando il visual builder.

Utilizzando Visual Builder, iniziamo aggiungendo un'altra sezione normale al nostro layout. Quindi aggiungi una riga di tre colonne (un quarto un quarto e metà) alla tua sezione.

Aggiorna impostazioni riga

Prima di aggiungere il nostro primo modulo, vai alle impostazioni della riga e aggiorna quanto segue:

Nella scheda Progettazione...

Usa larghezza personalizzata: S
Larghezza personalizzata: 91%
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1

Imbottitura personalizzata colonna 2: 5% in alto
Imbottitura personalizzata della colonna 3: 24% in alto

Aggiunta dell'immagine n. 1

Nella prima colonna (all'estrema sinistra) del nostro layout, aggiungi un modulo immagine e aggiorna le impostazioni dell'immagine come segue:

Nella scheda Contenuto...

URL immagine: [carica immagine #1]

Nella scheda Progettazione...

Forza intera larghezza: S

Stile di animazione: Roll
Direzione dell'animazione: destra
Intensità animazione: 16%
Opacità iniziale dell'animazione: 100%

Salva le impostazioni

Aggiunta di testo animato con i moduli Divisore e Call to Action

Ora passa alla colonna centrale (un quarto) in cui verrà utilizzato il modulo divisore per aggiungere una breve linea divisoria sopra il testo.

Aggiungi un modulo divisore alla colonna.

Quindi aggiorna le impostazioni come segue:

Nella scheda Contenuto...

Mostra divisore: S

Nella scheda Progettazione...

Colore: #e0c48f
Peso del divisore: 3px
Larghezza: 60 px (devi digitare questo valore poiché l'impostazione predefinita è percentuale)
Allineamento del modulo: predefinito (a sinistra)
Imbottitura personalizzata: 80px in alto, 80px a sinistra

Stile di animazione: piega
Direzione dell'animazione: destra
Durata dell'animazione: 1200 ms
Ritardo animazione: 50 ms
Intensità animazione: 70%
Opacità iniziale dell'animazione: 0%

Salva le impostazioni

Sotto il modulo divisore aggiungi un modulo di invito all'azione con le seguenti impostazioni:

Nella scheda Contenuto...

Titolo: “1000 parole”
Testo del pulsante: "Ulteriori informazioni"
Contenuto: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id.”
Collegamento: #
Usa il colore di sfondo: NO

Nella scheda Progettazione...

Colore del testo: scuro
Orientamento del testo: a sinistra
Carattere intestazione: Lato, grassetto (B) maiuscolo (TT)
Dimensione carattere intestazione: 38 px
Colore del testo dell'intestazione: #33454f
Spaziatura delle lettere dell'intestazione: 0.2em
Altezza della riga di intestazione: 1,4 em

Carattere del corpo: Lato
Dimensione carattere corpo: 18px
Colore del corpo del testo: #9b9b9b
Altezza della linea del corpo: 1,8 em

Usa stili personalizzati per il pulsante: S
Dimensione del testo del pulsante: 15 px
Colore del testo del pulsante: #f2733c
Colore di sfondo del pulsante: rgba (225,225,225,0)
Larghezza bordo pulsante: 0px
Spaziatura delle lettere dei pulsanti: 2px
Carattere pulsante: Lato, Grassetto (B), Maiuscolo (TT)
Icona del pulsante: freccia destra
Mostra solo l'icona al passaggio del mouse per il pulsante: NO
Spaziatura delle lettere al passaggio del mouse del pulsante: 0px

Stile di animazione: piega
Direzione dell'animazione: destra
Durata dell'animazione: 1200 ms
Ritardo animazione: 50 ms
Intensità animazione: 70%
Opacità iniziale dell'animazione: 0%

Salva le impostazioni

Aggiunta dell'immagine #2

Quindi aggiungi un modulo Immagine sotto il modulo Call to Action appena creato. Aggiorna le impostazioni dell'immagine come segue:

Nella scheda Contenuto...

URL immagine: [carica immagine #2]

Nella scheda Progettazione...

Forza intera larghezza: S

Stile di animazione: Roll
Direzione animazione: Sinistra
Intensità animazione: 13%
Opacità iniziale dell'animazione: 100%

Aggiungi immagine #3

Questo è tutto per la nostra seconda colonna (centrale). Ora aggiungiamo l'immagine n. 3 nella terza colonna (all'estrema destra). Per fare ciò, possiamo duplicare/copiare il modulo immagine che hai appena aggiunto in fondo alla seconda colonna e incollarlo nella terza colonna. Poiché gli stili di animazione sono gli stessi, tutto ciò che devi aggiornare per il nuovo modulo immagine è l'URL effettivo dell'immagine.

Duplica e personalizza il modulo Divisore e Call To Action

Dopo aver aggiunto il nuovo URL dell'immagine all'immagine duplicata nella colonna tre, procedi a duplicare/copiare sia il modulo divisore che il modulo di invito all'azione che hai creato nella parte superiore della seconda colonna e trascina/incolla i due moduli sotto l'immagine #3 nella terza colonna.

Per il modulo divisore, modificare l'impostazione Direzione animazione nella scheda Progettazione su "Sinistra".

Per il nostro nuovo modulo di invito all'azione, vai avanti e aggiorna le seguenti impostazioni:

Nella scheda Contenuto...

Titolo: Un nuovo modo di costruire

Nella scheda Progettazione...

Imbottitura personalizzata: 80 pixel a destra, 80 pixel in basso, 80 pixel a sinistra

Direzione animazione: Sinistra

Ora diamo un'occhiata al nostro risultato finale...

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.

SCARICA

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_5.zip nella nostra cartella dei download. Decomprimilo per rivelare le seguenti importazioni.

Effetti di animazione Parte 5 (sezione 1).json

Effetti di animazione Parte 5 (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

Questo layout è un po' difficile da realizzare. Ma, una volta ottenute le immagini giuste e la giusta spaziatura, l'animazione unisce bene l'intero layout. Il rotolamento realistico delle immagini del telefono sembra quasi che qualcuno le stia facendo scorrere su un tavolo bianco nella nostra vista mentre scorriamo la pagina. Questo esempio di animazione roll è sicuramente uno che si distingue.

in arrivo

Nel prossimo post, concluderò la nostra serie con la parte 6. Ti mostrerò come utilizzare l'animazione della diapositiva con alcune immagini personalizzate e CSS per creare un layout straordinario per presentare ricette di cucina. Tuttavia, lo stesso layout potrebbe essere modificato e utilizzato per molti elementi in primo piano diversi.

Non vedo l'ora di sentirti nei commenti.