Benutzerdefinierte Haltepunkte für Elementor: Fügen Sie weitere Geräteansichten kostenlos hinzu

Benutzerdefinierte Haltepunkte für Elementor zeigten ein Bild, das Geräterahmen auf einem Pixellineal mit Haltepunktführungen bei 600 px, 880 px, 1024 px und 1366 px sowie einer Haltepunkt-Taste hinzufügen zeigte

Die kostenlose Version von Elementor bietet Ihnen mehr Haltepunkte, als die meisten Tutorials zugeben: sieben Geräteansichten insgesamt, jede mit einer bearbeitbaren Pixelbreite, alle eingeschaltet von Site-Einstellungen Keine Pro-Lizenz erforderlich Wo das native System stoppt, ist an diesen sieben festen Slots Wenn Ihr Design eine achte Ansicht benötigt, oder eine Gerätebreite, auf die die benannten Slots nicht abgebildet werden, ist diese Lücke das Freie Benutzerdefinierte Haltepunkteerweiterung Von Master Addons handhabt Es deckt die Styling-Hälfte der responsiven Arbeit ab, während eine Erweiterung wie Anzeigebedingungen Entscheidet, welche Abschnitte auf welchem Gerät überhaupt angezeigt werden.

Unten: was Elementor frei eigentlich beinhaltet (mehr als drei Ansichten, was auch immer ältere Beiträge behaupten), wie man die extra nativen Haltepunkte aktiviert und wie man oben wirklich benutzerdefinierte Haltepunkte hinzufügt Dieser letzte Teil ist bis zu 3 Haltepunkte kostenlos, unbegrenzt mit Master Addons Pro.

Was dir Elementor free an Haltepunkten eigentlich gibt

Erstens der Mythos, der nicht sterben wird: Extra-Breakpoints in Elementor sind nicht hinter Elementor Pro eingeschlossen Viele Artikel sagen immer noch, dass sie es sind Seit Elementor 3.4 Die kostenlose Version wurde mit der Funktion Zusätzliche benutzerdefinierte Haltepunkte ausgeliefert und unterstützt bis zu sieben Geräteansichten:

  • Mobiles Porträt: standardmäßig bis zu 767 px (immer aktiv)
  • Mobile Landschaft: bis zu 880 px
  • Tablet-porträt: bis zu 1024px (immer aktiv)
  • Tablet-Landschaft: bis zu 1200 px
  • Laptop: bis zu 1366 px
  • Desktop: die Basisansicht alles andere zweigt ab
  • Breitbild: 2400 px und mehr (der Haltepunkt mit einer Mindestbreite im Satz)

Jeder dieser Pixelwerte ist editierbar Öffnen Sie Site-Einstellungen, ändern Sie den Tablet-Portrait-Grenzwert von 1024 px auf 900 px, speichern, fertig. Elementors Entwicklerdokumentation Erklärt die Max-Breite-Logik darunter, wenn man die Mechanik haben will.

Was kann die kostenlose Version also nicht? zwei Dinge Man kann keinen achten Haltepunkt hinzufügen, und man kann nicht über die benannten Slots hinausgehen: Die sechs zusätzlichen Ansichten haben feste Rollen, und wenn sie alle in Gebrauch sind, ist das native System voll Diese Decke ist der Grund, warum überhaupt ein dediziertes Haltepunkte-Plugin existiert.

So aktivieren Sie die zusätzlichen Haltepunkte von Elementor (kostenlos, kein Plugin)

Schalten Sie vor der Installation etwas ein, was Elementor Ihnen bereits gibt Dauert etwa eine Minute:

  1. Öffnen Sie eine beliebige Seite mit Elementor und klicken Sie auf das Hamburger-Menü in der oberen linken Ecke des Panels. Wählen Sie dann aus Site-einstellungen.
  2. Gehe zu Layout → Haltepunkte.
  3. Klicken Sie in die Aktive Haltepunkte Feld und fügen Sie die gewünschten Ansichten hinzu: Mobile Landschaft, Tablet Landschaft, Laptop, Breitbild.
  4. Passen Sie den Pixelwert unter jedem Haltepunkt an, wenn die Standardeinstellung nicht mit Ihrem Design übereinstimmt.
  5. Treffer Änderungen speichern. Elementor regeneriert sein CSS und die neuen Ansichten erscheinen im Responsive Mode.
Elementor-Site-Einstellungen Haltepunkte-Panel, das das Feld Aktive Haltepunkte mit Optionen für mobile Landschaft, Tablet-Landschaft, Laptop und Breitbild sowie bearbeitbaren Pixelwerten zeigt

