Nummer

Die Zahlenfeld Fügt dem Panel eines benutzerdefinierten Widgets eine einfache numerische Eingabe hinzu Spaltenzählungen, Pixelbreiten, Elemente pro Folie, Sternbewertungen: Jede Einstellung, die nur als Zahl sinnvoll ist, gehört hierher. Innerhalb der Master-Addons Widget-builderIn „Stellen Sie den zulässigen Bereich einmal ein und der Editor erhält eine Eingabe, die nur Zahlen darin akzeptiert.

Das Feld Nummer unterstützt Bedingungen Zum Anzeigen oder Verstecken der Steuerung basierend auf einem anderen Feld und deren Zeichen durch die des Erbauers Twig-Syntax-Vorlagen-Engine, wo numerische Vergleiche wie {% if price > 0 %} Arbeiten Sie aus dem Kasten heraus Beide Anleitungen behandeln Einrichtung und Einschränkungen.

Der Wert verbindet sich über ein Template-Token mit Ihrem Widget. Schreiben {{ your_field_name }} Im HTML, CSS, oder JS Panel und die dort zum Renderzeitpunkt druckten Zahlen Ein Steuerelement kann Markup, Styling, und Scriptverhalten gleichzeitig steuern.

Was das Feld Zahl bewirkt #

• Rendert eine numerische Eingabe im Elementor-Panel des Widgets mit Browser-Spinnerpfeilen.
• Erzwingt eine Reichweite durch Min, Max, und Schritt Optionen, die Sie im Builder definieren.
• Gibt eine einfache Zahl aus, wo immer Sie sie platzieren {{ token }} Im HTML-, CSS- oder JS-Panel.
• Funktioniert in Vergleichen, so dass die Vorlage mit verzweigen kann {% if my_number > 3 %}.
• Unterstützt den Selektormechanismus von Elementor als alternative Verkabelung und schreibt den Wert direkt in eine CSS-Regel.

Noch nie ein Widget mit dem Builder gebaut? die Übersicht über Widget Builder Durchläuft den Editor selbst und ist zehn Minuten wert, bevor man in einzelne Felder gelangt.

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 öffnet sich im Widget Builder-Editor. Unser Beispiel ist ein Client-Logo-Karussell, bei dem ein Zahlenfeld benannt ist logos_per_slide Steuert, wie viele Logos auf einmal angezeigt werden.

So fügen Sie ein Zahlenfeld hinzu #

Ziehen Sie die Nummer Feld aus dem Feldfeld in einen Abschnitt unter dem Inhalt oder Stil Tab. Sobald es landet, öffnen sich die Optionen des Feldes auf der linken Seite des Erbauers.

Zahlenfeldoptionen erklärt #

• Etikett: Der neben der Eingabe in Elementor abgebildete Text, zum Beispiel “Logos Per Slide”.
• Name: Die eindeutige Kennung, auf die sich Ihre Vorlagen beziehen Nur Buchstaben, Zahlen und Unterstriche, zum Beispiel logos_per_slide.
• Standard: Die Nummer, mit der das Widget bei einem frischen Tropfen beginnt.
• Platzhalter: Hinweistext angezeigt, während die Eingabe leer ist.
• Min. / Max.: Die niedrigsten und höchsten Werte, die die Eingabe akzeptiert.
• Schritt: Das Inkrement bewegen sich die Spinnerpfeile beispielsweise um 1 Für ganze Zahlen oder 0.5 Für halbe Schritte.
• Beschreibung: Optionaler Helfertext unter der Kontrolle.
• Etikett, Etikettenblock, Trennzeichen anzeigen: Die Standardanzeige schaltet um, plus Bedingungen für die Anzeige des Feldes nur, wenn ein anderes Steuerelement einen bestimmten Wert hat.

Verbinden Sie das Zahlenfeld mit seinem Token #

Das Feld Zahl ist ein Tokenfeld Wo auch immer {{ logos_per_slide }} Panel erscheint, druckt an seiner Stelle der aktuelle Wert Alle drei Panels akzeptieren ihn:

<!-- HTML panel -->
<div class="logo-track" data-count="{{ logos_per_slide }}">

/* CSS panel */
.logo-track { grid-template-columns: repeat({{ logos_per_slide }}, 1fr); }
.logo-item { min-width: {{ logo_min_width }}px; }

