Come creare una sezione di sfondo video in WordPress?

Un modo efficace per migliorare l'appeal visivo del tuo sito Web è creare una sezione di sfondo video. Intriga i tuoi visitatori e li incoraggia a rimanere più a lungo sul tuo sito.

WordPress fornisce vari approcci con i quali puoi integrare lo sfondo del video.

Se non conosci nessuno di questi metodi, permettici di guidarti attraverso il processo.

Imparerai tre semplici tecniche per aggiungere video come sezione di sfondo in questo blog.

#Perché hai bisogno di uno sfondo video in WordPress?

Conosciamo tutti l'importanza di aggiungere immagini di sfondo accattivanti al nostro sito web. Catturano l'attenzione del tuo pubblico e comunicano più velocemente di una descrizione scritta.

Tuttavia, un'altra forma di media è 100 volte più potente di immagini, grafica e altre illustrazioni. Se stai pensando al video, puoi darti una pacca sulla spalla!

Due blogger ospiti nel blog di YouTube hanno fornito statistiche che dimostrano che il video eclissa la comunicazione inefficace dell'immagine. Hai sentito che un'immagine parla più di mille parole, vero?

Ebbene, secondo l'intuizione di questi blogger ospiti, un video parla più di un milione di parole.

Pertanto, puoi aggiungere video come sfondo al tuo sito Web per comunicare informazioni essenziali al tuo pubblico. Puoi aggiungere un breve video per descrivere la storia del tuo marchio, il meccanismo di funzionamento del tuo prodotto, ecc.

Una sezione video incoraggia i visitatori del tuo sito web a interagire con esso. Potrebbero voler attivare il volume multimediale, ingrandire il lettore o riprodurre l'intero video.

Inoltre, il tuo pubblico vorrà saperne di più sul tuo marchio dopo aver visto il video introduttivo. Se i tuoi visitatori trascorrono una lunga durata sul tuo sito web, la tua frequenza di rimbalzo diminuisce, il che aumenta anche le prestazioni SEO.

#Suggerimenti per la selezione di uno sfondo video perfetto

Ora conosci il significato dell'integrazione video sui siti web. Ti presentiamo alcuni suggerimenti su come selezionare un ottimo video da aggiungere al tuo sito WordPress. Ecco cinque punti cruciali che potresti trovare utili.

1. Video compresso ma di alta qualità

Devi comprimere i tuoi file video prima di caricarli nella sezione di sfondo. Un sito Web con una dimensione video di grandi dimensioni si carica lentamente e offre un'esperienza utente terribile.

Inoltre, Google non classificherà il tuo sito tra i primi risultati dei risultati di ricerca pertinenti. La compressione del video comporterà meno carico sul server e il tuo sito Web funzionerà più velocemente.

Ma assicurati di non rovinare la qualità del tuo video durante la compressione. Il tuo pubblico non vuole guardare un video sfocato. Devi trovare una via di mezzo in cui il video è compresso ma ha comunque una risoluzione decente.

Puoi utilizzare uno strumento come VideoProc che ti consente di comprimere i tuoi video alla dimensione migliore. Lo strumento VideoProc Converter funziona con qualsiasi video che hai girato con la tua GoPro, DJI, iPhone, Android, videocamera o qualsiasi altra videocamera 4K.

2. Breve durata del videoclip

Un'altra cosa da considerare quando aggiungi un video al tuo sito web è renderlo breve. Prima di tutto, il pubblico online ha una bassa capacità di attenzione. Non guarderanno un video di mezz'ora che fornisce la storia dell'intera azienda.

Carica invece un breve video di meno di un minuto con un file di dimensioni inferiori. Il caricamento richiederà una breve durata e attirerà anche l'attenzione dei visitatori del tuo sito web. Inoltre, puoi anche inserire filmati d'archivio in un ciclo.

3. Complimenti per il contenuto del tuo sito web

I tuoi visitatori apprezzeranno il video solo se integra i contenuti del tuo sito web. Ad esempio, se possiedi un sito di una caffetteria, quindi un video di bici sportive non completerà sicuramente il tuo sito.

Uscire dal contesto irrita il tuo pubblico, aumentando le possibilità di perdere la sua attenzione. Quindi, crea un video adatto del tuo marchio da aggiungere allo sfondo. In alternativa, puoi anche visualizzare filmati d'archivio pertinenti.

