Número

O campo Número adiciona uma entrada numérica a um widget personalizado que você cria com os Complementos Mestres Construtor de widgets. Contagens de colunas, tamanhos de fontes, itens por linha, classificações por estrelas: qualquer coisa que só faça sentido como número pertence aqui Você define o intervalo permitido no construtor, e os editores obtêm uma entrada que os mantém dentro dele.

Número é um dos campos que você pode usar no Widget Builder da versão gratuita O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.

O que o campo Número faz #

• Adiciona uma entrada numérica com setas giratórias ao painel do seu widget no Elementor.
• Limita o que os editores podem inserir Min, Máximo e Passo.
• Imprime o número onde quer que coloque o seu token, no painel HTML, CSS ou JS.
• Funciona em comparações, então {% if columns > 2 %} pode alternar parte da marcação.

Novo para o construtor? Leia o Visão geral do Widget Builder primeiro, depois volte com um widget aberto.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalados e ativos. O guia instalação coberturas configuração.
• Um widget aberto no Widget Builder O exemplo neste guia é um widget “Stat Counter” com dois campos Number: columns (1 a 4) na guia Conteúdo e stat_size (20 a 96) na guia Estilo.

Como adicionar um campo Número #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. Adicione uma seção na guia à qual a configuração pertence. Uma contagem de layout se ajusta Conteúdo, um tamanho se encaixa Estilo.
3. Tipo number na caixa de pesquisa de campo à esquerda.
4. Arrastar Número na secção Clique no lápis no campo para abrir as suas definições.

Opções de campo numérico explicadas #

• Etiqueta: o texto ao lado da entrada em Elementor, por exemplo “Columns”.
• Nome: o ID exclusivo do campo e o nome do seu token Utilize apenas letras, números e sublinhados, por exemplo columns.
• Descrição: uma dica mostrada sob a entrada em Elementor Diga o que o número controla e, se for importante, a unidade.
• Espaço reservado: texto cinza mostrado enquanto a entrada está vazia.
• Min e Máx.: os valores mais baixos e mais altos que a entrada aceita.
• Etapa: até onde as setas giratórias se movem a cada clique Use 1 para números inteiros, 2 para números pares, 0,5 para meias etapas.
• Valor padrão: o número com o qual uma nova cópia do widget começa.

Min, Max e Step chegam à entrada propriamente dita Em nossos testes o campo Colunas chegou em Elementor como uma entrada numérica com min 1, max 4 e passo 1, então as setas param nas extremidades do intervalo.

Configurações comuns funciona como em outros campos, incluindo Condições se o número só deve aparecer quando outro campo estiver definido.

Imprima o número no seu modelo #

O token funciona em todos os três painéis No widget Stat Counter, o HTML coloca o valor em um atributo de dados e o usa em uma comparação:

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

O painel CSS é onde um campo numérico geralmente ganha seu sustento Coloque a unidade fora dos aparelhos, porque o campo armazena um número simples:

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

O mesmo token funciona no painel JS, por exemplo var perRow = {{ columns }};.

Dê a cada campo Número um Valor Padrão #

Um campo vazio não imprime nada, e isso silenciosamente quebra a regra em torno dele Com o campo Colunas limpo, nosso CSS tornou-se repeat(, 1fr), quais navegadores caem, e a grade caiu de volta para uma única coluna O {% if columns > 2 %} a verificação parou de corresponder ao mesmo tempo Nada no painel avisa você.

Portanto, defina um valor padrão em qualquer campo Número que alimente CSS ou JavaScript e trate um valor vazio possível em seu modelo se os editores puderem limpá-lo.

Deixe o Seletor vazio em um campo Número #

A caixa Seletor se comporta de maneira estranha para este campo e em nossos testes causou dois problemas ao mesmo tempo:

• Ele escreveu o número simples na regra sem nome de propriedade, então nenhum CSS utilizável saiu dele.
• Enquanto um Seletor era preenchido, o Valor Padrão do campo parava de chegar ao token Um widget que ninguém havia tocado renderizado font-size:px na extremidade frontal Limpar o Seletor corrigiu-o, e o mesmo widget intocado renderizado font-size:44px.

Imprima o token no painel CSS em vez disso, como mostrado acima Isso mantém o padrão funcionando e permite que você escreva a propriedade e unidade você mesmo.

Use o controle Número no Elementor #

Adicione o widget a uma página, ou recarregue o editor se a página já estiver aberta Cada campo Número mostra como uma pequena entrada sob seu rótulo, na guia onde você colocou Digite um valor ou use as setas, e as atualizações de visualização.

Aqui está o mesmo widget em quatro colunas e em duas colunas com um tamanho numérico maior:

Casos de uso comum #

• Contagens de colunas ou itens em grades e carrosséis.
• Tamanhos de fontes, valores de espaçamento e larguras em pixels.
• Classificações por estrelas, pontuações de revisão e porcentagens.
• Conta e acelera a leitura de um script, como itens por slide ou atraso de reprodução automática.

Dicas para trabalhar com o campo Número #

• Sempre defina um valor padrão. É a diferença entre um widget funcional e uma regra silenciosamente quebrada.
• Defina Min e Max para o que o design pode levar. Uma grade construída para quatro colunas não deve aceitar 12.
• Coloque a unidade no rótulo ou na descrição, como “Number Size” com “in pixels”, já que o campo armazena um número simples.
• Mantenha a unidade fora do token em CSS: {{ stat_size }}px, não dentro dos aparelhos.
• Quer um controle deslizante com unidades? O Campo deslizante é um campo Pro que dá aos editores um identificador de arrasto.

Perguntas frequentes #

Embrulhando #

Adicione um campo Número, defina Min, Max, Passo e um Valor Padrão, depois imprima o token onde você precisa e adicione a unidade você mesmo Deixe o Seletor vazio para que o padrão continue funcionando Para uma alça de arrasto com opções de unidade, veja o Campo deslizante, e verifique preços para o que cada plano inclui.