WordPress Breakpoints: Breakpoints in Elementor anpassen
WordPress Breakpoints sind definierte Bildschirmbreiten, an denen sich das Layout deiner Website ändert. In Elementor passt du sie direkt im Editor an: über das Menü oben links, dann Website-Einstellungen → Layout → Breakpoints. Standardmäßig sind drei Geräteansichten aktiv (Desktop, Tablet bis 1024 Pixel, Mobil bis 767 Pixel), bis zu sieben sind möglich.
In diesem Beitrag zeige ich dir, was Breakpoints genau sind, wo du sie in aktuellen Elementor-Versionen findest und wie du mit zusätzlichen benutzerdefinierten Breakpoints ein responsives Design für alle Bildschirmgrößen umsetzt.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenWas sind WordPress Breakpoints?
WordPress Breakpoints sind festgelegte Bildschirmbreiten in Pixeln, an denen sich Layout und Inhalte einer Website ändern. Sie sorgen dafür, dass deine Seite auf dem Desktop, dem Tablet und dem Smartphone jeweils optimal dargestellt wird. Definiert werden sie im Theme oder im Page Builder, in diesem Beitrag geht es um Elementor.
So kannst du zum Beispiel festlegen, dass ein Text auf dem Desktop größer und auf dem Smartphone kleiner dargestellt wird. Auch die Anordnung von Spalten, Bildern und Buttons lässt sich für jedes Gerät separat anpassen. Die Grundlage dafür liefert ein responsives WordPress-Theme, den Feinschliff erledigst du anschließend im Page Builder.
Vorteile von WordPress Breakpoints:
Kurz erklärt
Breakpoints sind definierte Bildschirmbreiten, an denen sich der Inhalt der Website ändert, um sich optimal an die Bildschirmgröße des Geräts anzupassen, auf dem sie angezeigt wird.
Breakpoints in Elementor anpassen
Elementor ist einer der beliebtesten Page Builder für WordPress. Du erstellst damit Seiten und Beiträge per Drag-and-drop, ohne eine Zeile Code zu schreiben. Für responsive Designs bringt Elementor ein flexibles Breakpoint-System mit: Zwei Breakpoints sind immer aktiv, bis zu vier weitere kannst du bei Bedarf dazuschalten.
Die Standard-Breakpoints in Elementor
Standardmäßig arbeitet Elementor mit drei Geräteansichten: Desktop, Tablet und Mobil. Dahinter stehen zwei Breakpoints: Die mobile Ansicht greift bis 767 Pixel, die Tablet-Ansicht bis 1024 Pixel. Alles darüber zählt als Desktop.
Zwischen den Ansichten wechselst du über den Responsive Mode: Klicke dafür in der oberen Leiste des Elementor-Editors auf das Geräte-Symbol. Anschließend kannst du oben zwischen Desktop-, Tablet- und Mobilansicht umschalten und deine Inhalte für jede Ansicht separat anpassen. In älteren Elementor-Versionen saß dieses Icon übrigens unten links im Bearbeitungspanel, heute findest du es in der Top Bar.
Zusätzliche Breakpoints aktivieren
Neben den Standard-Breakpoints bietet Elementor vier weitere: Mobile Landscape, Tablet Landscape, Laptop und Widescreen. Damit du sie nutzen kannst, muss die Funktion Zusätzliche benutzerdefinierte Breakpoints aktiv sein. Bei neueren Installationen ist sie das bereits ab Werk.
So prüfst du das: Navigiere in deinem WordPress Dashboard zu Elementor → Einstellungen und wähle den Reiter Funktionen (in älteren Versionen hieß er Experimente). Suche dort den Eintrag Zusätzliche benutzerdefinierte Breakpoints und stelle ihn bei Bedarf auf Aktiv. Die Funktion war anfangs als Experiment eingestuft, seit Elementor 3.7 gilt sie offiziell als stabil.
Vor Änderungen: Backup anlegen
Breakpoints wirken sich auf das Design deiner gesamten Website aus. Lege deshalb am besten eine Datensicherung an, bevor du hier Änderungen vornimmst. So kannst du jederzeit zum vorherigen Stand zurückkehren.
Benutzerdefinierte Breakpoints einrichten
Das Einrichten der Breakpoints erledigst du direkt im Elementor-Editor. Öffne dafür eine beliebige Seite mit Elementor und klicke oben links in der Leiste auf das Menü-Symbol (das Icon mit den drei Linien beziehungsweise das Elementor-Logo). Wähle im Menü den Punkt Website-Einstellungen aus.
Klicke anschließend auf den Reiter Layout und dann auf den Menü-Eintrag Breakpoints. Hier siehst du alle hinterlegten Breakpoints im Überblick.
Über das Plus-Symbol fügst du weitere Breakpoints hinzu. Für jeden aktiven Breakpoint kannst du anschließend die Breite in Pixeln festlegen. Lässt du die Felder leer, verwendet Elementor diese Standardwerte:
- Mobile Portrait: bis 767 Pixel
- Mobile Landscape: bis 880 Pixel
- Tablet Portrait: bis 1024 Pixel
- Tablet Landscape: bis 1200 Pixel
- Laptop: bis 1366 Pixel
- Widescreen: ab 2400 Pixel
Eine Besonderheit gilt für Widescreen: Dieser Breakpoint greift ab dem eingestellten Wert aufwärts, alle anderen wirken bis zu ihrem Wert. Zusammen mit der Desktop-Ansicht, die als Basis für alle Einstellungen dient, kannst du dein Design so für bis zu 7 Geräteklassen optimieren.
Wenn du die Breakpoints definiert hast, klicke auf den Speichern-Button. Elementor lädt den Editor anschließend neu. Danach stehen dir die zusätzlichen Ansichten im Responsive Mode zur Verfügung und du kannst deine Inhalte für jede Bildschirmgröße gezielt anpassen.
Ein Tipp aus der Praxis: Sollten Änderungen an den Breakpoints auf der Website nicht sofort sichtbar sein, regeneriere die CSS-Dateien unter Elementor → Werkzeuge → CSS regenerieren und leere danach den Cache deiner Website.
Fazit
WordPress Breakpoints sind ein praktisches Werkzeug, wenn es um responsive Designs geht. Mit den individuell definierbaren Breakpoints in Elementor steuerst du präzise, wie deine Inhalte auf verschiedenen Geräten aussehen. Für die meisten Projekte reichen die Standard-Breakpoints völlig aus. Die zusätzlichen Breakpoints lohnen sich, wenn dein Design komplex ist oder deine Zielgruppe viele unterschiedliche Geräte nutzt.
Bei Website-Checks sehe ich immer wieder Seiten, die auf dem Desktop überzeugen, auf dem Smartphone aber auseinanderfallen. Dabei kommt heute ein Großteil der Besucher über Mobilgeräte. Es lohnt sich also, jede Seite nach dem Bearbeiten einmal in der mobilen Vorschau zu prüfen. Du möchtest eine Website, die auf jedem Gerät eine gute Figur macht? Dann wirf einen Blick auf unser WordPress Webdesign oder melde dich direkt bei mir.
Du interessierst dich für Elementor?
FAQ: WordPress Breakpoints in Elementor
Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.
