Alternar Popover

O campo Popover Toggle agrupa algumas configurações relacionadas atrás de um controle liga/desliga em um widget personalizado construído com os Master Addons Construtor de widgets. No Elementor mostra como uma única linha com um ícone de lápis Clicando no lápis liga a opção e abre um pequeno popover com as configurações dentro Ele mantém extras opcionais, como uma sobreposição ou um crachá, de preencher o painel.

Popover Toggle é um campo Pro. O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Complementos mestres Pro.

O que o campo Popover Toggle faz #

• Ele adiciona uma linha ao painel do seu widget: sua etiqueta, um ícone de lápis e, uma vez ligado, uma seta de redefinição.
• O lápis liga a opção e abre um popover com os campos que você definiu.
• A alternância em si armazena yes quando ligado e nada quando desligado, para que seu modelo possa verificá-lo {% if %}.
• Cada campo dentro do popover recebe seu próprio token, feito a partir do nome do toggle e do nome do campo unido por um sublinhado.

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 “Image Banner” com uma sobreposição opcional: um Popover Toggle nomeado overlay com dois campos dentro, color e strength.

Como adicionar um campo de Alternância de Popover #

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

Popover Alternar opções de campo explicadas #

• Etiqueta é o texto ao lado do lápis em Elementor, por exemplo “Overlay”.
• Nome é o ID exclusivo do campo e o início de cada token que ele cria, portanto, mantenha-o curto, por exemplo overlay. Apenas letras, números e sublinhados.
• Descrição é uma nota para você dentro do construtor.
• Etiqueta ligada e Etiqueta desligada são salvos com o campo, mas o Elementor mostra esse controle como um ícone de lápis, para que essas palavras não apareçam no painel.
• Campos Popover lista os campos dentro do popover Cada linha tem um Nome, um Etiqueta e a Tipo. Clique Adicionar campo para outra linha, o ícone de cópia para duplicar um ou a cruz vermelha para removê-lo.
• Valor padrão define se uma nova cópia do widget começa com a opção ligado (Sim) ou desligado (Não).

O menu Tipo oferece Texto, Número, Área de texto, WYSIWYG, Código, Oculto, Comutador, Cor, Fonte, Tipografia, Data Hora, URL, Mídia, Galeria, Ícones, Slider, Dimensões e Fundo As linhas têm apenas um nome, rótulo e tipo, portanto não há lugar para definir um valor padrão ou um intervalo para um campo dentro do popover Um campo Slider aqui usa o intervalo padrão do Elementor, de 0 a 1000 para px.

As configurações comuns mais abaixo funcionam como em outros campos.

Leia o alternador e seus campos em seu modelo #

Duas regras cobrem tudo o que este campo lhe dá:

• O próprio nome do alternador imprime yes quando estiver ligado e nada quando estiver desligado Utilize-o em {% if overlay %}.
• Um campo dentro do popover é lido como o nome do toggle, um sublinhado, depois o nome do campo O color campo torna-se {{ overlay_color }}, e o strength controle deslizante torna-se {{ overlay_strength.size }}.

<div class="img-banner">
  {% if overlay %}
    <div class="img-banner__overlay" style="background: {{ overlay_color }}; opacity: {{ overlay_strength.size }}%;"></div>
  {% endif %}
  ...
</div>

Os pontos não funcionam para os campos dentro do popover Nos nossos testes {{ overlay.color }} não imprimiu nada, enquanto {{ overlay_color }} imprimiu a cor Os campos também mantêm seus valores quando o botão de alternância é desligado, portanto, sempre os envolva {% if overlay %}.

Clique Salvar configurações quando terminar.

Use a alternância Popover 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 a guia onde você colocou o campo Ele mostra como seu rótulo com um ícone de lápis.

Clique no lápis A opção liga e o popover abre com seus campos Defina-os e o widget atualiza imediatamente Clique fora do popover para fechá-lo Para desligar a opção novamente, clique na seta de reinicialização circular ao lado do lápis.

Casos de uso comum #

• Uma sobreposição de cores opcional em banners de imagem e vídeo.
• Um crachá ou fita opcional com texto e cor próprios.
• Efeitos de hover extras que a maioria dos editores nunca precisa ver.
• Opções avançadas de espaçamento ou borda mantidas fora do painel principal.

Dicas para trabalhar com o campo Popover Toggle #

• Mantenha o nome do alternador curto Cada campo dentro dele começa com esse nome.
• Verifique sempre a alternância com {% if %} antes de usar seus campos, porque os valores ficam salvos quando está desligado.
• Use dois ou três campos relacionados por popover Mais do que isso é mais fácil de encontrar em uma seção normal.
• Defina estilos padrão na guia CSS. Os campos dentro do popover não possuem valores padrão próprios.
• Para um simples on/off sem configurações dentro, use o Campo alternador.

Perguntas frequentes #

Embrulhando #

Adicione a alternância Popover, liste seus campos, verifique {% if toggle_name %} no seu modelo e leia cada campo como {{ toggle_name_field_name }}. Os editores obtêm um painel organizado, e as configurações extras só aparecem quando ativam a opção Para agrupar as configurações em guias, consulte o Campo de guias, e verifique preços para o que cada plano inclui.