🥇 4 Bästa parallax-plugins för WordPress 2026 (gratis och pro)

En statisk webbplats ser platt ut. Bilder och bakgrunder är orörliga, scrollningen är mekanisk, det finns ingen känsla av djup. Men du vill att lager ska röra sig i förhållande till varandra, skapa volym och fånga ögat. Parallax gör precis detta: bakgrunden rör sig långsammare än förgrunden, vilket skapar en illusion av tredimensionellt utrymme i webbläsarfönstret.

Att implementera parallax på WordPress manuellt är inte enkelt. CSS-tekniken background-attachment: fixed fungerar inte på iOS, JS-bibliotek som Jarallax eller Rellax kräver anpassning för ditt tema, fel i z-index eller overflow förstör layouten. Parallax-plugins löser detta problem: visuella inställningar för hastighet och riktning, stöd för videobakgrund, anpassning för mobila enheter.

Vi valde ut fyra plugins för olika scenarier: från lättvikts-parallax för en enstaka bild till en bakgrundsbyggare med YouTube-video och mus-parallax. Alla fyra är kompatibla med aktuella versioner av WordPress och Gutenberg.

💡 Snabb översikt:

• Bestäm ditt användningsområde: helbredds hero-sektion med videobakgrund, enstaka bild i inläggstexten eller slider med djupeffekt.
• Välj ett plugin för din editor: för Gutenberg med maximala funktioner, ta Advanced WordPress Backgrounds, för Elementor-sajter är Element Pack Lite optimalt, för den klassiska editorn fungerar [dd-parallax]-shortcoden från Parallax Image.
• Kontrollera kompatibilitet med ditt tema och din sidbyggare före installation så att parallax-effekterna fungerar korrekt med befintlig layout.

Jämförelsetabell för plugins

1. Advanced WordPress Backgrounds: maximala effekter och videobakgrund

Advanced WordPress Backgrounds (AWB), det mest funktionella parallax-pluginet i detta urval. Det lägger till ett Background (AWB) block i Gutenberg, inuti vilket du placerar valfritt innehåll, och i blockinställningarna anger du bakgrunden: färg, bild, utvald bild för inlägget, mönster, self-hosted video eller YouTube/Vimeo-video. För varje bakgrundstyp aktiveras parallax baserat på det högpresterande JS-biblioteket Jarallax.

Det finns sex parallax-effekter här: klassisk scroll, skala (skalning vid scrollning), opacitet (ändrad genomskinlighet), scroll+skala, scroll+opacitet och mus-parallax, där bakgrunden förskjuts med markören. Effekthastigheten styrs med ett skjutreglage. En separat inställning aktiverar eller inaktiverar parallax på mobil, viktigt eftersom background-attachment: fixed på iOS fungerar instabilt.

Pluginet stöder srcset för responsiva bilder. Överlägg med genomskinlighet och färg mörkar bakgrunden för läsbar text. Anpassad CSS-padding ger exakt kontroll över blockpositionering.

I praktiken täcker AWB uppgifter för landningssidor med videobakgrunder, hero-sektioner med YouTube-videor, block med mus-parallax. För en enstaka bild i inläggstexten kan det vara överdrivet.

• Fördelar: 6 typer av parallax-effekter inklusive mus-parallax, videobakgrund (YouTube, Vimeo, self-hosted) med inställningar för start-/sluttid, Gutenberg-block direkt + WPBakery Page Builder, regelbundna uppdateringar (v1.12.11, juni 2026), kompatibilitet med WordPress 7.0
• Nackdelar: videobakgrund på mobil inaktiveras inte automatiskt (endast manuell inställning), överdrivet för en enkel bild
• Pris: Gratis, ingen Pro-version

🔗 Advanced WordPress Backgrounds på WordPress.org

2. Parallax Image: en shortcode för en bild

Om AWB är en schweizisk armékniv, så är Parallax Image en skalpell. Pluginet gör exakt en sak: infogar en helbreddsbild med parallax-effekt via shortcoden [dd-parallax]. Under huven finns parallax.js från pixelcog, ett lättviktsskript utan jQuery-beroenden.