4. Opzione per abilitare/disabilitare l'audio

Quando qualcuno accede al tuo sito, potrebbe non aspettarsi la riproduzione automatica dell'audio. Il tuo pubblico può navigare nel tuo sito Web in una biblioteca, in un ufficio, in un'aula o in altri luoghi silenziosi. Un suono improvviso li spaventerà e chiuderanno la scheda per sbarazzarsene.

La riproduzione automatica di contenuti multimediali è tra le principali caratteristiche del sito Web che le persone odiano. Puoi evitare questa situazione aggiungendo un'opzione di commutazione per abilitare/disabilitare l'audio. In questo modo, i visitatori possono riprodurre l'audio solo quando ne sentono il bisogno.

5. Sezione di sfondo del video reattivo

I visitatori del tuo sito web navigheranno i tuoi contenuti su vari dispositivi digitali. Ad esempio, potrebbero guardare il tuo video su dispositivi mobili, laptop o altro. Un video che non risponde non fornirà la stessa dimensione su tutte queste dimensioni dello schermo.

Pertanto, devi rendere reattivo lo sfondo del video. Con questa funzione, il tuo video viene caricato con le dimensioni corrette su tutti i dispositivi di visualizzazione.

#Tre metodi per creare una sezione di sfondo video

Esistono tre modi principali per aggiungere un video come sezione di sfondo sul tuo sito web. In questa sezione, ottieni una spiegazione approfondita di ciascuna delle tecniche. Puoi selezionare una di queste opzioni in base alle tue preferenze.

1. Crea una sezione di sfondo video utilizzando Website Builder

I costruttori di siti Web/pagine sono perfetti per aiutarti a progettare pagine Web senza utilizzare codici (HTML, CSS, ecc.). Questi strumenti ti aiutano anche ad aggiungere vari componenti multimediali, come il cursore del carosello, la lightbox dell'immagine, l'animazione, ecc.

1. Costruttore di siti Web Elementor

Elementor è un plug-in all-in-one per la creazione di siti Web. Ti consente di progettare vari elementi, come intestazione, piè di pagina, pagina del prodotto, ecc. Questo generatore di pagine supporta quasi tutti i temi e plugin di WordPress.

Innanzitutto, installa questo generatore di pagine dalla pagina Aggiungi nuovo plug-in. Vai alla barra di ricerca e cerca "Elementor. Ora installa e attiva la prima opzione che ha il nome dell'editore: Elementor.com .

Ora torna alla dashboard e posiziona il cursore del mouse nella parte superiore dell'opzione Elementor nella barra laterale. Fare clic sul pulsante Per iniziare dal menu a discesa.

Questa azione ti porta alla pagina di benvenuto di Elementor. Puoi vedere un pulsante "Crea la tua prima pagina". Fare clic su di esso per procedere.

Raggiungerai l'interfaccia di modifica drag-and-drop di Elementor Website Builder. Creiamo un nuovo modello di pagina usando questo plugin. Fai clic sull'icona della cartella che vedi all'interno della casella tratteggiata come mostrato nello screenshot.

Si apre una finestra pop-up con tonnellate di modelli di pagina pre-progettati. Passa il puntatore del mouse sopra il layout selezionato. Questa azione mostra un pulsante Inserisci, su cui devi fare clic per aggiungere il modello al tuo sito web.

Si ottiene un'altra finestra dopo aver selezionato uno dei layout. Fai clic sul pulsante Inizia, che ti porta alla pagina di registrazione di Elementor. Si prega di creare un account con questo plug-in builder per procedere.

Elementor ti offre un'opzione per connettere il tuo sito Web con la sua libreria di modelli. Fare clic sul pulsante Connetti. Dopodiché, torni alla sua interfaccia di modifica.

Puoi selezionare qualsiasi sezione in cui desideri visualizzare un video come sfondo. Se hai intenzione di regolarne le dimensioni, fai clic sul pulsante Modifica sezione indicato da sei punti in alto.

Ora puoi modificare le sue impostazioni, come altezza, larghezza e spazio, dall'opzione Layout.

