🥇 4 Beste Parallax-Plugins für WordPress 2026 (kostenlos und Pro)

Eine statische Website wirkt flach. Bilder und Hintergründe sind bewegungslos, das Scrollen ist mechanisch, es gibt kein Gefühl von Tiefe. Sie möchten jedoch, dass sich Ebenen relativ zueinander verschieben, wodurch Volumen entsteht und das Auge angesprochen wird. Parallax bewirkt genau das: Der Hintergrund bewegt sich langsamer als der Vordergrund und erzeugt so die Illusion eines dreidimensionalen Raums im Browserfenster.

Parallax auf WordPress manuell zu implementieren, ist nicht einfach. Die CSS-Technik background-attachment: fixed funktioniert auf iOS nicht zuverlässig, JS-Bibliotheken wie Jarallax oder Rellax erfordern eine Anpassung an Ihr Theme, und Fehler bei z-index oder overflow zerstören das Layout. Parallax-Plugins lösen dieses Problem: visuelle Einstellungen für Geschwindigkeit und Richtung, Unterstützung für Videohintergründe, Anpassung an mobile Endgeräte.

Wir haben vier Plugins für unterschiedliche Szenarien ausgewählt: vom schlanken Parallax-Effekt für ein einzelnes Bild bis hin zu einem Hintergrund-Builder mit YouTube-Video und Maus-Parallax. Alle vier sind mit aktuellen WordPress-Versionen und Gutenberg kompatibel.

💡 Kurzübersicht:

• Bestimmen Sie Ihren Anwendungsfall: vollflächiger Hero-Bereich mit Videohintergrund, einzelnes Bild im Beitragsinhalt oder Slider mit Tiefeneffekt.
• Wählen Sie ein Plugin für Ihren Editor: Für Gutenberg mit maximalen Möglichkeiten nehmen Sie Advanced WordPress Backgrounds, für Elementor-Websites ist Element Pack Lite optimal, für den Classic Editor funktioniert der [dd-parallax]-Shortcode von Parallax Image.
• Prüfen Sie vor der Installation die Kompatibilität mit Ihrem Theme und Page Builder, damit die Parallax-Effekte mit dem bestehenden Layout korrekt funktionieren.

Plugin-Vergleichstabelle

1. Advanced WordPress Backgrounds: maximale Effekte und Videohintergrund

Advanced WordPress Backgrounds (AWB) ist das funktionsreichste Parallax-Plugin in dieser Auswahl. Es fügt einen Background (AWB)-Block zu Gutenberg hinzu, in dem Sie beliebige Inhalte platzieren und in den Blockeinstellungen den Hintergrund festlegen: Farbe, Bild, Beitragsbild, Muster, selbst gehostetes Video oder YouTube-/Vimeo-Video. Für jeden Hintergrundtyp wird Parallax auf Basis der performanten JS-Bibliothek Jarallax aktiviert.

Es gibt hier sechs Parallax-Effekte: klassisches Scrollen, Skalieren (Vergrößerung beim Scrollen), Deckkraft (Änderung der Transparenz), Scrollen+Skalieren, Scrollen+Deckkraft und Maus-Parallax, bei dem sich der Hintergrund mit dem Cursor verschiebt. Die Effektgeschwindigkeit wird über einen Schieberegler gesteuert. Eine separate Einstellung aktiviert oder deaktiviert Parallax auf Mobilgeräten, was wichtig ist, da background-attachment: fixed auf iOS instabil arbeitet.

Das Plugin unterstützt srcset für responsive Bilder. Ein Overlay mit Transparenz und Farbe dunkelt den Hintergrund für lesbaren Text ab. Benutzerdefiniertes CSS-Padding gibt präzise Kontrolle über die Blockpositionierung.

In der Praxis deckt AWB Aufgaben für Landingpages mit Videohintergründen, Hero-Bereiche mit YouTube-Videos und Blöcke mit Maus-Parallax ab. Für ein einzelnes Bild im Beitragsinhalt kann es überdimensioniert sein.

