Benutzerdefinierte Elementor-Breakpoints-Einrichtung und -Konfiguration durch Master-Add-ons #
Die Funktion Benutzerdefinierte Elementor-Breakpoints, verfügbar über Master Addons Pro (oder bis zu 3 Haltepunkte in der kostenlosen Version), ermöglicht Ihnen das Erstellen Vollständig responsive Website-Layouts Optimiert für eine größere Auswahl an Bildschirmgrößen über die Standardeinstellungen für Mobilgeräte, Tablets und Desktops von Elementor hinaus Dies gewährleistet ein konsistentes und qualitativ hochwertiges Benutzererlebnis auf jedem Gerät.
Mit benutzerdefinierten Elementor-Breakpoints können Sie:
- Fügen Sie so viele benutzerdefinierte Haltepunkte (Bildschirmbreiten) wie nötig hinzu (unbegrenzt mit Master Addons Pro).
- Definieren Sie spezifische Layouts, Schriftgrößen, Abstände und Ausrichtungen für Geräte wie Small Mobile, Large Tablet oder benutzerdefinierte Bildschirmgrößen.
- Überschreiben Sie das standardmäßige Reaktionsverhalten von Elementor bei präzisen Pixelbreiten.
Was sind benutzerdefinierte Elementor-Breakpoints? #
Benutzerdefinierte Elementor-Breakpoints sind zusätzliche, benutzerdefinierte Bildschirmbreitenschwellen, mit denen sich Ihr Layout in Größen anpassen kann, die über die integrierten Mobil-, Tablet- und Desktop-Ansichten von Elementor hinausgehen. Anstatt auf drei Geräteansichten beschränkt zu sein, legen Sie die genaue maximale Breite (in Pixeln) fest, bei der ein neues responsives Layout beginnen sollte. Beispiel für einen 600-Zoll-Kleinmobil-Breakpoint. Master-Addons addiert mit Pro 3 benutzerdefinierte Breakpoints für den kostenlosen Plan und unbegrenzte Breakpoints, sodass Sie präzise Kontrolle über das responsive Design haben, ohne Code zu berühren.
Also, mal sehen, wie man diese Funktion einrichtet und konfiguriert.
Einrichtung benutzerdefinierter Elementor-Breakpoints #
Schnelle Antwort: Installieren Sie die Erweiterung Benutzerdefinierte Haltepunkte von Master Addons > ErweiterungÖffnen Sie das Neue Haltepunkte Seite unter dem Menü Master Addons, dann geben Sie eine Max-Width In Pixeln für jede Gerätegröße, die Sie anvisieren möchten (z. B. 600 px für kleine Mobilgeräte).
Befolgen Sie diese Schritte, um Ihre benutzerdefinierten Haltepunkte zu installieren und zu definieren.
Schritt 1: Installieren und Aktivieren der Erweiterung #
- Navigieren Sie zu den Master Addons Menü in Ihrem WordPress-Dashboard.
- Gehe zu den Erweiterung Tab.
- Finden Sie die “Benutzerdefinierte Haltepunkte” Option und klicken Sie auf den Download-Button, um ihn auf Ihrer Website zu installieren und zu aktivieren.
Schritt 2: Greifen Sie auf die Haltepunkteeinstellungen zu #
- Im WordPress-Dashboard mit der Maus über die Master Addons Menü.
- Ein neuer Menüpunkt mit dem Titel “Breakpoints” Erscheinen wird Klicken Sie darauf Diese leitet Sie auf die benutzerdefinierte Haltepunkt-Eingabeseite weiter.
Schritt 3: Fügen Sie benutzerdefinierte Haltepunkte hinzu #
Auf der Eingabeseite für Haltepunkte sehen Sie die drei Standard-Breakpoints von Elementor (Mobil, Tablette, und Desktop).
Um einen neuen benutzerdefinierten Haltepunkt hinzuzufügen, verwenden Sie das Eingabefeld, um nur den festzulegen Max-Width (in Pixeln).
Um beispielsweise kleine mobile Geräte anzusprechen, geben Sie ein 600px als die maximale Breite.
Nach dem Speichern passt das System automatisch die Min-Breite für den nächsten Standard-Breakpoint an. Im obigen Beispiel gilt der Haltepunkt “Kleines Mobiles” für alle Bildschirme kleiner oder gleich 600pxWährend der Standard-Breakpoint “Mobile” bei beginnt 601px und enden Sie an der Mindestbreite des Tablet-Bruchpunkts.
Sie können Haltepunkte nach Bedarf auf dieser Seite hinzufügen oder entfernen.
Verwendung benutzerdefinierter Elementor-Breakpoints #
Sobald die benutzerdefinierten Haltepunkte in den Master-Addons-Einstellungen konfiguriert sind, werden sie direkt im Elementor-Seiteneditor verfügbar.
Schritt 1: Öffnen Sie den Responsive Mode im Elementor #
Gehen Sie zu einer beliebigen Seite und klicken Sie “Bearbeiten mit Elementor” Klicken Sie auf die Reaktionsmodus Symbol (normalerweise ein Monitor- und Telefonsymbol) unten links im Bedienfeld.
Schritt 2: Wählen Sie einen benutzerdefinierten Haltepunkt aus #
In der oberen Leiste werden alle verfügbaren Haltepunkte angezeigt, einschließlich der von Ihnen erstellten benutzerdefinierten (z. B “Kleines Mobiltelefon”).
Klicken Sie auf Ihr Benutzerdefinierter Haltepunkt Editoransicht auf diese bestimmte Bildschirmgröße zu ändern.
Schritt 3: Wenden Sie benutzerdefinierte Stile an #
Wählen Sie ein beliebiges Element (z. B. ein Heading-Widget).
Gehe zu den Elementen Stil Tab.
Klicken Sie auf die Responsive Icon (Desktop-Monitor) neben jeder Stileinstellung, wie z Typografie > Größe oder Inhalt > Ausrichtung.
Definieren Sie einen bestimmten Wert für diesen Haltepunkt (z. B. setzen Sie die Schriftgröße auf 20px). Dieser Wert gilt nur, wenn die Browserbreite innerhalb des für diesen benutzerdefinierten Haltepunkt definierten Bereichs liegt.
Schritt 4: Speichern und Vorschau #
Sobald Sie Ihre Responsive-Stile für alle notwendigen Haltepunkte definiert haben, klicken Sie auf Aktualisieren Seite zu speichern.
Sehen Sie sich die Seite live an und ändern Sie die Größe Ihres Browserfensters, um zu sehen, wie Ihre benutzerdefinierten Haltepunkte die von Ihnen definierten eindeutigen Stile auslösen.
Häufig gestellte Fragen #
Wie viele benutzerdefinierte Haltepunkte kann ich in Elementor hinzufügen?
Master Addons addiert bis zu 3 benutzerdefinierte Haltepunkte auf dem kostenlosen Plan und unbegrenzte Haltepunkte mit Master Addons Pro. Jeder Haltepunkt ist eine zusätzliche Bildschirmgröße mit maximaler Breite, die auf den Standardansichten von Elementor für Mobilgeräte, Tablets und Desktops geschichtet ist Vollständig responsive Layouts.
Wie füge ich einen benutzerdefinierten Haltepunkt in Elementor hinzu?
Installieren Sie die Erweiterung Benutzerdefinierte Haltepunkte von der Registerkarte Master Addons Extension, öffnen Sie die neue Haltestelle unter dem Menü Master Addons, und geben Sie eine Max-Breakpoints in PixelWidth für Beispiel 600 p für kleine mobile Nach dem Speichern erscheint der neue Haltepunkt im Responsive Mode von Elementor stylbereit.
Benötigen benutzerdefinierte Haltepunkte Elementor Pro?
Nein. Benutzerdefinierte Haltepunkte sind a Master Addons-FunktionNicht eine Elementor Pro Funktion Das kostenlose Master Addons Plugin gibt Ihnen bis zu 3 benutzerdefinierte Haltepunkte, und nur das höhere Limit erfordert Master Addons Pro.
Muss ich für jeden Haltepunkt eine min-Breite festlegen?
Nein. Sie geben nur den Max-Wid ein. Master Addons geben automatisch den Min-Wid der nächsten Pause ein. Die Bereiche überlappen sich also nie. Mobile passt sich an. Beispiel, ein 60-Px-Breakpoint für kleine Mobilgeräte sorgt dafür, dass die Standardansicht bei 601 px beginnt.
Verlangsamen benutzerdefinierte Haltepunkte meine Website?
Nr. Breakpoints fügen nur Standard-CSS-Medienabfragen hinzu, die leicht sind, und die von Ihnen eingestellten Stile laden genau wie die integrierten Responsive-Stile von Elementor. Folgen Sie dem Allgemeinen Best Practices für die Elementorgeschwindigkeit Hält die Seite schnell, unabhängig davon, wie viele Haltepunkte Sie verwenden.
