So erstellen Sie einen schiefen Hintergrund in Elementor (Leitfaden 2026)

Ein schräger Hintergrund schneidet den Rand eines Ausschnitts schräg über die Seite, anstatt ihn flach zu lassen, er zerbricht den üblichen Stapel horizontaler Bänder, und das Auge folgt der Diagonale nach unten in den nächsten Abschnitt Landingpages und SaaS-Homepages verwenden ihn ständig.

Elementor hat immer noch keinen “Schräglauf in diesem Abschnitt” - Kippschalter, also macht man das mit ein paar Zeilen CSS. Problem ist, Elementors eigenes Custom CSS-Feld ist hinter Pro gesperrt Deshalb verwendet dieses Tutorial das kostenlose Benutzerdefinierte CSS-Erweiterung in Master Addons, das jedem Element auf dem freien Elementor eine CSS-Box hinzufügt.

Dieser Leitfaden wurde für die tatsächliche Funktionsweise von Elementor im Jahr 2026 neu erstellt. Die Originalversion dieses Beitrags wurde gegen Abschnitte und innere Säulen geschrieben, und beide sind jetzt Altlasten. Alles unten wird verwendet Flexbox-behälter3.6 das Standardlayoutelement von Elementor und die einzige Struktur, die Sie auf einer neuen Seite erhalten.

Was Sie brauchen, bevor Sie beginnen

• Elementorfrei (3,6 oder neuer, also Container eingeschaltet)
• Master Addons: Installieren Sie es kostenlos von WordPress.orgSchalten Sie dann die Custom CSS-Erweiterung ein
• Ein Behälter mit einer Hintergrundfarbe oder einem Bildsatz. Überspringen Sie das nicht. Skew verwandelt die Box, wenn also in der Box nichts zu sehen ist, sieht man überhaupt keine Veränderung Ein transparenter Container ist der Grund Nummer eins, warum die Leute denken, dass dieser Trick kaputt ist.

Elementor Pro brauchst du an keiner Stelle, wenn du es schon hast, verhält sich sein natives Custom CSS Feld genauso, also paste stattdessen den Code dort ein.

Den Spieß verstehen, bevor Sie etwas einfügen

Schwenken ist eine CSS-Transformation. transform: skew(0deg, -10deg) Neigt das Element entlang der Y-Achse um zehn Grad und dreht seine Ober- und Unterkante in Diagonalen.

Was die Leute auf den Kopf stellt, ist, dass eine Transformation auf das Element zutrifft Und alles darin. Einen Behälter spitzen und Sie schief seinen Hintergrund, sicher, aber Sie schief auch die Überschrift, den Knopf, und das Bild, das darin sitzt Ihr Text endet gekippt.

Also du schwenkst gegen Einnisten eines zweiten Behälters in den ersten und kippst ihn um den gleichen Betrag in die entgegengesetzte Richtung zurück Der Elternteil geht auf minus zehn Grad, das Kind auf plus zehn, und sie heben sich auf Abgewinkelter Hintergrund, aufrechter Inhalt.

Zwei Container, zwei Regeln, Gegenwerte Das ist das Ganze.

Schritt 1: Bauen Sie die Containerstruktur auf

Öffnen Sie Ihre Seite in Elementor und geben Sie eine ein Container. Stellen Sie seine Breite auf die volle Breite ein Das ist der äußere, der den Winkel trägt.

Ziehen Sie nun ein Zweiter Behälter im ersten. Dieser verschachtelte Container enthält den eigentlichen Inhalt: Überschrift, Text, Schaltfläche, Bild, wofür auch immer der Abschnitt ist Gestalten Sie ihn, wie Sie wollen.

Die Struktur ist also:

• Außenbehälter: Hintergrundfarbe oder Bild, erhält den Schrägstrich
• Innenbehälter: all Ihre Inhalte erhalten den Gegenschub

Eine ältere seite weiterhin auf abschnitten und inneren abschnitten aufgebaut zu behalten? die logik ist identisch äußere element-schiefe, inneres element unschiefe Für alles neue jedoch container verwenden sie viel weniger dom, was sich summiert, wenn sie sich um Elementor-Seitengeschwindigkeit.

Schritt 2: Fügen Sie das Schräg-CSS zum Außenbehälter hinzu

Wählen Sie den Außenbehälter aus, gehen Sie zum Fortgeschritten Tab, und finden Sie die MA Benutzerdefiniertes CSS Box, die Master Addons ergänzt Fügen Sie dies ein in:

selector {
  padding: 400px 0;
  margin-top: -200px;
  transform: skew(0deg, -10deg);
  overflow: hidden;
}

Das macht jede Zeile, damit Sie sie anpassen können, anstatt nur zu hoffen:

