Gra­fi­ske punk­top­stil­lin­ger hol­der læser­ne læn­ge­re tid på hjem­mesi­den

Du ken­der sik­kert godt de der kas­ser med tekst og en knap, der anven­des på man­ge lan­dings­si­der. Hvad der i vir­ke­lig­he­den er tale om, er punk­top­stil­lin­ger. Tæn­ker du dem også ind på dine andre sider på hjem­mesi­den, ska­ber du et fæn­gen­de ele­ment øverst på siden. Det giver over­blik over din tekst, og læser­ne en nem gen­vej til den del af tek­sten, de fin­der mest inter­es­sant. Det hol­der dem læn­ge­re på din side!

 

Ben­ny Chri­sten Gran­da­hl

Part­ner og Chief Con­tent Offi­cer, web­te­xts­hop

For­stå ide­en bag

Hvor­for er gra­fi­ske punk­top­stil­lin­ger smar­te?

Lær af skri­ve dem

Sådan skri­ver du gra­fi­ske punk­top­stil­lin­ger!

Sådan byg­ges de

Sådan sæt­ter du dem på hjem­mesi­den!

I den­ne arti­kel lærer du at kon­ver­te­re almin­de­li­ge punk­top­stil­lin­ger til gra­fi­ske punk­top­stil­lin­ger, som den, du ser øverst på siden. Det du lærer, er alt­så at tage en tra­di­tio­nel punk­top­stil­ling og sæt­te den op på en mere iøj­ne­fal­den­de måde.

Hold musen hen over bil­le­det for at se for­skel­len.

Den gra­fi­ske punk­top­stil­ling giver læse­ren et bed­re over­blik over tek­sten på siden. Sam­ti­dig får han eller hun mulig­hed for at sprin­ge læn­ge­re ned til det afsnit i tek­sten, de fin­der mest inter­es­sant. Det gør de ved at bru­ge de knap­per i hvert kas­se, der lin­ker til et bog­mær­ke for det pågæl­den­de hoved­af­snit læn­ge­re nede på siden.

Alt­så giver du både læse­ren et bed­re over­blik og akti­ve­rer ved­kom­men­de. Det øger chan­cer­ne for, at de bli­ver læn­ge­re på siden – og der­med sidens chan­ce for at kom­me høje­re op i søge­re­sul­ta­ter­ne på Goog­le.

Lad os se at kom­me i gang!

For­stå ide­en bag

Punk­top­stil­lin­ger er gode både for dine læse­re og dine pla­ce­rin­ger i Goog­le. Der­for anbe­fa­ler SEO-eks­per­ter og tekst­nør­der som os altid, at du ind­ar­bej­der en eller fle­re punk­top­stil­lin­ger på dine sider.

Dels bry­der punk­top­stil­lin­ger­ne tek­sten på siden, og dels dra­ger de øjet, når de besø­gen­de lader øjne­ne løbe ned over siden. Det bety­der, at der er stor chan­ce for, at folk stop­per op for at skim­me punk­top­stil­lin­ger­ne. Det med­fø­rer ofte, at folk fat­ter så meget inter­es­se for ind­hol­det, at de begyn­der at læse brød­tek­sten omkring det sted på siden, hvor punk­top­stil­lin­gen befin­der sig.

Så på den måde kan du bru­ge punk­top­stil­lin­ger­ne til at sæl­ge ind­hol­det på siden ind.

For­stærk effek­ten af punk­top­stil­lin­ger­ne

Men fak­tisk kan du med små mid­ler ska­be et meget mere fæn­gen­de og over­bliks­gi­ven­de gra­fisk ele­ment på din side, der man­gedob­ler effek­ten af punk­top­stil­lin­ger­ne. Til­med kan du bru­ge det til, at få folk til at sprin­ge meget læn­ge­re ned i tek­sten, end de måske ellers hav­de gjort, hvis de bare scrol­le­de ned over siden.

Det gør du med gra­fi­ske punk­top­stil­lin­ger, der

  • Giver over­blik over opbyg­nin­gen af tek­sten
  • Tea­ser udbyt­tet af de for­skel­li­ge afsnit på siden
  • Fun­ge­rer som link til det enkel­te afsnit på siden