• Vorteile: 6 Arten von Parallax-Effekten inklusive Maus-Parallax, Videohintergrund (YouTube, Vimeo, selbst gehostet) mit Start-/Endzeit-Einstellungen, Gutenberg-Block direkt nutzbar + WPBakery Page Builder, regelmäßige Updates (v1.12.11, Juni 2026), Kompatibilität mit WordPress 7.0
• Nachteile: Videohintergrund auf Mobilgeräten wird nicht automatisch deaktiviert (nur manuelle Einstellung), überdimensioniert für ein einfaches Bild
• Preis: Kostenlos, keine Pro-Version

🔗 Advanced WordPress Backgrounds auf WordPress.org

2. Parallax Image: ein Shortcode für ein Bild

Wenn AWB ein Schweizer Taschenmesser ist, dann ist Parallax Image ein Skalpell. Das Plugin macht genau eine Sache: Es fügt ein vollflächiges Bild mit Parallax-Effekt über den [dd-parallax]-Shortcode ein. Unter der Haube arbeitet parallax.js von pixelcog, ein schlankes Skript ohne jQuery-Abhängigkeiten.

Der Shortcode unterstützt sechs Parameter: img (Dateiname aus der Mediathek oder URL), height (Höhe des Ansichtsfensters in Pixel), speed (Geschwindigkeit von 0 bis 10, wobei 0 = statisch, 10 = maximale Verschiebung), z-index, mobile (separates Bild für Mobilgeräte), offset (auf volle Breite strecken). Text zwischen öffnendem und schließendem Tag wird über dem Parallax-Hintergrund angezeigt, praktisch für Hero-Bereiche mit Titel und Button.

Das Plugin wurde mit klassischen WordPress-Themes (Twenty Fourteen, Twenty Seventeen) und Bootstrap-Themes getestet. Es funktioniert mit modernen Block-Themes, aber der TinyMCE-Button ist nur im Classic Editor verfügbar. Der Entwickler hat nie ein Gutenberg-Widget veröffentlicht.

Die letzte Aktualisierung erfolgte im November 2024 (v1.9.1, CVE-Korrekturen). Das Plugin wurde nicht formell mit den letzten drei großen WordPress-Versionen getestet, aber in der Praxis funktioniert der einfache Shortcode mit parallax.js weiterhin stabil.

In der Praxis eignet sich Parallax Image für klassische Themes ohne Block-Editor, wenn Sie schnell ein Parallax-Bild per Shortcode einfügen müssen.

• Vorteile: extrem einfach (ein Shortcode, ein Parallax-Effekt), schlankes parallax.js-Skript ohne jQuery-Abhängigkeiten, separates Bild für Mobilgeräte über den mobile-Parameter
• Nachteile: nur Classic Editor (kein Gutenberg-Block), keine funktionalen Updates seit 2024, nur Bilder (kein Videohintergrund)
• Preis: Kostenlos

🔗 Parallax Image auf WordPress.org

3. Element Pack Lite: Parallax-Widgets für Elementor

Element Pack Lite ist nicht nur ein Parallax-Plugin, sondern ein vollständiges Set aus über 300 Widgets und Erweiterungen für Elementor. Darunter befinden sich zwei spezialisierte Parallax-Werkzeuge: Parallax Section (Parallax-Effekt für eine ganze Sektion) und Parallax Background (Parallax-Hintergrund für einzelne Blöcke und Spalten). Dazu kommen Floating Effects und ein Animationspanel zur Feinabstimmung von Elementbewegungen.

Die Widgets sind in die Elementor-Oberfläche integriert: Ziehen Sie das gewünschte auf die Arbeitsfläche, konfigurieren Sie Geschwindigkeit, Richtung und Auslöser (Scrollen oder Cursor). Für die Parallax-Sektion legen Sie das Hintergrundbild und das Verhalten fest: Scrollen, Skalieren, Deckkraft. Separat lässt sich die Deaktivierung auf Mobilgeräten aktivieren.

