Nummer

Das Feld Anzahl fügt eine numerische Eingabe zu einem benutzerdefinierten Widget hinzu, das Sie mit den Master-Addons erstellen Widget-builder. Spaltenzählungen, Schriftgrößen, Items pro Zeile, Sternbewertungen: alles, was nur als Zahl sinnvoll ist, gehört hier her, man stellt den erlaubten Bereich im Builder ein, und Editoren bekommen eine Eingabe, die sie darin hält.

Nummer ist eines der Felder, die Sie im Widget Builder der kostenlosen Version verwenden können Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was das Feld Zahl bewirkt #

• Fügt dem Panel Ihres Widgets in Elementor eine numerische Eingabe mit Spinnerpfeilen hinzu.
• Begrenzt, was Redakteure durchgeben können Min, Max und Schritt.
• Druckt die Nummer überall dort, wo Sie ihr Token platzieren, im HTML-, CSS- oder JS-Panel.
• Funktioniert also in Vergleichen {% if columns > 2 %} Teil des Markups umschalten kann.

Neu beim Bauherrn? lesen Sie die Übersicht über Widget Builder Kommen Sie dann zuerst mit geöffnetem Widget zurück.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor installiert und aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein “Stat Counter” Widget mit zwei Zahlenfeldern: columns (1 bis 4) auf der Registerkarte Inhalt und stat_size (20 bis 96) auf der Registerkarte Stil.

So fügen Sie ein Zahlenfeld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Fügen Sie einen Abschnitt auf der Registerkarte hinzu, auf die die Einstellung gehört. Eine Layoutanzahl passt InhaltEine Größe passt Stil.
3. Typ number Im Feldsuchfeld links.
4. Ziehen Nummer In den Abschnitt Klicken Sie auf den Bleistift auf dem Feld, um seine Einstellungen zu öffnen.

Zahlenfeldoptionen erklärt #

• Etikett: Der Text neben der Eingabe in Elementor, zum Beispiel “Spalten”.
• Name: Die eindeutige ID des Feldes und der Name seines Tokens Verwenden Sie zum Beispiel nur Buchstaben, Zahlen und Unterstriche columns.
• Beschreibung: Ein unter der Eingabe in Elementor gezeigter Hinweis Sagen Sie, was die Zahl steuert und wenn es darauf ankommt, die Einheit.
• Platzhalter: Grauer Text angezeigt, während die Eingabe leer ist.
• Min und Max: Die niedrigsten und höchsten Werte, die die Eingabe akzeptiert.
• Schritt: Wie weit sich die Spinnerpfeile bei jedem Klick bewegen Verwenden Sie 1 für ganze Zahlen, 2 für gerade Zahlen, 0,5 für halbe Schritte.
• Standardwert: Die Nummer, mit der eine neue Kopie des Widgets beginnt.

Min, Max und Step erreichen die Eingabe selbst, in unseren Tests ist das Feld Spalten als Zahleneingabe mit min 1, max 4 und Schritt 1 in Elementor angekommen, die Pfeile bleiben also an den Enden des Bereichs stehen.

Gemeinsame Einstellungen funktionieren wie in anderen Bereichen, einschließlich Bedingungen Wenn die Zahl erst erscheinen soll, wenn ein anderes Feld gesetzt ist.

Drucken Sie die Nummer in Ihrer Vorlage aus #

Der Token funktioniert in allen drei Panels, im Widget Stat Counter setzt der HTML den Wert in ein Datenattribut und verwendet ihn in einem Vergleich:

<div class="stats-grid" data-columns="{{ columns }}">
  ...
</div>
{% if columns > 2 %}
<p class="stats-note">Tip: drop to two columns for a narrower layout.</p>
{% endif %}

Im CSS-Panel verdient normalerweise ein Zahlenfeld seinen Halt. Stellen Sie das Gerät außerhalb der Zahnspange auf, da das Feld eine bloße Zahl speichert:

