Selecione

O Selecione campo coloca um dropdown nativo no painel de opções do seu widget Você define um conjunto fixo de escolhas, o usuário escolhe uma e seu modelo reage à escolha: uma classe de layout diferente, um bloco diferente de marcação, um valor CSS diferente Dentro dos Master Addons Construtor de widgets, o Select é o cavalo de batalha para qualquer coisa com um punhado de variantes nomeadas Estilos de layout, efeitos de hover, ordens de classificação, esse tipo de decisão.

Selecione os valores das opções para o qual o combustível natural Condições: outros controles podem aparecer somente quando uma opção específica é escolhida Os mesmos valores funcionam no Mecanismo de modelo de sintaxe dupla com cheques como {% if layout == "card" %}, portanto, um dropdown pode alternar o painel e a marcação.

Um detalhe molda cada padrão neste doc. O valor que seu modelo recebe é a chave da opção, um pequeno slug que você escolhe, não o rótulo legível por humanos que o usuário vê As chaves entram em nomes de classes e comparações; os rótulos ficam no painel.

O que o campo Selecionar faz #

• Rende um dropdown padrão no painel Elementor, os mesmos widgets nativos do núcleo de controle de seleção usam.
• Detém um valor de um conjunto fixo você define como pares de chaves e rótulos.
• Alimenta seu modelo com a chave selecionada', pronto para classes modificadoras ou {% if %} blocos.
• Conduz Condições em outros controles, então escolher “Boxed” pode revelar um campo de cor de borda que “Minimal” esconde.
• Suporta um sinalizador responsivo, deixando o usuário escolher uma opção diferente por dispositivo.

Se você é novo na construção de widgets, comece com 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 tabela de preços com uma oferta suspensa “Layout Style” Variantes Boxed, Minimal e Outlined.

Como adicionar um campo Selecionar #

Abra seu widget no editor Widget Builder e olhe através do painel de campos à esquerda. Selecione senta-se com os outros campos de escolha.

Arraste-o para uma seção abaixo do Conteúdo ou Estilo guia. Um switcher de layout como o nosso pertence ao Style; uma escolha relacionada ao conteúdo, como uma ordem de classificação, se encaixa no Content Uma vez que ele pousa, as opções do campo se abrem à esquerda.

Selecione as opções de campo explicadas #

• Etiqueta: o texto mostrado ao lado do dropdown em Elementor, por exemplo “Layout Style”.
• Nome: o identificador exclusivo para o campo, letras, números e sublinhados apenas Seu modelo refere-se a este nome, por exemplo layout_style.
• Opções: as escolhas em si, cada uma uma chave mais um rótulo A chave é o que seu modelo recebe; o rótulo é o que o usuário lê Mantenha as chaves curtas e CSS-seguro: boxed, minimal, outlined.
• Predefinição: a chave selecionada quando o widget primeiro cai em uma página Defina-a para sua variante mais bonita.
• Responsivo: adiciona o ícone do dispositivo para que a escolha possa diferir por ponto de interrupção.
• Descrição, Mostrar etiqueta, Separador: as configurações de exibição padrão, além de Condições mais abaixo para mostrar o campo somente quando outro controle tiver um determinado valor.

Conecte o Select ao seu modelo #

O Select imprime o seu valor com um token simples Esse valor é sempre o chave, nunca o rótulo. Dois padrões cobrem quase todos os usos.

Classe modificadora. Imprima a chave diretamente em um atributo de classe e deixe sua guia CSS fazer o resto:

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

Escolhendo renderizações de “Boxed” layout--boxed, e uma regra como .layout--boxed { border: 1px solid #e2e2e2; } assume. Três variantes tornam-se três blocos curtos de CSS O HTML nunca ramifica.

Marcação condicional. Quando as variantes precisarem de HTML diferente, não apenas estilos diferentes, compare com a chave:

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

Cuidado com uma coisa aqui: a comparação deve usar a chave. {% if layout_style == 'boxed' %} funciona, enquanto {% if layout_style == 'Boxed Layout' %} silenciosamente nunca corresponde, e você não recebe nenhum aviso sobre isso Se um condicional se recusar a disparar, verifique a ortografia da chave antes de suspeitar de qualquer outra coisa.

Use o controle Selecionar no Elementor #

Solte seu widget personalizado em uma página no Elementor Se a página já estava aberta antes de você salvar o widget, recarregue o editor primeiro, já que o Elementor mantém a configuração de controle antiga até que você selecione o widget e o dropdown aparece em seu painel sob o rótulo que você definiu, com a opção padrão pré-selecionada.

Escolha uma opção diferente e a visualização será atualizada imediatamente A classe do modificador muda, sua variante CSS entra em ação e quaisquer controles condicionados a este campo aparecem ou desaparecem para corresponder.

Casos de uso comum #

• Variantes de layout como estilos de cartão em caixa, mínimo e contornado de um widget.
• Predefinições de pairar e animação onde cada chave mapeia para uma classe CSS com sua própria transição.
• Classificar e ordenar escolhas para widgets no estilo de lista, o mais novo primeiro ou em ordem alfabética.
• Escolhedores de etiquetas de cabeçalho que trocam um h2 por um h3 através de um bloco condicional.
• Condicionar motoristas que mostram ou ocultam grupos inteiros de outros campos com base na chave selecionada.

Dicas para trabalhar com o campo Selecionar #

• As chaves são para código, os rótulos são para pessoas. Use lesmas como boxed como chaves e guarde o texto amigável para o rótulo.
• Mantenha as chaves CSS seguras. Letras minúsculas, dígitos e hífens ou sublinhados são impressos de forma limpa nos nomes das classes.
• Compare com a chave, nunca com o rótulo. Esta é a razão mais comum pela qual uma condicional Selecionar nunca corresponde.
• Prefira classes modificadoras sobre condicionais quando apenas o estilo muda O modelo permanece um bloco e as variantes vivem em CSS.
• Use as Condições Selecionar para conduzir. Junto com o Switcher, é o controle usual para revelar ou ocultar outros campos.
• Defina um padrão sensato portanto, o widget parece intencional no momento em que é descartado.

Perguntas frequentes #

Embrulhando #

O campo Widget Builder Select transforma variantes nomeadas em uma escolha de um clique Definir chaves e rótulos, imprimir a chave em uma classe modificadora ou um {% if %} bloqueio, e cada decisão de layout se move para o painel Elementor Quando a lista cresce longa ou uma escolha não é suficiente, suba para o Selecione2 campo. Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.