Escolher

O Escolha campo renderiza uma linha de botões de ícones no painel do seu widget, o mesmo controle que o Elementor usa para alinhamento de texto: três ou quatro botões, um ativo de cada vez Dentro dos Complementos Mestres Construtor de widgets, é a escolha certa sempre que as opções são poucas e um ícone diz mais do que uma palavra O alinhamento é o exemplo óbvio, mas os interruptores de posição e direção se encaixam no mesmo molde.

As teclas de opção do controle Escolha funcionam diretamente com Condições, portanto outros campos podem aparecer com base na opção escolhida e com o Mecanismo de modelo de sintaxe dupla, onde um cheque como {% if align == "center" %} muda sua marcação Ambos os guias cobrem os detalhes.

Como o Select, o valor entregue ao seu modelo é a chave da opção, não o seu título O que o Choose adiciona no topo: um ícone por opção, um comportamento de alternância opcional e um caminho direto para o mecanismo de seletores do Elementor para escolhas CSS puras, como alinhamento.

O que o campo Escolher faz #

• Rende uma linha de botões de ícones no painel Elementor, um por opção que você define.
• Detém uma chave a partir do conjunto definido, exatamente um botão ativo de cada vez.
• Combina cada opção com um eicon, como eicon-text-align-left, então a escolha é lida rapidamente.
• Opcionalmente, desliga: com a opção Alternar ligada, clicar novamente no botão ativo o desmarca e o valor fica vazio.
• Suporta um sinalizador responsivo e pode escrever CSS diretamente através de um seletor, abordado abaixo.

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 testemunho com um seletor “Quote Alignment”: esquerda, centro, direita.

Como adicionar um campo Escolher #

No editor Widget Builder, encontre o Escolher campo no painel à esquerda, agrupado com os outros campos de escolha.

Arraste-o para uma seção abaixo do Estilo tab; as configurações do tipo alinhamento vivem naturalmente lá Uma vez que ele pousa, as opções do campo abrem à esquerda.

Escolha as opções de campo explicadas #

• Etiqueta: o texto mostrado ao lado dos botões em Elementor, por exemplo “Quote Alignment”.
• Nome: o identificador exclusivo apenas para o campo, letras, números e sublinhados, por exemplo quote_align.
• Opções: cada opção é uma chave mais um título e um ícone O título torna-se a dica do botão e o ícone é uma classe eicon, por exemplo eicon-text-align-left para a chave left.
• Alternar: quando ligado, clicar novamente no botão ativo o desmarca e o valor do campo fica vazio Deixe desligado se o widget sempre precisar de um valor.
• Predefinição: a chave ativa quando o widget é lançado pela primeira vez em uma página.
• Responsivo: adiciona o ícone do dispositivo para que o alinhamento 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 para mostrar o campo somente quando outro controle tiver um determinado valor.

Conecte a Escolha ao seu modelo ou seletor #

Existem dois estilos de fiação O exemplo de alinhamento funciona com qualquer um.

Padrões modelo. O token imprime a chave selecionada, para que os padrões Select sejam transferidos inalterados. Uma classe modificadora mantém as variantes na sua guia CSS:

<blockquote class="quote align--{{ quote_align }}">
  {{ quote_text }}
</blockquote>

com .align--center { text-align: center; } e amigos na aba CSS Os condicionais também funcionam: {% if quote_align == 'center' %}. Tal como acontece com o Select, compare com a chave, nunca com o título.

A opção Seletor. O Choose também pode escrever CSS através do mecanismo de seletores do Elementor, pulando o modelo inteiramente Uma coisa a saber antes de confiar nele: a propriedade padrão que o Elementor injeta para um seletor Choose é color: {{VALUE}}, que é inútil para o alinhamento Uma entrada de seletores personalizados tem que soletrar a propriedade real:

text-align: {{VALUE}};

As chaves precisam então ser valores CSS válidos (left, center, right já são), e {{WRAPPER}} é anexado automaticamente para esse tipo de controle de valor, para que os estilos permaneçam definidos no seu widget sem você escrevê-lo.

Cuidado com a versão silenciosa deste erro Uma Escolha com fio para um seletor que mantém a propriedade padrão será escrita com prazer color: center, uma declaração inválida o navegador cai sem uma palavra Sem aviso de console, sem dica visual Se os botões parecem não fazer nada, inspecione o CSS gerado antes de tocar no campo configurar.

Use o controle Escolher no Elementor #

Adicione seu widget personalizado a uma página no Elementor, recarregando o editor se a página já estivesse aberta O controle aparece como uma linha de botões de ícones sob sua etiqueta, com o botão da chave padrão ativo.

Clique em um botão e as atualizações de visualização de uma só vez Com Alternar ativado, clicar no botão ativo limpa a escolha e o widget volta para o que a guia CSS definir Com Responsive on, o ícone do dispositivo permite que cada ponto de interrupção mantenha sua própria escolha.

Casos de uso comum #

• Alinhamento texto para títulos, cotações e legendas, o território do controle.
• Posição elemento como imagem à esquerda ou imagem à direita em um cartão de mídia e texto.
• Interruptores de direção para listas e cronogramas horizontais versus verticais.
• Predefinições de tamanho como pequeno, médio e grande mapeado para classes modificadoras.
• Escolhas do lado do show para crachás e fitas, de cima para a esquerda através dos cantos inferior direito.

Dicas para trabalhar com o campo Escolher #

• Mantenha-o em duas, três ou quatro opções. Uma linha de sete botões de ícone é um dropdown vestindo uma fantasia; use um Selecionar em seu lugar.
• Corresponder as chaves aos valores CSS ao usar um seletor. Chaves como left e center cair direto em text-align: {{VALUE}} sem camada de tradução.
• Defina a propriedade real em seletores personalizados. A propriedade injetada padrão é color: {{VALUE}}, que só se adequa às escolhas reais de cores.
• Planeje o valor vazio se Toggle estiver ativado. Um campo desmarcado imprime uma chave vazia, então align-- classes e condicionais devem tolerá-lo ou impedir a alternância.
• Compare com chaves em condicionais. O título da opção é texto apenas para painel e nunca corresponde {% if %}.
• Use Responsive para alinhamento. Centro-em-móvel, esquerda-em-desktop é um controle em vez de dois.

Perguntas frequentes #

Embrulhando #

O campo Escolha do Construtor de Widgets dá às pequenas decisões visuais o controle que elas merecem As chaves ficam atrás dos botões de ícones, um token alimenta classes modificadoras e condicionais, e o caminho do seletor lida com escolhas de uma propriedade, como alinhamento, uma vez que você define a propriedade CSS real Para escolhas de layout que precisam de uma miniatura completa em vez de um ícone, suba até o Campo Escolha Visual. Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.