Produktboksdesigner: Slik kombinerer du blokker og seksjoner

Slik kombinerer du blokker og seksjoner

Et produktkort bygges av seksjoner du stabler oppå hverandre, og blokker du legger inne i hver seksjon. Denne artikkelen forklarer hvordan de to nivåene henger sammen, hvordan du får flere blokker til å stå side om side, og hvordan du legger merker oppå bildet.

De to nivåene: seksjon og blokk

En seksjon er en horisontal rad på kortet. Du stabler seksjoner ovenfra og ned — standardoppsettet har en topp-, midt- og bunnseksjon. Hver seksjon har sin egen bakgrunn, luft, ramme og avstand mellom elementene.

En blokk er ett innholdselement inne i en seksjon — et bilde, en tittel, en pris, en knapp. Blokker legger seg etter hverandre i seksjonen, og du bestemmer rekkefølgen ved å dra.

Tenk på seksjoner som radene og blokkene som innholdet i radene. Vil du skille bildet visuelt fra teksten, legger du dem i hver sin seksjon og gir seksjonene ulik bakgrunn.

Bygg opp et kort steg for steg

• Begynn med seksjonene. Bestem hvor mange rader kortet skal ha, og gi dem navn som beskriver innholdet (for eksempel «Bilde», «Tekst», «Handling»).
• Legg blokker i hver seksjon med Legg til ny blokk.
• Dra blokkene til riktig rekkefølge. Du kan dra en blokk fra én seksjon til en annen.
• Klikk på innstillingsikonet på en seksjon eller blokk for å justere den. Endringene vises i forhåndsvisningen med en gang.

Skjermbilde her: et produktkort i byggeren med seksjonene tydelig markert, og sidebaren som viser blokkene i én seksjon.

To blokker side om side

Hver rad er delt inn i et rutenett på åtte kolonner. Innstillingen Kolonnebredde på en blokk bestemmer hvor mange av de åtte kolonnene blokken legger beslag på.

• Kolonnebredde 8 = full bredde. Blokken fyller hele raden, og neste blokk havner under.
• To blokker med kolonnebredde 4 + 4 deler raden i to like deler og står side om side.
• En tittel med bredde 6 og et artikkelnummer med bredde 2 lar tittelen ta mesteparten av plassen, med artikkelnummeret ved siden av.

For at blokker skal stå på samme rad må de ligge i samme seksjon og ha en samlet kolonnebredde på 8 eller mindre. Blir summen større enn 8, brytes den siste blokken ned på en ny linje.

Skjermbilde her: en seksjon med pris til venstre og CTA-knapp til høyre, begge med kolonnebredde 4.

Avstand mellom blokker på samme rad

Seksjonsinnstillingen Avstand mellom elementene styrer luften mellom blokkene i raden. Vil du ha mer pusterom mellom en pris og en knapp som står side om side, øker du denne verdien — ikke margin på hver enkelt blokk.

Tagger-overlegg: merker oppå bildet

I tillegg til de vanlige seksjonene finnes en egen seksjonstype kalt Tagger Overlegg. Blokker i denne seksjonen legger seg oppå kortet i stedet for å ta plass i flyten — typisk over produktbildet.

Du bruker overlegget til Bånd og Tag, altså rabattmerker, «Ny»-etiketter, kundeklubbmerker og frittstående etiketter. Disse blokkene posisjoneres mot et hjørne (Bånd) eller med egne koordinater (Tag), og flyter over resten av innholdet.

Vanlige innholdsblokker som tittel og pris hører ikke hjemme i overlegget — de legger du i en vanlig seksjon.

Skjermbilde her: et kort med rabattbånd øverst i venstre hjørne og en «Ny»-tag, som viser overlegget oppå bildet.

Et vanlig oppsett

Et ryddig standardkort ser gjerne slik ut:

• Toppseksjon — Miniatyrbilde (full bredde). Bånd og Tag i et Tagger-overlegg oppå bildet.
• Midtseksjon — Tittel og eventuelt Produsent eller Artikkelnummer.
• Bunnseksjon — Pris og CTA-knapp, gjerne side om side med kolonnebredde 4 + 4.

Gi hver seksjon samme bakgrunnsfarge for et helstøpt kort, eller bryt opp med en avvikende bakgrunn på én seksjon for å fremheve for eksempel prisraden.

Tips

• Bytt til dummy-datamodus mens du jobber med layouten. Da slipper du at ujevn produktdata gjør det vanskelig å se om kolonnebreddene stemmer.
• Hold antallet blokker nede. Et kort som viser alt blir rotete — velg det kundene trenger for å klikke seg videre.
• Skjul heller en blokk eller seksjon enn å slette den hvis du tror du får bruk for den senere.
• Hver blokk er beskrevet i detalj i sin egen artikkel. Start med [Produktboksdesigner — Blokkreferanse] for en rask oversikt over alle blokkene.