Wenn sieben Ansichten Ihr Projekt abdecken, hören Sie hier auf Sie haben nichts ausgegeben und nichts installiert Lesen Sie weiter, wenn Sie mehr Ansichten als das benötigen, oder einen Haltepunkt, den die benannten Slots nicht ausdrücken können.

So fügen Sie benutzerdefinierte Haltepunkte über die Sieben von Elementor hinaus hinzu

Der freie Weg an der Decke von Elementor vorbei ist Benutzerdefinierte Haltepunkte für ElementorEin Plugin, das vom Master Addons Team gebaut wurde Es läuft auf eigene Faust neben Elementor, kein anderes Plugin erforderlich Es koppelt auch mit Master Addons Wenn Sie es bereits ausführen, verwalten Sie Haltepunkte aus demselben Dashboard wie Ihre Widgets. Die kostenlose Version summiert sich zu 3 benutzerdefinierten Haltepunkten mit exakter Pixelkontrolle über jede Gerätebreite; Master Addons Pro entfernt die Kappe vollständig.

Schritt 1: Installieren Sie das Plugin

Gehen Sie in Ihrem WordPress-Dashboard auf Plugins → Neues hinzufügen und nach “Benutzerdefinierte Haltepunkte für Elementor” suchen Installieren und aktivieren, wenn Sie bereits Master Addons verwenden, können Sie es auch über den Reiter Erweiterung im Master Addons Dashboard einschalten; beide Routen enden auf derselben Einstellungsseite.

Schritt 2: Öffnen Sie die Seite Haltepunkte

In Ihrem Dashboard-Menü erscheint ein neues Haltepunkte-Element. Klicken Sie darauf Die Seite listet Ihre aktuell aktiven Haltepunkte mit ihren Bereichen auf, die mit dem übereinstimmen, was Sie in den Site-Einstellungen von Elementor konfiguriert haben, und gibt Ihnen die Möglichkeit, oben ein neues Gerät hinzuzufügen.

Seite mit benutzerdefinierten Haltepunkten für Elementoreinstellungen mit Gerätenamen, Feldern mit minimaler Breite und maximaler Breite sowie Import- und Exportoptionen

Schritt 3: Fügen Sie einen Haltepunkt mit maximaler Breite hinzu

Benennen Sie das Gerät und geben Sie seine Max-Breite in Pixel ein Um kleine Telefone anzusprechen, geben Sie 600 ein und speichern Sie Das Plugin passt die min-Breite des benachbarten Geräts für Sie an, sodass sich die Bereiche nie überschneiden: Ihre neue Small Mobile-Ansicht deckt Bildschirme bis zu 600 px ab, und die nächste Ansicht beginnt bei 601 px. Es gibt auch 17+ Gerätevoreinstellungen, die gängige Telefone, Tablets und Laptops abdecken, sodass Sie von einem echten Geräteprofil ausgehen können, anstatt Breiten zu erraten Auf der kostenlosen Version können Sie bis zu 3 dieser benutzerdefinierten Breakpoints addieren; Master Addons Pro Benutzer erhalten unbegrenzte Haltepunkte plus Import/Export.

Schritt 4: Gestalten Sie die neue Ansicht in Elementor

Bearbeiten Sie eine beliebige Seite mit Elementor und klicken Sie auf das Symbol im responsiven Modus am unteren Rand des Panels Ihre benutzerdefinierte Ansicht befindet sich jetzt in der Geräteleiste neben den Standardeinstellungen Wählen Sie sie aus, wählen Sie ein Element aus und legen Sie Werte wie Schriftgröße, Auffüllung oder Spaltenanzahl fest, die nur innerhalb dieses Pixelbereichs gelten Klicken Sie auf Aktualisieren und ändern Sie dann die Größe Ihres Browsers, um den Styles-Auslöser zu beobachten. Für einen tieferen Durchlauf des Stylings pro Gerät finden Sie in unserem Leitfaden Responsive Design mit Elementor-Breakpoints.

Benutzerdefinierte Haltepunkt-Geräteansichten werden der Elementor-Responsive-Mode-Symbolleiste hinzugefügt, während eine Überschrift bearbeitet wird

Kostenlos vs. Pro: wie viele Haltepunkte Ihnen jede Option bietet

Hier der Vergleich, inklusive dem, was Elementor dir gibt, bevor irgendein Plugin ins Bild kommt:

OptionKostenWas du bekommstGrenze
Elementorfrei (nativ)Kostenlos7 benannte Geräteansichten mit jeweils bearbeitbarer PixelbreiteFester 7 er-Satz, keine neuen Slots
Benutzerdefinierte Haltepunkte für Elementor (kostenlos)KostenlosWirklich benutzerdefinierte Haltepunkte mit eigenen Namen und genauen Breiten, 17+ Gerätevoreinstellungen3 benutzerdefinierte Haltepunkte
Master Addons ProBezahltAlles oben, plus Import/Export und HaltepunktsortierungUnbegrenzt

Bei den meisten Seiten decken die sieben Ansichten von Elementor plus 3 benutzerdefinierte Ebenen jede echte Lücke ab: eine Ansicht mit kleinen Telefonen, eine ungerade Tablet-Breite, ein Kiosk-Display Agenturen, die mit Client-Gerätelisten jonglieren, sind diejenigen, die die freie Obergrenze treffen, und das ist wer Pro Ist für. wenn du das ganze Plugin gegen Alternativen abwägst, während du dabei bist, unser Vergleich zwischen Master Addons und Ultimate Addons Deckt das umfassendere Feature-Match-up ab.

Wenn ein benutzerdefinierter Haltepunkt tatsächlich ein Layout repariert

Ein benutzerdefinierter Haltepunkt lohnt sich hinzuzufügen, wenn ein Layout in der Lücke zwischen zwei vorhandenen Ansichten bricht Das klassische Gehäuse ist ein 3-Spalten-Raster Es sieht direkt auf dem Desktop über 1025 px aus Elementor lässt es auf 2 Spalten bei der 1024 px Tablet-Ansicht fallen Auf einem großen Tablet in der Landschaft gehalten, lässt dieselbe 1024 px-Ansicht eine breite leere Spalte und verschwendet Platz.

Fügen Sie einen Haltepunkt bei, sagen wir, 992 px hinzu, stellen Sie das Raster dort wieder auf 3 Spalten ein, und das Layout passt zum Gerät, anstatt zu raten Derselbe Zug funktioniert für eine Ansicht mit kleinen Telefonen, bei der Sie Schriftgrößen und Tastenbeläge hochfahren, die eng unter 400 px aussehen, ein Bereich, den sogar die Mobile Portrait-Ansicht von Elementor als einen Eimer behandelt.

Haltepunkte passen auch gut zur bedingten Anzeige. Wenn ein Abschnitt nur auf größeren Bildschirmen sinnvoll ist, steuert ein benutzerdefinierter Haltepunkt sein Design Anzeigebedingungen Steuert, ob es überhaupt erscheint Die beiden lösen verschiedene Hälften desselben responsiven Problems.

Verlangsamen benutzerdefinierte Haltepunkte Ihre Website?

Eine Handvoll Haltepunkte werden Ihre Website in keiner Weise verlangsamen, die ein Besucher bemerkt. Jeder fügt eine Standard-CSS-Medienabfrage hinzu und die von Ihnen festgelegten Stile laden genau wie die integrierten Responsive-Stile von Elementor. Das hinzugefügte CSS ist neben dem Gewicht einer typischen Seite winzig.

Der Editor ist eine andere Geschichte Jeder zusätzliche Haltepunkt bedeutet, dass ein reaktionsschnelleres Panel-Elementor rendern muss, sodass sich der Bearbeitungsbildschirm durch Stapeln von 10 oder mehr schwerer anfühlen kann. Fügen Sie nur die Ansichten hinzu, die Sie tatsächlich stylen werden. Fünf oder sechs insgesamt, Standardeinstellungen enthalten, ist für fast jedes Projekt ausreichend. Wenn Geschwindigkeit Ihr umfassenderes Anliegen ist, finden Sie in unserem Leitfaden weiter So beschleunigen Sie Elementor-Websites Behandelt die Fixes, die tatsächlich in Ladezeiten angezeigt werden.

Wann nicht, um einen benutzerdefinierten Haltepunkt hinzuzufügen

Benutzerdefinierte Haltepunkte sind nicht für jeden responsiven Fehler ein Fix, und das Erreichen eines ersten ist oft der falsche Aufruf Wenn sich ein einzelnes Element auf einer Bildschirmgröße falsch verhält, wird eine gezielte Regel in Benutzerdefiniertes CSS Ist meist sauberer als eine ganz neue Geräte-Stufe, die dann überall Styling braucht.

