Access-Control-Allow-Origin: www.heyloyalty.com

Sådan laver du fede pop-ups i Heyoverlay

20. feb, 2023 | Blog

Læsetid 6 minutter

5 simple tips til at lave endnu bedre designs i Heyoverlay 

 

Du har garanteret styr på det basale, når du skal oprette et nyt overlay. Hvad dit overlay skal bruges til, om det skal være en pop-up eller en sticky bar, og hvordan du vælger hvilken liste medlemmerne skal lande på, når de tilmelder sig. Hvis ikke, vil vi anbefale dig at læse denne guide først, og komme tilbage hertil for at få tips til design.

Du har sikkert også styr på, hvordan du designer dit overlay – men måske mangler du lige det sidste, før du kommer helt i mål med et lækkert overlay, der laver gode konverteringer. Med små ændringer kan du nemlig få dine overlays til at stå meget skarpere. Det gør, at brugeren bliver mere opmærksom på dem og er mere tilbøjelige til at reagere på dem.

I dette indlæg vil vi derfor komme med forskellige tips og tricks til, hvordan du designmæssigt laver et lækkert overlay i vores modul Heyoverlay. For at simplificere det, tager vi udgangspunkt i den mest udbredte type overlay: Pop-up’en.

1. Placér et billede i den ene side af pop-up’en og tekstindhold i den anden side

Hvis du har forsøgt at placere billedet i den ene side og indholdet i den anden uden succes, har vi et tip til, hvordan du kan lykkedes med det. Der kan nemlig opstå udfordringer, når du indsætter cellerne ved siden af hinanden: Du vil ofte opleve, at du ikke kan tilføje tekst over din tilmeldingsformular, uden at billedet rykker ned. Og det kan derfor blive noget rod, når du vil lave et lækkert design.  

Men du kan sagtens opnå det look du ønsker. Du skal blot indsætte dit billede som baggrund i stedet for i en celle. Herefter kan du rette billedbredden – vælger du en bredde der er smallere end din pop-up, vil billedet rykke til siden. Når du derefter tilføjer celler med indhold, skal du blot bruge to celler ad gangen, og kun placere indhold i modsat side end dit billede. I editoren kan det se lidt skørt ud (se billedet nedenfor), men i visningen på din hjemmeside kan man ikke se de tomme celler.

Editor med billede til venstre

Heyoverlay editor med billede til venstre.

2. Brug placeholdere i din formular for at undgå, at pop-up’en bliver for høj og kluntet

Når du har indsat en formular i din pop-up, kan den hurtigt blive høj og kluntet, da navnet på felterne står over de felter, kunden skal udfylde. Bruger du i stedet en placeholder, kan du fjerne overskrifterne fra din felter. Du skal, når du indsætter dine felter, vælge ”skjul label”, og i stedet indsætte navnet på feltet som ”placeholder”. Så bliver din formular ikke så høj, og den bliver også lidt mere lækker at se på. Du kan se forskellen nedenfor.

Formular uden placeholder

Formular uden placeholder.

Formular med placeholder

Formular med placeholder.

3. Eksperimentér med paddingen, for at få den rette mængde luft

Luft mellem de forskellige elementer er som regel din bedste ven, når du designer pop-ups, nyhedsbreve eller generelt, når du laver grafik. Derfor ligger der mange designmæssige fordele ved at lege lidt med at ændre på paddingen – altså luften mellem de forskellige elementer. Som standardindstilling sættes der 20 px padding omkring hele pop-up’en.

Indsætter du forskellige celler med indhold, kan det måske være en fordel at rette på dette, ligesom det også vil være en god idé at lege med at ændre på paddingen på de enkelte elementer. I eksemplet herunder har vi ikke ændret hverken på den padding, der er på selve pop-up’en, eller på de enkelte elementer efter de er sat ind. Og som du nok vil bemærke, ser det ikke så hensigtsmæssigt ud.

Overlay med standard padding

Pop-up med standard padding. 

Herunder kan du se hvordan den samme pop-up ser ud, efter vi har været inde og redigere i paddingen, både på selve pop-up’en og på de enkelte elementer.

Overlay med ændret padding

Pop-up med ændret padding.

Udover at ændre på paddingen, har vi har samtidig ændret en smule på formateringen og placering af teksten i cellen. Teksten er bl.a. blevet centreret i cellen, og overskriften er markeret med fed. De forskellige elementer (tekstboks og formular) har fået tilføjet padding, og vi har gjort paddingen mindre i både top og til højre af selve pop-up’en.

4. Få flere designmuligheder ved at indsætte din egen knap

Når du laver din pop-up, vil der være en standard CTA-knap. Denne knap er dog fastlåst ift. placering og størrelse, og det er selvfølgelig en udfordring, hvis du vil have flere designmuligheder.

Men du kan selvfølgelig også indsætte en anden knap manuelt, så du undgår designudfordringerne ved standardknappen.

På denne måde får du større mulighed for at flytte på knappen – enten kan du tilføje mere padding (som forklaret i tip nr. 3), eller flytte knappen et andet sted hen, end lige under din formular.

Det kunne eksempelvis være, at du gerne vil have en formular til venstre, men at knappen står til højre. Under designet på din knap skal du blot ændre ”Knap handling” til at være ”formularknap” i stedet for ”link knap” – og så kan du gå i gang med at eksperimentere med den rigtige knap til din pop-up.

5. Afrund hjørnerne, hvis det passer til dit design

Det sidste tip i dette indlæg handler om at sætte afrundede hjørner på din pop-up. Det er en meget simpel tilføjelse på pop-up’en, men det kan virkelig løfte det til nye højder.

Se eksemplet herunder, hvor vi har fjernet de afrundede hjørner fra det eksempel vi har brugt gennem hele indlægget. Prøv dig frem i forhold til hvor mange pixels der skal afrundes, før du får det look du ønsker. Det kan måske virke ret banalt, men nogle gange kan en pop-up med skarpe kanter komme til at se lidt klodset ud – og hvis det ikke passer til dit design, er det en fordel at bruge et par sekunder på at ændre det.

Overlay med skarpe hjørner

Pop-up med skarpe hjørner.

 Er du klar til at prøve kræfter med Heyoverlay?

Heyoverlay er et tilkøbsmodul, der kræver, at du har en Heyloyalty-konto.

Få 30 dages gratis adgang til Heyloyalty nedenfor. 

Heyloyalty blog

Få indblik i vores marketing automations og bliv inspireret gennem vores mange blogindlæg omkring både cases, og guides, samt tips og tricks lige her!

Segmentering blog

BLOG

Sådan laver du bedre segmentering, der øger engagement og salg
Læs blogindlæg

Klub Vollmer case

CASE

Sådan løfter Højmark Rejser serviceniveauet og øger salget med databaserede afrejseflows
Læs casen

Heyloyalty får ISAE 3000-erklæring

NYHED

Heyloyalty får ISAE 3000-erklæring som led i arbejdet med datasikkerhed
Læs nyhedsindlæg