Shortcoden stöder sex parametrar: img (filnamn från mediebiblioteket eller URL), height (visningshöjd i pixlar), speed (hastighet från 0 till 10, där 0 = statisk, 10 = maximal förskjutning), z-index, mobile (separat bild för mobil), offset (sträck ut till full bredd). Text mellan öppnande och avslutande taggar visas över parallax-bakgrunden, praktiskt för hero-sektioner med titel och knapp.

Pluginet testades med klassiska WordPress-teman (Twenty Fourteen, Twenty Seventeen) och Bootstrap-teman. Det fungerar med moderna blockteman, men TinyMCE-knappen är endast tillgänglig i den klassiska editorn. Utvecklaren släppte aldrig en Gutenberg-widget.

Den senaste uppdateringen var i november 2024 (v1.9.1, CVE-åtgärder). Pluginet har inte formellt testats med de tre senaste större WordPress-versionerna, men i praktiken fortsätter den enkla shortcoden med parallax.js att fungera stabilt.

I praktiken passar Parallax Image för klassiska teman utan blockeditorn, när du snabbt behöver lägga till en parallax-bild via shortcode.

• Fördelar: extremt enkelt (en shortcode, en parallax), lättviktigt parallax.js-skript utan jQuery-beroenden, separat bild för mobil via mobile-parametern
• Nackdelar: endast klassisk editor (inget Gutenberg-block), inga funktionsuppdateringar sedan 2024, endast bilder (ingen videobakgrund)
• Pris: Gratis

🔗 Parallax Image på WordPress.org

3. Element Pack Lite: parallax-widgets för Elementor

Element Pack Lite är inte bara ett parallax-plugin, utan en full uppsättning med 300+ widgets och tillägg för Elementor. Bland dem finns två specialiserade parallax-verktyg: Parallax Section (parallax-effekt för en hel sektion) och Parallax Background (parallax-bakgrund för enskilda block och kolumner). Plus Floating Effects och en animationspanel för finjustering av elementrörelser.

Widgets är integrerade i Elementors gränssnitt: dra den önskade till arbetsytan, konfigurera hastighet, riktning och utlösare (scroll eller markör). För parallax-sektionen ställer du in bakgrundsbild och beteende: scroll, skala, opacitet. Aktivera separat inaktivering på mobil.

Gratisversionen innehåller 30+ widgets, inklusive parallax-element. För sajter som redan använder Elementor är Element Pack Lite ett naturligt val: kräver inget separat plugin för parallax, parallax-widgets fungerar i ett gränssnitt med hundratals andra verktyg.

I praktiken är pluginet optimalt för Elementor-sajter där parallax är en av många uppgifter, inte den enda. Om du bygger med Elementor finns Element Pack Lite redan på måste-ha-listan.

• Fördelar: två parallax-widgets + Floating Effects + animationer i ett plugin, 100 000+ aktiva installationer, aktiv support, kompatibilitet med WordPress 7.0, senaste uppdatering juli 2026 (v8.7.6)
• Nackdelar: fungerar endast med Elementor (inte för Gutenberg och inte för Classic Editor), 300+ widgets kan verka överdrivet om du bara behöver parallax
• Pris: Gratis

🔗 Element Pack Lite på WordPress.org

4. Parallax Slider Block: slider med djupeffekt

Parallax Slider Block löser en smal men efterfrågad uppgift: bildslider med parallax-effekt vid scroll. Detta är ett inbyggt Gutenberg-block. Installera pluginet, lägg till Slider Block-blocket i editorn, ladda upp bilder.

I blockinställningarna anger du: parallax-effektens hastighet, slider-höjd (i pixlar eller vh), avstånd mellan slides, övergångsanimation, responsiva kontroller för mobil. Tillagda anpassningsalternativ: skugga, hörnrundning, ram, anpassad CSS. Typografin för slide-titeln konfigureras i realtid.

Pluginet skapades av WPDeveloper-teamet, samma utvecklare som gör Essential Addons för Elementor (2+ miljoner installationer) och NotificationX. Koden är lättviktig, resurser laddas endast på sidor där blocket används.

Den senaste uppdateringen var i juli 2024 (v1.2.7), formellt har pluginet inte testats med de tre senaste WordPress-versionerna. I praktiken fungerar det stabilt med WordPress 6.6.