Zwei weitere Fälle, um es zu überspringen Wenn das Aktivieren einer der ruhenden nativen Ansichten von Elementor oder das Anstoßen eines Standardpixelwerts in den Site-Einstellungen das Problem behebt, tun Sie das stattdessen; es kostet nichts und hält den Editor leicht Und wenn es wirklich darum geht, welcher Inhalt auf welchem Gerät angezeigt wird und nicht wie er gestylt wird, ist das eine Aufgabe für die Anzeigebedingungen, kein weiterer Haltepunkt.

Benutzerdefinierte Haltepunkte befinden sich neben dem Rest des Master Addons-Toolkits, von den kostenlosen Erweiterungen bis hin zum Themenbauer, alle gebaut, um die Lücken zu schließen. Elementor lässt offen.

Häufig gestellte Fragen

Verfügt Elementor free über benutzerdefinierte Haltepunkte?

Ja, mehr als die meisten denken Elementor frei beinhaltet sieben Geräteansichten: Mobiles Porträt, Mobile Landschaft, Tablet-Portrait, Tablet-Landschaft, Laptop, Desktop, und Breitbild, Sie aktivieren die zusätzlichen in Site-Einstellungen → Layout → Haltepunkte und können jeden Pixelwert bearbeiten Was frei Elementor nicht kann, ist Breakpoints jenseits dieser sieben benannten Slots hinzufügen; dafür benötigen Sie das kostenlose Plugin Benutzerdefinierte Haltepunkte für Elementor.

Wie füge ich einen benutzerdefinierten Haltepunkt in Elementor hinzu?

Öffnen Sie für die eingebauten Ansichten Site-Einstellungen → Layout → Haltepunkte, fügen Sie die gewünschten Ansichten zum Feld Aktive Haltepunkte hinzu, und passen Sie deren Breiten an, für Haltepunkte jenseits der sieben von Elementor installieren Sie das kostenlose Plugin Benutzerdefinierte Haltepunkte für Elementor, öffnen dessen Seite Haltepunkte, und geben Sie einen Gerätenamen und Max-Width in Pixeln ein, zum Beispiel 600 für kleine Telefone Die neue Ansicht erscheint dann im Elementor Responsive Mode stylbereit.

Wie viele Haltepunkte können Sie in Elementor haben?

Elementor frei und Pro beide oben auf sieben native Geräteansichten Das Plugin Benutzerdefinierte Haltepunkte für Elementor addiert sich zu 3 wirklich benutzerdefinierte Haltepunkte oben auf das kostenlos, und Master Addons Pro entfernt die Kappe für unbegrenzte Haltepunkte.

Benötigen benutzerdefinierte Haltepunkte Elementor Pro?

Nein, in beiden Punkten. Elementors eigene Extra-Breakpoints (Mobile Landscape, Tablet Landscape, Laptop, Widescreen) werden in der kostenlosen Version ausgeliefert, und das Plugin Custom Breakpoints for Elementor ist ebenfalls kostenlos. Nirgendwo ist eine Elementor Pro-Lizenz beteiligt; nur unbegrenzte benutzerdefinierte Breakpoints erfordern Master Addons Pro.

Benötigt das Custom Breakpoints Plugin Master Addons, um zu funktionieren?

Nein. Es funktioniert als eigenständiges Plugin, bei dem nur Elementor installiert ist. Es lässt sich auch in Master-Addons integrieren, wenn Sie beide ausführen. Sie verwalten also Haltepunkte aus demselben Dashboard wie Ihre Widgets und Erweiterungen, und Master-Addons Pro sperrt unbegrenzte Haltepunkte.

Verlangsamen benutzerdefinierte Haltepunkte meine Website?

Nein. Jeder Haltepunkt fügt nur eine leichte CSS-Medienabfrage hinzu, und die Stile werden wie die integrierten Responsive-Stile von Elementor geladen. Durch das Stapeln vieler Haltepunkte fühlt sich der Editor schwerer an, also fügen Sie nur die Ansichten hinzu, die Sie tatsächlich stylen möchten.

Bild von Roy
Roy
Ich bin Roy, Teil des Master Addons for Elementor Teams Ich schreibe die Tutorials, nehme die Videos auf, halte die Dokumentation aktuell, so weiß man immer, wie man jede Funktion nutzt Ich handhabe auch den Support, also wenn man einen Haken macht, bin ich die Person, die einem hilft, das zu beheben Echte Antworten, von jemandem, der diese Tools täglich benutzt.