Come aggiungere uno sfondo video a un sito WordPress

Cerchi il modo più semplice per aggiungere uno sfondo video WordPress?

Gli sfondi video ben fatti attirano l'attenzione e fanno sembrare i marchi interessanti fin dall'inizio. Ma se fatto male, uno sfondo video rallenta il tuo sito, occupa spazio e confonde i nuovi visitatori. Ecco perché abbiamo creato questa guida in modo che tu possa evitare tutte le insidie ​​e, invece, imparare come aggiungere uno sfondo video WordPress nel modo giusto.

Continua a leggere per conoscere le migliori pratiche e i passaggi per aggiungere uno sfondo video al tuo sito Web WordPress, il tutto senza alcuna conoscenza tecnica speciale.

Migliori pratiche per l'aggiunta di uno sfondo video WordPress

• Mantieni le dimensioni dei file basse ma la risoluzione alta: niente impantana le prestazioni del tuo sito più di video e immagini di grandi dimensioni; tuttavia, è preferibile mantenere la risoluzione durante la compressione.
• Non esagerare: troppi video ingombrano la tua interfaccia; usali solo per fare un punto o mostrare qualcosa di rilevante.
• Includi un invito all'azione con informazioni aggiuntive: non lasciare che gli spettatori desiderino di più, quindi dimentica un link che porta a ulteriori dettagli.
• Evita l'audio a tutti i costi: è sconvolgente quando tutte le persone vogliono solo visualizzare il tuo sito web.
• Se è necessario l'audio, non attivarlo con la riproduzione automatica: fornisci un'opzione agli utenti per riprodurre l'audio.
• Prendi in considerazione i sottotitoli per i video con audio: non tutti possono ascoltare il tuo audio, a causa della loro posizione o di problemi di udito.
• Ospita esternamente: l'host del tuo sito probabilmente non è progettato per offrire video, quindi scegli siti come Vimeo e YouTube per mantenere le prestazioni o considera un sito di hosting video specializzato.
• Attenersi ai migliori formati/risoluzioni: stiamo parlando solo di MP4; un minimo di 720p; codec h264.

E ricorda, non tutti i siti web hanno bisogno di video; a volte rende l'interfaccia disordinata, lenta e sfocata. Un avvocato, ad esempio, dovrebbe attenersi a foto professionali piuttosto che a video banali di strette di mano che sono destinati a rallentare il loro sito web.

Come aggiungere uno sfondo video WordPress

Esistono diversi metodi per attivare le funzionalità di sfondo video all'interno di WordPress.

Ci concentreremo su quattro diverse soluzioni senza codice:

1. Il blocco di copertura integrato
2. Un plug-in di sfondo/intestazione
3. Il tuo plugin per la creazione di pagine preferito
4. Utilizzo di un tema che supporti sfondi o intestazioni video

Segui i passaggi per ciascun metodo di seguito.

Opzione 1: blocco di copertura integrato

L'editor nativo di WordPress offre quello che viene chiamato un blocco Cover per inserire immagini di sfondo dietro altri contenuti, come testo e pulsanti.

Quello che molti utenti di WordPress non capiscono è che il blocco Cover supporta anche gli sfondi video.

Passaggio 1: aggiungi il blocco Cover

Per iniziare, vai su qualsiasi pagina desideri aggiungere lo sfondo e aggiungi il blocco Cover .

Passaggio 2: carica il tuo video

Per la copertina , seleziona il pulsante Carica o Catalogo multimediale , a seconda di quello che intendi utilizzare per aggiungere il video.

Il blocco Cover non dice nulla sul supporto dei video, quindi devi solo assicurarti di scegliere un video (come un MP4) dalla Libreria multimediale . Fai clic sul pulsante Seleziona dopo aver selezionato un video.

Passaggio 3: inserisci il contenuto in primo piano sovrapposto

Ora dovresti vedere un'anteprima del video di sfondo. Puoi aggiungere blocchi in primo piano alla copertina , come testo o pulsanti.

Passaggio 4: modifica le impostazioni della copertina secondo necessità

Le impostazioni della copertina includono:

• Sovrapposizioni di colore: ideali per facilitare la lettura del testo
• Opacità: utile anche per rivelare il contenuto in primo piano
• Altezza minima della copertura: a volte necessaria per fare in modo che lo sfondo del video di WordPress copra più spazio

Passaggio 5: visualizza lo sfondo del tuo video WordPress in azione

Una volta terminato, salva la pagina e vai al frontend per vedere lo sfondo del tuo video WordPress!

Esistono molti plugin per aggiungere sfondi video di WordPress, alcuni dei quali offrono sfondi completi del sito, mentre altri sono pensati per darti un'intestazione video.

Questi sono i migliori plugin per sfondi video:

️ Il nostro preferito è il plugin Advanced WordPress Backgrounds; ti mostreremo come aggiungere uno sfondo video WordPress con quel plugin in pochi passaggi.

Passaggio 1: installa AWB e aggiungi il relativo blocco di contenuti

Per iniziare, installa Advanced WordPress Backgrounds (AWB).

Vai alla pagina in cui desideri aggiungere il video di sfondo.

Utilizzando l'editor di WordPress, fai clic per aggiungere un blocco di contenuti. Cerca e seleziona il blocco Sfondo (AWB) .

Passaggio 2: aggiungi il tuo video

Questo ti dà le opzioni per aggiungere sfondi a colori, immagini o video all'elemento.

Scegli Video , quindi incolla l'URL di un video da YouTube o Vimeo. In alternativa, il plug-in ha una scheda Self Hosted per il caricamento di video locali.

