Escolher

O campo Escolher adiciona uma linha de botões de ícones a um widget personalizado que você cria com os Complementos Mestres Construtor de widgets. É o mesmo tipo de controle que o Elementor usa para alinhamento de texto: alguns botões, um ativo de cada vez Use-o quando houver apenas duas a quatro opções e um ícone explique cada uma mais rápido que uma palavra.

Choose é 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 Escolher faz #

• Adiciona uma linha de botões de ícones ao painel do seu widget no Elementor, um botão por opção.
• Mostra o título de cada opção como uma dica de ferramenta quando um editor passa o mouse sobre um botão.
• Salva o chave da opção escolhida, como center, não o seu título.
• Imprime essa chave onde quer que você coloque seu token, como {{ align }}. A abordagem usual é transformá-lo em uma classe CSS.

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 “Callout Box” com dois campos Choose: align (esquerda, centro, direita) e icon_position (superior ou esquerdo).

Como adicionar um campo Escolher #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. Adicione uma seção sobre o Conteúdo tab, por exemplo “Callout” As escolhas de layout também se encaixam bem na guia Estilo.
3. Tipo choose na caixa de pesquisa de campo à esquerda.
4. Arrastar Escolher na secção Clique no lápis no campo para abrir as suas definições.

Um novo campo Escolher não está vazio Ele vem com três opções de alinhamento (esquerda, centro e direita) e Central como padrão, então para um controle de alinhamento simples você só precisa alterar o rótulo e o nome.

Escolha as opções de campo explicadas #

• Etiqueta: o texto ao lado dos botões em Elementor, por exemplo “Icon Position”.
• Nome: o ID exclusivo do campo e o nome do seu token Utilize apenas letras, números e sublinhados, por exemplo icon_position.
• Descrição: uma dica mostrada sob os botões no Elementor.
• Descompactar: permite que os editores cliquem no botão ativo novamente para limpar a escolha Veja a nota abaixo antes de confiar nela.
• Opções: uma linha por botão. Chave é o valor que seu modelo obtém Título é a dica de ferramenta e Ícone abre o selecionador de ícones Use a cruz vermelha para remover uma linha e o botão de adição para adicionar uma.
• Valor padrão: a opção com que uma nova cópia do widget começa com. A descida mostra os títulos, mas o campo armazena a chave.

Em Configurações comuns você encontrará Mostrar etiqueta, Bloco Etiqueta, Separador e Condições, que funcionam da mesma forma que em outros campos.

Escolha ícones que aparecem no Elementor #

Clicar no ícone de uma opção abre o Master Addons Icon Picker. Abra o Ícones Elementadores guia e pesquisa, por exemplo align, para encontrar ícones de alinhamento e posição.

Fique nessa aba O selecionador também lista ícones de Linha Simples, Fonte Icônica, Linear e Material, mas em nossos testes esses botões apareceram em branco no painel Elementor. Somente Ícones Elementor exibidos.

Chaves, títulos e Unset #

• Mantenha as chaves curtas, minúsculas e sem espaços, como left ou top. Eles acabam em nomes de classe.
• Você pode renomear um título a qualquer momento Alterar uma chave quebra páginas que já salvaram a antiga.
• Em nossos testes, clicar no botão ativo limpou o valor mesmo com Desconfigurar defina como Não. Planeje um valor vazio de qualquer maneira, conforme mostrado no modelo abaixo.

Use a escolha em seu modelo #

O token imprime a chave, então a configuração mais limpa é uma classe modificadora Este é o HTML da caixa de chamada:

<div class="callout{% if align %} callout--{{ align }}{% endif %}{% if icon_position %} callout--icon-{{ icon_position }}{% endif %}">
  {% if icon_position %}<span class="callout-icon">!</span>{% endif %}
  <div class="callout-body">
    <p class="callout-title">{{ callout_title }}</p>
    <p class="callout-text">{{ callout_text }}</p>
  </div>
</div>

Cada {% if %} ignora a classe quando o valor está vazio Para a Posição do Ícone, um valor vazio também esconde o ícone, e é por isso que esse campo tem Desconfigurado O painel CSS então estiliza cada classe:

.callout--left { text-align: left; }
.callout--center { text-align: center; }
.callout--right { text-align: right; }
.callout--icon-top .callout-icon { margin-bottom: 14px; }
.callout--icon-left { display: flex; gap: 18px; align-items: flex-start; }

Você também pode comparar o valor diretamente, por exemplo {% if icon_position == 'left' %}. Compare com a chave, nunca com o título.

Deixe o seletor e o controle responsivo desligados #

• Seletor: para este campo escreve color: {{VALUE}};. Em nossos testes, um Seletor de .callout-title produzido color:center;, que os navegadores ignoram Ao contrário de alguns outros campos, o Choose não tem linhas de Selectores CSS onde você poderia escrever sua própria propriedade Usar classes como mostrado acima.
• Controle responsivo: adiciona ícones de dispositivos para que os editores possam escolher uma opção diferente no tablet e no celular, mas o token imprime apenas a escolha da área de trabalho As escolhas por dispositivo nunca chegam ao seu modelo.

Use o controle Escolher no Elementor #

Adicione o widget a uma página, ou recarregue o editor se a página já estiver aberta Os botões ficam embaixo da sua etiqueta com a opção padrão destacada Passe o mouse em um botão para ver seu título e clique para alternar As atualizações de visualização imediatamente.

Aqui está o mesmo callout com escolhas diferentes:

Casos de uso comum #

• Alinhamento de texto para títulos, citações e cartões.
• Posição da imagem ou do ícone: superior, esquerda ou direita.
• Direção de layout, como uma linha ou coluna.
• Pequenas variantes visuais, como um estilo claro ou escuro, quando cada uma tem um ícone claro.

Dicas para trabalhar com o campo Escolher #

• Mantenha-o em quatro opções ou menos. Para listas mais longas, use o Selecione campo.
• Sempre manuseie um valor vazio. Wrap aulas e marcação em {% if %}, e dê à classe base estilos padrão sensíveis.
• Escreva títulos claros. A dica de ferramenta é o único texto que os editores veem para cada botão.
• Use apenas ícones do elementor, então cada botão tem um ícone visível.
• Decida as teclas antes que os editores usem o widget. Títulos e ícones podem mudar mais tarde, as teclas não podem.

Perguntas frequentes #

Embrulhando #

Adicione um campo Escolher, defina teclas curtas com ícones Elementor e limpe títulos, depois imprima a tecla como uma classe em seu HTML e estilize cada classe no painel CSS. Manuseie o valor vazio e o widget permanecerá arrumado quando um editor limpar uma escolha. Para listas de opções mais longas, consulte o Selecione campo, e verifique preços para o que cada plano inclui.