HTML banner-annoncer i Google Web Designer

  Skrevet af: Mads Gjerrild, gjerrilds.dk     09-03-2021     Skrevet i: Markedsføring

Når det kommer til annoncer på internettet og via de mange forskellige annoncenetværk så er HTML bannerannoncer en stor og vigtig del heraf. Med HTML bannerannoncer kan du lave animationer i dine annoncer og skræddersy præcis som du har lyst, hvilket skaber mere blikfang. Hvis vi fx ser på mulighederne gennem Google Ads (tidligere AdWords) og Google displaynetværket, så er det ofte ikke nok kun med de generiske annoncer eller statiske billeder.

Her kommer en kort guide til, hvordan du kommer i mål med din første skræddersyet HTML5 bannerannonce uden at kode særlig meget. Det er forholdsvist nemt at komme i gang og kræver blot Google Web Designer, som er et gratis redskab du kan hente.

Dertil findes der værktøjer som fx Bannersnack, hvis du vil have det til at generere det hele for dig. Dog mister du fleksibilitet med Bannersnack som man ellers ville have med Google Web Designer.

En god idé inden du starter er at have en visuel ide om, hvordan din annonce skal se ud.

Google Web Designer

Først og fremmest skal du downloade og installere Google Web Designer (GWD). Herefter skal du beslutte dig for hvilket format du vil have dine annoncer i. Du laver en af gangen, jeg anbefaler du starter med 300×250 og derefter lave den om til andre formater efterfølgende.

Når du starter GWD, så får du muligheden for at lave en nyt format eller bruge en template. Start med at oprette en ny. Her vælger du navn, placering du vil gemme, hvilket medie du skal bruge annoncen på (fx være Google Ads), herefter vælger du dimensioner og til sidst kan du vælge animations mode: Quick mode eller Advanced mode. Quick mode er noget simplere end Advanced mode, så derfor vil jeg anbefale at starte med at vælge Quick Mode. Du kan altid ændre til Advanced mode undervejs når du vil arbejde med dine lag.

Når du designer en annonce til Google Ads med HTML så må en færdig annonce max fylde 150 KB. Det anbefales at du komprimerer dine billeder til de rette størrelser og benytter HTML til alt hvad du kan. Men dette dette er ikke nødvendigvis et krav.

Nu er du i gang med at skabe din annonce. Det er en god idé at blive bekendt med de forskellige redskaber du har tilgængelig, jeg gennemgår et par af dem her:

• Selection Tool (Genvejstast: V)
• Motion path Tool (Genvejstast: M)
• Element tool (Genvejstast: D)
• Text tool
• Eyedropper tool (Genvejstast: i)
• Hand tool (Genvejstast: H)

Selection Tool

Selection Tool er et forholdsvist simpelt værktøj, som gør præcis, hvad du forventer. Du kan vælge elementer på dit annonce og flytte rundt på dem.

Med selection tool kan du også justere det elementer automatisk, alt efter hvor du gerne vil have det placeret på annoncen, fx Align: vertical center.

Du kan også justere hvilket lag det valgte element skal ligge i.

Motion path Tool

Motion path Tool er et værktøj du kan bruge til at tegne dine bevægelsers rute, fx hvis du vil have en bil til at køre hen over din annonce.

Element Tool

Element Tool laver faktisk blot en <div> som du  efterfølgende kan manipulere. Fx kan du gøre det til via denne div lave en knap på din annonce, hvis du kan kode lidt CSS selv. Hvis ikke så anbefaler jeg at du blot laver et billede af en knap og sætter ind. Men hvis du kan kode kan du vælge CSS og selv indsætte dit skræddersyede CSS.

Text Tool

Du kender det fra alverdens programmer; indsæt tekst.

Eyedropper tool

Finder blot den farver som er i billedet, fx hvis du har et logo du gerne vil bruge farven fra.

Hand tool

Med hand tool kan du, uden at vælge elementer, bevæge dig rundt på din annonce og canvasset.

Timeline

For at få bevægelser på dine annoncer skal du at kigge på din timeline.

Når du er i quick mode, så er det, som navnet også antyder, ret simpelt. Du kan trykke på det store + og vælge de elementer du vil have til at bevæge sig, også flytter du dem blot derhen hvor du vil have dem til at bevæge sig hen. Når du gør dette skaber du en animation, hvor elementet flytter sig fra a til b, uden du skal kode noget som helst, det kan fx være som den knap, der kommer svævende ind fra siden på annoncen.

I timeline har du også en Play-knap, så du kan se, hvordan dine forskellige bevægelser ser ud. Du kan også justere, hvor lang animationen skal være

Men hvis du gerne vil have knappen til at fade ind skal du lave lidt om i indstillingerne for elementet.

I højre side kan du vælge elementet, også kan du klikke på “Properties”.

Under Properties kan du vælge Style og justere Fill til 0 på det første billede. Nu kan du prøve at afspille din annonce ved at trykke på play knappen og du vil kunne se at den fader ind.

Hvis du vil have det tager længere tid eller vil have en anden form for animation, så kan du på feltet mellem dine 2 frames i din timeline justere dette.

Prøv at justere på de forskellige værdier under properties for at se, hvad det kan.

Nu har du lavet den første animation og nu er det bare om prøve sig frem og måske få tilføjet nogle forskellige billeder.

Undervejs når du er i gang med din annonce kan du benytte dig af Preview knappen oppe til højre. Her kan du se et udkast af hvordan den endelige annonce kommer til at se ud.

Når du er i mål med din annonce er det ved at være tid til at eksportere din html annonce, så du kan uploade den til din Google Ads konto. Her skal du trykke på Publish oppe i højre hjørne og vælge locally.

Når du er ved at være inde i Google Web Designer kan det anbefales at afprøve Advanced mode, du kan altid skifte frem og tilbage mellem Quick- og Advanced mode, til højre på din timeline.