Vai all'opzione Stile dopo aver regolato questa sezione. Puoi scegliere quattro diversi tipi di sfondo: immagine, video, sfumatura e presentazione. Seleziona l'icona Video e incolla l'URL di un video di YouTube nella casella di testo.

Se non vuoi visualizzare un video di YouTube, puoi invece caricare un file in formato MP4. Per questo metodo, devi copiare il permalink di quel video dal catalogo multimediale. Successivamente, incollalo nella stessa casella di testo nell'interfaccia di Elementor.

Andando avanti, puoi regolare altre impostazioni per il video selezionato. Ad esempio, puoi personalizzare la sovrapposizione del colore di sfondo per la tua sezione. Inoltre, puoi scegliere se riprodurre il video su dispositivi mobili o meno.

Puoi anche caricare un'immagine di riserva che viene visualizzata se il tuo video non viene caricato. Infine, fai clic sul pulsante Pubblica una volta che sei soddisfatto del tuo video di sfondo.

2. Costruttore di pagine WordPress – Costruttore di castori

Beaver Builder ti consente di modificare la prima pagina del tuo sito Web utilizzando la sua interfaccia flessibile di trascinamento della selezione. Supporta vari moduli di contenuto, come la foto, il pulsante, l'intestazione, l'icona, l'audio, il video, ecc.

Vai su Aggiungi nuovo plug-in per aggiungere questa estensione builder alla dashboard di WordPress. Inserisci il suo nome nella barra di ricerca e seleziona la prima opzione, che ha oltre 300.000 installazioni attive.

Devi installare e attivare questa estensione e andare alla pagina in cui aggiungi uno sfondo multimediale. Se desideri creare una nuova pagina, fai clic sul pulsante Aggiungi nuovo nel menu a discesa dell'opzione Pagine.

Si accede all'interfaccia di modifica di una nuova pagina. Poiché hai installato questo plug-in per la creazione di trascinamento della selezione, puoi personalizzare la pagina dal front-end. Fare clic sul pulsante Avvia Beaver Builder come mostrato nello screenshot.

Questa azione ti porta all'interfaccia di modifica front-end. Beaver Builder mostra vari moduli nella barra laterale destra, come Audio, Intestazione, Foto, ecc. Fai clic sull'icona Video e trascinala nella casella tratteggiata.

Crea un blocco video e apre una finestra per regolare le impostazioni video. Dovresti prima impostare il tipo di video tra due opzioni: Libreria multimediale e Incorpora. Se hai scelto la prima alternativa, puoi caricare un video dai formati di file MP4 o WebM.

Fai clic sul pulsante "Seleziona video" da una qualsiasi di queste opzioni. È necessario selezionare un video dalla Libreria multimediale o caricarlo dall'unità. Beaver Builder ti consente di apportare alcune modifiche, come il caricamento di poster, la riproduzione automatica e l'attivazione/disattivazione del loop, ecc.

Al contrario, se selezioni l'opzione Incorpora video, ti consente di incollare l'URL del tuo video di YouTube. Una volta inserito l'URL, ottieni un'anteprima del video in background. Fare clic sul pulsante Salva dopo aver apportato le modifiche finali.

Beaver Builder mostra un'anteprima del tuo video incorporato sulla sua interfaccia. Fare clic sul pulsante Fine nell'angolo in alto a destra. Successivamente, vedrai quattro nuovi pulsanti: Elimina, Salva bozza, Pubblica e Annulla.

Dopodiché, fai clic su Pubblica per salvare gli aggiornamenti. Ti consigliamo di caricare il tuo sito web per verificare come funziona lo sfondo del video. Se desideri un'alternativa ai costruttori di pagine di siti Web, guarda la sezione successiva: Plugin.

2. Crea una sezione di sfondo video utilizzando i plugin di WordPress

I plugin sono un ottimo modo per aggiungere funzionalità extra al tuo sito web. Hai la possibilità di scegliere tra varie estensioni per aggiungere uno sfondo video al tuo sito. Abbiamo spiegato il processo di aggiunta di questa funzione utilizzando due plugin.

1. Sfondi WordPress avanzati

Con gli sfondi avanzati di WordPress, puoi visualizzare vari tipi di sfondo. Ad esempio, puoi aggiungere un'immagine, un'immagine modello, un colore, un video caricato e video YouTube/Vimeo.

