Toppmeny: Gjennomsiktig topptekst
Gjennomsiktig topptekst
Gjennomsiktig topptekst lar toppteksten flyte oppå innholdet øverst på forsiden, slik at bildet eller banneret bak skinner gjennom i stedet for at toppteksten har en egen, heldekkende bakgrunn. Effekten brukes mest sammen med et stort forsidebanner eller en video, der du vil at logo og meny skal ligge rett oppå bildet.
Funksjonen styres tre steder: en global av/på-bryter, fargevalg på selve toppmeny-seksjonen, og en egen logo på logo-blokken. Du trenger som regel å innom alle tre for å få et godt resultat.
Slik slår du det på
Hovedbryteren ligger i de globale innstillingene, ikke på seksjonen.
- Åpne designbyggeren og gå til temaet du jobber med.
- Gå til de globale innstillingene og åpne gruppen Topptekst.
- Sett Gjennomsiktig topptekst til på.
- Lagre.
Når bryteren er på, skjer to ting — og bare på forsiden:
- Toppteksten løftes ut av den vanlige flyten på siden og festes øverst. Innholdet under — typisk forsidebanneret — flytter seg da helt opp til toppen og legger seg bak toppteksten, i stedet for å starte under den. Det er dette som gjør at banneret fyller hele toppen mens logo og meny ligger oppå.
- Toppteksten bytter til fargene du har satt for gjennomsiktig tilstand (se under) i stedet for sin vanlige, solide bakgrunn.
Alle andre sider enn forsiden beholder en helt vanlig topptekst med solid bakgrunn, som skyver innholdet nedover som normalt.
Innstillinger
Innstillingene er fordelt på tre nivåer. Bryteren bestemmer om effekten er på; de andre bestemmer hvordan den ser ut.
Hvor | Innstilling | Hva den styrer |
|---|---|---|
Globale innstillinger → Topptekst | Gjennomsiktig topptekst | Slår effekten av eller på for hele temaet. Av som standard. |
Toppmeny-seksjonen → gruppen «Transparent header» (avansert) | Tekstfarge | Farge på tekst og ikoner mens toppteksten er gjennomsiktig. Hvit som standard. |
Toppmeny-seksjonen → gruppen «Transparent header» (avansert) | Bakgrunnsfarge | Bakgrunn bak toppteksten i gjennomsiktig tilstand. Helt gjennomsiktig som standard. |
Logo-blokken | Logo for gjennomsiktig topptekst | En egen logo som bare vises når toppteksten er gjennomsiktig. |
Tekst- og bakgrunnsfarge på seksjonen
Disse to ligger i avansert modus på selve toppmeny-seksjonen, i en egen gruppe som heter «Transparent header». De brukes kun når den gjennomsiktige toppteksten er aktiv — den vanlige bakgrunns- og tekstfargen på seksjonen gjelder fortsatt på alle andre sider.
- Tekstfargen settes som standard til hvit, fordi gjennomsiktig topptekst som regel ligger oppå et mørkt banner. Ligger banneret ditt lyst, må du sette en mørkere tekstfarge selv, ellers blir teksten usynlig.
- Bakgrunnsfargen er helt gjennomsiktig som standard. Vil du ha en svak tone bak toppteksten — for eksempel en lett mørkning så teksten blir lettere å lese — kan du sette en halvgjennomsiktig farge her i stedet for full gjennomsiktighet.
Egen logo for gjennomsiktig topptekst
En vanlig logo laget for hvit bakgrunn forsvinner ofte mot et mørkt banner. Derfor har logo-blokken et eget felt for en alternativ logo som bare brukes når toppteksten er gjennomsiktig — typisk en lys versjon av logoen.
Last opp den alternative logoen i feltet Logo for gjennomsiktig topptekst på logo-blokken. Setter du ingen egen logo her, brukes den vanlige logoen også i gjennomsiktig tilstand.
Slik oppfører den seg
Noen ting skjer automatisk når gjennomsiktig topptekst er på, og er greie å kjenne til før du begynner å finjustere.
- Bare forsiden. Effekten gjelder utelukkende forsiden. Alle andre sider — kategori, produkt, kurv osv. — viser toppteksten med vanlig bakgrunn.
- Toppteksten legger seg oppå innholdet. I stedet for å skyve banneret nedover, flyter toppteksten oppå det øverste innholdet på siden. Det er derfor du ser bannerbildet bak logo og meny.
- Ikon- og menyfarger overstyres. Mens toppteksten er gjennomsiktig, følger ikoner (handlekurv, søk, konto osv.) og menylenker tekstfargen du har satt for gjennomsiktig topptekst. De individuelle fargevalgene på ikon- og meny-blokkene blir ignorert i denne tilstanden. Vil du endre fargen, endrer du tekstfargen på seksjonen — ikke fargen på den enkelte blokken.
- Vises ikke i redigeringsvisningen. Inne i designbyggeren er den gjennomsiktige effekten slått av, slik at du kan redigere toppteksten på vanlig måte. Du må se på den publiserte forsiden (eller forhåndsvisning av forsiden) for å se hvordan den faktisk blir.
Fallgruver
- Du ser ingenting i editoren. Den vanligste forvirringen: du skrur på effekten, men toppteksten ser helt vanlig ut i designbyggeren. Det er meningen — sjekk forsiden i nettbutikken i stedet.
- Hvit tekst på lyst banner. Tekstfargen er hvit som standard. Har du et lyst banner øverst, blir logo, meny og ikoner usynlige. Sett en mørkere tekstfarge, eller bruk et mørkere banner.
- Banneret må tåle at noe ligger oppå. Siden toppteksten flyter oppå det øverste innholdet, kan den dekke til tekst eller knapper øverst i banneret. Gi banneret nok høyde eller luft på toppen så viktig innhold ikke havner bak toppteksten.
- Logoen forsvinner mot banneret. En mørk logo på et mørkt banner blir borte. Bruk feltet for egen logo til gjennomsiktig topptekst og last opp en lys variant.
- Du leter etter fargevalgene på feil sted. Tekst- og bakgrunnsfarge for gjennomsiktig topptekst ligger i avansert modus på toppmeny-seksjonen, ikke i de globale innstillingene. Bryteren er global; fargene er på seksjonen.
- Forventer effekten på andre sider. Gjennomsiktig topptekst finnes bare på forsiden. Det er ikke en feil at kategori- og produktsider har solid topptekst.
Tips
- Test alltid på en ekte forside med banneret på plass — gjerne på både mobil og desktop, siden banner og logo kan oppføre seg ulikt.
- En lett halvgjennomsiktig bakgrunnsfarge (i stedet for helt gjennomsiktig) er et godt triks når banneret er travelt og teksten ellers drukner.
- Gjennomsiktig topptekst og flytende toppmeny er to forskjellige ting. Gjennomsiktig topptekst ligger i toppen av forsiden og flyter oppå banneret; flytende toppmeny er den som glir inn fra toppen når kunden ruller nedover. De kan brukes sammen.