I praktiken passar Parallax Slider Block för landningssidor och portföljer där du behöver en slider med djupeffekt, inte en statisk parallax-bakgrund.

• Fördelar: inbyggt Gutenberg-block (installera och använd), lättviktigt (ingen jQuery, resurser laddas endast där de används), WPDeveloper-team med gott rykte
• Nackdelar: endast slider (ingen statisk parallax-bakgrund), senaste uppdatering juli 2024 (inga nya funktioner), 1 000+ installationer (mindre publik än andra plugins i urvalet)
• Pris: Gratis

🔗 Parallax Slider Block på WordPress.org

Video: parallax-effekt i praktiken

Bättre att se en gång än att läsa inställningar. Video från WP Royal Themes-teamet visar steg-för-steg-inställning av parallax-scrolleffekt i WordPress: från plugin-installation till slutresultat på en aktiv sajt.

⁉️🤔 Vanliga frågor

Saktar parallax ner sajten?

Moderna parallax-plugins använder requestAnimationFrame och IntersectionObserver: effekten aktiveras endast när blocket är i visningsområdet. AWB på Jarallax och Parallax Image på parallax.js laddar mindre än 5 KB gzip. Fördröjningar uppstår om du lägger en helskärmsvideobakgrund på billig hosting utan cachning. Här ligger problemet inte i parallax, utan i video.

Fungerar parallax på iPhone?

iOS Safari ignorerar historiskt background-attachment: fixed på grund av renderingsspecifikationer. Det är just därför alla plugins i urvalet antingen ersätter fixed med transforms (AWB, Parallax Slider Block), eller erbjuder en separat statisk bild för mobil (Parallax Image via mobile-parametern). Kontrollera definitivt sajten på en riktig iPhone före publicering.

Kan man göra parallax utan ett plugin?

Det kan man. Minimal variant: ett block med background-image och background-attachment: fixed i anpassad CSS. Men på mobil går detta sönder. En mer pålitlig väg: anslut Jarallax- eller rellax.js-biblioteket manuellt och skriv en wrapper för ditt tema. För en utvecklare är detta okej, för en innehållsansvarig sparar ett plugin timmar av felsökning.

Vilket plugin ska man välja för Gutenberg, och vilket för Elementor?

För Gutenberg: AWB (maximala funktioner) eller Parallax Slider Block (endast slider). För Elementor: Element Pack Lite, eftersom parallax-widgets är inbyggda i sidbyggarens gränssnitt och inte kräver växling mellan plugins. Parallax Image via shortcode fungerar i alla editorer: universell fallback.

Vad gör man om parallax-bakgrunden inte visas?

Tre vanliga orsaker: 1) z-index-konflikt med andra element (höj värdet i plugin-inställningarna), 2) temats container klipper overflow (kontrollera overflow: hidden på föräldrablock i inspektören), 3) bilden laddas inte (kontrollera URL i webbläsarens konsol). I AWB löses problemet ofta genom att aktivera alternativet Stretch.

Vad du ska välja för din uppgift

Valet beror på scenario och verktyg.

• Om du skapar en landningssida eller hero-sektion med videobakgrund, ta Advanced WordPress Backgrounds. Detta är det enda pluginet i urvalet som kan hantera YouTube/Vimeo-bakgrund med parallax, och till och med med inställningar för start- och sluttid för videon.

• Om du arbetar i Elementor finns Element Pack Lite redan på din måste-ha-lista. Parallax-widgets levereras tillsammans med hundratals andra användbara verktyg.

• Om du bara behöver en slider med djupeffekt täcker Parallax Slider Block uppgiften utan att överbelasta sajten med extra bibliotek.

• Om du har ett klassiskt tema utan blockeditorn och snabbt behöver lägga till en parallax-bild, klarar [dd-parallax]-shortcoden från Parallax Image det på fem minuter.

Huvudregeln för parallax på WordPress: måttfullhet. Ett, maximalt två parallax-block per sida. Effekten ska framhäva innehåll, inte distrahera från det. Korrekt konfigurerad parallax ger djup och premiumkänsla till sajten. Tre parallax-sektioner i rad förvandlar en landningssida till en nöjesparksattraktion man vill lämna.