Additions maîtres
Tarification
Voir les catégories

Numéro

Roy Jemee
Mis à jour le 18 septembre 2026

5 min de lecture

Le champ Nombre ajoute une entrée numérique à un widget personnalisé que vous construisez avec les modules complémentaires principaux Constructeur de widgets. Nombre de colonnes, tailles de polices, éléments par ligne, notes d'étoiles : tout ce qui n'a de sens qu'à mesure qu'un nombre appartient ici Vous définissez la plage autorisée dans le constructeur, et les éditeurs obtiennent une entrée qui les maintient à l'intérieur.

Le numéro est l'un des champs que vous pouvez utiliser dans le Widget Builder de la version gratuite Le plugin gratuit comprend un Widget Builder limité, et l'ensemble complet des champs est livré avec Maître Addons Pro.

Paramètres du champ Nombre dans le constructeur de widgets Master Addons à côté de l'entrée Colonnes dans Elementor pour un widget de compteur de statistiques

Ce que fait le champ Nombre #

  • Ajoute une entrée numérique avec des flèches de spinner au panneau de votre widget dans Elementor.
  • Limite ce que les éditeurs peuvent saisir Min, Max et Étape.
  • Imprime le numéro partout où vous placez son jeton, dans le panneau HTML, CSS ou JS.
  • Fonctionne dans les comparaisons, donc {% if columns > 2 %} peut changer une partie du balisage.

Nouveau au constructeur ? lire le Aperçu du constructeur de widgets tout d'abord, revenez avec un widget ouvert.

Avant de commencer #

  • WordPress avec Elementor installé et actif.
  • Modules complémentaires principaux pour Elementor installés et actifs. Le guide d'installation couverture configuration.
  • Un widget ouvert dans le Widget Builder L'exemple de ce guide est un widget “Stat Counter” avec deux champs Nombre : columns (1 à 4) sur l'onglet Contenu et stat_size (20 à 96) sur l'onglet Style.

Comment ajouter un champ Nombre #

  1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
  2. Ajouter une section sur l'onglet sur laquelle appartient le paramètre Un compte de mise en page s'adapte Contenu, une taille convient Style.
  3. Type number dans le champ champ rechercher box à gauche.
  4. Glisser Numéro dans la section Cliquez sur le crayon sur le champ pour ouvrir ses paramètres.
Champ de numéro trouvé par numéro de recherche dans le Widget Builder avec un champ Colonnes dans la section Stats

Options de champ de numéro expliquées #

Options de champ de numéro avec étiquette, nom, description, espace réservé, Min, Max, étape et valeur par défaut
  • Étiquette: le texte à côté de l'entrée dans Elementor, par exemple “Columns”.
  • Nom: l'identifiant unique du champ et le nom de son jeton Utilisez uniquement des lettres, des chiffres et des traits de soulignement, par exemple columns.
  • Description: un indice affiché sous l'entrée dans Elementor. Dites ce que le numéro contrôle et, si cela compte, l'unité.
  • Espace réservé : texte gris affiché lorsque l'entrée est vide.
  • Min et Max : les valeurs les plus basses et les plus élevées acceptées par l’entrée.
  • Étape: jusqu'où les flèches de spinner se déplacent à chaque clic Utilisez 1 pour les nombres entiers, 2 pour les nombres pairs, 0,5 pour les demi-pas.
  • Valeur par défaut : le numéro avec lequel commence une nouvelle copie du widget.

Min, Max et Step atteignent l'entrée elle-même Dans nos tests le champ Colonnes est arrivé en Elémentor comme entrée de nombre avec min 1, max 4 et étape 1, donc les flèches s'arrêtent aux extrémités de la plage.

Common Settings fonctionne comme sur d'autres champs, notamment Conditions si le numéro ne doit apparaître que lorsqu'un autre champ est défini.

Imprimez le numéro dans votre modèle #

Le jeton fonctionne dans les trois panneaux Dans le widget Stat Counter, le HTML met la valeur dans un attribut de données et l'utilise dans une comparaison :

<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 %}
Widget HTML imprimant le jeton colonnes dans un attribut de données et le comparant avec un bloc if

Le panneau CSS est l'endroit où un champ numérique gagne habituellement sa garde Mettez l'unité à l'extérieur des appareils orthodontiques, car le champ stocke un nombre nu :

.stats-grid { grid-template-columns: repeat({{ columns }}, 1fr); }
.stat-value { font-size: {{ stat_size }}px; }
Widget CSS utilisant le jeton colonnes dans une répétition de grille et le jeton stat_size avec px en dehors des accolades

Le même jeton fonctionne dans le panneau JS, par exemple var perRow = {{ columns }};.

Donnez à chaque champ Nombre une valeur par défaut #