Die kostenlose Version enthält über 30 Widgets, einschließlich der Parallax-Elemente. Für Websites, die bereits Elementor nutzen, ist Element Pack Lite eine natürliche Wahl: Es erfordert kein separates Plugin für Parallax, die Parallax-Widgets arbeiten in einer Oberfläche mit Hunderten anderer Werkzeuge.

In der Praxis ist das Plugin optimal für Elementor-Websites, bei denen Parallax eine von vielen Aufgaben ist, nicht die einzige. Wenn Sie mit Elementor bauen, steht Element Pack Lite bereits auf der Must-have-Liste.

• Vorteile: zwei Parallax-Widgets + Floating Effects + Animationen in einem Plugin, 100.000+ aktive Installationen, aktiver Support, Kompatibilität mit WordPress 7.0, letztes Update Juli 2026 (v8.7.6)
• Nachteile: funktioniert nur mit Elementor (nicht für Gutenberg und nicht für den Classic Editor), 300+ Widgets können überdimensioniert wirken, wenn Sie nur Parallax benötigen
• Preis: Kostenlos

🔗 Element Pack Lite auf WordPress.org

4. Parallax Slider Block: Slider mit Tiefeneffekt

Parallax Slider Block löst eine enge, aber gefragte Aufgabe: Bild-Slider mit Parallax-Effekt beim Scrollen. Dies ist ein nativer Gutenberg-Block. Installieren Sie das Plugin, fügen Sie den Slider Block im Editor hinzu und laden Sie Bilder hoch.

In den Blockeinstellungen legen Sie fest: Geschwindigkeit des Parallax-Effekts, Slider-Höhe (in Pixel oder vh), Abstand zwischen den Slides, Übergangsanimation, responsive Steuerung für Mobilgeräte. Hinzugefügte Anpassungsoptionen: Schatten, Eckenrundung, Rahmen, benutzerdefiniertes CSS. Die Typografie der Slide-Titel wird in Echtzeit konfiguriert.

Das Plugin wurde vom WPDeveloper-Team entwickelt, denselben Entwicklern, die auch Essential Addons für Elementor (2+ Millionen Installationen) und NotificationX machen. Der Code ist schlank, Ressourcen werden nur auf Seiten geladen, auf denen der Block verwendet wird.

Das letzte Update erfolgte im Juli 2024 (v1.2.7), formell wurde das Plugin nicht mit den letzten drei WordPress-Versionen getestet. In der Praxis arbeitet es stabil mit WordPress 6.6.

In der Praxis eignet sich Parallax Slider Block für Landingpages und Portfolios, bei denen Sie einen Slider mit Tiefeneffekt benötigen, keinen statischen Parallax-Hintergrund.

• Vorteile: nativer Gutenberg-Block (installieren und nutzen), schlank (kein jQuery, Ressourcen laden nur dort, wo sie verwendet werden), WPDeveloper-Team mit gutem Ruf
• Nachteile: nur Slider (kein statischer Parallax-Hintergrund), letztes Update Juli 2024 (keine neuen Funktionen), 1.000+ Installationen (kleinere Nutzerbasis als andere Plugins in der Auswahl)
• Preis: Kostenlos

🔗 Parallax Slider Block auf WordPress.org

Video: Parallax-Effekt in Aktion

Besser einmal sehen als Einstellungen lesen. Ein Video vom WP Royal Themes-Team zeigt die schrittweise Einrichtung des Parallax-Scrolling-Effekts in WordPress: von der Plugin-Installation bis zum Endergebnis auf einer Live-Website.

⁉️🤔 Häufig gestellte Fragen

Verlangsamt Parallax die Website?