Esplora la pagina Aggiungi nuovo plug-in nella dashboard di WordPress. Inserisci Advanced WordPress Backgrounds nella barra di ricerca e installa la prima opzione dai risultati.

Attiva il plugin dopo averlo installato. Quindi, vai alla pagina in cui desideri aggiungere una sezione di sfondo video. Per questo tutorial, abbiamo scelto la home page del nostro sito web. Fare clic sul pulsante Modifica, che si trova in fondo al titolo della pagina.

All'interno del layout di modifica della tua home page, fai clic sul segno più (+) per aprire una barra di ricerca. Inserisci il termine "AWB" e seleziona l'opzione Blocco sfondo (AWB). Ottieni un nuovo blocco aggiunto alla tua pagina.

In questo blocco puoi aggiungere un colore, un'immagine o un video. Fare clic sul pulsante Tipo nella barra delle impostazioni del blocco. Seleziona l'opzione "Video" dal menu a discesa che vedi nello screenshot qui sotto.

Questo plugin fornisce un'interfaccia per aggiungere un video utilizzando due metodi. Innanzitutto, fai clic sul pulsante Blocca nella barra laterale destra. Proprio sotto l'opzione Video, puoi scegliere tra l'opzione YouTube/Vimeo o Self Hosted.

Quando selezioni l'opzione per YouTube/Vimeo, ottieni una casella di testo per inserire l'URL del tuo video. Puoi anche impostare l'ora di inizio del video in modo che inizi esattamente da dove vuoi che venga riprodotto.

Un'altra opzione è il video self-hosted. Puoi caricare un video selezionando uno di questi tre formati: MP4, OGV e WEBM. Fai clic su uno di questi pulsanti e scegli un video dalla tua Libreria multimediale.  

Se non hai un video nella Libreria, caricane uno dal tuo disco. Una volta inserito un video, puoi vederne l'anteprima nella stessa barra laterale. Successivamente, fai clic sul pulsante Pubblica nella parte superiore della pagina.

2. mb.YTPlayer per video in background

Il plug-in mb.YTPlayer per video in background ti consente di integrare i video di YouTube nel tuo sito web. Con la sua versione pro, puoi modificare l'opacità del video, la qualità, le proporzioni e altre funzionalità.

Simile ai plugin precedenti, puoi installare mb.YTPlayer dalla pagina Aggiungi nuovo plugin. Inserisci la sua parola chiave come mostrato di seguito e attivala sul tuo account WordPress.

Vai alla dashboard di WordPress dopo averlo installato. Successivamente, posiziona il cursore del mouse sull'opzione "mb.ideas" nella barra laterale sinistra. Fai clic sul pulsante YTPlayer che vedi nel suo menu a discesa.

Si accede all'interfaccia di modifica dell'estensione YT.Player. Innanzitutto, fai clic sul pulsante di attivazione/disattivazione per attivare il video di sfondo. Successivamente, inserisci l'URL di un video di YouTube nella casella di testo come mostrato nello screenshot.

Scorri la pagina verso il basso e vedrai una sezione per scegliere una pagina in cui desideri integrare il video. Abbiamo scelto la home page statica per la dimostrazione. È possibile fare clic su Salva modifiche dopo aver terminato le modifiche.

Dopo aver salvato le modifiche, vedrai la miniatura del video selezionato su questa pagina. Puoi anche aggiungere più URL video separati da una virgola. Il tuo pubblico può vedere casualmente uno qualsiasi di questi video ogni volta che visita il tuo sito web.

3. Slider Hero con animazione, sfondo video e Intro Maker

Il plug-in Slider Hero ti aiuta a creare slider reattivi per il tuo sito web. Puoi aggiungere un carosello di testo, pulsanti di invito all'azione (CTA) e molti altri elementi sul dispositivo di scorrimento. Inoltre, ti consente anche di aggiungere un video come sezione di sfondo.

Come qualsiasi altra estensione gratuita, puoi installarla dalla pagina Aggiungi nuovo plug-in di WordPress. Inserisci la sua parola chiave "Slider Hero" nella barra di ricerca. Seleziona la prima opzione che ha Quantum Cloud come nome dell'editore.

Ora devi andare alla dashboard e cercare l'opzione Slider Hero nella barra laterale. Si prega di posizionare il cursore del mouse sopra di esso per visualizzare un menu a discesa. Fare clic sul pulsante Nuovo dispositivo di scorrimento dal menu.

