Número

El Campo numérico agrega una entrada numérica simple al panel de un widget personalizado. Recuentos de columnas, anchos de píxeles, elementos por diapositiva, calificaciones de estrellas: aquí pertenece cualquier configuración que solo tenga sentido como número. Dentro de los complementos maestros Creador de widgets, configura el rango permitido una vez y el editor obtiene una entrada que solo acepta números dentro de él.

El campo Número admite Condiciones para mostrar u ocultar el control basándose en otro campo, y su token se representa a través del del constructor Motor de plantilla de sintaxis de ramita, donde gustan las comparaciones numéricas {% if price > 0 %} trabaja desde el primer momento. Ambas guías cubren la configuración y las limitaciones.

El valor se conecta a su widget a través de un token de plantilla. Escribir {{ your_field_name }} en el panel HTML, CSS o JS y el número se imprime allí en el momento del renderizado. Un control puede controlar el marcado, el estilo y el comportamiento del script al mismo tiempo.

Qué hace el campo Número #

• Representa una entrada numérica en el panel Elementor del widget, con flechas giratorias del navegador.
• Impone un alcance Min, Máximo, y Paso opciones que defines en el constructor.
• Genera un número simple dondequiera que lo coloques {{ token }} en el panel HTML, CSS o JS.
• Funciona en comparaciones, por lo que la plantilla puede ramificarse {% if my_number > 3 %}.
• Admite el mecanismo de selectores de Elementor como cableado alternativo, escribiendo el valor directamente en una regla CSS.

¿nunca antes has creado un widget con el constructor? El Descripción general del creador de widgets recorre el editor y vale diez minutos antes de ingresar a campos individuales.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un carrusel de logotipos de cliente donde se nombra un campo Número logos_per_slide controla cuántos logotipos se muestran a la vez.

Cómo agregar un campo Número #

Arrastra el Número campo desde el panel de campos a una sección debajo del Contenido o Estilo pestaña. Tan pronto como aterriza, las opciones del campo se abren en el lado izquierdo del constructor.

Se explicaron las opciones de campos numéricos #

• Etiqueta: el texto que se muestra junto a la entrada en Elementor, por ejemplo “Logos por diapositiva”.
• Nombre: el identificador único al que se refieren sus plantillas. Sólo letras, números y guiones bajos, por ejemplo logos_per_slide.
• Predeterminado: el número con el que comienza el widget en una nueva entrega.
• Marcador de posición: se muestra texto de sugerencia mientras la entrada está vacía.
• Min/Max: los valores más bajos y más altos que acepta la entrada.
• Pas: el incremento por el que se mueven las flechas giratorias, por ejemplo 1 para números enteros o 0.5 durante medios pasos.
• Descripción: texto auxiliar opcional bajo el control.
• Mostrar etiqueta, bloque de etiquetas, separador: la pantalla estándar alterna, además de Condiciones para mostrar el campo solo cuando otro control tiene un valor determinado.

Conecte el campo Número con su token #

El campo Número es un campo simbólico. Dondequiera {{ logos_per_slide }} aparece en un panel, el valor actual se imprime en su lugar. Los tres paneles lo aceptan:

<!-- 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 }};

Una cosa que falla silenciosamente aquí: un campo vacío imprime una cadena vacía y repeat(, 1fr) no es CSS válido, por lo que el navegador elimina toda la regla sin quejarse. Si el token alimenta una expresión CSS o JS, establezca un valor predeterminado para que un widget nuevo nunca se represente con un agujero.

Debido a que el valor es un número, las comparaciones funcionan en lógica de plantilla. Un carrusel puede omitir sus flechas de navegación cuando todo ya cabe en una diapositiva:

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

El campo también es compatible con Elementor selectores cableado como alternativa. Tenga en cuenta que para Número, Elementor inyecta el valor mínimo en lugar de una declaración completa, por lo que la entrada del selector debe detallar toda la propiedad, por ejemplo width: {{VALUE}}px;.

Ai grijă: cuando el token aterrice dentro de una expresión CSS o JS, coloque la unidad fuera de los tirantes. width: {{ logo_min_width }}px funciona; esperar que el campo lleve su propia unidad no es así, porque el valor es un número simple. Si necesita que el editor elija la unidad también, el campo Control deslizante es el que mejor se adapta.

Utilice el control de números en Elementor #

Coloque su widget personalizado en una página de Elementor (recargue el editor primero si la página ya estaba abierta). El campo Número aparece como una pequeña entrada con flechas giratorias debajo de la etiqueta que establezca. Escriba un valor o haga clic en las flechas. La vista previa se actualiza en vivo y los valores fuera del rango Min/Max son rechazados por la propia entrada.

Casos de uso comunes #

• Recuentos de columnas y elementos impreso en una cuadrícula CSS o regla flexible.
• Ajustes del carrusel como diapositivas por vista o retardo de reproducción automática, leídas por el panel JS.
• Valores de píxeles y porcentajes donde el widget fija una sola unidad, como un ancho o espacio de unidad fija.
• Calificaciones y puntuaciones que la plantilla se compare con los umbrales.
• Límites como “mostrar como máximo N publicaciones”, pasado al script del widget.

Consejos para trabajar con el campo Número #

• Establezca Mín. y Máx. Un recuento de columnas de 0 o 40 romperá la mayoría de los diseños; delimitar la entrada en el constructor es más barato que protegerla en la plantilla.
• Haga coincidir el paso con el significado del valor. Los artículos completos obtienen 1; Los valores de estilo de opacidad obtienen 0.1.
• Envíe un valor predeterminado sensato entonces el widget se representa correctamente en el momento en que se cae.
• Compárese con números, no con etiquetas. {% if logos_per_slide > 4 %} es lógica de plantilla válida; No hay ninguna etiqueta de opción para comparar aquí, a diferencia de a Seleccionar campo.
• Declaraciones completas en entradas de selectores. Si conecta el campo a través de la opción Selector en lugar de un token, escriba la propiedad completa, ya que Elementor inyecta solo el valor mínimo de Número.

Preguntas frecuentes #

Envolviendo #

El campo Número del generador de widgets hace un trabajo exacto: una entrada numérica acotada, un token y el valor llega donde el widget lo necesita, en marcado, estilos o script. Emparejarlo con el Campo conmutador para comportamiento de encendido/apagado y el Campo repetidor cuando el recuento debería provenir de elementos reales en lugar de un entorno. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.