Number

Feltet Tal tilføjer et numerisk input til en brugerdefineret widget, du bygger med Master Addons Widget Builder. Kolonne tæller, skriftstørrelser, elementer pr række, stjerne ratings: alt, hvad der kun giver mening som et tal hører til her. Du indstiller det tilladte område i bygherren, og redaktører får et input, der holder dem inde i det.

Nummer er et af de felter, du kan bruge i den gratis versions Widget Builder. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt af felter leveres med Master Addons Pro.

Hvad feltet Tal gør #

• Tilføjer et numerisk input med spinnerpile til din widgets panel i Elementor.
• Begrænser hvad redaktører kan komme ind igennem Min, Max og Step.
• Udskriver nummeret, uanset hvor du placerer dets token, i HTML-, CSS- eller JS-panelet.
• Arbejder i sammenligninger, så {% if columns > 2 %} kan skifte en del af opmærkningen.

Ny hos bygherren? Læs den Widget Builder oversigt først, så kom tilbage med en widget åben.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Stat Counter” widget med to Tal felter: columns (1 til 4) på fanen Indhold og stat_size (20 til 96) på fanen Stil.

Sådan tilføjes et Nummerfelt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Tilføj et afsnit på den fane, indstillingen hører til på. En layouttælling passer Content, en størrelse passer Style.
3. Type number i feltsøgefeltet til venstre.
4. Drag Number ind i sektionen. Klik på blyanten på feltet for at åbne dens indstillinger.

Talfeltindstillinger forklaret #

• Etiket: teksten ved siden af inputtet i Elementor, for eksempel “Kolonner”.
• Navn: feltets unikke id og navnet på dets token. Brug kun bogstaver, tal og understregninger, f.eks columns.
• Beskrivelse: et tip vist under inputtet i Elementor. Sig, hvad tallet styrer, og hvis det betyder noget, enheden.
• Pladsholder: grå tekst vist, mens inputtet er tomt.
• Min og Max: de laveste og højeste værdier input accepterer.
• Trin: hvor langt spinnerpilene bevæger sig hvert klik. Brug 1 for hele tal, 2 for lige tal, 0,5 for halve trin.
• Standardværdi: nummeret en ny kopi af widgetten starter med.

Min, Max og Step når selve inputtet. I vores tests ankom feltet Columns til Elementor som talinput med min 1, max 4 og step 1, så pilene stopper ved enderne af intervallet.

Fælles Indstillinger fungerer som på andre felter, herunder Betingelser hvis tallet først skal vises, når et andet felt er indstillet.

Udskriv nummeret i din skabelon #

Tokenet fungerer i alle tre paneler. I Stat Counter-widgetten sætter HTML værdien i en dataattribut og bruger den i en sammenligning:

<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 %}

CSS-panelet er der, hvor et talfelt normalt tjener sit hold. Sæt enheden uden for bøjlerne, fordi feltet gemmer et nøgent tal:

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

Det samme token fungerer for eksempel i JS-panelet var perRow = {{ columns }};.

Giv hvert talfelt en standardværdi #

Et tomt felt udskriver intet, og det bryder lydløst reglen omkring det. Med feltet Kolonner ryddet blev vores CSS repeat(, 1fr), hvilke browsere dropper, og gitteret faldt tilbage til en enkelt kolonne. Den {% if columns > 2 %} check stoppede matchende på samme tid. Intet i panelet advarer dig.

Så indstil en standardværdi på et hvilket som helst talfelt, der føder CSS eller JavaScript, og behandl en tom værdi som muligt i din skabelon, hvis redaktører kan rydde den.

Lad Selector være tom på et Nummerfelt #

Selector boksen opfører sig mærkeligt for dette felt, og i vores tests forårsagede det to problemer på én gang:

• Det skrev det nøgne nummer ind i reglen uden ejendomsnavn, så der kom ingen brugbar CSS ud af det.
• Mens en Vælger blev udfyldt, holdt feltets Standardværdi op med at nå tokenet. En widget, ingen havde rørt ved, gengivet font-size:px på forenden. Rydning af Selector fikset det, og den samme uberørte widget gengivet font-size:44px.

Udskriv tokenet i CSS-panelet i stedet, som vist ovenfor. Det holder standarden i gang og lader dig selv skrive egenskaben og enheden.

Brug kontrolelementet Tal i Elementor #

Tilføj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Hvert Nummerfelt vises som et lille input under dets etiket, på den fane, hvor du placerede det. Skriv en værdi, eller brug pilene, og forhåndsvisningsopdateringerne.

Her er den samme widget ved fire kolonner og ved to kolonner med en større talstørrelse:

Almindelige brugstilfælde #

• Kolonne- eller genstandstællinger i gitre og karruseller.
• Skriftstørrelser, afstandsværdier og bredder i pixels.
• Stjernevurderinger, anmeldelsesscore og procenter.
• Tæller og fremskynder et script, som f.eks. elementer pr. slide eller en forsinkelse af automatisk afspilning.

Tips til at arbejde med feltet Tal #

• Indstil altid en standardværdi. Det er forskellen mellem en fungerende widget og en lydløst brudt regel.
• Sæt Min og Max til, hvad designet kan tage. Et gitter bygget til fire søjler bør ikke acceptere 12.
• Sæt enheden i etiketten eller beskrivelsen, såsom “Number Size” med “i pixels”, da feltet gemmer et almindeligt tal.
• Hold enheden uden for tokenet i CSS: {{ stat_size }}px, ikke inde i bøjlerne.
• Vil du have en skyder med enheder i stedet? The Skyderfelt er et Pro-felt, der giver redaktører et trækhåndtag.

Ofte stillede spørgsmål #

Indpakning #

Tilføj et Talfelt, indstil Min, Max, Trin og en Standardværdi, og udskriv derefter tokenet, hvor du har brug for det, og tilføj selv enheden. Lad Selector være tom, så standarden bliver ved med at fungere. For et trækhåndtag med enhedsindstillinger, se Skyderfelt, og kontrollere prissætning for hvad hver plan indeholder.