Una guida passo passo per aggiungere un banner video a tema Dawn Shopify

Se ti abboni a un servizio da un link in questa pagina, Reeves and Sons Limited potrebbe guadagnare una commissione. Vedi il nostro Dichiarazione etica.

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. Esistono, tuttavia, modi per ottenere il meglio da entrambi i mondi, creando un banner video in cui il video fa da 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 dell'alba da Shopify

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.

frontend del banner video a tema Dawn

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:

  1. Elementi visivi arricchiti: Incorporando video accattivanti, il sito web diventa visivamente più accattivante, attirando l'attenzione dei visitatori.
  2. Contenuti dinamici e coinvolgenti: I video trasmettono in modo efficaceformatione. Possono mostrare le caratteristiche del prodotto, dimostrare le procedure o raccontare una storia accattivante del marchio, mantenendo coinvolti i visitatori.
  3. 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.
  4. 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):

  1. Conversione del video in video/immagine WebP format.
  2. Regolazione del Shopify codice per un normale banner immagine, in modo che supporti il ​​video.
  3. Convertire il video in GIF format.
  4. 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 immagine standard, ma il processo è inutilmente lungo considerando che hai accesso a un file format come WebP. Le GIF riducono significativamente la qualità del video e l'opzione 4 non ci fornisce un vero banner video.

Pertanto, ti consigliamo di convertire qualsiasi video format hai (.mp4, .mov, .wmv) sul WebP format. WebP combina i vantaggi delle immagini JPEG, dei video e delle GIF ad alta risoluzione, in quanto puoi produrre bellissimi video in movimento senza ingombro e senza perdere molta risoluzione. E puoi caricare video/immagini WebP su un file 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 in WebP format. Salva il nuovo file sul tuo computer.

convertire video in WebP per creare un banner video sul tema Dawn

Passaggio 2: trova il tema Dawn in Shopify

Vai su “Negozio online” > “Temi”.

Se non lo hai già, installa il tema Dawn. Altrowise, dovresti trovare il tema Dawn designato come Shopify"Tema corrente". Fare clic sul pulsante "Personalizza" per procedere.

personalizzare per aggiungere banner video sul tema Dawn

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.

bandiera dell'immagine

Passaggio 4: carica il file video WebP

Fai clic sul pulsante “Seleziona immagine” nella sezione “Prima immagine”.

selezionare il pulsante 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".

caricare video web

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!

Banner video sul tema dell'alba in azione

Passaggio 5: visualizzare l'anteprima del video

Ma aspetta, lo è wise per visualizzare l'anteprima del video sul frontend per garantire che appaia corretto, funzioni senza intoppi 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".

visualizzare il negozio

Successo!

frontend del banner video a tema Dawn

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 immagine per vederne le impostazioni. Una volta lì, puoi modificare l'opacità della sovrapposizione dell'immagine e modificare l'altezza del banner. Quindi è possibile modificare il file desktop posizione del contenuto, modificando la posizione del testo in sovrimpressione.

opacità della sovrapposizione dell'immagine

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.

allineamento dei contenuti sul banner video sul tema Dawn

Per un'ulteriore personalizzazione, hai accesso alla sezione "CSS personalizzato".

css personalizzato nel banner video del tema Dawn

E, naturalmente, è possibile selezionare il testo del contenuto o il pulsante per modificare ciò che viene detto e come appare.

modificare il contenuto nel banner video del tema Dawn

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.

  • Utilizza il file video formats (come WebP) che sono 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 file compatibile format come WebP o utilizza il collegamento 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!

Joe Warnimont

Joe Warnimont è uno scrittore con sede a Chicago che si concentra su strumenti di eCommerce, WordPress e social media. Quando non pesca o non pratica yoga, colleziona francobolli nei parchi nazionali (anche se è principalmente per bambini). Dai un'occhiata al portfolio di Joe per contattarlo e visualizzare il lavoro passato.

Commenti Risposte 0

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

Valutazione *

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.

STIMA SMART DI Shopify per 3 mesi con $ 1/mese!