O Campo de alternância Popover é um switch que abre um pequeno popover de controles filhos quando ligado. Elementor usa o mesmo padrão para seus próprios clusters de recursos opcionais e dentro dos Master Addons Construtor de widgets ele faz o mesmo trabalho para seus widgets personalizados: um conjunto de configurações relacionadas permanece escondido atrás de uma alternância em vez de aglomerar o painel com uma seção extra inteira.
O Popover Toggle suporta Condições como todo controle, e cada campo dentro do popover recebe seu próprio token combinado {{ toggle_field }}, renderizado pelo Mecanismo de modelo de sintaxe dupla. Ambos os guias cobrem configuração e limitações.
Ao contrário de um campo de valor simples, o Popover Toggle é estrutural Ele mantém o próprio estado ligado/desligado, e ele carrega campos filhos cujos valores atingem seu modelo sob nomes compostos Ambas as metades desse modelo são cobertas abaixo com um exemplo de sobreposição de trabalho.
O que o campo Popover Toggle faz #
- Rende uma alternância no painel do widget com suas etiquetas on e off.
- Abre um popover de controles infantis quando ligado, definido na lista de campos popover do campo.
- Aceita a maioria dos tipos de campo de valor quando crianças, como campos de cor, texto, seleção e controle deslizante.
- Expõe o estado de alternância ao seu modelo como um valor verdadeiro quando ligado e uma string vazia quando desligado.
- Expõe cada valor filho sob um nome composto que une os nomes dos pais e dos filhos com um sublinhado.
Se a construção de widgets for um território novo, leia o Visão geral do Widget Builder primeiro.
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 é um widget de banner de imagem com uma sobreposição de cores opcional: um botão nomeado
overlay, uma criança de cor chamadacolor.
Como adicionar um campo de Alternância de Popover #
No editor Widget Builder, role o painel de campos à esquerda até encontrar o Alternar Popover campo, listado com os outros campos estruturais, como Tabs e Repeater.
Arraste-o para uma seção abaixo do Conteúdo ou Estilo tab, onde quer que as configurações opcionais pertençam Uma vez que ele pousa, as opções do campo se abrem à esquerda, e o trabalho principal é definir os campos filhos que o popover manterá.
Popover Alternar opções de campo explicadas #
- Etiqueta: o texto ao lado da alternância em Elementor, por exemplo “Overlay”.
- Nome: o identificador exclusivo apenas para alternância, letras, números e sublinhados, por exemplo
overlay. Os nomes das crianças constroem isso, então seja curto. - Etiqueta ligada/etiqueta desligada: os dois estados mostrados na chave, como “Yes” e “No”.
- Valor de retorno: o valor armazenado enquanto a alternância está ligada, “yes” por padrão Off armazena uma string vazia.
- Campos de Popover: a criança controla dentro do popover A maioria dos tipos de campo de valor são permitidos; nosso exemplo contém um único campo de cores nomeado
color. - Descrição, Mostrar etiqueta, separador e condições cobrem as opções usuais de exibição.
Leia o alternador e seus filhos em seu modelo #
Duas regras de nomenclatura cobrem tudo o que este campo produz.
A alternância em si está disponível sob seu próprio nome Ele imprime o valor de retorno quando ligado e uma string vazia quando desligado, o que o torna uma condição natural:
{% if overlay %} ... {% endif %}Observe que o valor armazenado é a string Return Value, “yes” por padrão, não um booleano. Teste a veracidade da maneira que o exemplo faz; comparando o campo com o verdadeiro nunca corresponde.
Cada criança está disponível como nome de pai e nome de filho unidos com um sublinhado. O color filho do overlay popover torna-se overlay_color. Juntos, a camada de sobreposição do banner fica assim no painel HTML:
<div class="banner-media">
<img src="{{ banner_image }}" alt="">
{% if overlay %}
<div class="banner-overlay" style="background: {{ overlay_color }}"></div>
{% endif %}
</div>Alternar, nenhuma sobreposição div renderiza em tudo Alternar, o div aparece com qualquer cor que o editor escolheu Adicione mais crianças e cada um segue o mesmo padrão: uma criança nomeada opacity seria lido como {{ overlay_opacity }}.
Cuidado: não há notação de pontos aqui. {{ overlay.color }} resolve para nada, porque as crianças são achatadas para sublinhados - nomes unidos, não aninhados sob o pai Se um valor filho sai vazio, verifique o nome composto primeiro.
Use a alternância Popover no Elementor #
Adicione o widget a uma página no Elementor, ou recarregue o editor se a página já estiver aberta O controle aparece como um switch rotulado.
Ligue-o e o popover abre com os controles filhos No exemplo do banner, o editor escolhe uma cor de sobreposição, a camada desaparece sobre a imagem na visualização e, desligando a alternância, a remove novamente sem perder a cor escolhida.
Casos de uso comum #
- Sobreposições de imagens e vídeos, com crianças de cor e opacidade atrás de um interruptor.
- Crachás opcionais nos cartões, onde a alternância mostra o crachá e as crianças definem seu texto e estilo.
- Configurações de efeito de passagem isso só importa quando o efeito está habilitado.
- Opções de contagem regressiva ou agendamento em banners que às vezes são limitados no tempo.
- Botões secundários, mantendo o texto, link e estilo do segundo botão fora da vista até que seja necessário.
Dicas para trabalhar com o campo Popover Toggle #
- Envolva a marcação dependente em
{% if parent %}. O ponto principal da alternância é que as crianças só importam quando estão ligadas; o modelo deve refletir isso. - Componha nomes de crianças com um sublinhado. Pai
overlaymais criançacoloré{{ overlay_color }}, nunca{{ overlay.color }}. - Mantenha os nomes dos pais curtos. Cada token filho repete o nome dos pais e
{{ overlay_color }}lê melhor que{{ banner_image_overlay_settings_color }}. - Use-o para clusters genuinamente opcionais. Configurações que o widget sempre precisa pertencem ao painel aberto; o popover é para os recursos às vezes.
- Dê às crianças padrões sensatos. No momento em que a alternância é ativada, o recurso deve parecer intencional, em vez de desestilizado.
Perguntas frequentes #
Qual é o campo Popover Toggle no Master Addons Widget Builder?
É um campo estrutural: um switch que abre um popover de controles filhos quando ligado O estado do toggle atinge seu modelo sob o nome do campo, e cada valor filho chega sob os nomes de pais e filhos unidos com um sublinhado, como {{ overlay_color }}.
Como verifico se a alternância está ligada?
Use-o diretamente em uma condição: {% if overlay %}. Enquanto estiver ligado, o campo mantém seu valor de retorno, “yes” por padrão; enquanto estiver desligado, ele contém uma string vazia, que conta como falsa.
Como imprimo o valor de um campo filho?
Junte-se aos nomes dos pais e filhos com um sublinhado Um popover nomeado overlay com uma criança nomeada color impressões como {{ overlay_color }}. Notação de pontos como {{ overlay.color }} não resolve para crianças popover.
Quais tipos de campo podem entrar no popover?
A maioria dos tipos de campo de valor funciona como crianças, incluindo campos de cor, texto, seleção e controle deslizante Cada criança mantém a forma de valor de seu próprio tipo, portanto, uma criança deslizante ainda precisa de seu tamanho e unidade lida da maneira usual.
Os valores das crianças sobrevivem à alternância?
Sim. Desligar a alternância esconde o popover e torna a condição dos pais falsa, mas as crianças mantêm seus valores e tudo retorna quando a alternância volta.
Quando devo usar um Popover Toggle em vez de um Switcher?
Use um Switcher simples quando um sinalizador liga/desliga for tudo o que você precisa. Alcance o Popover Toggle quando o sinalizador trouxer configurações; as crianças moram dentro do popover em vez de sobrecarregar o painel atrás de um switcher e condições separados.
Embrulhando #
O campo Widget Builder Popover Toggle mantém o painel de um widget honesto: os controles diários permanecem visíveis e o cluster opcional espera atrás de um switch. Envie-o com {% if parent %} em torno dos tokens de marcação e sublinhado unidos para as crianças, e o recurso liga e desliga de forma limpa Para os outros padrões estruturais, veja o Campo repetidor, que trata das listas da mesma forma que este campo trata as opções Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.
