Utilizzo delle animazioni di Divi per aprire il contenuto con immagini scorrevoli
Pubblicato: 2017-10-12Benvenuto nella seconda parte di questa serie in 5 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.
Nella parte 1 della nostra serie, abbiamo creato le prime due sezioni della pagina demo dell'animazione. Il design e l'animazione dell'intestazione nella prima sezione hanno mostrato un modo unico per animare gli elementi di un modulo di testo all'interno di una sezione standard a schermo intero. Nella creazione della seconda sezione, abbiamo scoperto un modo per incorporare animazioni sottili e armoniose in righe di contenuti che potrebbero essere facilmente utilizzate per presentare i contenuti su una pagina di destinazione in modo accattivante.
Oggi continuiamo il nostro viaggio per progettare layout di sezione che utilizzino l'animazione in modo efficace (e creativo) durante lo scorrimento della pagina. Costruiremo la terza e la quarta sezione della nostra pagina demo dal vivo per mostrare la potenza delle funzionalità di animazione di Divi. Entrambe queste sezioni hanno layout che possono essere facilmente adottati per i tuoi progetti per mostrare prodotti o servizi.
Iniziamo.
Ecco un'anteprima di ciò che costruiremo nel post di oggi
Sezione 3
Sezione 4
Preparazione degli elementi di design
Prepara le tue immagini
Per la terza sezione, avrai bisogno di due immagini. Il primo deve essere di circa 880×600 e il secondo di circa 790×880. Queste dimensioni dell'immagine non devono essere esatte. Includo queste dimensioni solo per darti un'idea.
Quando costruisci la quarta sezione, avrai anche due immagini intorno a 600×400.
Usa il Visual Builder
Non c'è bisogno di codice avanzato qui. Utilizzeremo solo Visual Builder per progettare le prossime due sezioni della nostra pagina che abbiamo creato nella parte 1 di questa serie. Poiché la tua pagina è già configurata, sei pronto per partire.
Utilizzo delle animazioni di Divi per aprire il contenuto con immagini scorrevoli
Iscriviti al nostro canale Youtube
Costruzione della sezione 3 della demo
La Sezione 3 è un ottimo esempio di come progettare e animare il Modulo Call to Action con un'immagine di accompagnamento.
Immergiamoci.
Utilizzando Visual Builder, aggiungi una sezione regolare con una riga a due colonne. Nella colonna di sinistra aggiungi un modulo immagine.
Aggiorna le impostazioni dell'immagine come segue:
Nella scheda Contenuto...
URL immagine: [inserisci la tua immagine 880×600]
Nella scheda Progettazione...
Forza intera larghezza: S
Stile di animazione: diapositiva
Direzione animazione: Sinistra
Intensità animazione: 20%
Opacità iniziale dell'animazione: 100%
Salva le impostazioni
Aggiungi modulo divisore
Nella colonna di destra, mostreremo i nostri contenuti utilizzando il modulo divisore e il modulo Call to Action. Il modulo divisore verrà utilizzato per aggiungere una breve linea divisoria sopra il testo.
Aggiungi un modulo divisore alla colonna di destra.
Quindi aggiorna le impostazioni come segue:
Nella scheda Contenuto...
Mostra divisore: S
Nella scheda Progettazione...
Colore: #e4ca77
Peso del divisore: 4px
Larghezza: 80px (devi digitare questo valore poiché l'impostazione predefinita è percentuale)
Allineamento del modulo: predefinito (a sinistra)
Margine personalizzato: 60 px in alto, 0 px in basso
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
Aggiungi un modulo di invito all'azione
Sotto il modulo divisore aggiungi un modulo di invito all'azione con le seguenti impostazioni:
Nella scheda Contenuto...
Titolo: "La vista perfetta"
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, efficitur nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisi”.
Collegamento: #
Usa il colore di sfondo: NO
Nella scheda Progettazione...
Colore del testo: scuro
Orientamento del testo: a sinistra
Carattere intestazione: Lato, Maiuscolo (TT)
Dimensione carattere intestazione: 38 px
Colore del testo dell'intestazione: #0c0c0c
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: #9e9e9e
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: #000000
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
Ora fai clic per modificare le impostazioni della riga e aggiornare quanto segue:
Nella scheda Progettazione...
Usa larghezza personalizzata: S
Larghezza personalizzata: 1366 px
Nella scheda Avanzate...
Aggiungi il seguente CSS personalizzato alla casella Elemento principale della colonna 1:
z-index: 999;
Salva le impostazioni
Duplica la tua riga e aggiornala
Questo è tutto per la prima riga. Per risparmiare tempo creando la seconda riga, duplica la riga appena creata.
Modifica le impostazioni della riga duplicata come segue:
Nella scheda Avanzate...
Estrarre il CSS personalizzato nell'elemento principale della colonna 1 e aggiungerlo alla casella Elemento principale della colonna 2:
z-index: 999;
Poiché la nostra immagine sarà sulla colonna di destra, abbiamo bisogno di quella colonna per rimanere in cima al testo animato a sinistra.
Salva le impostazioni
Aggiorna modulo immagine e modulo invito all'azione nella seconda riga
Quindi trascina il modulo immagine nella colonna di destra e trascina il modulo divisore e il modulo di invito all'azione nella colonna di sinistra.
Questa sezione avrà una struttura a colonne leggermente diversa. Fare clic sull'icona Modifica riga della struttura delle colonne (accanto all'icona della riga duplicata) e selezionare un layout di due terzi e un terzo di colonna.
Ora tutto ciò che dobbiamo fare è rivisitare ciascuno dei moduli all'interno della riga e apportare alcune modifiche.
Innanzitutto, aggiorna le impostazioni del modulo divisore come segue:
Nella scheda Progettazione...
Allineamento del modulo: a destra
Direzione animazione: Sinistra
Salva le impostazioni
Quindi aggiorna le impostazioni del modulo di invito all'azione come segue:
Titolo: "Parla da solo"
Orientamento del testo: a destra
Allineamento del testo dell'intestazione: a destra
Larghezza: 700 px (digitalo)
Direzione animazione: Sinistra
Salva le impostazioni
Quindi aggiorna il modulo immagine nella colonna di destra con la tua nuova immagine 790×880.
Questo è tutto per la sezione 3!
Controlla il tuo risultato.
Costruzione della sezione 4 della demo
La Sezione 4 porta il design del Modulo Immagine ad un altro livello con alcuni trucchi CSS avanzati. Inoltre, impilare i moduli di testo per piegarli su una cerniera si combina bene con la consegna. Immergiamoci.
Utilizzando Visual Builder, aggiungi una sezione regolare con una riga a due colonne (metà metà). Prima di aggiungere il nostro primo modulo, aggiungiamo un colore di sfondo alla nostra sezione. Fare clic per modificare le impostazioni della sezione.
Nella scheda del contenuto, seleziona la scheda del colore di sfondo e inserisci il colore #262938.
Salva le impostazioni
Aggiungi il primo modulo di testo
Nella colonna di sinistra aggiungi un modulo di testo e aggiorna le impostazioni del testo come segue:
Nella scheda Contenuto...
Inserisci il seguente codice html nella scheda di testo della casella del contenuto:
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
Nella scheda Progettazione...
Colore del testo: chiaro
Carattere dell'intestazione: display Playfair, grassetto (B)
Dimensione carattere intestazione: 38 px
Altezza della riga di intestazione: 1,3 em
Margine personalizzato: 20 px in basso
Animazione: piega
Direzione dell'animazione: su
Aggiungi il secondo modulo di testo
Quindi aggiungi un altro modulo di testo direttamente sotto il modulo di testo corrente. Quindi 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: piega
Direzione animazione: Giù
Ritardo animazione: 150 ms
Salva le impostazioni
Aggiungi il modulo pulsante
Aggiungi un modulo pulsanti sotto l'ultimo modulo di testo e aggiorna le impostazioni come segue:
Testo del pulsante: Ulteriori informazioni
URL pulsante: #
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: #ffffff
Raggio bordo pulsante: 0px
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: Giù
Durata dell'animazione: 1600 ms
Ritardo animazione: 150 ms
Intensità animazione: 20%
Salva le impostazioni
Aggiungi modulo immagine alla colonna di destra
Questo è tutto per quella colonna. Ora dobbiamo aggiungere un modulo immagine alla colonna di destra. Quindi aggiorna le impostazioni come segue:
Nella scheda Contenuto...
URL immagine: [inserisci la tua immagine 600×400]
Nella scheda Progettazione...
Forza intera larghezza: S
Stile di animazione: diapositiva
Direzione dell'animazione: destra
Ritardo animazione: 800 ms
Intensità animazione: 20%
Salva le impostazioni
Aggiorna impostazioni riga
Ora fai clic per modificare le impostazioni della riga e aggiornare quanto segue:
Nella scheda Progettazione...
Usa larghezza personalizzata: S
Larghezza personalizzata: 1366 px
Imbottitura personalizzata: 27 px in alto, 0 px a destra, 170 px in basso, 0 px a sinistra
Imbottitura personalizzata colonna 1: 6% in alto
Nella scheda Avanzate...
Aggiungi il seguente CSS personalizzato alla casella Elemento principale della colonna 1:
z-index: 999;
Questo CSS aggiunge assicura che il testo rimanga sopra l'immagine durante l'animazione.
Quindi aggiungi il seguente CSS personalizzato alla casella Elemento principale della colonna 2:
transform: scale(1.3); transform-origin: top right;
Questo CSS aggiunge un design intelligente per aumentare (aumentare) le dimensioni di tutto nella colonna 2 (l'immagine). La proprietà di origine della trasformazione indica alla colonna di ridimensionare dall'angolo in alto a destra della riga. Questo crea una leggera sovrapposizione del testo a sinistra e dell'immagine.
Salva le impostazioni
Duplica e aggiorna la tua riga
Ora, proprio come abbiamo fatto nella sezione 3, duplichiamo la riga. Dopo aver duplicato la riga, trascina i 2 moduli di testo e il modulo dei pulsanti dalla colonna di sinistra a quella di destra. E trascina il modulo immagine dalla colonna di destra a sinistra. Ora tutto ciò che dobbiamo fare è apportare alcuni aggiornamenti minori alla nostra riga duplicata e al suo contenuto.
Innanzitutto, aggiorniamo le impostazioni della riga con quanto segue:
Nella scheda Progettazione...
Imbottitura personalizzata: 40 px in alto, 0 px a destra, 40 px in basso, 0 px a sinistra
Colonna 1 Imbottitura personalizzata: [ripristina i valori predefiniti; cancella 6% in alto]
Imbottitura personalizzata colonna 2: 6% in alto
Nella scheda Avanzate...
Cancella il CSS personalizzato dalla casella dell'elemento principale della colonna 1 e dalla casella dell'elemento principale della colonna 2. Questo è stato riportato dalla duplicazione e non ne abbiamo più bisogno.
Aggiorna modulo immagine
Quindi, aggiorna il modulo immagine (ora nella colonna di sinistra) con quanto segue:
Nella scheda Contenuto...
URL immagine: [inserisci la tua nuova immagine 600×400]
Nella scheda Progettazione...
Direzione animazione: Sinistra
Nella scheda Avanzate...
Se stavi pensando che questa immagine fosse già sfocata. pensa di nuovo! Tutto quello che devi fare per aggiungere questo effetto di sfocatura è aggiungere la seguente riga di CSS personalizzato alla casella Elemento principale:
filter: blur(5px) opacity(.6);
Oltre all'effetto sfocatura, questo css rende anche l'immagine semi-trasparente con un'opacità del 60%.
Salva le impostazioni
Aggiorna modulo di testo nella colonna di destra
Passando alla colonna di destra, aggiorna il contenuto del modulo di testo in alto con un'intestazione h1 più corta:
<h1>Consectetur adipiscing elit</h1>
Salva le impostazioni
E voilà! Abbiamo finito con la sezione 4. 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.
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_2.zip nella nostra cartella dei download. Decomprimilo per rivelare le seguenti importazioni.
Effetti di animazione Parte 2 (sezione 1).json
Effetti di animazione Parte 2 (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
Oltre a farmi venire un po' fame di carboidrati, questa sezione mostra modi creativi per visualizzare e animare le immagini. Inoltre, i moduli di testo che si aprono su una cerniera con il pulsante di scorrimento ritardato invoglia ulteriormente l'utente a fare clic sul CTA.
in arrivo
Nella parte 3 di questa serie, ti mostrerò un modo bellissimo per progettare e animare i moduli blurb. Questo layout di sezione può essere utilizzato per una varietà di scopi. Vedo che questo è un modo per mostrare il processo del tuo servizio o un elenco dei tuoi servizi o prodotti.
Non vedere l'ora di.
Non dimenticare di contattarci nei commenti qui sotto!