Det som jeg kal­der gra­fi­ske punk­top­stil­lin­ger, er de der “kas­ser” med en over­skrift, en kort tekst, og even­tu­elt en knap med et link og et lil­le ikon. Det er sådan­ne ”kas­ser”, du fin­der på man­ge for­si­der eller lan­dings­si­der på fir­ma­ers hjem­mesi­de. De optræ­der oftest tre eller fire ved siden af hin­an­den. Et godt eksem­pel er de tre, du kan se på for­si­den af vores egen hjem­mesi­de:

Denne sektion på forsiden er faktisk en grafisk punktopstilling.

Den­ne sek­tion på for­si­den er fak­tisk en gra­fisk punk­top­stil­ling.

De kan f.eks. præ­sen­te­re hvil­ke tje­ne­ster eller pro­dukt­ka­te­go­ri­er, du kan købe hos fir­ma­et eller prom­ove­re de 3–4 vig­tig­ste egen­ska­ber ved det pro­dukt eller den tje­ne­ste, siden vil sæl­ge den besø­gen­de.

På lan­dings­si­der og hjem­mesi­der fun­ge­rer de sam­ti­dig som links til under­si­der på web­s­te­det, der uddy­ber den enkel­te tje­ne­ste eller det enkel­te pro­dukt. På en salgs­si­de lin­ker de sjæl­dent til noget, men vir­ker bare som en mere læk­ker og visu­el måde at præ­sen­te­re pro­duk­tets egen­ska­ber på.

Hvor­for får de folk til at bli­ve læn­ge­re tid på siden

Det fede ved gra­fi­ske punk­top­stil­lin­ger er, at de har stør­re stop-effekt end tra­di­tio­nel­le punk­top­stil­lin­ger, for­di de vir­ker mere dra­gen­de på grund af den gra­fi­ske opsæt­ning. Sam­ti­dig vir­ker de mere over­sku­e­li­ge og min­dre tekst­tun­ge, end den brød­tekst der er på siden.

Den gra­fi­ske opbyg­ning giver over­blik over artik­lens opbyg­ning. Det er spe­ci­elt smart i meget sto­re artik­ler. For det spa­rer folk tid og en mas­se rul­len op og ned ad siden for at få over­blik.

Der­ved kan de besø­gen­de sprin­ge det over, som de godt ved, eller kan reg­ne ud. I ste­det kan de gå direk­te til det hoved­af­snit, der inter­es­se­rer dem.

Det gør det nem­me­re at få hul på tek­sten, og øger chan­cer­ne for, at folk bli­ver læn­ge­re på siden.

Lær at skri­ve gra­fi­ske punk­top­stil­lin­ger

Ret beset er gra­fi­ske punk­top­stil­lin­ger ”bare” en almin­de­lig punk­top­stil­ling med et ind­byg­get anker­tekst og link. For­ma­tet er dog meget ander­le­des end almin­de­li­ge punk­top­stil­lin­ger. For det kræ­ver, at du opde­ler hvert punkt i punk­top­stil­lin­gen i

  • En over­skrift til kas­sen
  • En kort, uddy­ben­de tekst
  • En anker­tekst til link eller knap

Alt­så skal du opde­le alle punk­ter­ne i punk­top­stil­lin­ger­ne, så de over­hol­der det­te for­mat. Vi tager et nær­me­re kig på  hver af de tre ele­men­ter lige om lidt. Men først skal vi lige gen­nem­gå nog­le detal­jer, som det er vig­tigt at få på plads, inden du begyn­der at skri­ve dit ind­hold og tek­sten til dine gra­fi­ske punk­top­stil­lin­ger.

Kræ­ver, at du plan­læg­ger dit ind­hold

For at de gra­fi­ske punk­top­stil­lin­ger skal fun­ge­re efter hen­sig­ten, er det nem­lig vig­tigt, at du plan­læg­ger dit ind­hold på siden, så det er opdelt natur­ligt i 3 eller 4 hoved­af­snit, sek­tio­ner eller dele.

