Se hai usato Shopify, conosci il tema Dawn. È uno dei temi gratuiti disponibili per i nuovi imprenditori e un'opzione altamente personalizzabile per progettare una vetrina unica.
Il tema Dawn viene fornito con numerosi moduli, come il blocco di caricamento video standard e un banner di immagini.
Il banner immagine consente ai pulsanti e al testo di fungere da primo piano, mentre l'immagine è lo sfondo. Sfortunatamente, il modulo video non consente questo tipo di primo piano. Ci sono, tuttavia, modi per ottenere il meglio da entrambi i mondi, creando un banner video in cui il video è uno sfondo e c'è del testo in primo piano.
In questa guida ti mostreremo come costruire un file Tema dell'alba banner video per attirare l'attenzione sulla tua home page!
Panoramica del tema Dawn
Il tema Dawn è gratuito Shopify tema è ampiamente utilizzato dai rivenditori di e-commerce. Con un design semplice e impostazioni semplici, rimane una scelta popolare per allestire un negozio visivamente accattivante ed elegante.
Che cos'è uno sfondo video/banner e perché dovresti usarne uno sul tuo sito web?
Un banner video è un'area di una pagina web che presenta un video come sfondo a tutta larghezza, insieme ad altri elementi in primo piano, come pulsanti e testo.
Un modulo come un banner video a tema Dawn offre numerosi vantaggi per migliorare l'esperienza complessiva del sito Web per i visitatori. Ecco alcuni vantaggi chiave:
- Elementi visivi arricchiti: Incorporando video accattivanti, il sito web diventa visivamente più accattivante, attirando l'attenzione dei visitatori.
- Contenuti dinamici e coinvolgenti: I video trasmettono informazioni in modo efficace. Possono mostrare le caratteristiche del prodotto, dimostrare istruzioni o raccontare una storia accattivante del marchio, mantenendo i visitatori coinvolti.
- Maggiore coinvolgimento degli utenti: I video hanno il potere di creare un’impressione duratura sui visitatori. La combinazione di immagini, audio e movimento cattura l'attenzione e incoraggia gli utenti a esplorare ulteriormente.
- Comunicazione efficace del marchio: Uno sfondo video o un banner possono comunicare il messaggio del marchio ai clienti. Consente alle aziende di evidenziare la propria proposta di valore unica, mostrare prodotti o servizi e stabilire una forte identità di marca.
Sfruttando la potenza dei video nella progettazione del tuo sito web, puoi rendere il tuo sito più interessante e aumentare le conversioni.
Guida passo passo per aggiungere uno sfondo video/banner al tema Dawn
Tecnicamente esistono quattro modi per aggiungere un banner video a tema Dawn (non tutti ideali):
- Conversione del video nel formato video/immagine WebP.
- Regolazione del Shopify codice per un normale banner immagine, in modo che supporti il video.
- Conversione del video in formato GIF.
- Basta caricare un video nel blocco Video in Shopify, tralasciando l'idea di avere elementi in primo piano (quindi non sarebbe un vero banner).
Non è terribilmente difficile modificare il file Shopify codice per un banner di immagini standard, ma il processo è inutilmente lungo considerando che hai accesso a un formato di file come WebP. Le GIF riducono notevolmente la qualità video e l'opzione 4 non ci fornisce un vero banner video.
Pertanto, ti consigliamo di convertire qualsiasi formato video tu abbia (.mp4, .mov, .wmv) nel formato WebP. WebP unisce i vantaggi delle immagini JPEG ad alta risoluzione, dei video e delle GIF, in quanto puoi produrre splendidi video in movimento senza ingombro e senza perdere molta risoluzione. E puoi caricare video/immagini WebP su un Shopify bandiera dell'immagine.
Ecco come fare:
Passaggio 1: prendi il tuo video e convertilo nel file WebP Format
Esistono vari convertitori gratuiti “da video a WebP” online. Prova una ricerca online o utilizza uno dei convertitori che abbiamo testato:
Carica il tuo video sullo strumento di conversione gratuito, quindi scegli di convertirlo nel formato WebP. Salva il nuovo file sul tuo computer.
Passaggio 2: trova il tema Dawn in Shopify
Vai su “Negozio online” > “Temi”.
Se non lo hai già, installa il tema Dawn. Altrimenti, dovresti trovare il tema Dawn designato come Shopify"Tema corrente". Fare clic sul pulsante "Personalizza" per procedere.
Passaggio 3: aggiungi e seleziona il blocco banner immagine
Il blocco "Banner immagine" viene aggiunto per impostazione predefinita nel tema Dawn. Quindi, dovresti essere in grado di fare clic su quel modulo per aprire le sue impostazioni nel pannello di sinistra. È anche possibile cliccare sul banner immagine stesso, nell'anteprima visiva a destra. Utilizza il collegamento "Aggiungi blocco" se devi inserire il "Banner immagine" da zero.
Passaggio 4: carica il file video WebP
Fai clic sul pulsante “Seleziona immagine” nella sezione “Prima immagine”.
Questo carica un'area per caricare le immagini nella libreria multimediale del tuo negozio. È anche possibile incollare gli URL dei video, ma utilizzeremo la funzionalità di caricamento. Scegli il pulsante "Aggiungi immagini" e scegli il file WebP creato in precedenza. Contrassegna il file appena caricato con un segno di spunta, quindi fai clic sul pulsante "Fine".
Ciò rilascia il file video WebP nel banner immagine, consentendoti di modificare anche qualsiasi contenuto in primo piano. Fai clic su "Salva".
Congratulazioni, hai aggiunto con successo un banner video sul tema dell'Alba!
Passaggio 5: visualizzare l'anteprima del video
Ma aspetta, è consigliabile visualizzare in anteprima il video sul frontend per assicurarsi che abbia un bell'aspetto, funzioni senza problemi e abbia la risoluzione appropriata.
Tornando alla schermata principale della dashboard, fai clic sull'icona del bulbo oculare per "Visualizza il tuo negozio online". Si trova accanto a "Negozio online", sotto la sezione "Canali di vendita".
Successo!
Personalizzare il tuo banner video a tema Dawn: rendilo unicamente tuo
La personalizzazione garantisce che il tuo video si adatti perfettamente al tuo marchio e all'estetica del tuo negozio. Quindi rimbocchiamoci le maniche e tuffiamoci, ok?
Devi sempre selezionare il banner dell'immagine per vederne le impostazioni. Una volta lì, puoi modificare l'opacità della sovrapposizione dell'immagine e cambiare l'altezza del banner. Quindi, puoi modificare la posizione del contenuto del desktop, cambiando dove si trova il testo sovrapposto.
Lo spostamento del contenuto e delle posizioni dei pulsanti consente di mostrare il testo e il pulsante sopra un'area del video in cui sono più visibili.
Per un'ulteriore personalizzazione, hai accesso alla sezione "CSS personalizzato".
E, naturalmente, è possibile selezionare il testo del contenuto o il pulsante per modificare ciò che viene detto e come appare.
Suggerimenti per ottimizzare il file video per la massima velocità e compatibilità
Avere un video impressionante non avrà importanza se rallenta la scansione del tuo sito o non viene visualizzato correttamente su determinati dispositivi.
Ecco perché ottimizzare il tuo file video per la massima velocità e compatibilità è un compito non negoziabile. In questa sezione condivideremo alcuni suggerimenti utili per garantire che i tuoi contenuti video siano ottimizzati per un caricamento efficiente e una riproduzione universale.
- Utilizzare formati di file video (come WebP) ampiamente compatibili con la maggior parte dei browser web.
- Mantieni le dimensioni del file video quanto più ridotte possibile. WebP fa un ottimo lavoro nel comprimere i video senza perdere la qualità.
- Imposta le proporzioni del video in modo che si adattino perfettamente alle dimensioni dello schermo.
- Scegli un video con colori e contrasti equilibrati che rifletta la personalità del negozio.
Risoluzione dei problemi comuni relativi all'aggiunta di uno sfondo video/banner al tema Dawn
A volte, non importa quanto sei stato attento, possono comunque verificarsi problemi quando aggiungi il banner video del tema Dawn. Ecco alcuni suggerimenti per la risoluzione dei problemi quando si verificano problemi:
Problemi di incompatibilità
Prova a convertire il video in un formato di file compatibile come WebP oppure usa il link per incorporare il video.
La dimensione del video è troppo grande
Taglia il video o comprimilo per ridurre le dimensioni del file preservandone la qualità.
Il video non viene riprodotto automaticamente
Verifica di aver abilitato l'opzione "Riproduzione automatica" nelle impostazioni del tema.
La nostra conclusione sull'aggiunta di un banner video a tema Dawn
Seguendo la nostra guida passo passo e i suggerimenti per la risoluzione dei problemi, dovresti essere in grado di aggiungere il banner video a tema Dawn a Shopify facilmente.
Quali sono i tuoi pensieri? Facci sapere nei commenti se sei riuscito ad aggiungere un banner video a tema Dawn!
Commenti Risposte 0