Come aggiungere uno sfondo video al tuo sito Web WordPress

Lo sfondo video è una delle caratteristiche più favolose di un sito web. Può rendere il tuo sito Web non solo vivace e interessante, ma anche in grado di visualizzare più immagini e informazioni. Tuttavia, scommetto che non molte persone sanno come aggiungere uno sfondo video ai loro siti web. Pertanto, questa guida definitiva sarà utile se desideri aggiungere uno sfondo video al tuo sito web.

Usa un tema WordPress che supporti lo sfondo video

Alcuni temi di WordPress supportano la visualizzazione dello sfondo video, quindi devi solo impostare il tema per mostrarlo.

Ad esempio, questo tema Clean Blocks supporta lo sfondo video nell'area di copertina dell'intestazione. Quindi hai solo bisogno di pochi semplici passaggi per inserire un video andando su Customizer, trovando la sezione Header Media e seguendo i requisiti del tema.

La maggior parte dei temi ti consentirà di caricare un video. Inoltre, molti supporteranno i collegamenti incorporati da YouTube come ho fatto sopra. Questo non solo sarà più veloce, più semplice, ma aiuterà anche il sito web più leggero, ottimizzando così la velocità del sito web. Ogni tema sarà personalizzato in modi diversi, quindi è necessario leggere attentamente le istruzioni.

Tuttavia, l'area di sfondo del video potrebbe essere limitata quando si utilizzano i temi perché i temi potrebbero supportare solo i video in esecuzione in una determinata area. E se volessi aggiungere uno sfondo video a un'altra area? È ora di utilizzare un plug-in per aggiungere uno sfondo video al tuo sito Web WordPress.

Usa un plugin per aggiungere lo sfondo del video al sito web

Ci sono molti plugin che possono aiutarti in questo. Dopo la ricerca, ho scoperto che il plug-in Advanced WordPress Background (AWP) è super facile da usare per coloro che non sanno molto di tecnologia. Aiuta anche lo sfondo del tuo video a essere visualizzato magnificamente e offre molte opzioni di personalizzazione.

Nota che questo plugin funziona solo sulla versione 5.0 di WordPress e sull'editor Gutenberg. Quindi ricorda di aggiornare la tua versione di WordPress e utilizzare questo editor.

Passaggio 1: installa il plug-in

Puoi scaricare questo plugin su wordpress.org, quindi andare su Dashboard > Plugin > Aggiungi nuovo > Carica plugin , caricarlo, installarlo e attivarlo.

Oppure in Dashboard > Plugin > Aggiungi nuovo , trova il plug-in e fai clic su Installa > Attiva .

Passaggio 2: aggiungi uno sfondo video

L'aggiunta di uno sfondo video è simile all'inserimento di un blocco in Gutenberg. Quindi, se hai familiarità con Gutenberg, è facile. In caso contrario, puoi leggere le istruzioni per l'uso di Gutenberg.

Vai a una pagina o un articolo a cui vuoi aggiungere uno sfondo video, aggiungi un nuovo blocco e cerca la parola chiave "awb" per trovare il blocco Sfondo di AWB.

Dopo aver inserito questo blocco, nella barra laterale destra, seleziona la scheda Blocco per configurarlo. Ci sono 3 opzioni per lo sfondo che sono immagine, colore e video. Scegli Video per inserire lo sfondo del video. Quindi, hai 2 opzioni: inserisci il video dall'URL di YouTube o Vimeo o carica video ospitati autonomamente.

Se scegli la prima opzione, devi solo inserire il link nella sezione URL del video .

Per la seconda opzione, vai alla sezione Self Hosted . Ci sono 3 tipi di formati video da caricare:

Seleziona il formato che desideri, quindi scegli un video esistente nella libreria o caricane uno nuovo. Questo è tutto.

Passaggio 3: personalizza lo sfondo del tuo video

Visualizza video a tutta altezza e aggiungi un blocco al video

Dopo aver inserito il video, la sua cornice è così piccola. Per visualizzare il video a tutta altezza, seleziona la sezione A tutta altezza nella barra degli strumenti del blocco.

