Sidepanelnavigasjon

Sidepanelnavigasjonen er et navigasjonspanel med fast bredde som sitter til venstre for hovedsideinnholdet på desktop. Det viser et hierarkisk kategoritre med valgfrie lenker til tilbud, nye produkter, merker og statiske sider. Det er deaktivert som standard og må aktiveres eksplisitt.

Aktivere sidepanelet

Sidepanelet styres av en global innstilling, ikke bare en seksjonsplassering. Du må slå det på før det vises i den aktive butikkfronten.

  1. I mal-konfiguratoren, gå til Temainnstillinger → SIdefelt på venstre side
  2. Sett Aktiver sidepanel til ja
  3. Juster eventuelt maks bredde (standard: 340px). Dette kontrollerer den faste bredden på sidepanelkolonnen.

Med sidepanelet aktivert får hver side et to-kolonneoppsett på md brytpunkter og over: sidepanelkolonnen til venstre, sideinnhold til høyre. På mobil er sidepanelet helt skjult — det kollapser ikke til en hamburger eller skuff.

Legge til og konfigurere sidepanelseksjonen

Innholdet i sidepanelet administreres gjennom en dedikert seksjonstype kalt Navigasjon i sidefeltet. Denne seksjonen ligger i Topptekst malsporet i mal-konfiguratoren — ikke i sidekroppen. Layoutmotoren henter den fra topptekstdataene og gjengir den i sidepanelkolonnen.

Slik setter du opp sidepanelet:

  1. Åpne Mal-konfigurator → Topptekst
  2. Legg til seksjonen Navigasjon i sidefeltet.
  3. Seksjonen vil kun vises i sidepanelkolonnen, ikke direkte i toppteksten selv.

I forhåndsvisningen av mal-konfiguratoren aktiveres sidepaneloppsettet automatisk i det øyeblikket en sidebar_builder seksjon eksisterer i topptekstmalen — selv om den globale Aktiver sidepanel innstillingen fortsatt er false. Dette lar deg designe og forhåndsvise sidepanelet uten å påvirke den aktive butikkfronten.

Seksjonsinnstillinger

Seksjonen sidebar_builder omslutter alle blokkene sine og kontrollerer sidefeltets generelle utseende.

Innstilling

Hva den gjør

Standard

Bakgrunnsfarge

Bakgrunn for hele sidefeltet

Arvet fra side

Tekstfarge

Standard tekstfarge inne i sidefeltet

Arvet fra side

Kantlinjebredde

Tykkelse på sidefeltets kantlinje (px)

1px

Kantlinjefarge

Farge på kantlinjen

#e5e7eb

(lys grå)

Kantlinjeside

Hvilken side kantlinjen vises på

Høyre

Polstring

Indre avstand (topp/bunn/venstre/høyre)

16px topp og bunn

Marg

Ytre avstand

Ingen

Egendefinert klasse

CSS-klasse lagt til seksjonselementet


Kantlinjeside aksepterer: høyrevenstrebegge, eller ingen. Standard høyre kantlinje fungerer som en visuell skillelinje mellom sidefeltet og hovedinnholdsområdet.


Sidefeltmenyen-blokken

Hovedinnholdet i en sidefeltseksjon er en Sidefeltmeny-blokk. Den gjengir hele kategoritreet og legger eventuelt til lenker for tilbud, nye produkter, merker og statiske sider.

Innholdsalternativer

Innstilling

Hva den gjør

Standard

Alltid utvidet

Åpne alle kategorigrener ved lasting

Av

Maks dybde

Begrens hvor mange nivåer dypt treet gjengis (0–3, eller ubegrenset)

Ubegrenset

Vis tilbud

Legg til en lenke til Tilbud-siden

Av

Vis nye produkter

Legg til en lenke til Nye produkter-siden

Av

Vis merker

Legg til en lenke til Merker-siden

Av

Vis statiske sider

Legg til lenker fra menyen for statiske sider

Av

Når Alltid utvidet er av, viser overordnede kategorier som inneholder underkategorier en vinkelparentes-veksler. Ved å klikke på vinkelparentesen utvides eller skjules den grenen. Kategorier langs stien til gjeldende side utvides automatisk uavhengig av denne innstillingen.

Den aktive kategorien (den som samsvarer med gjeldende side) er uthevet i fet skrift. Du kan tilpasse hvordan "aktiv" ser ut med fargeinnstillingene nedenfor.

Innstillingen Maks dybde (megamenu_no_lvl) kontrollerer hvor mange nivåer som vises. Hvis den settes til vises kun kategorier på øverste nivå. viser ett nivå med underkategorier. La den stå på initial (standard) for å vise hele treet.

Lenker til statiske sider bruker etikettnavnene fra nettstedets menykonfigurasjon. Etiketter for tilbud og nye produkter respekterer overstyringene i Globale innstillinger → Generelt hvis satt.

Fargeinnstillinger

Innstilling

Hva den gjør

Tekstfarge ved hover

Lenketekstfarge ved hover

Bakgrunn ved hover

Lenkebakgrunn ved hover

Aktiv tekstfarge

Tekstfarge for den aktivt valgte lenken

Aktiv bakgrunn

Bakgrunn for den aktivt valgte lenken

Alle fire er som standard inherit transparent hvis ikke satt.

Typografi og innrykk per nivå

Hvert av de fire dybdenivåene (0–3) har uavhengige kontroller for skriftstørrelse, skriftvekt, tekstfarge og venstre innrykk. Dette lar deg visuelt skille dybde — for eksempel større fet tekst for kategorier på øverste nivå og mindre grå tekst for underkategorier.

Nivå

Standard skriftstørrelse

Standard innrykk

Nivå 0 (topp)

0.9rem

8px

Nivå 1

0.85rem

24px

Nivå 2

0.8rem

40px

Nivå 3

0.75rem

56px

Innrykk er venstre polstring som brukes på hver lenke. Den øker med dybden for å skape den visuelle hierarkiet. Du kan angi den hvor som helst fra 0 til 60px i trinn på 2px.


Mobilatferd

Sidepanelet er skjult på skjermer smalere enn md-brytepunktet (768px). Det er ingen mobil tilbakeløsning — sidepanelet vises rett og slett ikke. På mobil navigerer kundene via den eksisterende mobilmenyen i stedet.

Hvis du trenger navigasjon på mobil, hold headerens mobilmeny konfigurert separat. Sidepanelet og mobilmenyen er uavhengige.


Tips

  • Du kan legge til mer enn én blokk i en sidebar_builder-seksjon. De tillatte blokktypene er Sidepanelmeny,Overskrift, og Avsnitt, slik at du kan legge til en overskrift over menyen eller en kort tekstblokk under den.
  • Sidepanelkolonnens bredde er fast — den tilpasser seg ikke innholdet. Sett max_width til en verdi som fungerer på tvers av din typiske kategoritre-dybde og skriftstørrelse.
  • Hvis sidepanelet ser riktig ut i forhåndsvisningen av mal-konfiguratoren, men ikke vises på den aktive nettbutikken, sjekk at Aktiver sidepanel er satt til true i Globale innstillinger.
  • Sidepanelseksjonen må være i Header-malsporet. Å legge den til et annet malspor (bunntekst, sideinnhold osv.) vil ikke gjengi den i sidepanelkolonnen.


Var denne artikkelen hjelpsom?