• selector Ist Elementors Abkürzung für “dieses spezielle Element” Master Addons scopt es für Sie, so dass die Regel nicht auf andere Container durchsickern kann.
• padding: 400px 0 Gibt dem Behälter genügend vertikalen Raum, damit die abgewinkelten Kanten irgendwo hingehen Schwenken Sie einen kurzen Behälter und Sie klemmen die Ecken einfach ab.
• margin-top: -200px Zieht den Behälter nach oben in den darüber liegenden, so dass sich die Diagonale überlappt, anstatt ein weißes Dreieck zurückzulassen Der halbe Füllwert ist ein ordentliches Ausgangsverhältnis.
• transform: skew(0deg, -10deg) Ist der Winkel selbst Negativ kippt in die eine Richtung, positiv in die andere.
• overflow: hidden Hält die schiefen Ecken davon ab, seitlich auszulaufen Lass es weg und du bekommst eine horizontale Scrollbar, auf die ich zurückkomme.

Eines lohnt es sich zu markieren: wenn Sie auch die berührt haben Transformieren Steuerelemente in Elementors eigener Registerkarte Erweitert werden mit diesem CSS gekämpft, da beide auf dasselbe schreiben transform Eigenschaft und der letzte, der lädt, gewinnt Wählen Sie eine Stelle, um den Winkel einzustellen, und lassen Sie die andere in Ruhe.

In der Version 2020 dieses Tutorials wurden vier vom Anbieter bevorzugte Leitungen aufgeführt (-webkit-, -moz-, -ms-, -o-). Löschen Sie sie Unpräfixiert transform Funktioniert nun seit etwa einem Jahrzehnt in jedem Browser, und diese zusätzlichen Zeilen machen das Lesen der CSS-Box nur noch schwieriger.

Schritt 3: Den Innenbehälter gegenschiefen

An dieser Stelle wird Ihr Inhalt zusammen mit dem Hintergrund gekippt Wählen Sie die InnenbehälterÖffnen Sie die Registerkarte Erweitert und fügen Sie diese in MA Custom CSS ein:

selector {
  transform: skew(0deg, 10deg);
}

Gleiche Zahl, Gegenzeichen Umschließender Behälter bei -10deg Bedeutet Innenbehälter unter 10deg. Ändern Sie das eine, ohne das andere zu verändern und Ihr Text sitzt in einem leichten Winkel, den die Leser auch dann wahrnehmen, wenn sie nicht sagen können, warum.

Speichern und Vorschau Sie sollten einen abgewinkelten Hintergrund haben, auf dem gerade Inhalte sitzen, wenn der Editor es immer noch gekippt anzeigt, laden Sie den Editor-Tab neu; benutzerdefiniertes CSS hinkt gelegentlich im Vorschau-Iframe hinterher.

Schritt 4: Beheben Sie den mobilen Überlauf (überspringen Sie diesen nicht)

Die meisten Tutorials enden bei Schritt 3, und deshalb werden verzerrte Abschnitte eine Woche später von Live-Sites zurückgezogen.

Ein Element in voller Breite schwenken und dessen Ecken über den Rand des Ansichtsfensters hinausschieben, auf dem Desktop merkt es keiner Bei einem Telefon gibt man durch diesen Überhang eine horizontale Bildlaufleiste und die Seite beginnt unter dem Daumen des Benutzers seitlich zu gleiten, liest sich als kaputt, denn es ist.

Zwei Dinge verhindern es:

1. Behalten overflow: hidden Auf dem schiefen Behälter, wie im Code oben.
2. Reduzieren Sie den Winkel auf kleinen Bildschirmen. Ein 10-Grad-Schräglauf, der auf einem 1440-px-Monitor scharf aussieht, verwandelt sich auf einem 375-px-Telefon in eine harte Diagonale und frisst sich in Ihre Schlagzeile.

Fügen Sie dies unter dem Code im CSS-Feld des Außenbehälters hinzu:

@media (max-width: 767px) {
  selector {
    padding: 200px 0;
    margin-top: -100px;
    transform: skew(0deg, -4deg);
  }
}

Und die passende Umkehrung im Innenbehälter:

@media (max-width: 767px) {
  selector {
    transform: skew(0deg, 4deg);
  }
}

Jetzt skaliert der Effekt nach unten, anstatt das Layout zu zerstören Testen Sie es auf einem echten Telefon, nicht nur in der responsiven Vorschau des Editors, da der Vorschaufläche den Überlauf nicht immer wieder abbildet Wenn Sie benutzerdefinierte Haltepunkte statt der Standardeinstellungen von Elementor ausführen, wird die Benutzerdefiniertes Breakpoints-Plugin Damit können Sie diese Medienabfragen Ihren tatsächlichen Gerätebreiten zuordnen.

Die moderne Alternative: Clippfad, ganz ohne Gegenschräglage

Schräg-und-Gegenschräg funktioniert, und das hat das ursprüngliche Tutorial gelehrt. Jetzt gibt es jedoch einen saubereren Weg, und für einen Neubau ist es normalerweise der, nach dem ich greifen würde.

clip-path Schneidet eine Form aus dem Element heraus, anstatt es zu transformieren. Da es klemmt, anstatt sich zu drehen, bewegt sich der Inhalt im Inneren nie, sodass es keinen verschachtelten Behälter und keinen zweiten Wert gibt, den man synchron halten kann.

