Comutador

O campo Switcher adiciona um botão liga/desliga a um widget personalizado que você cria com os Complementos Mestres Construtor de widgets. É a maneira padrão de tornar parte de um widget opcional: um emblema, um ícone, um layout compacto Os editores invertem a alternância no Elementor e seu modelo reage.

Switcher é 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 Switcher faz #

• Adiciona a alternância liga/desliga do Elementor ao painel do seu widget.
• Salva o Valor Retorno (yes por padrão) quando ligado e um valor vazio quando desligado.
• Trabalha com {% if %} no seu modelo, portanto, a marcação aparece somente quando a alternância está ativada.
• Pode ocultar e mostrar outros campos no painel através de Condições, o que mantém o painel curto até que uma opção esteja em uso.

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 “Promo Card” com dois Switchers: show_badge, que revela uma fita e um campo Texto de Distintivo, e compact_mode, o que aperta o cartão.

Como adicionar um campo Switcher #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. Adicionar uma secção no separador onde pertence a opção Uma opção de conteúdo como Mostrar o Distintivo encaixa-se no Conteúdo guia.
3. Tipo switch na caixa de pesquisa de campo à esquerda.
4. Arrastar Comutador na secção Clique no lápis no campo para abrir as suas definições.

Opções de campo do switcher explicadas #

• Etiqueta: o texto ao lado da alternância no Elementor, por exemplo “Show Badge”.
• Nome: o ID exclusivo do campo e o nome do seu token Utilize apenas letras, números e sublinhados, por exemplo show_badge.
• Descrição: uma dica mostrada sob a alternância no Elementor.
• Etiqueta ligada e Etiqueta desativada: as palavras curtas dentro da alternância Elementor mostra Label On enquanto a alternância está ligada e Label Off enquanto está desligada, então “Compact” e “Normal” leem melhor que Sim e Não para uma opção de layout.
• Valor de retorno: o valor que o campo mantém enquanto estiver ligado. Deixe em yes a menos que algo em seu código precise de uma string diferente.
• Valor padrão: um dropdown com Sim e Não. Sim significa que um widget recém-adicionado começa com o toggle on.

Duas coisas que vale a pena saber sobre este painel O texto de ajuda em Label On e Label Off é trocado, e a linha Label Off começa com um T extra perdido Ambos os rótulos ainda funcionam da maneira que você esperaria: Label On é a palavra mostrada enquanto a alternância está ligada.

Mantenha o valor de devolução e o valor padrão em etapas #

A descida Valor por Omissão salva sempre yes para Sim, o que quer que você digitou em Return Value Essa combinação falha Em nossos testes, um campo com Return Value enabled e o valor padrão Sim saiu assim:

• A alternância no Elementor apareceu como desligada.
• O valor salvo ainda estava yes, então {% if %} tratou o campo como ligado e a marcação renderizada.
• O painel e a página só concordaram novamente depois que um editor clicou na alternância uma vez, o que definiu o valor para enabled.

Então altere Valor de Retorno somente quando você também planeja iniciar o campo desligado (Valor Padrão definido como Não) Para todo o resto, deixe Valor de Retorno em yes.

Use a alternância em seu modelo #

Um Switcher está vazio quando desligado e um valor vazio é falso no mecanismo de modelo {% if %} é tudo que você precisa O HTML do cartão promocional usa um Switcher para marcação e outro para uma classe:

<div class="promo{% if compact_mode %} promo--compact{% endif %}">
  {% if show_badge %}
  <span class="promo-badge">{{ badge_text }}</span>
  {% endif %}
  <p class="promo-title">{{ promo_title }}</p>
  <p class="promo-text">{{ promo_text }}</p>
  <a class="promo-button" href="#">Claim the offer</a>
</div>

Com o distintivo desligado, o todo span desapareceu da página, não apenas oculto. A classe compacta alterna algumas regras no painel CSS:

.promo--compact { padding: 18px 22px; }
.promo--compact .promo-title { font-size: 20px; }
.promo--compact .promo-text { display: none; }

Você também pode comparar o valor, como em {% if show_badge == 'yes' %}, mas compare com o valor de retorno, não com o texto Label On. {% if show_badge == 'Yes' %} nunca combina. A planície {% if show_badge %} o formulário evita o problema.

Deixe o Seletor caixa vazia para este campo Um valor de alternância não é um valor CSS, portanto, o estilo pertence ao painel CSS atrás de uma classe como a acima.

Esconder outros campos até que o botão esteja ligado #

Esta é a segunda metade do que um Switcher é para No campo que você deseja esconder, abra suas configurações, role para Condições e clique Adicionar condição. Para o campo Texto do Distintivo:

• Nome de controle: show_badge, o nome do Switcher.
• Igualdade: Igual.
• Valor de controle: yes, o valor de retorno do switcher.

Texto de Distintivo agora aparece no Elementor apenas enquanto o Distintivo de Show está ativado. Veja Condições para os outros operadores.

Use o controle Switcher no Elementor #

Adicione o widget a uma página, ou recarregue o editor se a página já estiver aberta A alternância fica sob sua etiqueta com sua palavra Label On ou Label Off dentro dela Clique nele e as atualizações de visualização imediatamente, e qualquer campo com uma condição aparece ou desaparece ao mesmo tempo.

Aqui está a carta finalizada na frente com o emblema ligado, com o modo compacto ligado também e com ambos os switchers desligados:

Casos de uso comum #

• Crachás, fitas e ícones opcionais.
• Uma variante de layout compacto ou denso.
• Mostrar ou ocultar um botão secundário, uma nota de rodapé ou uma divisória.
• Um interruptor mestre que revela um grupo de campos relacionados no painel.

Dicas para trabalhar com o campo Switcher #

• Deixe o valor de devolução em yes. Ele mantém a alternância, o padrão e suas condições em sintonia.
• Nomeie o campo após o que ele mostra, como show_badge ou compact_mode. O nome parece uma pergunta {% if %}.
• Escreva Label On e Label Off para a opção, não apenas Sim e Não, quando os dois estados têm nomes.
• Combine-o com as Condições portanto, os campos que uma opção precisa só aparecem quando está ativada.
• Mais de dois estados? Usar o Selecione campo para uma queda ou o Escolha campo para botões de ícones.

Perguntas frequentes #

Embrulhando #

Adicione um Switcher, dê um nome e rótulos claros, deixe o Return Value em yes& envolva a parte opcional de sua marcação dentro {% if %}. Adicione uma condição aos campos que a opção precisa e o painel permanecerá curto até que um editor a ligue Para três ou mais estados, consulte o Selecione e Escolher campos e verifique preços para o que cada plano inclui.