For­matér den før­ste mel­lem­ru­brik i hver sek­tion med H2 og de reste­ren­de mel­lem­ru­brik­ker med H3. Så kan både Goog­le og de besø­gen­de se, at ind­hol­det hører sam­men i fle­re hoved­af­snit.

For­matér even­tu­elt hver anden sek­tion i den fær­dig­top­sat­te side med en bag­grunds­far­ve, så det er nemt for læser­ne at fin­de sam­men­hæn­gen. Gan­ske som den­ne sek­tion har en svag gul­lig far­ve og den for­ri­ge og næste sek­tion anven­der en helt hvid bag­grund.

Hold dig til 3–4 kas­ser

Selv om det måske vir­ker til­lok­ken­de, bør du ikke anven­de mere end 3–4 kas­ser i punk­top­stil­lin­gen. Selv­føl­ge­lig kan du godt have 2 eller måske 3 ræk­ker. Men – især på en mobil­te­le­fon – vil den over­bliks­gi­ven­de effekt for­svin­de, for­di folk skal scrol­le alt for meget. Så lad være med at anven­de mere end det antal ”kas­ser”, der kan stå på en linje på en com­pu­ter- eller tab­letskærm. For på mobi­len bli­ver kas­ser­ne pla­ce­ret under hin­an­den.

Sørg for at hvert ele­ment er lige langt

Sam­ti­dig er det vig­tigt, at du sør­ger for, at hvert ele­ment er så tæt på at være lige langt som de andre. Alt­så at tek­sten i alle tre over­skrif­ter er på nogen­lun­de sam­me antal tegn, og tek­sten i den uddy­ben­de tekst og på knap­pen også er det.

Sam­ti­dig bør du være opmærk­som på, hvor man­ge bre­de og smal­le bog­sta­ver der er i de enkel­te ele­men­ter. For du skal helst have det sam­me antal linjer i hvert ele­ment i kas­ser­ne, når de er sat op.

Der­ved bli­ver tek­sten i kas­ser­ne mere ens­ar­tet, så f.eks. over­skrif­ten altid kan være på en linje i kas­sen. Til­sva­ren­de fyl­der den uddy­ben­de tekst det sam­me antal linjer i alle kas­ser­ne – oftest to eller tre linjer.

Even­tu­elt må du finju­ste­re tek­sten, når kas­ser­ne er sat op, så linje­an­tal­let bli­ver ens. Det giver ro for øjet og bed­re balan­ce i desig­net.

Og nu lidt om hver af de tre tek­st­e­le­men­ter og anker­tek­sten på knap­pen eller lin­ket.

Over­skrif­ten

Over­skrif­ten skal gå efter at navn­gi­ve de enkel­te hoved­af­snit i tek­sten. Den skal sam­ti­dig være kort og præ­cis. Der­ved kan den hol­de sig på en, mak­si­malt to linjer i kas­sen. Sam­ti­dig skal tek­sten sand­syn­lig­vis stå med fed skrift i kas­sen, så den vir­ker som en over­skrift. Der­for har du fær­re­st muli­ge tegn til din rådig­hed, når du skal skri­ve over­skrif­ten.

Over­skrif­ter­ne i eksemp­let her på siden lig­ger på lige omkring 20 tegn i hvert punkt. Det bur­de gøre det muligt at hol­de over­skrif­ten på sam­me linje i kas­sen.

Så gør over­skrif­ten så kort, fæn­gen­de og præ­cis som muligt, og brug nogen­lun­de det sam­me antal tegn i hver over­skrift.

Den uddy­ben­de tekst

Den uddy­ben­de tekst skal gå efter at præ­sen­te­re den vig­tig­ste for­del, som læse­ren får ud af at læse det­te afsnit.

Det kan være enten ved at love svar på det spørgs­mål, læse­ren må side med i hove­d­et, når han eller hun har læst over­skrif­ten. F.eks. ” Hvor­for er gra­fi­ske punk­top­stil­lin­ger smar­te?” i kas­sen med over­skrif­ten ”For­stå ide­en bag” i eksemp­let her på siden.

