Flate design-nettsteder blir lest. Parallakse-nettsteder blir husket. Samme innhold, samme layout, men bakgrunnen beveger seg langsommere enn forgrunnen, og siden får dybde, pusterom og en filmatisk kvalitet. Brukeren blar ikke bare gjennom tekst, de blar gjennom en historie.

Problemet er at de fleste WordPress-nettsteder ser like ut: topptekst, rutenett, sidefelt, bunntekst. Parallakse bryter den malen uten å omstrukturere layouten, uten å bytte tema, noen ganger helt uten utvidelser. Men ikke alle parallakse-implementeringer fungerer som de skal: hakkete rulling på mobil, ytelsesproblemer, tilgjengelighetskonflikter, du kjenner regla.

Nedenfor får du en komplett gjennomgang: hva parallakserulling er, når det lønner seg, hvilke temaer og utvidelser som gir ferdige resultater, og hvordan du unngår å ødelegge ytelsen. Med steg-for-steg-skjermbilder, verktøysammenligninger og svar på vanlige spørsmål.

💡 Hurtigoversikt:

• Forstå hvordan parallakserulling fungerer og hvorfor nettstedet ditt trenger det
• Vurder risikoene: mobilytelse, tilgjengelighet, bakgrunnsvalg
• Velg et tema med innebygd parallakse eller legg til Slider Revolution for slider
• Installer gratisutvidelsen Advanced WordPress Backgrounds (AWB), en universalløsning for Gutenberg, Classic Editor og WPBakery

Hva parallakseeffekten er

Parallakseeffekten er en teknikk der bakgrunnen på en nettside ruller langsommere enn innholdet i forgrunnen. Det skaper en illusjon av dybde: innholdet ser ut til å sveve over bildet, og siden får en tredimensjonal kvalitet.

Teknikken kom til webdesign fra spillindustrien, der parallakse hadde vært brukt i årevis for å lage bakgrunnslag i plattformspill. I dag er det en standardfunksjon i premiumtemaer, sidebyggere og frittstående utvidelser. Selv gratistemaet Twenty Seventeen som fulgte med WordPress som standard, hadde innebygd parallakse.

Moderne webdesign har gått lenger: CSS-egenskapen scroll-timeline lar deg lage parallakse helt uten JavaScript, ved hjelp av ren animasjon knyttet til rulleposisjon. Men for rask utrulling på produksjonsnettsteder forblir utvidelser og sidebyggere mer praktiske.

Videoen over er en komplett guide til å legge til parallakse i WordPress (EN, 12 minutter). Forfatteren viser installasjon, hastighetskonfigurasjon, deaktivering på mobil og arbeid med bakgrunnsbilder i sanntid.

Hvorfor bruke parallakse på nettstedet ditt

Først og mest åpenbart, visuell wow-faktor. Parallakse gjør et nettsted moderne, stilig og minneverdig. Når en bruker ruller siden og bakgrunnen beveger seg i en annen hastighet, fanger det oppmerksomheten. Innholdet popper.

Men fordelene stopper ikke ved estetikk. Parallakse deler siden inn i lesbare seksjoner, spesielt på landingssider og hjemmesider der du må lede den besøkende fra overskrift til CTA. En seksjon med parallaksebakgrunn skiller naturlig én innholdsblokk fra en annen og styrer oppmerksomheten.

Tredje grunn, engasjement og tid på siden. Besøkende blir værende lenger på sider med interaktiv rulling, noe som indirekte forbedrer atferdsmålinger og konvertering. Dette fungerer spesielt godt på enkeltside-nettsteder, porteføljer og produktlandingssider.

Hva du bør vurdere før du implementerer parallakse

Hver mynt har to sider. Her er hva du bør ha i bakhodet før du legger til parallakseseksjoner.

Valg av bakgrunnsbilde

Bakgrunnsbildet er nøkkelelementet. Det bør være relevant for sidens tema og merkevaren som helhet. Hvis du plasserer tekst eller overskrifter over bakgrunnen, er det bedre å bruke et dempet mønster eller et fargeoverlegg fremfor et detaljert foto. Innhold skal ikke konkurrere med bakgrunnen.

For bilder, kun høy oppløsning. Et uskarpt eller pikselert fullskjermsbilde ødelegger det profesjonelle uttrykket. Vi har samlet en oversikt over bildearkiv med gratis- og premiumbilder i en egen gjennomgang av 35 bildearkiv.

Parallakse på mobile enheter

På telefoner og nettbrett fungerer parallakse upålitelig. Bevegelsesbasert rulling (sveip) skiller seg fra et musehjul, effekten kan hakke, henge eller ikke vises i det hele tatt. De fleste moderne utvidelser og temaer lar deg deaktivere parallakse for mobil med én enkelt avkrysningsboks, og det er det beste alternativet fra et brukeropplevelsesperspektiv.

Tilgjengelighet