Passaggio 3: espandi l'altezza e la larghezza dello sfondo del video

Per impostazione predefinita, il blocco di contenuto non si estende per coprire gran parte dell'area della pagina. È necessario fare clic sul pulsante Altezza intera nell'editor. C'è anche un pulsante per estendere lo sfondo del video a larghezza intera.

Puoi anche trascinare o inserire contenuto, come testo, pulsanti o immagini, sopra il video di sfondo.

Passaggio 4: modifica le impostazioni dello sfondo del video di WordPress

Regola l'impostazione che desideri nella scheda Blocca : ora di inizio, ora di fine, loop, riproduzione continua, opacità del video.

È consigliabile aggiungere una sovrapposizione del colore di sfondo con opacità ridotta; questo rende il testo sovrapposto più facile da leggere.

Fallo andando alla scheda Blocca e cambiando il colore in bianco o nero in Colore di sfondo . Sposta leggermente il cursore Opacità verso il basso per assicurarti che lo sfondo sia ancora visibile.

Passaggio 5: visualizza i risultati

Il risultato è un video che viene riprodotto davanti ad altri contenuti, idealmente uno che va in loop, non ha audio e mantiene comunque la maggior parte dell'attenzione sul contenuto in primo piano.

Opzione 3: il tuo plug-in per la creazione di pagine preferito

La maggior parte dei page builder, come Elementor, WPBakery e Divi, offre funzionalità di sfondo per aggiungere un'immagine o uno sfondo video a qualsiasi modulo di contenuto.

️ Sentiti libero di scegliere il page builder di tuo gradimento, ma ti consigliamo Elementor per la sua facilità d'uso.

Assicurati di installare Elementor o qualsiasi altro builder che intendi utilizzare prima di iniziare.

Passaggio 1: apri una pagina con l'editor Elementor

Vai su Pagine su WordPress e seleziona la pagina designata come tua Homepage . Fai clic sul pulsante Modifica con Elementor .

Passaggio 2: aggiungi un blocco di contenuto della sezione

La maggior parte dei moduli di contenuto in Elementor offre impostazioni di sfondo, ma ti consigliamo di inserire una sezione. In questo modo, puoi aggiungere più elementi nella sezione, come testo, immagini e pulsanti. Quindi, aggiungi uno sfondo video alla sezione in modo che sia dietro a tutto ciò che è in primo piano.

Abbiamo aggiunto del testo e un pulsante a una sezione del nostro tutorial. Vai avanti e seleziona l'icona Modifica sezione , quindi seleziona la scheda Stile .

Passaggio 3: inserisci lo sfondo del tuo video

Qui vedrai un'area a discesa Sfondo . Scegli l'opzione Video accanto a Tipo di sfondo . Quindi incolla un URL da YouTube, Vimeo o un file locale nel campo Collegamento video .

Passaggio 4: modifica le impostazioni dello sfondo del video

Potrebbe essere necessario espandere lo sfondo del video per occupare più schermo. Per farlo, passa alla scheda Layout e regola Altezza e Altezza minima .

Tornando alla scheda Stile , valuta la possibilità di modificare le impostazioni per il video di sfondo:

• Ora di inizio
• Tempo scaduto
• Gioca una volta
• Gioca sul cellulare
• Modalità privacy

Inoltre, pensa all'aggiunta di una sovrapposizione di sfondo , di solito un colore neutro come il nero o il bianco e alcune modifiche all'opacità, per rendere più visibili il testo, i pulsanti e le immagini in primo piano.

Passaggio 5: visualizza lo sfondo del video di WordPress sul frontend

Quando hai finito, il video viene riprodotto dietro a tutti i contenuti della sezione!

Opzione 4: usa un tema WordPress che supporti sfondi/intestazioni video

Vari temi WordPress offrono impostazioni integrate di intestazione, slider e media a pagina intera; questi ti consentono di caricare un'immagine, una GIF o un video per occupare l'intero schermo, il più delle volte utilizzato come intestazione della tua home page.

Per trovare temi con funzionalità di sfondo video, cerca "sfondo video" sui mercati più popolari:

️ Assicurati di scansionare gli elenchi delle funzionalità o persino di chiedere allo sviluppatore prima di scaricare/acquistare, per assicurarti che un tema abbia funzionalità di sfondo video.

Ad esempio, il tema Colibri WP offre sfondi video.

Passaggio 1: installa e attiva il tema

Per attivare uno sfondo video, installa il tema Colibri WP, quindi vai su Aspetto > Impostazioni Colibri > Inizia . Qui puoi attivare la funzione Colibri Page Builder.

Passaggio 2: aggiungi un sito demo

Fai clic sulla scheda Siti demo e Importa il modello demo di tua scelta.

Passaggio 3: personalizza l'immagine dell'eroe

Vai su Aspetto > Personalizza e seleziona l'icona a forma di ingranaggio Impostazioni accanto al modulo Eroe .

Passaggio 4: aggiungi uno sfondo video

Seleziona la scheda Stile e imposta lo sfondo su Video .

Infine, scegli YouTube per incollare un URL video esterno o Self Hosted per caricare il video locale.

Di conseguenza, vedrai lo sfondo del video in movimento nell'anteprima della personalizzazione.

Inizia con lo sfondo video perfetto

In questo post, hai imparato quattro diversi metodi, almeno uno dei quali dovrebbe funzionare per la tua situazione.

️ Per altri modi per migliorare il tuo sito, dai un'occhiata al nostro post con 10 elementi di un design di home page di successo.

Per qualsiasi domanda sugli sfondi video di WordPress, condividi i tuoi pensieri nei commenti qui sotto.