Benutzerdefinierte Elementor-Breakpoints: Fügen Sie weitere Gerätegrößen hinzu (kostenloses Plugin)

Custom Breakpoints for Elementor ist ein kostenloses Plugin des Master Addons Teams, das dem Responsive Mode von Elementor eigene Gerätegrößen hinzufügt Elementor stoppt bei sieben Geräteansichten Dieses Plugin fügt zusätzlich zu diesen Haltepunkte hinzu, wie ein 600 px kleines Telefon oder ein 1440 px Desktop, jeder mit eigenem Namen und Pixelbreite, die kostenlose Version beinhaltet 3 benutzerdefinierte Haltepunkte, und Master Addons Pro macht sie unbegrenzt Es funktioniert mit oder ohne installierte Master Addons.

So fügen Sie einen benutzerdefinierten Haltepunkt in Elementor hinzu

Überprüfen Sie zunächst die eigenen Extra-Ansichten von Elementor in Site-Einstellungen > Layout > Haltepunkte Wenn keiner von ihnen passt, fügen Sie Ihre eigenen hinzu:

  1. Installieren Benutzerdefinierte Haltepunkte für Elementor von Plugins > Neu hinzufügen und aktivieren.
  2. Öffnen Sie Haltepunkte in Ihrem Dashboard-Menü Wenn Master Addons aktiv ist, befindet es sich unter dem Master Addons-Menü.
  3. Gerät hinzufügen, einen Namen geben und seine maximale Breite in Pixel eingeben, zum Beispiel 600 für kleine Telefone.
  4. Speichern. Das Plugin sortiert die Liste und passt die benachbarten Bereiche an.
  5. Bearbeiten Sie eine Seite mit Elementor, wählen Sie die neue Ansicht im Responsive-Modus und gestalten Sie Ihre Elemente dafür.

Sehen Sie, wie es in der funktioniert Live Haltepunkte Demooder lesen Sie unseren Leitfaden dazu Benutzerdefinierte Haltepunkte für Elementor Für weitere Beispiele.

Benutzerdefinierte Gerätehaltepunkte für Elementor

Benutzerdefinierte Gerätegrößen mit eigenen Namen

Benennen Sie das Gerät und geben Sie seine maximale Breite in Pixel ein Das Plugin sortiert jeden Haltepunkt nach Breite und arbeitet die Bereiche für Sie aus, so deckt eine 600 px Small Mobile Ansicht Bildschirme bis zu 600 px ab und die nächste Ansicht beginnt bei 601 px. Gespeicherte Haltepunkte erscheinen in der responsiven Symbolleiste von Elementor neben den eingebauten Ansichten.

  • 3 benutzerdefinierte Haltepunkte kostenlos, unbegrenzt mit Master Addons Pro.
  • Haltepunkte sortieren automatisch nach Breite, sodass sich Bereiche nie überschneiden.
  • Eine Reset-Taste, um zu den Standardeinstellungen von Elementor zurückzukehren, sowie Import und Export mit Pro.

Funktioniert im Reaktionsmodus von Elementor

Benutzerdefinierte Haltepunkte verhalten sich wie Elementors eigene Wählen Sie die neue Ansicht in der responsiven Symbolleiste aus, legen Sie dann Schriftgrößen, Auffüllungen, Spaltenbreiten und andere responsive Werte fest, die nur innerhalb dieses Bereichs gelten. Das Plugin wird in das Haltepunktsystem von Elementor eingebunden, sodass die zusätzlichen Ansichten auf responsiven Steuerelementen in Elementor- und Master-Addons-Widgets angezeigt werden.

  • Wählen Sie benutzerdefinierte Ansichten aus derselben Symbolleiste wie Mobil und Tablet.
  • Stellen Sie Typografie, Abstände und Layoutwerte für jede Ansicht ein.
  • Legen Sie Layouts fest, die zwischen zwei der integrierten Breiten von Elementor liegen.
Benutzerdefinierte Haltepunkte in der Elementor-Editor-Vorschau

Integrierte Haltepunkte des Elementors im Vergleich zu benutzerdefinierten Haltepunkten

Elementorfrei und Pro teilen sich die gleichen sieben Geräteansichten: Mobiles Porträt (767 px), Mobile Landschaft (880 px), Tablet-Porträt (1024 px), Tablet-Landschaft (1200 px), Laptop (1366 px), Desktop und Breitbild (2400 px und mehr).Jede Breite ist bearbeitbar, aber Sie können keine achte Ansicht hinzufügen.