Bevegelige bakgrunner skaper problemer for brukere med vestibulære lidelser: reisesyke, kvalme, problemer med å fokusere. Mediespørringen prefers-reduced-motion lar deg automatisk deaktivere parallakseanimasjoner for slike besøkende. Hvis utvidelsen eller temaet ditt ikke støtter det, deaktiver i det minste effekten på mobil.

Velge et tema med innebygd parallakse

For de som starter et prosjekt fra bunnen av, er den enkleste veien å velge et tema med parallakse allerede innebygd. De fleste premium WordPress-temaer inkluderer denne funksjonen i det minste for hjemmesiden. Hvis du trenger parallakse på ulike sider av nettstedet, se mot flerbrukstemaer med en avansert bygger.

Tre velprøvde alternativer:

• Divi fra Elegant Themes, en visuell bygger med et innebygd parallaksebakgrunnsalternativ for enhver seksjon;
• Ultra fra Themify, et flerbrukstema med Themify Builder og fleksible parallakseinnstillinger;
• Total fra WPExplorer, et flerbrukstema basert på WPBakery med avanserte parallaksealternativer (hastighet, retning, mobildeaktivering).

Legge til en parallaksebakgrunn i Total (WPBakery)

Nedenfor finner du et trinnvis eksempel på hvordan du konfigurerer parallakse i Total-temaet. Total bruker WPBakery til å bygge sider, men lignende alternativer finnes i de fleste WordPress sidebyggere.

Sett først inn en rad og legg til innhold i den. Klikk på blyantikonet for å redigere raden. Hvis designet ikke har noen sidestolpe, aktiverer du alternativet «Stretch row» slik at parallaksebakgrunnen fyller raden i full bredde. Total har også en fullskjermmodus som strekker bakgrunnen over hele nettleservinduet.

I «Parallax»-delen legger du til et bakgrunnsbilde og angir rullehastigheten. Jo høyere tall, desto mer forskyves bildet og desto høyere oppløsning krever det.

I de avanserte parallakseinnstillingene kan du aktivere eller deaktivere effekten på mobile enheter, velge bildestil (cover, fixed, repeat), bevegelsesretning og nøyaktig hastighet.

For kontrast mellom bakgrunn og innhold bruker du fanen «Overlay», for eksempel et halvgjennomsiktig hvitt fyll over bildet. Lagre raden og sideendringene.

Parallakseglidere med Slider Revolution

Når du ikke trenger en statisk bakgrunn, men en full glider med parallakseeffekt, er det beste verktøyet Slider Revolution. Premium-utvidelsen inneholder hundrevis av alternativer: fonter, lag, overgangseffekter, oppsett og selvsagt parallakse i flere lag. En detaljert Slider Revolution-guide finnes i en egen artikkel.

Slik aktiverer du parallakse i Slider Revolution

Installer utvidelsen og importer enten en ferdig glidermal eller opprett en glider fra bunnen av.

Rediger hovedbakgrunnen til lysbildet: legg til kildebildet og gå til fanen «Parallax / 3D» for å tilordne parallaksenivået. Når du deretter legger til lag (tekst, bilder, knapper), velger du alternativet Parallax / 3D for hvert lag, parallaksedybden vil få elementene til å leve uavhengig av hverandre.

Den ferdige glideren settes inn via kortkode i et hvilket som helst innlegg eller på en hvilken som helst side. Hvis du bruker WPBakery, drar du ganske enkelt Slider Revolution-elementet inn på siden og velger glideren fra rullegardinlisten.

Gratis plugin Advanced WordPress Backgrounds (AWB)

Hvis du allerede har et tema installert som ikke støtter parallakse, trenger du ikke bytte det. Advanced WordPress Backgrounds (AWB) er en gratis plugin fra den offisielle WordPress.org-katalogen som legger til parallaksebakgrunner på ethvert sideelement: blokk, overskrift eller hel seksjon. Pluginen er under aktiv utvikling: siste oppdatering, juni 2026, kompatibilitet med WordPress 7.0 bekreftet.

AWB støtter tre bakgrunnstyper: farge, bilde og video (YouTube/Vimeo/selvhostet). Fungerer med Gutenberg, Classic Editor og WPBakery.

Installere AWB

Gå til WordPress-administrasjonen: Plugins → Legg til ny. I søket skriver du «Advanced WordPress Backgrounds», klikk Installer → Aktiver.

Metoden for å legge til en bakgrunn avhenger av redigeringsverktøyet. Ifølge pluginbeskrivelsen på WordPress.org har alle tre redigeringsverktøyene tilgang til: bakgrunnstype (farge, bilde eller video), visningsstørrelse (cover, contain eller mønster), bakgrunnsposisjon med prosenter, overlegg med fargevalg og gjennomsiktighet via Alpha-velger, parallakserulling med hastighetsinnstilling, skalering og gjennomsiktighet, og museparallakse (bakgrunnen forskyves litt med markøren).

I menyen Innstillinger → AWB er det en fane med globale parametere. Her kan du deaktivere parallakse- og videoeffekter for mobile enheter og spesifikke nettlesere.