Di seguito è riportato lo sfondo del video visualizzato a tutta altezza con i testi. Puoi personalizzare le dimensioni, il colore, la posizione, ecc. per i testi normalmente nella scheda Blocco nella barra laterale. Questo è utile se vuoi inserire questo video nella copertina dell'intestazione o nella sezione dell'invito all'azione.

Puoi persino sostituire i testi con qualsiasi blocco. Questo è simile all'inserimento di qualsiasi blocco Gutenberg.

Impostazioni video

Nella scheda Video , dovresti impostare alcune sezioni principali come di seguito per visualizzare comodamente lo sfondo del tuo video:

(1): puoi abilitare o disabilitare il video in background sui dispositivi mobili.
(2) e (3): inserire qui l'ora di inizio e di fine del video per visualizzare la parte desiderata, soprattutto quando il video originale è troppo lungo.
(4): puoi ripetere il video quando è finito. Penso che dovresti abilitare questa funzione per mantenere la riproduzione automatica del video.

Impostazioni immagine poster

Scorrendo verso il basso, vedrai la sezione Immagine Poster . La foto che scegli qui verrà visualizzata in 1 secondo prima che venga visualizzato il video. Le opzioni seguenti consentono di personalizzare le dimensioni e lo stile corretti dell'immagine.

Ecco il risultato dopo aver aggiunto l'immagine del poster.

Installa sovrapposizione

(1) è il colore della sovrapposizione per lo sfondo del video e (2) è la trasparenza della sovrapposizione. Ad esempio, l'arancione è il tono principale del mio sito, quindi ho scelto questo colore per la sovrapposizione del video in modo che corrisponda al design del web.

Per quanto riguarda la tavolozza dei colori , è un'alternativa al video. In altre parole, si passa effettivamente da uno sfondo video a uno sfondo colorato. Per rimuovere questo colore di sfondo, scegli il pulsante Cancella.

Installa gli effetti di parallasse e parallasse del mouse

Nella scheda Parallasse , puoi attivare o disattivare questi effetti e scegliere facilmente diversi tipi di parallasse. Questo è un effetto molto bello e interessante, quindi dovresti usarlo e scegliere uno stile adatto per il tuo sito.

L'effetto di parallasse potrebbe esserti familiare, mentre l'effetto di parallasse del mouse potrebbe non esserlo. Può essere facilmente visto quando muovi il mouse sul video, quindi anche la scena all'interno del video si sposterà.

Puoi usare questo effetto andando nella sezione Parallasse del mouse > Abilita . Quindi puoi regolare Dimensioni e Velocità . Più bassa è la velocità, più veloce è lo spostamento del video. Più bassa è la dimensione, più il video si muove, facendoti sentire come se il video fosse "a scatti" quando muovi il mouse su di esso.

Ecco un esempio quando scelgo la velocità e le dimensioni più basse.

Impostazioni di spaziatura

Nella scheda Spaziatura , personalizza la distanza dal video al margine della pagina, inserisci i parametri della distanza nelle sezioni Margine e Imbottitura . Ad esempio, ho inserito il padding di 10 e il margine di 20 per tutti e 4 i lati del video.

Impostazioni avanzate

In CSS aggiuntivo della sezione Avanzate , puoi aggiungere codice personalizzato per lo sfondo del video. E la sezione di ancoraggio HTML ti consente di utilizzare il collegamento alla parola chiave per l'intestazione del video. Se non sai nulla sugli shortcode, puoi saltare questa parte.

E questo è il risultato finale. Il video sembra molto carino, vero?

Ultime parole

Attraverso questo articolo super dettagliato, spero che tu possa aggiungere uno sfondo video al tuo sito Web WordPress per attirare visitatori. A proposito dei plugin AWB, dovresti usarlo con un tema che supporti fortemente Gutenberg come eStar. Qui, ho usato il tema eStar e il plug-in AWB per avere uno sfondo video attraente per la copertina dell'intestazione.

Questa combinazione perfetta potrebbe rendere il video più affascinante, giusto? Se vuoi conoscere altri suggerimenti su WordPress, non esitare a commentare e condividere i tuoi pensieri sotto questo articolo.