Eller sim­pelt­hen bare for­kla­re hvil­ken for­del læse­ren får af at læse afsnit­tet. F.eks. ”Sådan sæt­ter du dem på hjem­mesi­den!” i kas­sen med over­skrif­ten ”Sådan byg­ges de”.

Anker­tek­sten

Anker­tek­sten til et tekst­link eller en knap nederst i de enkel­te bok­se skal fun­ge­re som et link til et bog­mær­ke for den sek­tion, som bok­sen beskri­ver.

Har du f.eks. alle­re­de for­stå­et, hvor­for gra­fi­ske punk­top­stil­lin­ger er smar­te og hel­le­re vil vide, hvor­dan du skri­ver dem? Så kan du bare klik­ke på knap­pen i den mid­ter­ste kas­se øverst på siden. Så kom­mer du direk­te til den­ne del af artik­len.

Du kan også væl­ge ikke at have knap­per eller link til bog­mær­ker læn­ge­re nede på siden. Så giver kas­ser­ne bare et ind­le­den­de over­blik. Men der­ved for­svin­der mulig­he­den for, at folk kan skip­pe det, de ikke gider læse og gå direk­te efter gul­det. Så uden knap eller link i hver boks for­svin­der en af de vig­tig­ste for­de­le ved at opbyg­ge punk­top­stil­lin­ger­ne gra­fisk.

Sådan byg­ger du gra­fi­ske punk­top­stil­lin­ger

Den nem­me­ste måde at byg­ge gra­fi­ske punk­top­stil­lin­ger, hvis du ikke kan kode i HTML, er ved at anven­de en modul­op­byg­get edi­tor i Word­Press. F.eks. Ele­men­tor eller Divi fra Ele­gant The­mes, som vi anven­der her på siden.

Den stør­ste ulem­pe ved sådan­ne mere gra­fisk ori­en­te­re­de edi­to­rer er, at det tager læn­ge­re tid at opbyg­ge tek­sten på den enkel­te side. Sam­ti­dig er der stor for­skel på kode­kva­li­te­ten af de for­skel­li­ge modul­op­byg­ge­de edi­to­rer. Sam­ti­dig bety­der bru­gen af en modul­op­byg­get edi­tor oftest, at al opsæt­ning for­svin­der, hvis du skif­ter til et andet tema uden modul­op­byg­get edi­tor.

Kun ved at bru­ge en modul­op­byg­get edi­tor, der både kan fås inte­gre­ret i tema­et og som et selv­stæn­digt plu­gin (hvil­ket net­op Divi kan), kan du skif­te tema på hjem­mesi­den, uden at du nød­ven­dig­vis mister desig­net på alle dine sider.

Da vi som sagt anven­der tema-fra­mewor­ket Divi fra Ele­gant The­mes her på vores hjem­mesi­de, viser jeg natur­lig­vis, hvor­dan vi opbyg­ger en gra­fisk punk­top­stil­ling i Divi.

Start med at sæt­te hele tek­sten op

Start med at sæt­te tek­sten ind på siden i tre for­skel­li­ge sek­tio­ner. Hver sek­tion skal fun­ge­re som bog­mær­ke for det link, der peger ned på sek­tio­nen fra hvert punkt i punk­top­stil­lin­gen.

Det gør du ved at åbne Sek­tio­ner Indstil­lin­ger-dia­log­bok­sen for hver enkelt sek­tion. Klik ind på Avan­ce­ret-fanen og angiv et navn for bog­mær­ket i CSS ID-fel­tet. Her “Ide­en”. Sene­re bru­ger du bog­mær­ket som link på knap­pen eller lin­ket i den gra­fi­ske punk­top­stil­ling.

Hver sektion skal fungere som bogmærke for det link, der peger ned på sektionen fra hvert punkt i punktopstillingen.

Byg punk­top­stil­lin­gen som en ræk­ke på tre kolon­ner

I den sek­tion hvor du vil have punk­top­stil­lin­gen, ind­sæt­ter du en ny ræk­ke på siden. Klik på det grøn­ne plus for at til­fø­je ræk­ken og vælg tre kolon­ner i Ind­sæt ræk­ke-dia­log­bok­sen.

