Divi Tutorial: Come aggiungere un modulo video a Divi

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 il Tema Divi installato 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.

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.

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

Aggiungere un video alla tua landing page è un ottimo modo per farlo promuovere i tuoi prodotti e aumentare le conversioni. In questo esempio, ti mostrerò come utilizzare il modulo video per aggiungere un video alla tua landing page. Ho messo un cerchio rosso dove dovrebbe andare il video.

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.

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.

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.

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

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

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

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

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

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.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]

Divi Tutorial: Come aggiungere un modulo video a Divi

Come aggiungere un modulo video alla tua pagina

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