Deslizador

O campo Slider adiciona o controle de alcance de arrastar para definir do Elementor a um widget personalizado construído com os Master Addons Construtor de widgets. Os editores arrastam uma alça ou digitam um número, escolhem uma unidade e o valor entra no seu CSS. Use-o para lacunas, larguras, alturas, tamanhos de ícones, tamanhos de fonte ou qualquer outra coisa que seja um número mais uma unidade.

Slider é um campo Pro. O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.

O que o campo Slider faz #

• Ele mostra um controle deslizante com uma caixa numérica e um menu de unidade no painel Elementor.
• Você define o mínimo, máximo e passo, além de um valor inicial.
• O valor é um número e uma unidade juntos, como 24 e px.
• Você o conecta ao seu CSS com uma linha de seletores CSS ou o imprime na guia HTML ou CSS com dois tokens.

Se você ainda não construiu um widget, leia o Visão geral do Widget Builder primeiro.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Master Addons para Elementor e Master Addons Pro, ambos ativos. O guia instalação coberturas configuração.
• Um widget aberto no Widget Builder O exemplo neste guia é um widget “Team Grid” com dois controles deslizantes: Card Gap para o espaço entre as cartas e Avatar Size para as iniciais redondas.

Como adicionar um campo Slider #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. Clique no Estilo tab e adicione uma seção, por exemplo “Grid Layout”.
3. Tipo slider na caixa de pesquisa de campo à esquerda.
4. Arrastar Deslizador na seção. Suas configurações abrem na barra lateral esquerda.

Opções de campo deslizante explicadas #

• Etiqueta é o texto acima do controle deslizante em Elementor, por exemplo “Card Gap”.
• Nome é o ID exclusivo do campo e o início de seus tokens, então card_gap dá {{ card_gap.size }}. Apenas letras, números e sublinhados.
• Descrição aparece sob o controle deslizante em Elementor.
• Valor mínimo, Valor máximo e Passo defina o intervalo e até onde vai cada movimento da alça Card Gap usa de 0 a 80 em etapas de 2.
• Valor padrão é o número inicial e a unidade, definidos com seu próprio pequeno controle deslizante e menu de unidade.

Digite os valores Min, Max e Step mesmo que as caixas já mostrem 0, 100 e 1. caixas que você nunca toca não são salvas, e um controle deslizante sem nenhuma delas salva volta aos intervalos do Elementor: 0 a 1000 para px, 0 a 100 para% e 0 a 10 para em e rem. Quando você os define, o mesmo intervalo é usado para cada unidade, portanto, 0 a 80 se aplica tanto ao em quanto ao px.

Não há configuração para qual unidade aparece Os editores podem escolher px, %, em e rem. Mais abaixo, Controle Responsivo adiciona o ícone do dispositivo para que desktop, tablet e celular possam ter valores diferentes.

Conecte o controle deslizante com seletores CSS #

Rolar para Seletores CSS e clique Adicionar Item. A nova linha vem preenchida com um exemplo (.text-1, .text-2 e color: {{VALUE}};), então substitua ambas as caixas:

CSS Selector:   .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};

{{SIZE}} é substituído pelo número e {{UNIT}} com a unidade escolhida, então 24 px torna-se gap: 24px;. Você não precisa {{WRAPPER}} no selector porque o construtor adiciona - o para si Adicione mais linhas para usar o mesmo valor noutros elementos.

Use essas linhas em vez de uma única Seletor caixa na parte inferior da barra lateral Essa caixa não tem lugar para uma propriedade CSS, portanto, não pode escrever uma regra de trabalho para um controle deslizante.

Use o valor em seu modelo em vez disso #

Você também pode imprimir o valor na guia HTML ou CSS Escreva o tamanho e a unidade como dois tokens próximos um do outro O controle deslizante Tamanho do Avatar define a largura e a altura do avatar desta forma:

.team-avatar {
  width: {{ avatar_size.size }}{{ avatar_size.unit }};
  height: {{ avatar_size.size }}{{ avatar_size.unit }};
}

Um nu {{ avatar_size }} imprime nada Você também pode comparar o número em uma condição, por exemplo {% if card_gap.size >= 40 %}. Quando o Controle Responsivo estiver ativado, use uma linha Seletores CSS, pois o Elementor escreve uma regra separada para cada dispositivo.

Clique Salvar configurações quando terminar.

Use o controle Slider no Elementor #

Adicione o widget a uma página ou recarregue o editor se a página já estiver aberta Selecione o widget e abra o Estilo guia. Cada controle deslizante mostra uma alça, uma caixa numérica e uma etiqueta unitária.

Arraste a alça ou digite um número, e o widget atualiza imediatamente Clique no rótulo da unidade para alternar entre px, %, em e rem.

Aqui a lacuna é elevada para 48px e os avatares para 96px:

Casos de uso comum #

• Lacunas entre cartões, colunas e itens da lista.
• Largura, largura máxima ou altura de uma imagem, cartão ou seção.
• Tamanhos de ícones, avatares e crachás.
• Tamanho da fonte ou altura da linha para um elemento.
• Raio da fronteira ou largura da borda quando todos os lados compartilham um valor.

Dicas para trabalhar com o campo Slider #

• Sempre digite Min, Max e Step para que o controle deslizante tenha um alcance sensível.
• Escolha um intervalo que se adapte a cada unidade que os editores possam escolher. 0 a 80 é bom para px, mas muito grande para em.
• Mantenha um valor base para a propriedade na guia CSS, como gap: 24px;, então o widget parece certo antes que alguém toque no controle deslizante.
• Substitua o texto de exemplo em uma nova linha de Seletores CSS. Por mais que esteja, as classes de destino de linha que seu widget não possui.
• Para valores com quatro lados, como preenchimento ou margem, use o Campo dimensões.

Perguntas frequentes #

Embrulhando #

Adicione o campo Slider, digite Min, Max e Step, defina um padrão e conecte-o a uma linha de seletores CSS, como gap: {{SIZE}}{{UNIT}};. Use o .size e .unit tokens quando o valor pertence à sua guia HTML ou CSS Para outros controles de dimensionamento, consulte o Dimensões e Tipografia campos e verifique preços para o que cada plano inclui.