Elementor-bruchpunkteBenutzerdefiniertes Breakpoints-Plugin
PreisKostenlosKostenlos, unbegrenzt mit Master Addons Pro
GeräteansichtenBis zu 7Elementors 7 plus 3 benutzerdefiniert (kostenlos) oder unbegrenzt (Pro)
NamenFestgelegtIhr eigenes
BreitenBearbeitbarBearbeitbar
Import und ExportNeinMit Pro

Wie Sie jedes Gerät stylen, sobald Ihre Haltepunkte festgelegt sind, lesen Sie in unserem Leitfaden Responsive Design mit Elementor-Breakpoints. Um ganze Abschnitte nach Gerät anzuzeigen oder auszublenden, verwenden Sie Anzeigebedingungen (Pro).

Vorlagenbetrachter
Facebook
Twitter
WhatsApp
Link kopieren
Jetzt kaufen
Benutzerdefinierter Haltepunkt
Benutzerdefinierter Haltepunkt

Häufig gestellte Fragen für benutzerdefinierte Haltepunkte

Erfahren Sie die am häufigsten gestellten Fragen von Benutzern zu benutzerdefinierten Haltepunkten und finden Sie Antworten an einem Ort.
Was ist ein Beispiel aus der Praxis für die Notwendigkeit eines benutzerdefinierten Haltepunkts?

Text und Tasten, die bei 767 px gut aussehen, können sich auf einem 360 px-Telefon eng anfühlen Fügen Sie einen kleinen mobilen Haltepunkt bei 400 px hinzu und erhöhen Sie dann die Schriftgröße und das Tastenpolster nur für diese Bildschirme. Alles, was breiter ist, behält die regulären mobilen Stile bei.

Ein paar zusätzliche Haltepunkte werden keinen spürbaren Unterschied machen Jeder fügt jedem Steuerelement einen weiteren responsiven Wert hinzu, so dass zehn oder mehr den Editor schwerer fühlen lassen können Fügen Sie nur die Ansichten hinzu, die Sie tatsächlich stylen werden Fünf oder sechs insgesamt, Standardeinstellungen enthalten, reicht für die meisten Seiten.

Beeinflussen diese benutzerdefinierten Haltepunkte das CSS und die Leistung meiner Live-Website?

Jeder Haltepunkt fügt den von Elementor generierten Stylesheets CSS-Medienabfragen hinzu. Das ist eine kleine Menge CSS, sodass Besucher keinen Unterschied in der Ladezeit bemerken.

Möglicherweise benötigen Sie keine benutzerdefinierte Elementor hat bereits Mobile Landscape (880 px) und Tablet Landscape (1200 px) Ansichten, die Sie in Site-Einstellungen > Layout > Haltepunkte einschalten können Fügen Sie einen benutzerdefinierten Haltepunkt hinzu, wenn Sie eine Breite benötigen, die diese Ansichten nicht abdecken.

Trendige Elementor-Widgets und -Erweiterungen

Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.

Master Addons Glassmorphism-Erweiterung für Elementor: Milchglaskarten mit der auf 20 px eingestellten Kontrolle des Unschärfewerts

Glasmorphie

Startseite Kostenlose Elementor-Glasmorphie-Erweiterung: „Mattiertes Glas-Effekt in einem Umkipp-Glasmorphie ist das Matt...
Details anzeigen
Master Addons Container Extras Erweiterung für Elementor: Container mit einer Kappe von 1400 px Max Breite, mit Max Breite, Max Höhe, Min Breite und Min Höhe Steuerung

Container-extras

Home Elementor Container Max Width and Max Height Controls Container Extras ist ein kostenloser Master...
Details anzeigen
Master Addons Patterns-Erweiterung für Elementor: hero mit dem Purple Gradient Grid Left-Stil, drei weiteren Musterstilen und dem Enable Pattern-Panel

Muster

Home 70+ Free Elementor Background Patterns Patterns ist eine kostenlose Master Addons-Erweiterung, die hinzufügt...
Details anzeigen
Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf

Post-/Seitenduplikator

Startseite Duplicate Elementor Pages and Posts in One Click Post/Page Duplicator ist ein kostenloser Master...
Details anzeigen
Master Addons Reading Progress Bar-Erweiterung für Elementor: Blauer Balken 42% oben auf einer Datenschutzrichtlinie-Seite gefüllt, mit Einstellungen für Aktivierungs-, Positions-, Höhen- und Füllfarben

Fortschrittsanzeige lesen

Startseite Fügen Sie eine Leseprogress-Leiste in WordPress (Elementor) hinzu. Die Leseprogress-Leiste ist kostenlos...
Details anzeigen