Ora sei nell'interfaccia di modifica di questo plugin. Fornisce sette distinti effetti di scorrimento tra cui scegliere. Fare clic sull'opzione di scorrimento che si desidera modificare. Abbiamo scelto la prima opzione: Nessun effetto.

La pagina seguente include due sezioni. Il primo ti consente di aggiungere slider, mentre il successivo ti consente di personalizzarne gli effetti.

Ti suggeriamo di cliccare sul simbolo più (+) in alto a sinistra. Crea una bozza di diapositiva in cui puoi scrivere il titolo e la descrizione. Inoltre, puoi aggiungere due pulsanti CTA per ciascuno di essi.

Passando alla sezione destra, è necessario selezionare l'opzione Impostazioni video della barra dei menu. Mostra un menu a discesa con tre alternative di sfondo video. Scegli l'opzione di sfondo del video di YouTube.

Puoi usare le altre due opzioni solo con la sua versione premium del plugin.

Slider Hero mostra varie impostazioni del dispositivo di scorrimento video con questa azione. Ottieni una casella di testo per includere l'ID di un video di YouTube. Per ottenere questo codice, puoi incollare l'intero URL del tuo video in questo spazio.

Fare clic sul pulsante Salva dopo aver finalizzato le regolazioni. Dopo aver salvato le modifiche, fai clic sull'opzione Shortcode nell'angolo destro della barra dei menu. Slider Hero fornisce uno shortcode che puoi incollare in qualsiasi pagina del tuo sito.

Copia il codice evidenziato sopra e incollalo in un blocco note. Ora puoi cercare l'opzione Pagine nella barra laterale di WordPress. Passa il puntatore del mouse sopra di esso per visualizzare un menu a discesa.

Successivamente, devi fare clic su Aggiungi nuovo per creare una nuova pagina. Quando accedi alla nuova pagina, devi incollare lo shortcode nell'area del corpo. Fare clic sul pulsante Salva bozza dopo aver terminato le modifiche.

Puoi anche fare clic sul pulsante Anteprima per verificare come funziona il video. Fai clic sul pulsante Pubblica una volta che hai finito di aggiungere altri elementi della pagina.

Lo screenshot qui sotto illustra come apparirà il video di sfondo.

3. Crea una sezione di sfondo video utilizzando i temi di WordPress

Un modo semplice per integrare uno sfondo video è installare un tema WordPress che supporti questa funzione. Con un tema di supporto multimediale, non hai bisogno di un'estensione esterna per aggiungere sezioni video al tuo sito.

Ecco tre siti Web con temi potenti che supportano gli sfondi video.

1. WordPress.org – Repository di temi gratuito

WordPress.org include vari temi e plugin gratuiti per potenziare il tuo sito web. Funziona con una configurazione minima. Inoltre, questo strumento open source ti consente di condividere le tue storie, prodotti e servizi con comodità.

Puoi cercare un tema rilevante dalla sua barra di ricerca. Inserisci il termine "sfondo video" e seleziona uno qualsiasi degli elementi dai suoi risultati. Inoltre, puoi scaricare qualsiasi modello e installarlo sulla dashboard di WordPress.

Si prega di leggere la sua descrizione prima del download per assicurarsi che supporti la funzione che si desidera aggiungere. Devi caricare il file ZIP del tema sul tuo account WordPress e attivarlo in seguito.

2. Foresta dei temi – Temi WordPress premium

Theme Forest include migliaia di temi e modelli per WordPress, eCommerce, marketing, CMS, ecc. Sono il più grande mercato di temi al mondo, con articoli unici per vari progetti.

Se desideri un modello web premium, ti consigliamo questo sito web. Simile a WordPress.org, devi inserire la parola chiave per cercare un tema rilevante. Ti consente di ordinare i risultati in base al prezzo, alla migliore corrispondenza, ecc.

Dopo averlo installato sulla dashboard di WordPress, devi leggere la sua documentazione per aggiungere uno sfondo video. Se non include le istruzioni pertinenti, è necessario contattare il loro team di supporto.

3. Temi Rara – Temi WordPress gratuiti e premium