Moderne Parallax-Plugins verwenden requestAnimationFrame und IntersectionObserver: Der Effekt wird nur aktiviert, wenn sich der Block im Viewport befindet. AWB auf Jarallax-Basis und Parallax Image auf parallax.js-Basis laden weniger als 5 KB gzip. Verlangsamungen treten auf, wenn Sie einen Vollbild-Videohintergrund auf günstigem Hosting ohne Caching einsetzen. Hier liegt das Problem nicht am Parallax, sondern am Video.

Funktioniert Parallax auf dem iPhone?

iOS Safari ignoriert background-attachment: fixed historisch bedingt aufgrund von Rendering-Besonderheiten. Genau deshalb ersetzen alle Plugins aus der Auswahl entweder fixed durch Transforms (AWB, Parallax Slider Block) oder bieten ein separates statisches Bild für Mobilgeräte an (Parallax Image über den mobile-Parameter). Prüfen Sie die Website vor der Veröffentlichung unbedingt auf einem echten iPhone.

Kann man Parallax ohne Plugin erstellen?

Das ist möglich. Minimale Variante: ein Block mit background-image und background-attachment: fixed im Custom CSS. Aber auf Mobilgeräten funktioniert das nicht zuverlässig. Ein verlässlicherer Weg: Binden Sie die Bibliothek Jarallax oder rellax.js manuell ein und schreiben Sie einen Wrapper für Ihr Theme. Für einen Entwickler ist das in Ordnung, für einen Content-Manager spart ein Plugin Stunden an Fehlersuche.

Welches Plugin für Gutenberg und welches für Elementor wählen?

Für Gutenberg: AWB (maximale Möglichkeiten) oder Parallax Slider Block (nur Slider). Für Elementor: Element Pack Lite, weil die Parallax-Widgets in die Page-Builder-Oberfläche integriert sind und keinen Wechsel zwischen Plugins erfordern. Parallax Image per Shortcode funktioniert in jedem Editor: universeller Fallback.

Was tun, wenn der Parallax-Hintergrund nicht angezeigt wird?

Drei häufige Ursachen: 1) z-index-Konflikt mit anderen Elementen (erhöhen Sie den Wert in den Plugin-Einstellungen), 2) Theme-Container beschneidet den Überlauf (prüfen Sie overflow: hidden bei übergeordneten Blöcken im Inspektor), 3) Bild wird nicht geladen (prüfen Sie die URL in der Browser-Konsole). Bei AWB wird das Problem oft durch Aktivieren der Option „Stretch" gelöst.

Was Sie für Ihre Aufgabe wählen sollten

Die Wahl hängt vom Szenario und den Werkzeugen ab.

• Wenn Sie eine Landingpage oder einen Hero-Bereich mit Videohintergrund erstellen, nehmen Sie Advanced WordPress Backgrounds. Dies ist das einzige Plugin in der Auswahl, das einen YouTube-/Vimeo-Hintergrund mit Parallax beherrscht, und das sogar mit Einstellungen für Start- und Endzeit des Videos.

• Wenn Sie in Elementor arbeiten, steht Element Pack Lite bereits auf Ihrer Must-have-Liste. Die Parallax-Widgets sind zusammen mit Hunderten anderer nützlicher Werkzeuge gebündelt.

• Wenn Sie lediglich einen Slider mit Tiefeneffekt benötigen, deckt Parallax Slider Block die Aufgabe ab, ohne die Website mit zusätzlichen Bibliotheken zu belasten.

• Wenn Sie ein klassisches Theme ohne Block-Editor haben und schnell ein Parallax-Bild einfügen müssen, erledigt der [dd-parallax]-Shortcode von Parallax Image dies in fünf Minuten.

Die wichtigste Regel für Parallax auf WordPress: Maßhalten. Ein, maximal zwei Parallax-Blöcke pro Seite. Der Effekt soll Inhalte betonen, nicht von ihnen ablenken. Richtig konfiguriertes Parallax verleiht der Website Tiefe und eine hochwertige Anmutung. Drei Parallax-Sektionen hintereinander verwandeln eine Landingpage in eine Jahrmarktattraktion, die man verlassen möchte.