Schieber

Die Schieberfeld Platziert eine Drag-to-Set-Entfernungssteuerung im Panel Ihres benutzerdefinierten Widgets, dieselbe, die Elementor für Lücken, Breiten und Randradius über seine eigenen Widgets verwendet. Innerhalb der Master-Addons Widget-builder„Sie legen ein Minimum, ein Maximum, einen Schritt und die Einheiten fest, aus denen der Benutzer auswählen kann. Wer das Widget in Elementor bearbeitet, zieht dann einen Griff, anstatt rohe CSS-Werte einzugeben.

Das Slider-Feld unterstützt Bedingungen Wie jedes Steuerelement, und da sein Wert numerisch ist, ist die Twig-Syntax-Vorlagen-Engine Lassen Sie es mit Vergleichen wie verzweigen {% if columns >= 3 %}. Beide Leitfäden behandeln Einrichtung und Einschränkungen.

Der Wert, den ein Slider erzeugt, ist keine einfache Zahl Es ist ein Paar: eine Größe und eine Einheit Dieses eine Detail entscheidet, wie Sie das Feld mit Ihrem Stylesheet verbinden, also verbringt dieser Doc die meiste Zeit dort.

Was das Slider-Feld bewirkt #

• Leiht einen Range Slider Mit einem ausziehbaren Griff und einer numerischen Eingabe daneben, die den nativen Schiebereglern von Elementor entspricht.
• Bietet einen Einheitenumschalter Wenn Sie mehr als eine Einheit zulassen, kann dieselbe Steuerung in px, % oder em funktionieren.
• Speichert eine Größe und eine Einheit zusammen Als einen Wert liest Ihr CSS-Panel mit Punktnotation.
• Unterstützt responsive WerteDadurch können Benutzer eine andere Größe pro Gerät als das Gerätesymbol festlegen.
• Akzeptiert dynamische Werte und kann CSS über den Selektormechanismus von Elementor als Alternative zum CSS-Panel schreiben.

Neu beim Erstellen von Widgets? Lesen Sie die Übersicht über Widget Builder Zuerst; Dieses Dokument geht davon aus, dass Sie bereits ein Widget im Editor geöffnet haben.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget, das im Widget Builder-Editor geöffnet wird Unser Beispiel ist ein Teamkartenraster, dessen .team-row Container benötigt eine vom Benutzer verstellbare Lücke zwischen den Karten.

So fügen Sie ein Schiebereglerfeld hinzu #

Scrollen Sie im Widget Builder-Editor im Feldfenster auf der linken Seite, bis Sie das gefunden haben Schieber Feld, aufgelistet mit den anderen CSS-Wertfeldern wie Dimensionen.

Ziehen Sie es in einen Abschnitt unter dem Stil Tab, auf der die Größensteuerelemente normalerweise leben, obwohl auch Inhalt und Erweitert funktionieren. Sobald es landet, öffnen sich die Optionen des Feldes auf der linken Seite.

Sliderfeld-Optionen erklärt #

• Etikett: Der Text neben dem Steuerelement in Elementor, zum Beispiel “Card Gap”.
• Name: Die eindeutige Kennung, auf die sich Ihr CSS bezieht, sind beispielsweise nur Buchstaben, Zahlen und Unterstriche my_gap.
• Standard: Der Startwert, gespeichert als Größe plus Einheit.
• Min, Max, Schritt: Der Bereich, den der Griff abdeckt, und wie weit sich jedes Drag-Inkrement bewegt Eine Spaltsteuerung könnte in Schritten von 1 0 bis 100 laufen.
• Größeneinheiten: Die Einheiten, zwischen denen der Benutzer wechseln kann, wie z. B. px, % und em. Eine Einheit verbirgt den Umschalter; mehrere zeigen es.
• Responsiv: Fügt das Gerätesymbol hinzu, damit jeder Haltepunkt seinen eigenen Wert behält.
• Dynamisch und Selektoren: Unterstützung dynamischer Tags und der unten beschriebene Selektormechanismus von Elementor.
• Beschreibung, Etikett anzeigen, Trennzeichen und Bedingungen sind die gleichen Anzeigeoptionen, die jedes Feld enthält.

Verbinden Sie den Slider mit Ihrem CSS #

Der Wert eines Sliders ist ein Array mit zwei Schlüsseln: size und unit. Das Drucken des Feldnamens auf eigene Faust gibt nichts aus, denn es gibt keinen einzigen Wert zum Drucken Im CSS-Panel schreiben Sie immer beide Teile mit Punktnotation:

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

