Flytende toppmeny
Flytende toppmeny, eller "floating header", gjør det mulig å lage en topptekst som følger besøkende når de scroller nedover i nettbutikken.
Denne toppmenyen kan inneholde det samme som en vanlig topptekst, men det mest vanlige er å vise butikkens logo, søkefelt, handlekurv og menyknapp.
Kom i gang
Følg stegene under for å starte bygging av flytende toppmeny.
- Åpne designbyggeren og gå til det temaet hvor du ønsker flytende toppmeny.
- Fra sidevelgeren åpne "Flytende toppmeny" og velg "header_floating"
- Malen vil nå åpne seg men være tom.
Legg til seksjon
Steg 1 i byggingen vil være å legge til seksjonen(e) man ønsker å benytte. For denne sidetypen er kun "Bygging av toppområde" tilgjengelig.
- Legg til seksjon
- Velg "Bygging av toppområde"
Legg til blokker
Etter seksjonen er lagt til man kan legge til de blokkene man ønsker å vise i seksjonen.
Før musepekeren over seksjonen og klikk på den blå plussknappen for å velge blokk. I eksemplet under velger vi å legge til følgende tre blokker:
- Visning av hovedmenyknapp (brukes til å åpne menyen)
- Logo
- Ikoner
Tilpasse seksjon
Det første som gjøres er å tilpasse selve seksjoner. Her velger vi å endre bakgrunnsfarge, antall kolonner (for å få riktig visning) og polstring.
I tillegg til dette endrer vi synlighet fra "alle" til "Vis kun på skrivebordet". Det gjør at denne flytende toppmenyen kun vises om man scroller ned på datamaskin, og ikke på mobil.
Tilpasse blokker
Etter blokkene er lagt til må vi tilpasse utseende, størrelse og lignende.
Logo
Vi starter med å tilpasse logoen. Den bruker et standard bilde når blokken legges til. Dette erstatter vi med en faktisk logo og setter så størrelsen på logo.
For SEO sin del er det viktig å sette størrelse på logoen.
Oppsett av kolonner
Før vi går videre velger vi å justere antall kolonner som skal brukes av toppmenyen.
For denne menyen ønsker vi en mindre logo i midten og meny + ikoner ute til hver side. Vi velger derfor at menyknapp og ikoner hver skal bruke 2 kolonner og logo 1. Totalt blir dette 5 kolonner, hvor logo har minst plass og er plassert i midten.
Innstillinger for kolonner finner man, for de fleste blokker og seksjoner, under "Avanserte innstillinger".
I tillegg legger vi på litt polstring for å ha litt ekstra luft over og under logo.
Ikoner
Når vi er ferdige med å justere antall kolonner går veien videre til ikoner.
Her justerer vi størrelsen til 1rem (som tilsvarer 16 pixel).
Hovedmenyknapp
For hovedmenyknappen justerer vi skriftstørrelsen til 1rem og vekt til 400, slik at den matcher resten av designet. Videre justerer vi skriftfarge samt tekst på knappen.
Ferdigstille toppmeny
Det siste vi gjør er å lagre designet før vi navigerer til en annen side for å se menyen i aksjon! 🥳