AWB i Gutenberg

AWB er fullt kompatibel med blokkredigeringsverktøyet og tilbyr sin egen blokk.

Sett inn en AWB-blokk, og legg deretter til andre blokker med innholdet ditt inni den.

Klikk på AWB-blokken og gå til «Blokk»-fanen i høyre panel. Her konfigurerer du alle bakgrunnsparametere: type, bilde, parallakse, overlegg.

AWB i Classic Editor

I den klassiske editoren fungerer AWB via en shortcode. Marker teksten som trenger en parallaksebakgrunn og klikk på AWB-ikonet i redigeringsverktøyets verktøylinje.

Velg et bakgrunnsbilde og konfigurer de andre parameterne: overleggsfarge, parallaksetype, hastighet. Klikk «Sett inn».

Shortcoden ser omtrent slik ut:

1
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]Your content inside the parallax background[/nk_awb]

Ulempen med shortcode-tilnærmingen er at bakgrunnsinnstillinger ikke er synlige i den visuelle editoren, du må redigere koden manuelt. For komfortabelt arbeid er det bedre å bruke Gutenberg eller WPBakery.

AWB med WPBakery

Med WPBakery er integrasjonen maksimalt enkel. En ekstra fane «Backgrounds (AWB)» dukker opp i alle radinnstillinger, der du kan opprette og konfigurere en parallaksebakgrunn uten shortcodes, alt visuelt.

⁉️🤔 Ofte stilte spørsmål

Må jeg bytte tema for å få parallakse?

Nei. Hvis ditt nåværende tema ikke støtter parallakse, er gratispluginen AWB nok. Den legger til effekten på ethvert element på enhver side via et praktisk grensesnitt uten å røre resten av temaet. Å bytte tema gir bare mening hvis du uansett starter fra bunnen av og vil ha innebygd parallakse rett ut av esken.

Gjør parallakse nettstedet tregere?

Med forsiktig konfigurasjon, bare litt. AWB bruker det lette Jarallax-biblioteket (uten jQuery siden versjon 1.11), og moderne nettlesere optimaliserer transform på GPU. Hovedfaktoren for treghet er et altfor tungt bakgrunnsbilde. Optimaliser bilder til WebP eller AVIF, hold størrelsen innenfor 200-300 KB, så vil ikke hastigheten lide.

Fungerer parallakse på iPhone og Android?

Avhenger av implementeringen. På iOS er webparallakse tradisjonelt problematisk: fast bakgrunn (background-attachment: fixed) ignoreres av Safari. AWB-pluginen løser dette gjennom JavaScript-animasjon og fungerer stabilt. Men beste praksis for mobil er å deaktivere parallakse helt (avkrysningsboks i AWB eller temainnstillinger): på en liten skjerm er effekten knapt merkbar, og batteriressurser spares.

Kan man lage parallakse helt uten plugins?

Det kan du. CSS-egenskapen animation-timeline: scroll() lar deg knytte parallakseanimasjon til rullefremdrift uten en eneste linje JavaScript. Nettleserstøtten er imidlertid fortsatt ufullstendig (Safari inkludert i 2024, Firefox siden 2025). For kompatibilitet med eldre nettlesere er en plugin fortsatt mer pålitelig.

Hva gjør AWB bedre enn andre gratis parallakseplugins?

AWB skiller seg ut på tre måter: for det første, støtte for tre editorer (Gutenberg, Classic, WPBakery) uten konflikter; for det andre, jevnlige oppdateringer, pluginen er testet opp til WordPress 7.0; for det tredje, museparallakse og videobakgrunner i gratisversjonen, dette er ofte Pro-funksjoner hos konkurrenter.

Er parallakse nødvendig for SEO?

Ikke direkte. Parallakse er en visuell teknikk, ikke en rangeringsfaktor. Men indirekte kan det hjelpe: lengre tid på siden, lavere fluktfrekvens, søkemotorer tar hensyn til det. Hovedsaken er ikke å ofre lastehastighet og tekstlesbarhet for effekten.

Hvilket verktøy du bør velge for oppgaven din

Hvis temaet ditt allerede støtter parallakse, bruk de innebygde innstillingene, det er nok for hjemmesider og landingssider.

Hvis temaet ditt ikke har parallakse, dekker AWB de fleste typiske scenarioer gratis: Rask installasjon, intuitivt grensesnitt, fungerer med Gutenberg og WPBakery, global deaktivering på mobil. For slider med flerlags parallakse er Slider Revolution uovertruffen i animasjonsfleksibilitet.

Parallakse er ikke et universalmiddel. På nettsteder med tett tekstinnhold (lange lesestykker, dokumentasjon) er det mer til hinder enn hjelp. Men for en landingsside, portefølje, produktpromoside forblir teknikken en av de sterkeste innen webdesign. Brukeren vil glemme teksten, men huske hvordan siden «pustet» mens de rullet.