Rara Themes ha una raccolta di alcuni dei migliori modelli di siti Web. I loro temi sono ideali per creare siti Web di nicchie diverse, inclusi viaggi, affari, istruzione, moda, blog personali e altro ancora. Ciascuno dei suoi modelli di sito Web ti consente di integrare il video nello sfondo dell'intestazione.

Puoi utilizzare sia i suoi temi gratuiti che quelli premium per questo scopo. Spiegheremo come impostare la sezione di sfondo video utilizzando uno dei suoi prodotti. Per questa dimostrazione, abbiamo scelto Chic Lite.

Installa e attiva questo tema e vai alla dashboard di WordPress. Passa il puntatore del mouse sull'opzione Aspetto nella barra laterale. Quindi, fai clic sul pulsante Intestazione dal menu a discesa.

Con questa azione, accedi alle impostazioni di personalizzazione della prima pagina per la tua sezione Banner. Puoi vedere il titolo per aggiungere il video di intestazione nella barra laterale di sinistra. Fare clic sul pulsante Seleziona video, come mostrato di seguito.

Raggiungi la pagina Libreria multimediale, dove ti consente di scegliere un video da visualizzare. Seleziona il video che intendi caricare, quindi fai clic sul pulsante Scegli video. Ti consente di modificare il titolo, la didascalia e la descrizione del file.

Se non hai già caricato un video, devi andare alla sezione Carica file. Puoi aggiungere un video nella libreria e scegliere di visualizzarlo nell'area dell'intestazione.

Torna all'impostazione di personalizzazione e puoi vedere la miniatura del video che hai scelto. Inoltre, se vuoi integrare un video di YouTube, puoi inserire il suo URL nello spazio evidenziato di seguito.

Il video viene riprodotto automaticamente senza audio. Il tuo pubblico ha la possibilità di mettere in pausa e riprodurre il video durante la navigazione nel sito web.

Dove trovare le foto d'archivio per la tua sezione di sfondo video?

Fino ad ora, devi avere un'idea chiara di come aggiungere uno sfondo video al tuo sito web. Ma hai un video già pronto da inserire? In caso contrario, permettici di semplificarti le cose.

Se sei un video maker o ne hai assunto uno per il tuo progetto, non devi preoccuparti. Tuttavia, se desideri un clip video generico per migliorare l'estetica del tuo sito, puoi utilizzare filmati d'archivio.

I filmati d'archivio sono contenuti royalty-free che puoi utilizzare senza problemi di copyright. Diamo un'occhiata all'elenco di quattro siti Web che forniscono video stock premium e gratuiti.

1. Shutterstock

Shutterstock ti consente di scaricare vari elementi multimediali, come immagini, grafica, musica, filmati, ecc. Google, BuzzFeed, Marvel e molti altri marchi rinomati si affidano alla loro libreria di stock per alimentare la loro creatività.

Puoi classificare i video in base ad argomenti, come animali/fauna selvatica, vacanze, scienza, istruzione, natura e altro ancora. Shutterstock ha più di un milione di video stock di qualità 4K, HD e SD.

2. Elementi Envato

Envato Elements ha oltre 50 milioni di risorse digitali, come modelli grafici, video, audio, foto, caratteri, ecc. Hanno ogni tipo di filmato b-roll e clip video per natura, affari e sfondo.

3. Pexel

Pexels è una libreria gratuita di immagini e video. Puoi cercare qualsiasi categoria di metraggio, come case, caffè, natura, bambini, famiglia e altro. Ti consente anche di donare ai creatori se hai voglia di sostenerli.

4. Pixabay

Pixabay ha una community di creatori di talento con oltre 1,8 milioni di foto e video d'archivio. Puoi utilizzare, modificare e anche distribuire i loro elementi senza dare credito. Simile a Pexels, puoi donare uno o più creatori se lo desideri.

Domande frequenti (FAQ)

Avvolgendo!

Puoi creare un ottimo video come sfondo usando i suggerimenti e le tecniche di questo blog. Conosci altri plugin/estensioni per aggiungere questa funzione al tuo sito web? Per favore condividi la tua risposta nella sezione commenti qui sotto.

Inoltre, hai trovato il nostro blog informativo? Sentiti libero di fornire il tuo feedback onesto in modo che possiamo migliorare i nostri contenuti futuri.