Un champ vide n'imprime rien, et cela enfreint silencieusement la règle qui l'entoure. Avec le champ Colonnes effacé, notre CSS est devenu repeat(, 1fr)[TRADUCTION], quels navigateurs baissent, et la grille est retombée à une seule colonne Le {% if columns > 2 %} check a cessé de correspondre en même temps Rien dans le panneau ne vous prévient.

Définissez donc une valeur par défaut sur n'importe quel champ Nombre qui alimente CSS ou JavaScript, et traitez une valeur vide comme possible dans votre modèle si les éditeurs peuvent la vider.

Laissez Selector vide sur un champ Nombre #

La boîte Selector se comporte bizarrement pour ce champ, et dans nos tests, elle a causé deux problèmes à la fois :

  • Il a écrit le numéro nu dans la règle sans nom de propriété, donc aucun CSS utilisable n'en est sorti.
  • Pendant qu'un sélecteur était rempli, la valeur par défaut du champ a cessé d'atteindre le jeton. Un widget que personne n'avait touché rendu font-size:px sur le front-end. effacement du sélecteur l'a fixé, et le même widget intact rendu font-size:44px.

Imprimez le jeton dans le panneau CSS à la place, comme indiqué ci-dessus. Cela permet de maintenir la valeur par défaut et de vous permettre d'écrire vous-même la propriété et l'unité.

Utilisez le contrôle Nombre dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte Chaque champ Numéro s'affiche comme une petite entrée sous son étiquette, sur l'onglet où vous l'avez placé Tapez une valeur ou utilisez les flèches, et les mises à jour de l'aperçu.

Onglet Contenu de l'élémenteur avec l'entrée Colonnes et l'onglet Style avec l'entrée Taille du nombre

Voici le même widget à quatre colonnes et à deux colonnes avec une taille de nombre plus grande :

Compteur Stat sur l'extrémité avant avec quatre colonnes et avec deux colonnes à un plus grand nombre

Cas d'utilisation courants #

  • La colonne ou l'objet compte dans les grilles et les carrousels.
  • Tailles des polices, valeurs d'espacement et largeurs en pixels.
  • Notes d'étoiles, notes d'évaluation et pourcentages.
  • Compte et accélère les lectures d'un script, comme les éléments par diapositive ou un délai de lecture automatique.

Conseils pour travailler avec le champ Nombre #

  • Définissez toujours une valeur par défaut. C'est la différence entre un widget fonctionnel et une règle brisée silencieusement.
  • Définissez Min et Max sur ce que le design peut prendre. Une grille construite pour quatre colonnes ne devrait pas en accepter 12.
  • Mettez l'unité dans l'étiquette ou la description« , comme “Number Size” avec “in pixels”, puisque le champ stocke un nombre clair ».
  • Gardez l'unité en dehors du jeton en CSS : {{ stat_size }}px[TRADUCTION], pas à l'intérieur des appareils orthodontiques.
  • Vous voulez plutôt un curseur avec des unités ? Le Champ de curseur est un champ Pro qui donne aux éditeurs une poignée de glisser.

Foire aux questions #

Le champ Numéro est-il disponible dans la version gratuite ?

Oui. Number est l'un des champs que vous pouvez utiliser dans le Widget Builder de la version gratuite L'ensemble complet des champs Widget Builder est livré avec Master Addons Pro.

Min, Max et Step limitent-ils réellement le type d'éditeur ?

Ils atteignent l'entrée dans Elementor, donc les flèches s'arrêtent à la plage que vous définissez. Définissez également une valeur par défaut, de sorte que le champ n'est jamais vide.

Pourquoi ma règle CSS a-t-elle cessé de fonctionner ?

Le champ est probablement vide Un champ Nombre vide n'imprime rien, donc une règle comme repeat(, 1fr) devient invalide et le navigateur le laisse tomber Définir une valeur par défaut.

Puis-je utiliser l'option Selector pour styliser avec un champ Numéro ?

Pas utilement Dans nos tests, il a écrit le nombre nu sans propriété, et pendant qu'il était rempli dans le champ par défaut a cessé d'atteindre le modèle Imprimez le jeton dans le panneau CSS à la place.

Comment ajouter une unité comme px ou % ?

Écrivez-le en dehors des accolades, par exemple font-size: {{ stat_size }}px;. Le champ stocke uniquement le numéro.

Envelopper #

Ajoutez un champ Nombre, définissez Min, Max, Step et une valeur par défaut, puis imprimez le jeton là où vous en avez besoin et ajoutez vous-même l'unité Laissez Selector vide pour que la valeur par défaut continue de fonctionner Pour une poignée de glisser avec des options d'unité, consultez le Champ de curseuret vérifiez tarification pour ce que chaque plan comprend.

Quels sont vos Sentiments