Aggiunta di effetti 3D a GIF e video HTML5 per visualizzare animazioni di prodotti unici in Divi
Pubblicato: 2019-06-20Le GIF animate e i video HTML5 possono essere ottimi per animare il funzionamento di un prodotto sul tuo sito web. Queste brevi animazioni comunicano informazioni preziose al visitatore in un modo più facilmente digeribile rispetto a un normale video. L'aggiunta di questo tipo di GIF e video HTML5 può essere eseguita abbastanza facilmente con Divi. E con un po' di creatività, puoi aggiungere effetti 3D per animazioni di prodotti uniche.
In questo tutorial, ti mostrerò come aggiungere effetti 3D a GIF e video HTML5 per visualizzare animazioni di prodotti uniche in Divi. Questo design funziona davvero bene per coloro che cercano un layout creativo per mostrare un prodotto o un servizio in primo piano. Per fare ciò, dobbiamo prima capire come aggiungere GIF e incorporamenti video HTML5 alla tua pagina utilizzando Divi. Quindi saremo in grado di utilizzare le opzioni di trasformazione di Divi per posizionare e ruotare la GIF (o il video) nello spazio 3D. Per finire, utilizzeremo alcune tecniche di progettazione Divi per creare un bellissimo layout di sezione da abbinare a quelle GIF e video 3D.
Iniziamo.
Sbirciata
Ecco un'anteprima del design che costruiremo in questo tutorial. Il design è simile quando si utilizza una GIF e un video HTML5 per creare le animazioni del prodotto.
Scarica gli effetti 3D per GIF e video HTML5 Animazioni di prodotti Divi Layout GRATIS
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
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 importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Passiamo al tutorial, vero?
Iscriviti al nostro canale Youtube
Utilizzo di GIF per brevi animazioni di prodotti
Le GIF esistono da molto tempo. Ciò è probabilmente dovuto al fatto che le GIF sono facili da realizzare e ampiamente supportate da tutti i browser. E possono funzionare bene per animazioni di prodotto davvero brevi. Poiché una GIF è un'immagine, puoi usarla in un modulo Divi Image proprio come faresti con qualsiasi altro jpg o png. Ciò ti consente di modellare la GIF con tutta la potenza delle impostazioni integrate di Divi. Ma attenzione, le GIF con una durata più lunga e una frequenza fotogrammi più elevata possono generare file di dimensioni davvero grandi. Quindi è meglio mantenere le tue GIF brevi e il più piccole possibile.
Utilizzo di video HTML5 come sostituzione GIF
I video HTML5 stanno diventando un popolare sostituto delle GIF, specialmente per le animazioni dei prodotti più lunghe. Potresti aver notato che vengono utilizzati nel nuovo design del sito Web di Elegant Themes. Sono di dimensioni notevolmente inferiori rispetto alle GIF e quindi richiedono meno tempo per il caricamento. E aggiungere un video HTML5 al tuo sito Divi è semplice. Tutto quello che devi fare è aggiungere l'elemento video HTML5 per incorporare il video nella tua pagina (in modo simile a come aggiungeresti uno shortcode video in WordPress). Puoi anche personalizzare il video con controlli nascosti, loop e riproduzione automatica, il che si traduce in un'animazione di alta qualità che funziona proprio come una GIF. Inoltre, quando aggiungi l'incorporamento a un modulo Divi, puoi anche utilizzare Divi builder per modellare il video in modi creativi.
Dai un'occhiata a questo post per ulteriori informazioni sul motivo per cui dovresti considerare l'utilizzo di video HTML5 su GIF normali.
Ora che abbiamo capito un po' di più sull'utilizzo di GIF e video HTML5, siamo pronti per iniziare a usarli in Divi.
Cosa ti serve per questo tutorial
Per iniziare, avrai bisogno di quanto segue:
- Un'immagine GIF
- Un file video MP4 (e l'URL di quel file video) da utilizzare nell'incorporamento dell'elemento video HTML5. Per il massimo supporto del browser, puoi anche includere lo stesso video anche in formato webm (ne parleremo più avanti).
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Aggiunta di un effetto 3D a una GIF animata o video HTML5
Prima di addentrarci troppo nella progettazione del layout completo della sezione per questo tutorial, ho pensato che sarebbe stato meglio mostrarti come aggiungere l'effetto 3D sia a una GIF che a un video HTML5. Una volta terminato, rifiniremo il resto del layout della sezione con un bel design moderno.
Per ora, iniziamo con l'aggiunta dell'effetto 3D a una GIF in Divi.
Creare una GIF
Ci sono molti modi per creare una GIF sul web. Poiché questo tutorial riguarda la creazione di una GIF per animare il funzionamento di un prodotto, vorrai registrare una sezione del tuo schermo (usando uno screen recorder) e quindi convertire il file video in un file GIF. Ricorda di creare la GIF il più piccola possibile per limitare le dimensioni del file e il tempo di caricamento. Una volta creata la GIF, sarai in grado di usarla come faresti con qualsiasi altra immagine in Divi.
Se vuoi imparare come creare una GIF usando Snagit, dai un'occhiata al nostro post su Come cambiare un'immagine di sfondo con una GIF animata al passaggio del mouse.
Aggiunta di un effetto 3D a una GIF in Divi
Ora è il momento di aggiungere la GIF a Divi in modo che possiamo modellarla con un fantastico effetto 3D.
Per iniziare, aggiungi una nuova sezione normale con una riga a due colonne.
Prima di aggiungere un modulo, dobbiamo aggiungere la proprietà prospettiva alla colonna che conterrà la nostra GIF. Per fare ciò, apri le impostazioni della riga e aggiungi il seguente frammento di CSS all'elemento principale della colonna 1:
perspective: 1000px;
Questa proprietà prospettiva è necessaria per aggiungere prospettiva all'elemento all'interno della colonna. Un elemento ha bisogno di prospettiva in modo da poter ottenere un effetto 3D quando si utilizzano le opzioni di trasformazione di Divi. Per una migliore comprensione, dai un'occhiata al nostro post su come utilizzare la prospettiva con le opzioni di trasformazione per progettare pareti fotografiche 3D.
Ora aggiungi un modulo immagine alla colonna 1.
Carica la GIF nel modulo immagine. Per questo design, la GIF dovrebbe essere di circa 600 px per 700 px.
Quindi usa le opzioni di trasformazione per ridimensionare, ruotare e inclinare la GIF nello spazio 3D.
Trasforma Ruota asse Y: 8deg
Trasforma Ruota asse X: 28 gradi
Trasforma l'inclinazione dell'asse Y: 10 gradi
Trasforma l'inclinazione dell'asse X: -8 gradi
Scala di trasformazione (tablet): 80%
Ora diamo un'occhiata al risultato.
Aggiunta di un effetto 3D a un video HTML5 in Divi
Prima di aggiungere l'effetto 3D, dobbiamo prima creare il nostro video HTML5. Esamineremo i passaggi su come eseguire questa operazione di seguito. Ma se vuoi una spiegazione più completa, dai un'occhiata al nostro post su Come utilizzare i video HTML5 per creare gif animate con file di dimensioni inferiori.
Creazione del codice di incorporamento video HTML5
L'elemento video HTML5 ha la seguente struttura di base.
<video>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Non devi sapere molto sull'HTML per vedere cosa sta facendo questo codice. All'interno dell'elemento <video> , hai due elementi <source> che contengono il percorso/url dei file video che desideri visualizzare. Ogni elemento sorgente ha un video in un formato di file diverso (webm e mp4). Entrambi sono necessari per il massimo supporto del browser. Anche l'ordine è importante. Il video webm è posizionato sopra il video mp4 nel codice perché è un formato video di qualità superiore ma è meno supportato dai browser. Quindi, se un browser supporta i video webm, lo visualizzerà. Ma se il browser non supporta i video webm, utilizzerà il formato video mp4 sottostante. Non è necessario includere entrambi i formati video, ma è una buona pratica. E se ne userai solo uno, usa il formato mp4 perché è più ampiamente supportato.
Infatti, ogni volta che utilizzi il modulo video di Divi per visualizzare video ospitati autonomamente, Divi crea questo stesso elemento video HTML5 per visualizzare i video. Ecco perché il modulo Video ti consente di aggiungere sia un file video mp4 che webm.
Per utilizzare il codice per il tuo video, devi semplicemente aggiungere l'URL del video tra parentesi dopo l'attributo src .
Se carichi i file video sul tuo sito WordPress, puoi prendere gli URL dalla libreria multimediale.
Quindi incolla gli URL del video all'interno delle parentesi dopo l'attributo src . 
Dovrebbe essere simile a questo quando hai finito.
<video>
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>
Successivamente, aggiungeremo quattro attributi per controllare la visualizzazione e la funzionalità del video. Questo tipo di controllo è il motivo principale per l'inserimento manuale del video HTML5 invece di utilizzare il modulo video Divi. Questi attributi includono la autoplay (quindi il video si avvia automaticamente), il loop (quindi il video si ripete), l'audio muted (quindi il video non riproduce l'audio) e la playsinline (quindi il video viene riprodotto all'interno dell'area di riproduzione dell'elemento). Per applicare questi attributi al video, aggiungi ciascuno degli attributi all'interno delle parentesi del tag <video> .
Ora il codice sarà simile a questo.
<video autoplay loop muted playsinline>
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>
Nota: normalmente applicheresti l'attributo dei controls per i video HTML5, ma in questo caso lo lasceremo fuori in modo che il video funzioni come una GIF.
Ora sei pronto per incorporare il codice.
Incorporamento del video HTML5
Per incorporare un video HTML5 nella tua pagina, possiamo utilizzare il modulo codice.
Prima di sostituire il modulo immagine GIF con il nostro modulo codice, andiamo avanti e duplichiamo l'intera sezione in modo da poter mantenere il nostro esempio GIF. Nella sezione duplicata, elimina il modulo immagine e aggiungi un modulo di testo al suo posto.
Quindi incolla il codice di incorporamento del video HTML5 nella casella di input del codice.
Quindi copia gli stili di trasformazione dal modulo immagine e incolla gli stili di trasformazione nel modulo codice. Oppure puoi aggiornare gli stili di trasformazione come segue:
Trasforma Ruota asse Y: 8deg
Trasforma Ruota asse X: 28 gradi
Trasforma l'inclinazione dell'asse Y: 10 gradi
Trasforma l'inclinazione dell'asse X: -8 gradi
Scala di trasformazione (tablet): 80%
Poiché sto usando lo stesso video che ho usato per creare la GIF, il design sarà molto simile. Tuttavia, la dimensione del video è significativamente inferiore alla dimensione della GIF. Ecco il risultato.
Completare la progettazione del layout della sezione
Ora che abbiamo la GIF 3D (o il video HTML5) al suo posto. Possiamo completare il design del layout della nostra sezione. Per questo design, utilizzerò la sezione con il video HTML5 nella colonna 1.
Personalizzazione della sezione e della riga
Apri le impostazioni della sezione e aggiorna quanto segue.
Imbottitura: 15% in alto, 15% in basso
Quindi apri le impostazioni della riga e aggiorna quanto segue:
Colore di sfondo sfumato a sinistra: #ba7fe8
Colore di sfondo sfumato a destra: #4b84ff
Altezza massima: 300 px (desktop), nessuna (tablet e telefono)
Imbottitura: 0px in alto, 0px in basso
Successivamente possiamo dare alla riga un'ombra semitrasparente della scatola interna per un elemento di design unico.
Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 0px
Posizione verticale dell'ombra del riquadro: 0px
Forza di diffusione dell'ombra della scatola: 40 px
Colore ombra: rgba (255,255,255,0.89)
Posizionamento del modulo codice
Ora portiamo un po' in su il modulo di codice con il video regolando la proprietà di traslazione di trasformazione come segue:
Transform Translate Asse Y: -20% (desktop), -7% (telefono)
Aggiunta di un modulo di invito all'azione
Per completare il design, aggiungiamo un modulo di invito all'azione alla colonna 2. Questo sarà un ottimo posto per aggiungere una descrizione del prodotto in primo piano con un pulsante.
Aggiungi un URL di collegamento al pulsante per visualizzare il pulsante.
Continua ad aggiornare le impostazioni come segue:
Colore di sfondo: #ffffff
Allineamento del testo: a sinistra
Colore del testo: scuro
Carattere del titolo: Lato
Peso del carattere del titolo: grassetto
Colore del testo del titolo: #20292f
Carattere del corpo: Lato
Colore del corpo del testo: #6d7c90
Dimensione del testo del corpo: 17px
Altezza della linea del corpo: 1,8 em
Dimensione del testo del pulsante: 12px
Colore del testo del pulsante: #ffffff
Colore di sfondo del pulsante: #4b84ff
Larghezza bordo pulsante: 0px
Raggio del bordo del pulsante: 100 px
Spaziatura delle lettere dei pulsanti: 2px
Carattere pulsante: Lato
Peso del carattere del pulsante: pesante
Stile carattere pulsante: TT
Imbottitura pulsanti: 12 pixel in alto, 12 pixel in basso, 20 pixel a sinistra, 20 pixel a destra
Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Forza di diffusione dell'ombra della scatola: 40 px
Colore ombra: rgba (103,151,255,0.11)
Margine: 10% a destra
Transform Translate Asse Y: -33% (desktop), -15% (telefono)
Trasforma Trasla asse X: -5%
Risultato finale
Desktop
Tavoletta
Telefono
Pensieri finali
L'aggiunta dell'effetto 3D a GIF e video HTML5 offre davvero una visualizzazione unica per quelle animazioni di prodotti. Le opzioni di trasformazione di Divi (combinate con la proprietà prospettiva) semplificano l'aggiunta di effetti 3D alle GIF e ai video.
E, si spera, hai imparato alcune cose su come utilizzare GIF e video HTML5 con Divi. Le GIF sono semplici da usare ma più difficili da mantenere la dimensione del file web friendly. I video HTML5 richiedono l'utilizzo di un codice di incorporamento, ma possono funzionare molto bene come sostituzione GIF per animazioni più lunghe.
Sentiti libero di esplorare modi nuovi ed entusiasmanti per utilizzare questo design per mostrare animazioni per prodotti e servizi nel tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!