Ein Wert von 24 mit ausgewähltem px rendert als gap: 24px;. Ändern Sie den Einheitenumschalter auf % und die gleiche Regel wird gap: 24%; Ohne die Vorlage zu berühren.

Pass auf: {{ my_gap }} Für sich allein druckt eine leere Zeichenfolge. Wenn Ihre Regel rendert als gap: ; und das Layout ignoriert die Kontrolle, das Fehlende .size und .unit Sind fast immer warum. Die gleiche Stille folgt einer Umbenennung: Ändern Sie den Namen des Feldes später und die alten Token werden weiter gerendert, nur mit nichts darin, also aktualisieren Sie das CSS-Panel in derselben Sitzung.

Die Selektoren Alternative #

Schieberegler arbeiten auch mit dem Selektormechanismus von Elementor, der das CSS für Sie schreibt, anstatt durch das CSS-Panel zu gehen Bei einem Schieberegler injiziert Elementor einen bloßen Wert anstelle einer vollständigen Deklaration, sodass das einfache Selector-Feld des Erbauers allein keine brauchbare Regel ergibt Ein benutzerdefinierter Selektoreneintrag muss die gesamte Immobilie tragen, wobei die eigenen Platzhalter von Elementor verwendet werden:

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

Für die meisten Widgets ist das CSS-Panel-Token die einfachere Route; Greifen Sie nach Auswahleinträgen, wenn Elementor die Ausgabe verwalten soll.

Verwenden Sie die Schiebereglersteuerung in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu. Wenn die Seite bereits geöffnet war, laden Sie zuerst den Editor neu, da ein veralteter Tab das alte Panel weiterhin anzeigt. Der Schieberegler erscheint im Panel des Widgets mit Ihrem Etikett, dem Handle, der numerischen Eingabe und dem Einheitenumschalter, wenn Sie mehr als eine Einheit zugelassen haben.

Ziehen Sie den Griff oder geben Sie eine Zahl ein und die Vorschau folgt sofort. Wenn Responsive eingeschaltet ist, schaltet das Gerätesymbol die Steuerung zwischen Desktop-, Tablet- und Mobilwerten um, sodass eine 40-px-Desktoplücke auf Telefonen aus demselben Feld auf 16 px kleiner werden kann.

Häufige Anwendungsfälle #

• Gitter - und Flexlücken Zwischen Karten, Spalten oder Galeriegegenständen.
• Elementbreiten und - höhen%, beispielsweise eine Bildgröße oder Teilerlänge, mit einer %-Option für Flüssigkeitslayouts.
• Grenzradius Auf Karten und Knöpfen, wenn ein einheitlicher Radius ausreicht.
• Symbol- und Schriftgrößenbestimmung Dabei hält eine Em-Einheit die Dinge relativ zum umgebenden Text.
• Abstandssätze Wie der Abstand zwischen einem Abzeichen und der Ecke, in der es sitzt.

Tipps für die Arbeit mit dem Slider-Feld #

• Drucken Sie immer beide Teile. {{ my_gap.size }}{{ my_gap.unit }} Ist die ganze Verbindung; der blanke Feldname gibt Ihnen eine leere Zeichenfolge.
• Match Min, Max und Step zum Grundstück. Ein Bereich von 0 – 100 in Schritten von 1 passt zu einer Lücke; Eine Radiussteuerung benötigt möglicherweise nur 0 –50.
• Bieten Sie nur die Einheiten an, die Sinn machen. Ein reines px-Steuerelement ist klarer als eines, bei dem % defekte Layouts erzeugt.
• Behalten Sie einen Fallback in der CSS-Panelstruktur bei. Schreiben Sie die Regel so, dass das Widget beim ersten Drop immer noch vernünftig auf dem Standardwert liegt.
• Aktivieren Sie Responsive für Layoutwerte. Lücken und Breiten benötigen fast immer eine engere mobile Einstellung.
• Bevorzugen Sie das CSS-Panel-Token gegenüber dem Selector-Feld. Das einfache Auswahlfeld injiziert für Schieberegler nur einen bloßen Wert, bei dem es sich nicht um eine vollständige Deklaration handelt.

Häufig gestellte Fragen #

Einwickelnd #

Das Widget Builder Slider-Feld verwandelt jede einzelne CSS-Länge in Ihrem Widget in ein Steuerelement, das der Editor ziehen kann: Benennen Sie das Feld, begrenzen Sie den Bereich und drucken Sie es aus {{ name.size }}{{ name.unit }} Im CSS-Panel Es paart sich auf natürliche Weise mit dem Maße Feld Wenn ein Widget vierseitige Abstände neben einzelnen Werten benötigt Entdecken Sie den Rest Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.