O Condições opção decide quando um controle aparece no painel Elementor do seu widget Em vez de mostrar cada campo o tempo todo, você pode amarrar a visibilidade de um controle para o valor de outro controle: mostrar o URL do botão somente quando o botão toggle está ligado, ou revelar um campo de imagem somente quando o dropdown do layout diz “With Image”.
Cada campo nos Complementos Mestres Construtor de widgets carrega esta opção, de uma forma simples Campo texto para um grupo completo de Tipografia Defina-o uma vez por controle e seu painel fica curto por padrão, com opções extras aparecendo somente quando uma escolha as torna relevantes É o mesmo comportamento que você vê nos próprios widgets do Elementor.
O que a opção Condições faz #
Uma condição é uma regra pequena com três partes: qual controle assistir, como compará-lo e com qual valor comparar Quando a regra passa, seu controle aparece no painel Quando falha, o controle permanece oculto.
Cada cartão de condição possui três configurações:
- Nome de controle: o campo cujo valor você deseja assistir Este é um menu suspenso listando todos os controles do seu widget, agrupados por seção, para que você escolha o destino em vez de digitar seu nome.
- Igualdade: como comparar. Igual mostra o controlo quando o campo vigiado corresponde ao seu valor. Não Igual mostra quando o campo contém mais alguma coisa.
- Valor de controle: o valor a comparar, inserido como texto simples, por exemplo
yes,no, ou um valor de opção de seleção comolayout-2.
Você pode empilhar quantas condições precisar com o ADICIONAR CONDIÇÃO botão. Quando um controle tem mais de uma condição, todos eles devem passar antes que o controle apareça Não há limite de quantos controles podem assistir ao mesmo campo, então um switcher pode revelar cinco opções relacionadas de uma só vez.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Master Addons Pro instalado e ativo, uma vez que o Widget Builder completo é um recurso Pro. Veja o guia instalação se você está configurando fresco.
- Um widget personalizado aberto no editor Widget Builder com pelo menos dois controles, um para assistir e outro para mostrar ou ocultar Novo para o construtor? leia o Visão geral do Widget Builder primeiro.
Onde encontrar a opção Condições #
Selecione qualquer controle no painel de opções do seu widget, na guia Conteúdo, Estilo ou Avançado As configurações do campo abrem à esquerda Role para baixo, passando pelas opções principais, como Rótulo, Nome e Valor Padrão, e você encontrará o Condições box logo acima das Classes de Controle, com um ADICIONAR CONDIÇÃO botão e a nota “Set condições para quando este controle deve ser visível”.
A caixa começa vazia, o que significa que o controle está sempre visível. Esse é o padrão para cada campo.
Como adicionar uma condição #
A maneira mais clara de ver Condições no trabalho é o padrão de alternância clássico: um switcher que liga e desliga um segundo botão Nosso widget de exemplo tem uma seção Botões com um Campo alternador nomeado show_second_button, mais second_button_text e second_button_url campos que só devem aparecer quando o switcher estiver ligado.
Passo 1: Selecione o controle que deseja mostrar ou ocultar #
Clique no second_button_text campo no painel de opções do seu widget Suas configurações abrem à esquerda A condição sempre vive no controle que está sendo mostrado ou escondido, não no campo que está sendo observado.
Passo 2: Clique em ADICIONAR CONDIÇÃO #
Role para a caixa Condições e clique em ADICIONAR CONDIÇÃO. Um cartão de condição aparece com as três configurações: Nome de controle, Igualdade e Valor de controle O X vermelho no canto remove o cartão se você mudar de ideia.
Passo 3: Escolha o controle para assistir #
Abrir o Nome Controle dropdown. cada controle no widget está listado lá, agrupado sob seu título de seção, para que um widget maior permaneça fácil de navegar Escolha show_second_button. O dropdown pré-preenche com o próprio nome do campo atual quando o cartão é criado, portanto, certifique-se de alterná-lo para o campo que você realmente deseja assistir.
Passo 4: Defina o Valor de Igualdade e Controle #
Deixar Igualdade em Igual e digite yes em Valor de controle, porque um switcher armazena yes quando está ligado e um valor vazio quando está desligado A regra acabada diz: mostre este controlo quando show_second_button é igual yes.
Passo 5: Repita e salve #
Adicione a mesma condição a second_button_url, então clique Salvar configurações. Ambos os campos agora seguem o switcher juntos.
Teste-o no Elementor #
Adicione seu widget a uma página no Elementor, ou recarregue o editor se a página já estiver aberta Com o switcher desligado, os controles de URL do Texto do Segundo Botão e do Segundo Botão não estão em lugar nenhum no painel A seção parece curta e limpa.
Ligue o switcher e ambos os controles aparecem logo abaixo dele Nenhuma recarga de página, nenhuma economia entre as condições de verificação do elementor ao vivo à medida que o usuário edita.
Qual valor você deve digitar em Control Value? #
O campo Valor de Controle leva o valor armazenado do controle assistido, que nem sempre é o rótulo que você vê no painel Quase toda condição “my não funciona relatório” se resume a essa incompatibilidade, então aqui está o que cada tipo de campo realmente armazena:
- Comutador: lojas
yesquando ligado. Use igual +yespara mostrar um controle enquanto a alternância está ligada, ou Não Igual +yespara mostrar enquanto a alternância está desligada. - Selecione e selecione2: armazenar a opção valor, não o rótulo da opção Se o seu dropdown tiver uma opção rotulada “Layout Two” com o valor
layout-2, a condição deve usarlayout-2. - Escolha: armazena a chave da opção escolhida, como
left,center, ouright. - Área de texto e texto: armazene exatamente o que o usuário digitou As condições nos campos de texto livre precisam de uma correspondência exata, para que funcionem melhor para verificar se um campo é igual a um valor esperado específico.
- Número: armazena o próprio número, comparado como um valor, então
3corresponde a uma entrada de 3.
Os controles no estilo Dropdown fazem as fontes de condição mais confiáveis porque seus valores vêm de uma lista fixa Se você estiver projetando um widget do zero, conduza suas condições do Switcher, Selecionee Escolha campos e deixe os campos de texto serem os controles mostrados ou ocultos.
Usando várias condições #
Clique ADICIONAR CONDIÇÃO novamente para empilhar uma segunda regra no mesmo controle Toda condição na lista deve passar ao mesmo tempo para que o controle mostre Pense nisso como uma cadeia AND: condição um E condição dois E condição três.
Um exemplo prático: um campo de cores de crachá que deve aparecer somente quando os crachás estiverem habilitados e o estilo de crachá estiver definido como personalizado Duas cartas lidam com isso:
show_badgeIgualyesbadge_styleIgualcustom
Não há modo OR entre as cartas Se você precisar do “show quando A ou B”, inverta a lógica com Not Equal sempre que possível ou reestruture o controle de origem para que um valor suspenso cubra o caso.
As condições funcionam através das guias #
O controle assistido não precisa viver na mesma seção ou mesmo na mesma guia que o controle que você está ocultando Um campo de cores da guia Estilo pode depender de um switcher de guia Conteúdo sem qualquer configuração extra O Widget Builder encontra o controle onde quer que esteja, em Conteúdo, Estilo ou Avançado, e conecta a condição ao lugar certo no widget gerado.
Este é o padrão atrás de painéis como o Campo fronteiriço, onde os controles de largura e cor só aparecem quando um tipo de borda é escolhido Com Condições, seus próprios widgets obtêm o mesmo comportamento: opções de estilo que só surgem quando o recurso de conteúdo correspondente é ativado.
Casos de uso comum #
- Elementos opcionais: um alternador para um segundo botão, crachá ou legenda que revela seus campos de texto, link e estilo somente quando ativado.
- Variantes de layout: a Selecione o controle para layout que mostra um campo de imagem para layouts de imagem e o oculta para somente texto.
- Ramificação de estilo: uma alternância “Custom colors” que desbloqueia um conjunto de selecionadores de cores, mantendo a guia Estilo curta para todos que usam padrões.
- Comportamento do link: Opções de URL e destino que aparecem somente quando “Make this cliclable” is on.
- Configurações avançadas ocultas: opções extras escondidas atrás de um switcher “Enable advanced options” para que usuários casuais nunca passem por elas.
Dicas para trabalhar com Condições #
- Defina o Valor Padrão do controle de origem deliberadamente. Se o padrão do switcher for desligado, todo controle dependente começa oculto quando o widget é descartado em uma página Decida qual primeira impressão você deseja.
- Verifique o valor armazenado, não o rótulo. Quando uma condição nunca é acionada, o culpado usual é um Valor de Controle que corresponde ao rótulo da opção em vez do valor da opção.
- Altere o nome do campo de origem antes de conectar as condições a ele. As condições fazem referência ao controle pelo nome, portanto, renomear um campo após vários controles depender dele significa revisitar esses cartões de condição.
- Hidden ainda renderiza. As condições controlam a visibilidade do painel Se o token do controle for impresso em seu HTML, o valor salvo ainda será renderizado no front-end. Emparelhe a condição com a lógica de correspondência em sua marcação quando o próprio elemento desaparecer.
- Campos dependentes do grupo em uma seção. Quando um switcher revela três campos, mantê-los juntos logo abaixo do switcher torna a causa e o efeito óbvios para quem edita a página.
Perguntas frequentes #
O que a opção Condições faz no Master Addons Widget Builder?
As condições mostram ou ocultam um controle no painel Elementor com base no valor de outro controle Cada regra nomeia um controle para assistir, uma comparação Igual ou Não Igual e um valor para corresponder O controle só aparece quando todas as regras nele passam.
Por que minha condição não está funcionando?
Quase sempre o Valor de Controle não corresponde ao valor armazenado Os switchers armazenam sim quando estão ligados, e os campos Selecionar armazenam o valor da opção em vez de sua etiqueta Verifique os valores das opções do campo assistido em suas configurações e copie o valor exato na condição.
Um controle pode ter múltiplas condições?
Sim. clique em ADICIONAR CONDIÇÃO quantas vezes precisar Todas as condições de um controle devem passar de uma só vez para que ele apareça, o que funciona como uma cadeia AND. Para remover uma regra, clique no X vermelho em seu cartão.
Uma condição pode observar um controle em uma guia diferente?
Sim. Um controle de guia Estilo pode depender de um switcher de guia Conteúdo, e o contrário O Widget Builder localiza o controle assistido através das guias Conteúdo, Estilo e Avançado automaticamente, portanto, nenhuma configuração extra é necessária.
Esconder um controle com uma condição remove sua saída da página?
Não. As condições apenas ocultam o controle no painel de edição Se o token do campo for impresso no HTML do seu widget, seu valor salvo ainda renderiza Estruturar seu HTML para que o elemento oculto dependa do mesmo campo de origem quando ele deve desaparecer do front-end também.
Embrulhando #
As condições transformam uma lista plana de controles em um painel que reage às suas próprias configurações Escolha o controle para assistir, escolha Igual ou Não Igual, digite o valor e empilhe regras extras quando uma não for suficiente Uma vez que cada campo do Widget Builder suporta a opção, o mesmo padrão cobre botões alternados, imagens dependentes de layout e seções de estilo desbloqueáveis Combine-o com o Comutador e Selecione campos para fontes confiáveis, navegue pelo resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.
