O Campo Escolha Visual renderiza um conjunto de cartões de imagem no painel do seu widget, um por opção, e o usuário escolhe clicando em uma miniatura É o controle do seletor de layout Onde um Select oferece palavras e um Choose oferece ícones, o Visual Choice mostra uma pequena imagem de como cada variante realmente se parece Dentro dos Master Addons Construtor de widgets, isso o torna o ajuste natural para decisões grade versus lista e qualquer variante que uma captura de tela explique mais rápido que um nome.
Os valores das opções Visual Choice são conectados diretamente Condições, permitindo que outros controles sigam o layout escolhido e entrem no Mecanismo de modelo de sintaxe dupla, onde {% if style == "grid" %} muda a marcação para corresponder Ambos os guias cobrem os detalhes.
O contrato de modelo corresponde aos outros campos de escolha: o valor é a chave da opção selecionada O que diferencia a Escolha Visual é um segundo estilo de fiação, a classe de prefixo, que altera uma classe no wrapper do widget para que seu CSS possa alternar layouts sem que o modelo jamais mencione o campo.
O que o campo Escolha Visual faz #
- Renderiza cartões de imagem clicáveis no painel Elementor, cada opção é definida por uma chave, um título e uma imagem.
- Detém uma chave do conjunto definido, o cartão atualmente selecionado.
- Coloca as cartas em colunas, três por linha por omissão, ajustável através da opção Colunas.
- Feeds modela a chave selecionada para classes modificadoras e
{% if %}blocos. - Opcionalmente define uma classe wrapper através da opção de classe de prefixo, o CSS sozinho pode alternar o layout.
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 membros da equipe com duas variantes de layout, uma grade de 3 colunas e uma lista empilhada, escolhida através de cartões de miniatura.
Como adicionar um campo de Escolha Visual #
Encontrar Escolha Visual no painel de campos à esquerda do editor Widget Builder, agrupados com os outros campos de escolha.
Arraste-o para uma seção abaixo do Conteúdo ou Estilo guia. Os selecionadores de layout geralmente ficam em primeiro lugar no painel, na parte superior da guia Conteúdo, para que os editores escolham uma estrutura antes de preencher o conteúdo. Assim que o campo chegar, suas opções serão abertas à esquerda.
Opções de campo Visual Choice explicadas #
- Etiqueta: o texto mostrado acima das cartas em Elementor, por exemplo “Layout”.
- Nome: o identificador exclusivo apenas para o campo, letras, números e sublinhados, por exemplo
team_layout. - Opções: cada opção é uma chave mais um título e uma imagem A imagem torna-se o cartão clicável; o título rotula-o As chaves ficam curtas e CSS-safe:
grid,list. - Colunas: quantas cartas ficam por linha no painel, 3 por padrão Duas cartas grandes são lidas melhor como 2 colunas.
- Classe de prefixo: um Elementor de haste de classe anexa a chave selecionada e coloca no wrapper do widget. Com
team-layout-e a chavegrid, o invólucro carregateam-layout-grid. - Predefinição: a chave selecionada quando o widget é lançado pela primeira vez em uma página.
- 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 Visual ao seu widget #
Dois estilos de fiação. Escolha um por campo.
Estilo A: padrões de modelo. O token imprime a chave selecionada, então tudo do Selecione campo aplica. Uma classe modificadora:
<div class="team team--{{ team_layout }}">
...
</div>ou um ramo estrutural quando as variantes necessitam de marcação diferente:
{% if team_layout == 'list' %}
<ul class="team-list"> ... </ul>
{% else %}
<div class="team-grid"> ... </div>
{% endif %}Estilo B: a classe de prefixo. Preencha a opção Classe de Prefixo, digamos team-layout-, e Elementor escreve team-layout-grid ou team-layout-list no wrapper do widget, à medida que o usuário clica nos cartões Seu CSS então tem como alvo a classe combinada:
.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }O modelo nunca faz referência ao campo de forma alguma; a classe wrapper faz a comutação Isso mantém o HTML em um único bloco de marcação e empurra cada variante para a folha de estilo Quando apenas a apresentação muda, isso geralmente é o corte mais limpo.
Cuidado para misturar os dois estilos em um campo Um condicional de modelo que assume grid enquanto a classe de prefixo define simultaneamente team-layout-list são duas fontes de verdade, e elas irão derivar, geralmente meses depois, quando alguém edita um lado e esquece que o outro existe. Decida se este campo fala através do modelo ou através da classe wrapper e, em seguida, siga-o.
Use o controle Visual Choice no Elementor #
Adicione seu widget personalizado a uma página no Elementor, recarregando o editor se a página já estivesse aberta O controle mostra seus cartões de opção no painel, o selecionado destacado.
Clique em um cartão e o layout inverte a visualização, seja por meio de sua classe modificadora ou por meio da classe de prefixo no invólucro, qualquer que seja a fiação escolhida. Como cada cartão mostra a variante em si, os editores escolhem o layout certo sem ler nada.
Casos de uso comum #
- Layouts de grade versus lista para widgets de equipe, portfólio e postagem.
- Variantes de estilo de cartão onde as miniaturas mostram os designs reais em caixa, sobreposição e divisão.
- Arranjos de cabeçalho como variantes de herói de topo de imagem, esquerda de imagem e somente texto.
- Apresentações deslizantes versus estáticas do mesmo conjunto de conteúdos.
- Pacotes de modelos dentro de um widget, três olhares pré-projetados que um cliente escolhe por imagem.
Dicas para trabalhar com o campo Escolha Visual #
- Use capturas de tela reais como imagens de opção. Uma pequena renderização de cada variante supera um ícone abstrato; a carta é a documentação.
- Escolha um estilo de fiação por campo. Padrões de modelo ou a classe de prefixo, não ambos, ou os dois eventualmente discordarão.
- As chaves entram nos nomes das classes, então mantenha-as lesmas.
gridelist, não “Grid Layout”. - Termine o prefixo com um separador.
team-layout-maisgridlê comoteam-layout-grid; sem o hífen você obtémteam-layoutgrid. - Combine as colunas com a contagem de cartas. Duas opções em 3 colunas deixam uma lacuna; defina Colunas como 2 e a linha será preenchida.
- Reserve-o para diferenças visuais. Se as opções diferirem no comportamento e não na aparência, um Select com rótulos claros atende melhor aos editores.
Perguntas frequentes #
Qual é o campo Escolha Visual no Master Addons Widget Builder?
O campo Escolha Visual adiciona um seletor de cartão de imagem a um widget Elementor personalizado Cada opção é uma chave com um título e uma imagem em miniatura; o usuário clica em um cartão e seu widget reage, seja através da chave selecionada no modelo ou através de uma classe de prefixo colocada no wrapper do widget.
Como funciona a classe de prefixo?
Você define um radical de classe na opção Classe de Prefixo, por exemplo team-layout-. Elementor anexa a chave selecionada e coloca o resultado, como team-layout-grid, no elemento wrapper do widget Seus alvos CSS que combinaram classe para alternar layouts, e o modelo não precisa de token em tudo.
Ainda recebo um token de modelo?
Sim. {{ team_layout }} imprime a chave selecionada, então modifique classes e {% if team_layout == 'list' %} os condicionais funcionam exatamente como fazem com um Select. A classe de prefixo é uma alternativa, não uma substituição.
Quantas cartas cabem seguidas?
Três por padrão A opção Colunas muda isso, então duas miniaturas de layout grandes podem ser um par de 2 colunas e seis pequenas amostras de estilo podem ser agrupadas em 3 colunas em duas linhas.
Quando devo usar o Visual Choice em vez de Selecionar ou Escolher?
Quando uma imagem identifica a opção mais rápido do que uma palavra ou um ícone As variantes de layout e design são o caso clássico Para conjuntos visuais curtos que um eicon cobre, alinhamento ou direção, o Escolha campo é mais leve; para listas prolixas ou longas, use um Selecionar.
O valor usa o título da opção ou a chave?
A chave, como em cada campo de escolha Títulos e imagens existem para o painel; comparações, classes modificadoras e o sufixo de classe de prefixo usam a chave que você definiu.
Embrulhando #
O campo Widget Builder Visual Choice permite que os editores escolham um layout olhando para ele: cartões de imagem no painel, uma chave no modelo e a opção de classe de prefixo quando você prefere trocar layouts apenas de CSS Ele emparelha naturalmente com o Escolha campo. Miniaturas lidar com as grandes escolhas estruturais, botões de ícone os pequenos ajustes Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.