Ein Behälter, eine Regel:

selector {
  padding: 160px 0;
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}

Diese vier Koordinaten sind die Ecken, im Uhrzeigersinn von oben links Stupsen Sie die Prozentsätze an, um den Winkel zu ändern: Heben Sie die 6% Für einen steileren Schnitt lassen Sie es fallen 0 Für etwas subtileres Man kann auch nur die Unterkante winken und die Oberseite flach lassen, was das übliche Muster für einen Helden ist.

Welche Methode sollten Sie anwenden?

Jeder aktuelle Browser behandelt beides Überprüfen Sie die Clippfad-Unterstützungstabellen auf MDN Wenn Sie nicht weiterkommen und etwas Ungewöhnliches unterstützen.

Überspringen Sie das CSS vollständig: importieren Sie die fertige Vorlage

Sie möchten keinen Code berühren? das verzerrte Hintergrundlayout wird als Vorlage geliefert Bearbeiten Sie jede Seite mit Elementor, klicken Sie auf die Master Addons Template Library Symbol neben dem Add-Element-Button, und suchen Sie nach der Schief-Hintergrundvorlage Importieren Sie es, dann tauschen Sie Ihren eigenen Text und Ihre eigenen Farben aus.

Gleiche Technik, schon verkabelt Die Master Addons Template Library Verfügt über fertige Seiten, Abschnitte, Kopfzeilen und Fußzeilen, die auf die gleiche Weise erstellt wurden Vorlagenkits Gehen Sie mit vollständigen mehrseitigen Website-Designs noch weiter.

Wo verzerrte Hintergründe tatsächlich funktionieren

Es lohnt sich zu sagen, denn dieser Effekt wird überstrapaziert: Winkelabschnitte verdienen ihren Behalt, wenn sie einen Übergang markieren Held in Features, Features in die Preisgestaltung, Preise in Erfahrungsberichte Sie geben einer langen Seite etwas Rhythmus.

Sie hören auf zu arbeiten, wenn jeder Abschnitt abgewinkelt ist, es liest sich nichts mehr als Übergang und die Seite fühlt sich einfach nur beschäftigt an Auf einer langen Landingpage reichen meist zwei oder drei abgewinkelte Kanten.

Wenn Sie mehr Tiefe ohne Geometrie wünschen, liegen andere Effekte gut darüber. Animierte Gradientenhintergründe (Pro) langsame Farbbewegung hinzufügen, Teilchen Fügen Sie eine interaktive Ebene hinzu und Glasmorphie Karten einen mattierten Look verleiht, der gut an einer schiefen Platte sitzt Die Transformiert Erweiterung (Pro) legt außerdem Dreh-, Skalierungs- und Schrägsteuerelemente in die Elementor-Benutzeroberfläche, wenn Sie lieber einen Schieberegler ziehen möchten, als Grad einzugeben.

Fehlerbehebung

• Es änderte sich nichts. Der Behälter hat keinen Hintergrund Legen Sie eine Farbe oder ein Bild fest und schauen Sie erneut.
• Die ganze Seite scrollt seitwärts. Hinzufügen overflow: hidden Zum schiefen Behälter, dann prüfen, ob sein Elternteil nicht auch überläuft.
• Der Text ist noch gekippt. Der Gegenschiefer befindet sich auf dem falschen Element, oder das Vorzeichen ist falsch, ist der äußere Behälter negativ, muss der innere positiv sein.
• Weißer Spalt über dem Abschnitt. Erhöhen Sie das Negative margin-top Der Winkel zieht also weiter in den Abschnitt oben.
• Der Winkel springt unvorhersehbar umher. Die integrierten Transform-Steuerelemente von Elementor sind auf demselben Element eingestellt und überschreiben Ihr CSS. Löschen Sie sie.
• Kein MA Custom CSS-Feld auf der Registerkarte Erweitert. Die Erweiterung ist ausgeschaltet Master Addons, dann Einstellungen, dann Erweiterungen, und aktivieren Sie es.

Häufig gestellte Fragen

Einwickelnd

Das Erstellen eines schiefen Hintergrunds in Elementor läuft auf zwei Regeln in zwei CSS-Boxen hinaus: den äußeren Behälter aufspießen, den inneren gegenschwenken Hinzufügen overflow: hidden„Entlasten Sie den Winkel auf Mobilgeräten und es hält auf echten Geräten und nicht nur im Editor stand. Bei einem neuen Build clip-path Bringt Ihnen das gleiche Aussehen mit der Hälfte des Setups.

Seitdem läuft alles auf kostenlosem Elementor Master Addons Ist es, was die Custom CSS Box dort für den Anfang setzt, wenn Sie später den Rest des Toolkits (Theme Builder, Popup Builder, das volle Erweiterungsset) wollen, ist das Pro Cover, aber nichts in diesem Tutorial braucht es.

Verwandte Lektüre: Elementoranimationseffekte, So fügen Sie Floating-Effekte in Elementor hinzu, und So erstellen Sie einen Sticky Header in Elementor.