Vai al contenuto principale

Divi Tutorial: Come aggiungere un modulo video a Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Aggiungere video alla tua pagina in Divi è semplice quando usi il modulo Video. Questo modulo ti consente di incorporare video da qualsiasi fonte, ma anche di personalizzare l'immagine in miniatura e il pulsante di riproduzione.

Come aggiungere un modulo video alla tua pagina

Prima di poter aggiungere un modulo video alla tua pagina, devi prima passare a Divi Builder. Una volta installato il tema Divi sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

costruttore di divi

Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.

modulo video divi.png

Individua la mod video nell'elenco delle mod e fai clic su di essa per aggiungerla alla tua pagina. L'elenco delle mod è ricercabile, il che significa che puoi anche digitare la parola "video" e quindi fare clic su Invio per trovare e aggiungere automaticamente la mod video! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Esempio di caso d'uso: aggiunta di un video alla tua pagina di destinazione

L'aggiunta di un video alla tua pagina di destinazione è un ottimo modo per promuovere i tuoi prodotti e aumentare le conversioni. In questo esempio, ti mostrerò come utilizzare la mod video per aggiungere video alla tua pagina di destinazione. Ho messo un cerchio rosso dove dovrebbe andare il video.

creando un video su divi hexle.jpg

Utilizzando Visual Builder, aggiungo una nuova sezione con una riga a larghezza intera (1 colonna). Nelle impostazioni della riga, nella scheda Design, seleziono l'opzione "Usa larghezza personalizzata". Per l'opzione Larghezza personalizzata visualizzata, inserisco una larghezza personalizzata di 767 px. Questo assicura che il modulo video che aggiungerò in questa riga non superi questa larghezza e diventi troppo grande su schermi di dimensioni maggiori.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

usa una larghezza personalizzata divi.png

Quindi aggiungo il modulo video alla riga. Nella scheda Contenuto dell'impostazione Modulo video, inserisco l'URL del video che voglio incorporare nella mia pagina di destinazione. Sto usando l'URL di un video di YouTube per questo esempio.

aggiungi un video su divi.png

Successivamente, aggiungo un URL di sovrapposizione immagine per il mio video facendo clic sul pulsante "Genera video". Questo estrae automaticamente un fotogramma dal video per fungere da sovrapposizione con una nuova icona video personalizzata.

aggiungi un overlay divi video.jpg

Nella scheda Design, cambio il colore dell'icona di riproduzione in modo che corrisponda alla mia pagina di destinazione.

modifica l'icona del giocatore divi video.jpg

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Ora ho un video per la mia pagina di destinazione che sembra pulito e corrisponde al mio design.

progetto finale con il contenuto video.jpg

Ora che hai visto il mod video in azione, immergiti in tutte le sue impostazioni nelle sezioni seguenti. Abbiamo fornito uno sguardo dettagliato a ciò che troverai in ciascuna scheda delle impostazioni del modulo e una spiegazione di ciò che ciascuna fa.

Opzioni di contenuto

parametro module divi.png

URL del video

Il modulo Divi Video ti consente di aggiungere video utilizzando due metodi diversi. Puoi scaricare il tuo file video dal tuo computer facendo clic sul pulsante "Scarica video" e selezionando il file desiderato, oppure puoi inserire qualsiasi URL video da una fonte video di terze parti come Youtube o Vimeo. Basta copiare e incollare l'URL dal browser e incollarlo nel campo URL video e Divi si prenderà cura del resto!

URL di sovrapposizione dell'immagine

Se desideri impostare un'immagine di anteprima video personalizzata, che verrà posizionata sull'interfaccia video standard con un pulsante di riproduzione personalizzato per creare un aspetto più nitido e stilizzato, puoi scegliere di farlo utilizzando il campo Sovrapposizione immagine. Questo controllo ti consente di caricare la tua immagine personalizzata o di consentire automaticamente a Divi di generarne una dall'URL del tuo video. La maggior parte dei fornitori di video supporta questa opzione, come Youtube e Vimeo. Basta fare clic sul pulsante "Genera video" e lasciare che Divi si occupi del resto!

Etichetta amministrativa

Per impostazione predefinita, il tuo modulo video apparirà con un'etichetta "Video" nel generatore. Il tag amministratore ti consente di modificare questo tag per una facile identificazione.

Opzioni di design

cambia il colore dell'icona

design della sezione divi.png design

Se si designa una sovrapposizione di immagini per il pod video, il video visualizzato contiene un'icona di riproduzione sul video. Puoi designare il colore di questa icona qui per abbinare i colori sulla tua pagina.

Opzioni avanzate

modulo video advanced section.png

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Identificatore CSS e classi

Questo può essere usato per aggiungere un ID CSS o una classe al tuo modulo. Questi possono quindi essere utilizzati nel foglio di stile o nella casella Opzioni tema CSS personalizzato per applicare uno stile personalizzato al modulo. Gli ID CSS possono anche essere mirati con collegamenti di ancoraggio per collegarsi a determinate aree della pagina.

CSS personalizzato

Qui puoi aggiungere CSS personalizzati al tuo modulo video.

visibilità

Se si desidera nascondere il modulo video su alcuni dispositivi, è possibile selezionare i dispositivi su cui si desidera disabilitare il modulo video.

Altri tutorial di Divi

Questo articolo contiene i commenti 0

Lascia un commento

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

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
16 azioni
quota8
Tweet3
Enregistrer5