placeholder_200x200

Seneste nyt om grafisk design og digitale medier

Webdesign trends: Lav en videobaggrund til din Landing Page

video-web-9-1.jpg

Til for eksempel kampagner kan en enkelt side med al information og Call to action være en god ide.

Man kan sende brugerne derhen med links fra nyhedsbrev, banner eller Adwords og tilrettelægge siden, så den konverterer den besøgende til en kunde.

Her kan en video placeret som baggrundsbillede virkeligt give en landingssiden den fornemmelse af dynamik, som du er ude efter. Vi bruger i denne case Fuldbredte templaten i vores WordPress tema. På den måde kommer videoen til at benytte hele bredden af browservinduet.

Trin 1 – Mediebibliotek

1. Upload video til mediebiblioteket. Sørg for, at du har både videoen i MP4 og WebM format, da forskellige browsere foretrækker forskellige videoformater.

2. Kopier links til videoerne fra feltet Fil URL (1).

videoweb-1

 

3. Klik på Visual Composer-knappen (2) over Editor-feltet og klik på Add element-knappen (3).

videoweb-2

 

4. Tilføj Row (4) fra Add element-menuen. Klik på blyantikonet til venstre for at editere.

videoweb-3

 

5. Klik på Design options-tappen (5) og tilføj padding, så der kommer højde på vores video.

video-web-4

 

6. Klik på Background-tappen (6) og kopier links ind til de to videoer. Klik på Loop 7 under Extra Options og upload et stillbillede i tilfælde af, at videoen ikke loader og under Backgrund Override vælg Maximum Full Width. Gem resultatet.

video-web-5-1024x533

 

7. Opdater og Preview ændringerne

video-web-6

 

Trin 2 – Lav tekstoverlag med ikon

Lad os lægge en tekst hen over videoen.

1. Klik på plus-ikonet og vælg Heading fra Add elementmenuen. Læg mærke til, at det er vores normale editor, vi arbejder i. Udfyld Titel og Sub Heading.

 

video-web-7

2. Klik på Typography (1) og vælg en Google font – du kan nemt tilføje den, du ønsker og overskrive de normale typografiske indstillinger for webstedet.

 

video-web-8

3. Gem og Preview

 

video-web-9

4. Lad os tilføje noget Call to action i form af et pile-ikon, så vi giver brugere indtryk af, at der er mere information længere nede på siden. Vi giver det linket URL’en ”#cta” – det betyder, at det er et anchor point på siden. Det putter vi ind senere. Vi har nu toppen af vores landingsside.

 

video-web-10

Ved at bruge flere af Visual Composers-muligheder opbygger vi resten af siden. Se eksempel på det her:

 

video-web-11




authorIcon Af Anders Visby

Anders har deltaget i udvikling af digital kommunikation i 20 år, med en ”learning by doing” mentalitet.

Den har bragt ham til alt fra udvikling af computer spil til børn, til design af webløsninger til nogle af landets største organisationer og virksomheder.

Seneste blogindlæg


Kurser og workshops
grafiske-kurser-blog

After Effects kurser
På vores certificerede kurser i Aarhus og København får du det fulde overblik over After Effects. Se After Effects kurserne >>

InDesign kurser
Lær InDesign på 2 dage så du kan opsætte grafisk design til plakater, annoncer, foldere og meget mere. Se InDesign kurserne >>

UX design & WordPress kurser
Få en solid og praktisk forståelse for UX Design, så du kan designe gode brugeroplevelser og overbevisende design. Se web design kurserne >>


 

Se flere kurser

Find dit næste kreative kursus

Hos Softworld kan du deltage på en række kurser i InDesign, Photoshop, Illustrator, After Effects og WordPress.