Das Slider-Feld fügt die Drag-to-Set-Entfernungssteuerung von Elementor zu einem benutzerdefinierten Widget hinzu, das mit den Master-Add-ons erstellt wurde Widget-builder. Editoren ziehen einen Griff oder geben eine Zahl ein, wählen eine Einheit aus, und der Wert geht in Ihr CSS. Verwenden Sie es für Lücken, Breiten, Höhen, Symbolgrößen, Schriftgrößen oder alles andere, das eine Zahl plus eine Einheit ist.
Slider ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der gesamte Feldsatz ist im Lieferumfang enthalten Master Addons Pro.
Was das Slider-Feld bewirkt #
- Es zeigt einen Schieberegler mit einem Zahlenfeld und einem Einheitenmenü im Elementorfeld.
- Sie legen das Minimum, Maximum und den Schritt sowie einen Startwert fest.
- Der Wert ist eine Zahl und eine Einheit zusammen, wie 24 und px.
- Sie verbinden es mit einer CSS Selectors-Reihe mit Ihrem CSS oder drucken es mit zwei Token auf der HTML- oder CSS-Registerkarte aus.
Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Zuerst.
Bevor Sie beginnen #
- WordPress mit installiertem und aktivem Elementor.
- Master Addons für Elementor und Master Addons Pro, beide aktiv Die Installationsführung Cover-einrichtung.
- Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Ratgeber ist ein “Team Grid” - Widget mit zwei Schiebereglern: Card Gap für das Leerzeichen zwischen den Karten und Avatar Size für die runden Initialen.
So fügen Sie ein Schiebereglerfeld hinzu #
- Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
- Klicken Sie auf die Stil Tab und fügen Sie einen Abschnitt hinzu, zum Beispiel “Grid Layout”.
- Typ
sliderIm Feldsuchfeld links. - Ziehen Schieber In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.
Sliderfeld-Optionen erklärt #
- Etikett Ist der Text über dem Schieberegler in Elementor, zum Beispiel “Card Gap”.
- Name Ist die eindeutige ID des Feldes und der Anfang seiner Token, so
card_gapgibt{{ card_gap.size }}. Nur Buchstaben, Zahlen und Unterstriche. - Beschreibung Unter dem Schieberegler in Elementor erscheint.
- Min. Wert, Maximaler Wert und Schritt Legen Sie die Reichweite fest und wie weit jede Bewegung des Griffs geht Card Gap verwendet 0 bis 80 in Schritten von 2.
- Standardwert Startnummer und Einheit ist, mit einem eigenen kleinen Schieberegler und Einheitenmenü festgelegt.
Geben Sie die Min, Max - und Step-Werte ein, auch wenn die Kästchen bereits 0, 100 und 1. Kästchen, die Sie nie berühren, werden nicht gespeichert, und ein Schieberegler, bei dem keines davon gespeichert ist, fällt auf die Bereiche von Elementor zurück: 0 bis 1000 für px, 0 bis 100 für % und 0 bis 10 für em und rem. Wenn Sie sie setzen, wird für jede Einheit der gleiche Bereich verwendet, also gilt für em wie für px 0 bis 80.
Es gibt keine Einstellung, für welche Einheiten erscheinen Editoren können px, %, em und rem wählen Weiter unten, Reaktionsfähige Kontrolle Fügt das Gerätesymbol hinzu, damit Desktop, Tablet und Mobiltelefon unterschiedliche Werte haben können.
Schließen Sie den Schieberegler mit CSS Selectors an #
Scrollen zu CSS-Selektoren und klicken Artikel hinzufügen. Die neue Zeile wird mit einem Beispiel gefüllt (.text-1, .text-2 und color: {{VALUE}};), also ersetzen Sie beide Kästchen:
CSS Selector: .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};
{{SIZE}} Wird durch die Nummer und ersetzt {{UNIT}} Mit der gewählten Einheit, so wird 24 px gap: 24px;. Sie brauchen nicht {{WRAPPER}} Im Selektor, weil der Builder es für Sie hinzufügt Fügen Sie weitere Zeilen hinzu, um denselben Wert auf anderen Elementen zu verwenden.
Verwenden Sie diese Zeilen anstelle der einzelnen Zeilen Wähler Kasten unten in der Sidebar Diese Box hat keinen Platz für eine CSS-Eigenschaft, kann also keine Arbeitsregel für einen Slider schreiben.
Verwenden Sie stattdessen den Wert in Ihrer Vorlage #
Den Wert können Sie auch im Reiter HTML oder CSS ausdrucken, die Größe und die Einheit als zwei Token nebeneinander schreiben Der Schieberegler Avatar Size stellt die Avatarbreite und - höhe so ein:
.team-avatar {
width: {{ avatar_size.size }}{{ avatar_size.unit }};
height: {{ avatar_size.size }}{{ avatar_size.unit }};
}
Ein kahl {{ avatar_size }} Druckt nichts Man kann die Zahl auch in einer Bedingung vergleichen, zum Beispiel {% if card_gap.size >= 40 %}. Wenn Responsive Control eingeschaltet ist, verwenden Sie eine CSS Selectors-Zeile, da Elementor dann für jedes Gerät eine separate Regel schreibt.
Klicken Sie auf Einstellungen speichern Wenn du fertig bist.
Verwenden Sie die Schiebereglersteuerung in Elementor #
Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Wählen Sie das Widget und öffnen Sie die Stil Tab. Jeder Schieberegler zeigt einen Griff, eine Zahlenbox und ein Einheitenetikett.
Ziehen Sie den Griff oder geben Sie eine Zahl ein, und das Widget aktualisiert sich sofort Klicken Sie auf die Einheitenbezeichnung, um zwischen px, %, em und rem zu wechseln.
Hier wird der Spalt auf 48 px und die Avatare auf 96 px erhöht:
Häufige Anwendungsfälle #
- Lücken zwischen Karten, Spalten und Listenelementen.
- Breite, maximale Breite oder Höhe eines Bildes, einer Karte oder eines Abschnitts.
- Symbol-, Avatar- und Abzeichengrößen.
- Schriftgröße oder Zeilenhöhe für ein Element.
- Grenzradius oder Grenzbreite, wenn alle Seiten einen Wert gemeinsam haben.
Tipps für die Arbeit mit dem Slider-Feld #
- Geben Sie immer Min, Max und Step ein, damit der Schieberegler eine sinnvolle Reichweite hat.
- Wählen Sie einen Bereich aus, der zu jeder von Editoren gewählten Einheit passt. 0 bis 80 ist für px in Ordnung, für em jedoch sehr groß.
- Behalten Sie einen Basiswert für die Eigenschaft im CSS-Tab bei, z
gap: 24px;Das Widget sieht also genau aus, bevor jemand den Schieberegler berührt. - Ersetzen Sie den Beispieltext in einer neuen CSS Selectors-Zeile. So belassen, zielt die Zeile auf Klassen, die Ihr Widget nicht hat.
- Für Werte mit vier Seiten, wie Polsterung oder Rand, verwenden Sie die Maße Feld.
Häufig gestellte Fragen #
Ist das Slider-Feld frei?
No. Slider ist eines der Pro-Felder im Widget Builder, daher muss Master Addons Pro aktiv sein, bevor Sie es zu einem Widget hinzufügen können.
Warum druckt mein Slider-Token nichts?
Ein Schieberegler enthält also eine Zahl und eine Einheit {{ field_name }} Auf eigene drucke nichts Verwenden {{ field_name.size }}{{ field_name.unit }}.
Warum geht der Schieberegler auf 1000?
Min, Max und Step wurden nicht gespeichert Geben Sie Werte in alle drei Boxen ein, auch wenn diese bereits 0, 100 und 1 anzeigen, dann speichern Sie das Widget.
Kann ich den Schieberegler auf nur px beschränken?
Nicht aus dem Feldfeld Editoren können px, %, em oder rem auswählen Wählen Sie einen Bereich, der für alle vier funktioniert, oder legen Sie einen sinnvollen Standard fest, sodass px die Starteinheit ist.
Benötige ich {{WRAPPER}} im CSS Selector?
Nein. Der Bauherr fügt hinzu {{WRAPPER}} Vor dem Selektor für Sie, also .team-grid Genügt.
Einwickelnd #
Fügen Sie das Feld Schieberegler hinzu, geben Sie Min, Max und Step ein, setzen Sie eine Voreinstellung und verbinden Sie es mit einer CSS Selectors-Zeile wie z gap: {{SIZE}}{{UNIT}};. Nutzen Sie die .size und .unit Token, wenn der Wert in Ihre HTML - oder CSS-Registerkarte gehört Weitere Größenkontrollen finden Sie in der Abmessungen und Typografie Felder, und überprüfen Preisbildung Für das, was jeder Plan beinhaltet.
