número

o campo numérico Adiciona uma entrada numérica simples ao painel de um widget personalizado. Contagens de colunas, larguras de pixel, itens por slide, classificações de estrelas: qualquer configuração que faça sentido, pois um número pertence aqui. Dentro dos complementos mestres Construtor de widgets, você define o intervalo permitido uma vez e o editor obtém uma entrada que aceita apenas números dentro dele.

O valor se conecta ao seu widget por meio de um token de modelo. escrever {{ your_field_name }} No painel HTML, CSS ou JS e o número é impresso no momento da renderização. Um controle pode gerar marcações, estilo e comportamento de script ao mesmo tempo.

O que o campo numérico faz #

• Renderiza uma entrada numérica no painel Elementor do widget, com setas giratórias do navegador.
• impõe um intervalo através minuto, máximo, e degraus Opções que você define no construtor.
• Emite um número simples onde quer que você coloque seu {{ token }} No painel HTML, CSS ou JS.
• Funciona em comparações, para que o modelo possa ramificar com {% if my_number > 3 %}.
• Suporta o mecanismo de seletores do Elementor como uma fiação alternativa, escrevendo o valor diretamente em uma regra CSS.

Nunca construiu um widget com o construtor antes? o Visão geral do construtor de widgets Percorre o próprio editor e vale dez minutos antes de entrar em campos individuais.

Antes de começar #

• Wordpress por elementar Instalado e ativo.
• Complementos mestres para Elementor Instalado e ativo. Novo no plugin? veja o Guia de instalação.
• Um widget personalizado é aberto no editor de widgets do widget. Nosso exemplo é um carrossel de logotipo de clientes, onde um campo numérico nomeado logos_per_slide Controla quantos logotipos aparecem de uma vez.

Como adicionar um campo de número #

arraste o número campo do painel Campos em uma seção sob o contentar ou estilo guia. Assim que ele pousa, as opções do campo abrem no lado esquerdo do construtor.

Opções de campo de número explicadas #

• Etiqueta: O texto mostrado ao lado da entrada no Elementor, por exemplo, “logos por slide”.
• Nome: O identificador exclusivo aos quais seus modelos se referem. Letras, números e sublinhados apenas, por exemplo logos_per_slide.
• padrão: O número com o qual o widget começa em uma nova queda.
• Espaço reservado: Texto de dica mostrado enquanto a entrada está vazia.
• Min / Max: Os valores mais baixos e mais altos que a entrada aceita.
• Passo: O incremento pelas setas giratórias, por exemplo, 1 Para números inteiros ou 0.5 para meias etapas.
• Descrição: Texto auxiliar opcional sob o controle.
• Mostrar etiqueta, bloco de etiqueta, separador: O display padrão alterna, além das condições para mostrar o campo somente quando outro controle tem um determinado valor.

Conecte o campo numérico com seu token #

O campo de número é um campo de token. onde quer que {{ logos_per_slide }} Aparece em um painel, o valor atual é impresso em seu lugar. Todos os três painéis aceitam:

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

Uma coisa que falha silenciosamente aqui: um campo vazio imprime uma corda vazia e repeat(, 1fr) Não é um CSS válido, então o navegador descarta toda a regra sem reclamar. Se o token alimentar uma expressão CSS ou JS, defina um padrão para que um novo widget nunca seja renderizado com um buraco nele.

Como o valor é um número, as comparações funcionam na lógica do modelo. Um carrossel pode pular suas setas de navegação quando tudo já se encaixa em um slide:

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

O campo também suporta o Elementor seletores Fiação como alternativa. Observe que para o número, Elementor injeta o valor nu em vez de uma declaração completa, portanto, a entrada dos seletores deve especificar toda a propriedade, por exemplo width: {{VALUE}}px;.

Cuidado: Quando o token chegar dentro de uma expressão CSS ou JS, coloque a unidade fora das chaves. width: {{ logo_min_width }}px Funciona; esperar que o campo carregue sua própria unidade não, porque o valor é um número simples. Se você também precisa do editor para escolher a unidade, o campo deslizante é o mais adequado.

Use o controle de número no Elementor #

Solte seu widget personalizado em uma página no Elementor (recarregue o editor primeiro se a página já estiver aberta). O campo de número aparece como uma pequena entrada com setas giratórias sob o rótulo que você definir. Digite um valor ou clique nas setas. As atualizações de visualização ao vivo e os valores fora do intervalo MIN/MAX são rejeitados pela própria entrada.

Casos de uso comuns #

• Contagem de colunas e itens Impresso em uma grade CSS ou regra Flex.
• Configurações do carrossel como slides por visualização ou atraso de reprodução automática, lido pelo painel JS.
• Valores de pixel e porcentagem Onde uma única unidade é fixada pelo widget, como uma largura ou um intervalo de unidade fixa.
• Avaliações e pontuações que o modelo se compara com os limites.
• limites Como “mostrar no máximo n posts”, passado para o script do widget.

Dicas para trabalhar com o campo numérico #

• Defina Min e Max. Uma contagem de colunas de 0 ou 40 quebrará a maioria dos layouts; limitar a entrada no construtor é mais barato do que guardá-la no modelo.
• Combine o passo com o significado do valor. itens inteiros obter 1; os valores do estilo opacidade obtêm 0.1.
• enviar um padrão sensato Portanto, o widget é renderizado corretamente no momento em que é descartado.
• Compare com números, não com rótulos. {% if logos_per_slide > 4 %} é uma lógica de modelo válida; não há uma etiqueta de opção para comparar aqui, ao contrário de um Selecionar campo.
• Declarações completas nas entradas seletores. Se você conectar o campo por meio da opção seletor em vez de um token, escreva a propriedade Complete, pois Elementor injeta apenas o valor básico para o número.

Perguntas frequentes #

Embrulhando #

O campo Número do construtor de widgets funciona exatamente: uma entrada numérica limitada, um token e o valor chega onde quer que o widget precise, em marcação, estilos ou script. Emparelhe-o com o Campo do comutador Para comportamentos de ligar/desligar e o campo repetidor Quando a contagem deve vir de itens reais em vez de uma configuração. Explore o restante do Widgets e extensões de complementos mestre, e veja o Página de preços para o que cada plano inclui.