.stats-grid { grid-template-columns: repeat({{ columns }}, 1fr); }
.stat-value { font-size: {{ stat_size }}px; }

Der gleiche Token funktioniert zum Beispiel im JS-Panel var perRow = {{ columns }};.

Geben Sie jedem Zahlenfeld einen Standardwert #

Ein leeres Feld druckt nichts, und das bricht stillschweigend die Regel drumherum Mit dem geräumten Feld Spalten wurde unser CSS repeat(, 1fr), welche Browser fallen lassen, und das Raster fiel auf eine einzige Spalte zurück Die {% if columns > 2 %} Check hat gleichzeitig aufgehört zu passen Nichts im Panel warnt Sie.

Legen Sie also einen Standardwert auf ein beliebiges Zahlenfeld fest, das CSS oder JavaScript einspeist, und behandeln Sie einen leeren Wert so weit wie möglich in Ihrer Vorlage, wenn Redakteure ihn löschen können.

Lassen Sie den Selektor in einem Zahlenfeld leer #

Die Selector-Box verhält sich für dieses Feld seltsam und verursachte in unseren Tests zwei Probleme gleichzeitig:

• Es schrieb die nackte Zahl ohne Eigenschaftsnamen in die Regel, sodass kein brauchbares CSS dabei herauskam.
• Während ein Selector ausgefüllt wurde, erreichte der Standardwert des Feldes nicht mehr den Token. Ein Widget, das niemand berührt hatte, wurde gerendert font-size:px Auf dem Frontend. Das Löschen des Selectors hat es behoben und dasselbe unberührte Widget gerendert font-size:44px.

Drucken Sie stattdessen das Token im CSS-Panel, wie oben gezeigt. Dadurch bleibt die Standardeinstellung funktionsfähig und Sie können die Eigenschaft und Einheit selbst schreiben.

Verwenden Sie den Nummernregler in Elementor #

Das Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Jedes Feld Zahl zeigt als kleine Eingabe unter seinem Etikett, auf der Registerkarte, wo Sie es platziert haben Geben Sie einen Wert ein oder verwenden Sie die Pfeile, und die Vorschau aktualisiert.

Hier das gleiche Widget an vier Spalten und an zwei Spalten mit einer größeren Zahlengröße:

Häufige Anwendungsfälle #

• Spalten - oder Artikelzählungen in Gittern und Karussells.
• Schriftgrößen, Abstandswerte und Breiten in Pixeln.
• Sternebewertungen, Rezensionsergebnisse und Prozentsätze.
• Zählt und beschleunigt ein Skript, z. B. Elemente pro Folie oder eine Verzögerung bei der automatischen Wiedergabe.

Tipps für die Arbeit mit dem Feld Nummer #

• Legen Sie immer einen Standardwert fest. Es ist der Unterschied zwischen einem funktionierenden Widget und einer stillschweigend gebrochenen Regel.
• Stellen Sie Min und Max auf das ein, was das Design erfordern kann. Ein Gitter, das für vier Säulen gebaut ist, sollte nicht 12 akzeptieren.
• Geben Sie das Gerät in das Etikett oder die Beschreibung ein“wie z.B. “Zahlengröße” mit “in Pixeln”, da das Feld eine einfache Zahl speichert.
• Halten Sie die Einheit außerhalb des Tokens In CSS: {{ stat_size }}px, nicht innerhalb der Zahnspange.
• Möchten Sie stattdessen einen Schieberegler mit Einheiten? Die Schieberfeld Pro-Feld ist, das Editoren einen Drag-Handle gibt.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie ein Zahlenfeld hinzu, setzen Sie Min, Max, Schritt und einen Standardwert, dann drucken Sie das Token dort aus, wo Sie es benötigen, und fügen Sie die Einheit selbst hinzu Lassen Sie Selector leer, damit die Standardeinstellung weiter funktioniert Für einen Drag-Handle mit Einheitenoptionen sehen Sie sich die an Schieberfeldund überprüfen Preisbildung Für das, was jeder Plan beinhaltet.