Selecione

O campo Selecionar adiciona um menu suspenso a um widget personalizado que você cria com os Complementos Mestres Construtor de widgets. Você define uma lista fixa de escolhas, o editor escolhe uma no Elementor e seu modelo muda para corresponder: uma classe de layout diferente, um emblema extra, um bloco diferente de marcação É o campo a ser usado para variantes nomeadas como estilos de cartão, tipos de crachá ou ordens de classificação.

Selecione é 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 Selecionar faz #

• Adiciona um dropdown padrão ao painel do seu widget no Elementor.
• Permite que o editor escolha uma opção da lista que você define.
• Salva a opção chave (por exemplo outlined), não o rótulo que o editor vê.
• Imprime essa chave onde quer que você coloque seu token, como {{ layout_style }}, para que você possa usá-lo como uma classe ou verificá-lo com {% if %}.

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 “Plan Card” com dois campos Selecionar: layout_style (Caixa, Mínimo, Contornado) na guia Estilo e badge (Sem crachá, Mais Popular, Novo) na guia Conteúdo.

Como adicionar um campo Selecionar #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. Escolha a guia à qual a configuração pertence e adicione uma seção. Uma escolha de aparência como Estilo de layout se encaixa no Estilo tab, por exemplo, em uma seção “Card Style”.
3. Tipo select na caixa de pesquisa de campos à esquerda. surgem dois campos: Selecionar e Selecionar2.
4. Arrastar Selecione na secção Clique no lápis no campo para abrir as suas definições.

Selecionar contém uma escolha de uma lista curta. Se os editores precisarem pesquisar uma lista longa ou escolher mais de uma opção, use Selecione2 em vez disso, que é um campo Pro.

Selecione as opções de campo explicadas #

• Etiqueta: o texto ao lado do dropdown em Elementor, por exemplo “Layout Style”.
• Nome: o ID exclusivo do campo e o nome do seu token Utilize apenas letras, números e sublinhados, por exemplo layout_style.
• Descrição: uma dica mostrada sob a queda no Elementor.
• Opções: uma linha por escolha A caixa esquerda é a chave seu modelo recebe, e a caixa certa é a etiqueta editores ver. Use a cruz vermelha para remover uma linha e o botão de adição para adicionar um.
• Valor padrão: a opção com que uma nova cópia do widget começa A descida mostra os rótulos, mas o campo grava a chave.

Um novo campo Selecionar vem com três linhas de amostra, value-1 para value-3 com os rótulos Opção 1 à Opção 3. substitua-os por suas próprias chaves e rótulos antes de usar o widget.

Mantenha as chaves curtas, minúsculas e sem espaços, como boxed ou most_popular. Eles acabam em nomes de classes e comparações Se você deixar o Valor Padrão vazio, o widget começa na primeira opção da lista.

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

Use a escolha em seu modelo #

O HTML do Plan Card usa ambos os campos Select das duas maneiras mais comuns:

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

Classes modificadoras #

plan--{{ layout_style }} torna-se plan--boxed, plan--minimal ou plan--outlined. Cada variante é então uma regra curta no painel CSS e o HTML permanece o mesmo:

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

Marcação diferente por opção #

Quando uma opção precisa de HTML diferente, compare a chave com {% if %}. {% elseif %} e {% else %} trabalhe também No exemplo, none não corresponde a nenhum cheque, portanto nenhum crachá está impresso.

Sempre compare com a chave. {% if badge == 'popular' %} correspondências, enquanto {% if badge == 'Most Popular' %} nunca faz e não dá nenhum erro Se um cheque nunca dispara, olhe primeiro para a ortografia da chave.

Seletor e Controle Responsivo #

• Seletor sempre escreve color: {{VALUE}}; para este campo, e não há caixa para mudar a propriedade Com chaves como boxed a regra não faz nada Só ajuda quando suas chaves são cores: em nossos testes, chaves como #7c3aed e #0ea5e9 com um Seletor de .plan-price coloriu o preço Para qualquer outra coisa, deixe o Selector vazio e use classes.
• Controle Responsivo permite que os editores escolham uma opção diferente por dispositivo Essas escolhas por dispositivo só chegam à página através da regra do Seletor acima O token imprime a escolha da área de trabalho, portanto, deixe o Controle Responsivo desativado quando você usar o valor em seu modelo.

Use o controle Selecionar 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 A descida mostra os seus rótulos, com a opção padrão já selecionada Escolha outra opção e as atualizações de visualização.

Aqui está o mesmo Plan Card com três combinações de Estilo de Layout e Badge:

Casos de uso comum #

• Variantes de estilo de cartão, botão ou seção.
• Crachás ou fitas como Venda, Novo ou Mais Popular.
• Opções de tag de cabeçalho, proporção de imagem ou contagem de colunas.
• Ordenar ordem ou fonte de dados para um widget de lista.

Dicas para trabalhar com o campo Selecionar #

• Decida as teclas antes que os editores usem o widget. Você pode renomear rótulos mais tarde, mas alterar uma tecla quebra páginas que já salvaram a antiga.
• Adicionar uma opção “none” quando o elemento é opcional, como o emblema do exemplo.
• Defina um valor padrão isso parece bom por si só, então um widget recém-adicionado está pronto para uso.
• Apenas duas ou três opções com ícones claros? O Escolha campo mostra-os como botões em vez de um dropdown.
• Apenas ligado ou desligado? Usar o Campo alternador.

Perguntas frequentes #

Embrulhando #

Adicione um campo Selecionar, substitua as linhas de amostra por teclas curtas e limpe os rótulos e defina um padrão Em seguida, imprima a tecla como uma classe para variantes de estilo ou marque-a com {% if %} quando a marcação for alterada Para escolhas pesquisáveis ou múltiplas, consulte Selecione2, e verifique preços para o que cada plano inclui.