// JS panel
var perSlide = {{ logos_per_slide }};

Eine Sache, die hier lautlos scheitert: Ein leeres Feld druckt eine leere Zeichenfolge aus, und repeat(, 1fr) CSS nicht gültig ist, also lässt der Browser die ganze Regel ohne Beanstandung fallen, wenn das Token einen CSS - oder JS-Ausdruck füttert, setzt man einen Default, damit ein frisches Widget nie mit einem Loch rendert.

Weil der Wert eine Zahl ist, funktionieren Vergleiche in der Vorlagenlogik Ein Karussell kann seine Navigationspfeile überspringen, wenn auf einer Folie bereits alles passt:

{% if logos_per_slide > 4 %}
<button class="logo-nav">&rarr;</button>
{% endif %}

Das Feld unterstützt auch Elementors Selektoren Verdrahtung als Alternative Beachten Sie, dass Elementor für Number den nackten Wert eingibt und nicht eine vollständige Deklaration, sodass der Selektoreneintrag beispielsweise die gesamte Eigenschaft buchstabieren muss width: {{VALUE}}px;.

Pass auf: Wenn der Token innerhalb eines CSS- oder JS-Ausdrucks landet, legen Sie die Einheit außerhalb der Zahnspange. width: {{ logo_min_width }}px Funktioniert; erwartet, dass das Feld eine eigene Einheit trägt, nicht, denn der Wert ist eine bloße Zahl, Wenn Sie den Editor benötigen, um die Einheit auch auszuwählen, passt das Feld Schieber besser.

Verwenden Sie den Nummernregler in Elementor #

Geben Sie Ihr benutzerdefiniertes Widget auf eine Seite in Elementor (laden Sie zuerst den Editor neu, wenn die Seite bereits geöffnet war) Das Feld Anzahl erscheint als kleine Eingabe mit Spinnerpfeilen unter dem von Ihnen festgelegten Label Geben Sie einen Wert ein oder klicken Sie auf die Pfeile Die Vorschau aktualisiert live, und Werte außerhalb des Min/Max-Bereichs werden von der Eingabe selbst abgelehnt.

Häufige Anwendungsfälle #

• Spalten - und Elementanzahl In ein CSS-Gitter oder eine Flex-Regel gedruckt.
• Karusselleinstellungen Wie Folien pro Ansicht oder Autoplay-Verzögerung, gelesen vom JS-Panel.
• Pixel - und Prozentwerte Dabei wird eine einzelne Einheit durch das Widget fixiert, beispielsweise eine Breite oder Lücke mit fester Einheit.
• Bewertungen und Punktzahlen dass die Vorlage mit Schwellenwerten vergleicht.
• Grenzen Wie “bei den meisten N Beiträgen anzeigen”, in das Skript des Widgets übergeben.

Tipps für die Arbeit mit dem Feld Nummer #

• Min und Max einstellen. Eine Spaltenanzahl von 0 oder 40 unterbricht die meisten Layouts; Die Begrenzung der Eingabe im Builder ist kostengünstiger als die Bewachung in der Vorlage.
• Match Step zur Bedeutung des Wertes. Ganze Artikel erhalten 1; Opazitätswerte erhalten 0.1.
• Versenden Sie einen vernünftigen Standard Das Widget rendert also richtig, sobald es weggelassen wird.
• Vergleichen Sie mit Zahlen, nicht mit Etiketten. {% if logos_per_slide > 4 %} Gültige Vorlagenlogik ist; es gibt hier keine Optionsetikette zum Vergleichen, im Gegensatz zu einem Feld auswählen.
• Vollständige Deklarationen in Selektoreneinträgen. Wenn Sie das Feld über die Option Selector anstelle eines Tokens übertragen, schreiben Sie die vollständige Eigenschaft, da Elementor nur den nackten Wert für Number einspeist.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Number leistet exakte Arbeit: eine beschränkte numerische Eingabe, ein Token, und der Wert landet überall dort, wo das Widget ihn benötigt, in Markup, Stilen oder Skript Koppeln Sie ihn mit dem Schalterfeld Für Ein/Aus-Verhalten und die Repeaterfeld Wann die Zählung von realen Gegenständen statt einer Einstellung ausgehen soll Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.