Det er enkelt å legge til videoer på siden din i Divi når du bruker videomodulen. Denne modulen lar deg bygge inn videoer fra hvilken som helst kilde, men også å tilpasse miniatyrbildet og avspillingsknappen.

Slik legger du til en videomodul på siden din

Før du kan legge til en videomodul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

divi byggmester

Når du har angitt Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først.

video modul divi.png

Finn videomodusen i listen over mods og klikk på den for å legge den til siden din. Listen over mods er søkbar, noe som betyr at du også kan skrive inn ordet "video" og deretter klikke enter for automatisk å finne og legge til videomodusen! Når modulen er lagt til, blir du møtt av listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Bruk sakseksempel: Legge til en video på destinasjonssiden din

Å legge til en video på landingssiden din er en fin måte å gjøre det på fremme produktene dine og øke konverteringene. I dette eksemplet skal jeg vise deg hvordan du kan bruke videomodulen til å legge til en video på landingssiden din. Jeg setter en rød sirkel der videoen skal gå.

lage en video på divi exemple.jpg

Ved hjelp av Visual Builder legger jeg til en ny seksjon med en fullbreddsrad (1 kolonne). I radinnstillingene, under fanen Design, velger jeg alternativet "Bruk tilpasset bredde". For alternativet Tilpasset bredde som vises, skriver jeg inn en tilpasset bredde på 767 piksler. Dette sørger for at videomodulen jeg skal legge til i denne raden ikke overskrider denne bredden og blir for stor på større skjermstørrelser.

bruk en tilpasset bredde divi.png

Så legger jeg til videomodulen på raden. Under Innhold-fanen i innstillingen for Videomodul, legger jeg inn video-URL til videoen jeg vil legge inn på destinasjonssiden min. Jeg bruker nettadressen til en YouTube-video for dette eksemplet.

legg til en video på divi.png

Deretter legger jeg til en bildeoverleggs-url for videoen min ved å klikke på "Generer video" -knappen. Dette trekker automatisk en ramme fra videoen for å fungere som et overlegg med et nytt tilpasset videoikon.

legg til et overlegg divi video.jpg

Under fanen Design endrer jeg fargen på avspillingsikonet for å matche destinasjonssiden min.

rediger spillerikonet divi video.jpg

Nå har jeg en video for destinasjonssiden min som ser ren ut og matcher designet mitt.

endelig design med innholdet video.jpg

Nå som du har sett videomodusen i aksjon, kan du dykke ned i alle innstillingene i avsnittene nedenfor. Vi har gitt en detaljert titt på hva du finner i hver fane i modulens innstillinger og en forklaring på hva hver gjør.

Innholdsalternativer

parametermodul divi.png

URL til videoen

Divi Video-modulen lar deg legge til video ved å bruke to forskjellige metoder. Du kan laste ned din egen videofil fra datamaskinen din ved å klikke på "Last ned video" -knappen og velge ønsket fil, eller du kan angi hvilken som helst video-url fra tredjeparts videokilde, for eksempel Youtube. eller Vimeo. Bare kopier og lim inn URL-en fra nettleseren din og lim den inn i Video URL-feltet, så vil Divi ta seg av resten!

URL for bildeoverlegg

Hvis du vil angi et tilpasset videominiatyrbilde, som vil bli plassert på standardvideogrensesnittet med en tilpasset avspillingsknapp for å skape et skarpere og mer stilisert utseende, kan du velge å gjøre det ved å bruke Image Overlay-feltet. Denne kontrollen lar deg enten laste opp ditt eget, personlige bilde, eller automatisk la Divi generere et fra URL-en til videoen din. De fleste videotilbyere støtter dette alternativet, som Youtube og Vimeo. Bare klikk på "Generer video" -knappen og la Divi ta seg av resten!

Admin-etikett

Som standard vil videomodulen din vises med en "Video" -etikett i generatoren. Admin-taggen lar deg endre denne taggen for enkel identifisering.

Designalternativer

endre ikonfarge

seksjon design divi.png design

Hvis du angir et bildeoverlegg for videopoden din, inneholder den viste videoen et avspillingsikon over videoen. Du kan angi fargen på dette ikonet her for å matche fargene på siden din.

Avanserte alternativer

videomodul avansert seksjon.png

CSS-identifikator og klasser

Dette kan brukes til å legge til en CSS-ID eller en klasse i modulen din. Disse kan deretter brukes i stilarket ditt eller i Temaalternativer Custom CSS-boksen for å bruke en tilpasset stil til modulen. CSS-ID-er kan også målrettes med ankerlenker for å koble til bestemte områder på siden din.

Tilpasset CSS

Her kan du legge til tilpasset CSS i videomodulen din.

synlighet

Hvis du vil skjule videomodulen din på noen enheter, kan du velge enhetene du vil deaktivere videomodulen på.

[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”]LAST NED DIVI-TEMA [/vcex_button][/vc_column 1 ][vc_column] /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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Andre divisjoner