Benutzerdefinierte Elementor-Breakpoints-Einrichtung und -Konfiguration durch Master-Add-ons #
Die freie Benutzerdefinierte Haltepunkte für Elementor Plugin von Master Addons (3 benutzerdefinierte Haltepunkte kostenlos, unbegrenzt mit Master Addons Pro) können Sie erstellen Vollständig responsive Website-Layouts Optimiert für Bildschirmgrößen über die integrierten Geräteansichten von Elementor hinaus Dies gewährleistet eine konsistente und qualitativ hochwertige Benutzererfahrung 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 Bildschirmbreiten, die Ihr Layout an Größen anpassen lassen. Die integrierten Ansichten von Elementor decken dies nicht ab. Elementor verfügt über bis zu sieben Geräteansichten (Mobiles Porträt, mobile Landschaft, Tablet-Porträt, Tablet-Landschaft, Laptop, Desktop und Breitbild). Ein benutzerdefinierter Breakpoint fügt einen weiteren bei der von Ihnen gewählten maximalen Breite hinzu, zum Beispiel eine 600-fach-Klein-Mobilansicht. Master Addons addiert 3 benutzerdefinierte Breakpoints auf dem kostenlosen Plan und unbegrenzte Breakpoints mit Pro, 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 maximale Breite 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 "Bruchpunkte" 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 von Haltepunkten sehen Sie Ihre aktiven Elementor-Breakpoints und deren Pixelbereiche.
Um einen neuen benutzerdefinierten Haltepunkt hinzuzufügen, verwenden Sie das Eingabefeld, um nur den festzulegen maximale Breite (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 Responsives Symbol (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 Add-dons Pro. Jeder Haltepunkt ist eine zusätzliche Bildschirmgröße mit maximaler Breite, die auf den integrierten Geräteansichten von Elementor 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 PluginNicht eine Elementor Pro-Funktion Das kostenlose Plugin für benutzerdefinierte Haltepunkte bietet 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.
Für einen Vergleich mit den eingebauten Haltepunkten von Elementor und einer Live-Demo siehe die Benutzerdefinierte Breakpoints-Plugin-Seite.
