Número

El campo Número agrega una entrada numérica a un widget personalizado que cree con los complementos maestros Creador de widgets. Recuentos de columnas, tamaños de fuente, elementos por fila, calificaciones de estrellas: aquí todo lo que sólo tiene sentido como número. Usted establece el rango permitido en el generador y los editores obtienen una entrada que los mantiene dentro de él.

El número es uno de los campos que puede utilizar en el Widget Builder de la versión gratuita. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Número #

• Agrega una entrada numérica con flechas giratorias al panel de su widget en Elementor.
• Limita por qué pueden entrar los editores Min, Máximo y Paso.
• Imprime el número dondequiera que coloques su token, en el panel HTML, CSS o JS.
• Funciona en comparaciones, entonces {% if columns > 2 %} puede cambiar parte del marcado.

¿Nuevo para el constructor? Leer el Descripción general del creador de widgets primero, luego regresa con un widget abierto.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalados y activos. El guía de instalación configuración de cubiertas.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget de “Contador de estadísticas” con dos campos numéricos: columns (1 a 4) en la pestaña Contenido y stat_size (20 a 96) en la pestaña Estilo.

Cómo agregar un campo Número #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. Agregue una sección en la pestaña a la que pertenece la configuración. Se ajusta un recuento de diseños Contenido, un tamaño se ajusta Estilo.
3. Tipo number en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Número en la sección. Haga clic en el lápiz en el campo para abrir su configuración.

Se explicaron las opciones de campos numéricos #

• Etiqueta: el texto al lado de la entrada en Elementor, por ejemplo “Columnas”.
• Nombre: el ID único del campo y el nombre de su token. Utilice únicamente letras, números y guiones bajos, por ejemplo columns.
• Descripción: una pista que se muestra debajo de la entrada en Elementor. Di lo que controla el número y, si importa, la unidad.
• Marcador de posición: se muestra texto gris mientras la entrada está vacía.
• Min y Max: los valores más bajos y más altos que acepta la entrada.
• Pas: qué tan lejos se mueven las flechas giratorias cada clic. Utilice 1 para números enteros, 2 para números pares y 0,5 para medios pasos.
• Valoarea implicită: el número con el que comienza una nueva copia del widget.

Min, Max y Step llegan a la entrada misma. En nuestras pruebas, el campo Columnas llegó a Elementor como entrada numérica con min 1, max 4 y paso 1, por lo que las flechas se detienen en los extremos del rango.

La configuración común funciona como en otros campos, incluido Condiciones si el número sólo debería aparecer cuando se establece otro campo.

Imprime el número en tu plantilla #

El token funciona en los tres paneles. En el widget Stat Counter, el HTML coloca el valor en un atributo de datos y lo utiliza en una comparación:

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

El panel CSS es donde un campo numérico generalmente gana su valor. Coloque la unidad fuera de los tirantes, porque el campo almacena un número simple:

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

El mismo token funciona, por ejemplo, en el panel JS var perRow = {{ columns }};.

Dale a cada campo Número un Valor Predeterminado #

Un campo vacío no imprime nada y eso rompe silenciosamente la regla que lo rodea. Con el campo Columnas despejado, nuestro CSS se convirtió repeat(, 1fr), qué navegadores caen y la cuadrícula vuelve a caer a una sola columna. El {% if columns > 2 %} check dejó de coincidir al mismo tiempo. Nada en el panel te lo advierte.

Por lo tanto, establezca un valor predeterminado en cualquier campo Número que alimente CSS o JavaScript y trate un valor vacío como sea posible en su plantilla si los editores pueden borrarlo.

Deje el Selector vacío en un campo Número #

La caja Selector se comporta de manera extraña para este campo y en nuestras pruebas causó dos problemas a la vez:

• Escribió el número básico en la regla sin nombre de propiedad, por lo que no salió ningún CSS utilizable.
• Mientras se completaba un Selector, el Valor Predeterminado del campo dejó de llegar al token. Un widget que nadie había tocado renderizado font-size:px en el extremo frontal. Borrar el Selector lo solucionó y se representó el mismo widget intacto font-size:44px.

Imprima el token en el panel CSS, como se muestra arriba. Eso mantiene el valor predeterminado funcionando y le permite escribir la propiedad y la unidad usted mismo.

Utilice el control de números en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. Cada campo Número se muestra como una pequeña entrada debajo de su etiqueta, en la pestaña donde lo colocó. Escriba un valor o use las flechas y las actualizaciones de vista previa.

Aquí está el mismo widget en cuatro columnas y en dos columnas con un tamaño de número mayor:

Casos de uso comunes #

• Recuento de columnas o elementos en cuadrículas y carruseles.
• Tamaños de fuente, valores de espaciado y anchos en píxeles.
• Calificaciones de estrellas, puntuaciones de revisión y porcentajes.
• Cuenta y acelera las lecturas de un script, como elementos por diapositiva o un retraso de reproducción automática.

Consejos para trabajar con el campo Número #

• Establezca siempre un valor predeterminado. Es la diferencia entre un widget que funciona y una regla que se rompe silenciosamente.
• Establezca Min y Max según lo que pueda soportar el diseño. Una cuadrícula construida para cuatro columnas no debería aceptar 12.
• Coloque la unidad en la Etiqueta o Descripción, como “Tamaño de número” con “en píxeles”, ya que el campo almacena un número simple.
• Mantenga la unidad fuera del token și CSS: {{ stat_size }}px, no dentro de los tirantes.
• ¿quieres un control deslizante con unidades? El Campo deslizante es un campo Pro que brinda a los editores un identificador de arrastre.

Preguntas frecuentes #

Envolviendo #

Agregue un campo Número, establezca Min, Max, Paso y un Valor predeterminado, luego imprima el token donde lo necesite y agregue la unidad usted mismo. Deje el selector vacío para que el valor predeterminado siga funcionando. Para obtener un identificador de arrastre con opciones de unidad, consulte Campo deslizanteși verifică precios por lo que incluye cada plan.