Deslizador

O Campo deslizante coloca um controle de alcance de arrastar para definir no painel do seu widget personalizado, o mesmo que o Elementor usa para lacunas, larguras e raio de borda em seus próprios widgets Dentro dos Complementos Mestres Construtor de widgets, você define um mínimo, um máximo, um passo, e as unidades que o usuário pode escolher de Quem edita o widget no Elementor, em seguida, arrasta uma alça em vez de digitar valores CSS brutos.

O campo Slider suporta Condições como todo controle, e como seu valor é numérico, o Mecanismo de modelo de sintaxe dupla permite ramificar com comparações como {% if columns >= 3 %}. Ambos os guias cobrem configuração e limitações.

O valor que um Slider produz não é um número simples É um par: um tamanho e uma unidade Esse detalhe decide como você conecta o campo à sua folha de estilo, então esse documento passa a maior parte do tempo lá.

O que o campo Slider faz #

• Rende um controle deslizante de alcance com uma alça arrastável e uma entrada numérica ao lado dela, combinando os controles deslizantes nativos do Elementor.
• Oferece um switcher de unidade quando você permite mais de uma unidade, o mesmo controle pode funcionar em px, % ou em.
• Armazena um tamanho e uma unidade juntos como um valor, seu painel CSS é lido com notação de ponto.
• Suporta valores responsivos, permitindo que os usuários definam um tamanho diferente por dispositivo do ícone do dispositivo.
• Aceita valores dinâmicos e pode escrever CSS através do mecanismo de seletores da Elementor como alternativa ao painel CSS.

Novo na construção de widgets? Leia o Visão geral do Widget Builder primeiro; este documento pressupõe que você já tenha um widget aberto no editor.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é uma grade de cartões de equipe cuja .team-row o contêiner precisa de uma lacuna ajustável pelo usuário entre os cartões.

Como adicionar um campo Slider #

No editor Widget Builder, role o painel de campos à esquerda até encontrar o Deslizador campo, listado com outros campos de valor CSS, como Dimensões.

Arraste-o para uma seção abaixo do Estilo tab, onde os controles de dimensionamento geralmente vivem, embora o Conteúdo e o Avançado também funcionem Uma vez que ele pousa, as opções do campo se abrem à esquerda.

Opções de campo deslizante explicadas #

• Etiqueta: o texto ao lado do controle em Elementor, por exemplo “Card Gap”.
• Nome: o identificador exclusivo ao qual seu CSS se refere, apenas letras, números e sublinhados, por exemplo my_gap.
• Predefinição: o valor inicial, armazenado como um tamanho mais uma unidade.
• Min, Max, Passo: o alcance que a alça cobre e a distância que cada incremento de arrasto se move Um controle de lacuna pode ser executado de 0 a 100 em etapas de 1.
• Unidades de tamanho: as unidades entre as quais o usuário pode alternar, como px, % e em. Uma unidade esconde o switcher; vários mostram isso.
• Responsivo: adiciona o ícone do dispositivo para que cada ponto de interrupção mantenha seu próprio valor.
• Dinâmico e Seletores: suporte dinâmico de tags e mecanismo de seletores da Elementor abordados abaixo.
• Descrição, Mostrar etiqueta, separador e condições são as mesmas opções de exibição que cada campo carrega.

Conecte o controle deslizante ao seu CSS #

O valor de um Slider é um array com duas chaves: size e unit. Imprimir o nome do campo por conta própria não produz nada, porque não há um único valor para imprimir No painel CSS, sempre escreva ambas as partes com notação de ponto:

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

Um valor de 24 com px selecionado renderiza como gap: 24px;. Altere o switcher de unidade para % e a mesma regra se tornará gap: 24%; sem tocar no modelo.

Cuidado: {{ my_gap }} por conta própria imprime uma string vazia. Se sua regra renderiza como gap: ; e o layout ignora o controle, o que falta .size e .unit são quase sempre o porquê O mesmo silêncio segue uma renomeação: mude o Nome do campo mais tarde e os tokens antigos continuam renderizando, apenas sem nada neles, então atualize o painel CSS na mesma sessão.

A alternativa dos seletores #

Os controles deslizantes também funcionam com o mecanismo de seletores do Elementor, que escreve o CSS para você em vez de passar pelo painel CSS Para um controle deslizante, o Elementor injeta um valor simples em vez de uma declaração completa, de modo que o campo seletor simples do construtor por si só não produz uma regra utilizável Uma entrada de seletores personalizados tem que carregar a propriedade completa, usando os espaços reservados do próprio Elementor:

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

Para a maioria dos widgets, o token do painel CSS é a rota mais simples; procure entradas de seletores quando quiser que o Elementor gerencie a saída.

Use o controle Slider no Elementor #

Adicione seu widget personalizado a uma página no Elementor Se a página já estava aberta, recarregue o editor primeiro, já que uma guia obsoleta continua mostrando o painel antigo O controle deslizante aparece no painel do widget com sua etiqueta, o identificador, a entrada numérica e o switcher de unidade se você permitir mais de uma unidade.

Arraste a alça ou digite um número e a visualização segue imediatamente Com o Responsive ligado, o ícone do dispositivo alterna o controle entre os valores da área de trabalho, tablet e celular, para que uma lacuna de 40 px na área de trabalho possa diminuir para 16 px em telefones do mesmo campo.

Casos de uso comum #

• Grade e flexionar lacunas entre cartões, colunas ou itens de galeria.
• Larguras e alturas dos elementos, como tamanho de imagem ou comprimento do divisor, com opção % para layouts fluidos.
• Raio fronteiriço em cartões e botões quando um raio uniforme é suficiente.
• Dimensionamento de ícones e fontes onde uma unidade em mantém as coisas relativas ao texto circundante.
• Espaçamento de deslocamentos como a distância entre um emblema e o canto em que ele se senta.

Dicas para trabalhar com o campo Slider #

• Imprima sempre as duas partes. {{ my_gap.size }}{{ my_gap.unit }} é toda a conexão; o nome do campo simples fornece uma string vazia.
• Combine Min, Max e Pise na propriedade. Uma faixa 000 em etapas 1 se adapta a uma lacuna; um controle de raio 0 pode precisar apenas de controle de raio 50.
• Ofereça apenas as unidades que fazem sentido. Um controle somente px é mais claro do que aquele em que % produz layouts quebrados.
• Mantenha um fallback na estrutura do painel CSS. Escreva a regra para que o widget ainda fique bem definido no valor padrão na primeira gota.
• Ative o Responsive para valores de layout. Lacunas e larguras quase sempre precisam de uma configuração móvel mais rígida.
• Prefira o token do painel CSS no campo Seletor. O campo Seletor simples injeta apenas um valor simples para controles deslizantes, o que não é uma declaração completa.

Perguntas frequentes #

Embrulhando #

O campo Widget Builder Slider transforma qualquer comprimento CSS em seu widget em um controle que o editor pode arrastar: nomear o campo, limitar o intervalo e imprimir {{ name.size }}{{ name.unit }} no painel CSS. emparelha naturalmente com o Campo dimensões quando um widget precisa de espaçamento de quatro lados ao lado de valores únicos Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.