I den sektion hvor du vil have punktopstillingen, indsætter du en ny række på siden.

Til­føj et Opfor­dring til hand­ling-modul for hver punkt

Til­føj der­ef­ter et Opfor­dring til hand­ling-modul til det før­ste punkt i den gra­fi­ske punk­top­stil­ling. Ind­sæt over­skrif­ten i Titel-fel­tet, knap-tek­sten i Knap tekst-fel­tet og den mid­ter­ste, uddy­ben­de tekst i Tekst-ruden.

Som link til knap­pen ind­sæt­ter du det bog­mær­ke, du angav i CSS ID-fel­tet på Avan­ce­ret-fanen i Sek­tion indstil­lin­ger-dia­log­bo­ken, for den sek­tion hvor tek­sten til det pågæl­den­de punkt begyn­der.

Til­pas der­ef­ter fon­te og far­ver på bag­grun­den i modu­let, skrift­ty­per­ne og knap­pen ved hjælp af de respek­ti­ve sek­tio­ner på Ind­hold- og Design-faner­ne.

Tilføj derefter et Opfordring til handling-modul til det første punkt i den grafiske punktopstilling.

Kopiér der­ef­ter modu­let vide­re til de andre to kolon­ner i ræk­ken. Ret tek­sten til på de for­skel­li­ge ele­men­ter og ret lin­ket, så det peger på det rig­ti­ge bog­mær­ke.

Nu er din side sat op med gra­fi­ske bog­mær­ker, der fun­ge­rer som links til de enkel­te sek­tio­ner i tek­sten.  Det ser ud nøj­ag­tigt, og fun­ge­rer, som du kan se det i prak­sis her øverst på siden.

Skal vi hjæl­pe jer med at byg­ge mere inter­ak­ti­ve tek­ster?

Har I også lan­ge tek­ster på jeres hjem­mesi­de, som I ger­ne vil have folk til at bli­ve hæn­gen­de og læse, kan I bru­ge opskrif­ten oven­for. I kan også få os til at hjæl­pe jer med at ska­be mere enga­ge­ren­de tek­ster, der river tekst­mu­ren ned og akti­ve­rer jeres besø­gen­de.

Brug kon­takt­for­mu­la­ren her­un­der, ring på 29 72 55 73 eller send en mail til info@webtextshop. Så kon­tak­ter vi jer for at høre nær­me­re om, hvor­dan vi kan hjæl­pe jer med at få folk til at bli­ve læn­ge­re på jeres hjem­mesi­de.

 

Ja, tak! Giv mig en pris på at få skre­vet tek­ster!

1 + 1 =

TIPS TIL PRO­DUKT­TEK­STER

Hvor­for følel­ser sæl­ger
bed­re end funk­tio­ner!

TIPS TIL WEB­TEK­STER

Hvor­for vi ikke skri­ver
“rig­ti­ge” SEO-tek­ster!

TIPS TIL WEB­TEK­STER

Om at skri­ve en god og
sam­men­hæn­gen­de tekst

web­te­xts­hop

Vil du ger­ne fin­des på inter­net­tet, men synes det er svært at kom­me til tops i søge­re­sul­ta­ter­ne, så kan vi hjæl­pe. Web­te­xts­hop pro­du­ce­rer con­tent mar­ke­ting og tek­ster til din hjem­mesi­de, der sik­rer dig bed­re pla­ce­rin­ger i søge­re­sul­ta­ter­ne.

© 2018 web­te­xts­hop i/s

WEB­TE­XTS­HOP

Præ­ste­marks­vej 20
4653 Kari­se
Mail: info at web​te​xts​hop​.dk
Tlf.: 29 72 55 73
CVR: 36679220

Få flere besøgende og større konvertering med Power-Words!

Få vores GRATIS e-bog med 710+ PowerWords på dansk og deltag GRATIS i vores mail-kursus i at bruge Power-Words. 

Tak for din tilmelding. Hold øje med vores bekræftelsesmail i din Indbakke eller dit spamfilter.

Share This