O campo Visual Choice adiciona uma linha de cartões de imagem clicáveis a um widget personalizado construído com os Master Addons Construtor de widgets. Cada cartão é uma pequena imagem de uma opção, então os editores escolhem um layout ou estilo olhando para ele Seu modelo recebe a chave do cartão em que clicaram.
Visual Choice é um campo Pro. O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.
O que o campo Escolha Visual faz #
- Ele mostra as suas opções como cartões de imagem no painel Elementor O cartão selecionado recebe um destaque.
- Cada opção tem uma chave, um título e uma imagem O título é usado como dica de ferramenta do cartão e texto alt.
- Seu modelo recebe a chave selecionada, como
gridoulist, que você pode usar em um nome de classe ou em um{% if %}verificar. - A configuração Colunas controla quantas cartas ficam em uma linha do painel.
Se você ainda não construiu um widget, leia o Visão geral do Widget Builder primeiro. Para escolhas que são bem lidas como texto ou ícones, o Selecione e Escolher os campos são mais rápidos de configurar.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Master Addons para Elementor e Master Addons Pro, ambos ativos. O guia instalação coberturas configuração.
- Uma pequena imagem para cada opção Desenhos de linha simples cerca de 240 por 160 pixels, salvos como PNG com um fundo transparente, parecem limpos no painel escuro do Elementor.
- Um widget aberto no Widget Builder O exemplo neste guia é um widget “Team Showcase” com três layouts: Grid, List e Spotlight.
Como adicionar um campo de Escolha Visual #
- Ir para Complementos mestres > Construtor de widgets e abra seu widget.
- No Conteúdo tab, adicione uma seção Um seletor de layout geralmente vai primeiro, então os editores escolhem a estrutura antes de qualquer outra coisa.
- Tipo
visualna caixa de pesquisa de campo à esquerda. - Arrastar Escolha Visual na seção. Suas configurações abrem na barra lateral esquerda.
Opções de campo Visual Choice explicadas #
- Etiqueta é o texto acima das cartas em Elementor, por exemplo “Layout”.
- Nome o ID exclusivo do campo e seu token de modelo também são
team_layouttorna-se{{team_layout}}. Apenas letras, números e sublinhados. - Descrição aparece sob as cartas em Elementor.
- Opções possui uma linha por carta. Chave é o valor que seu modelo obtém (mantenha-o curto e minúsculo, como
grid). Título nomeia o cartão Clique no Imagem caixa para abrir a janela Selecionar imagem, fazer upload de um arquivo ou escolher um na Biblioteca de mídia e clicar Usar esta imagem. O ícone de mais adiciona uma linha e a cruz vermelha remove uma. - Colunas define quantas cartas cabem em uma linha, de 1 a 6. digite o número mesmo que a caixa já mostre 2. o número mostrado não é salvo até que você o altere, e sem um valor salvo Elementor coloca uma carta em cada linha.
- Alternar está listado no painel, mas em nossos testes não fez diferença Os editores sempre podiam clicar no cartão selecionado novamente para limpá-lo.
As configurações comuns abaixo funcionam como em outros campos, inclusive Condições. O painel não possui valor padrão para este campo, portanto uma nova cópia do widget começa sem nenhum cartão selecionado.
Clique Salvar configurações depois de adicionar as opções.
Use a chave selecionada no seu modelo #
{{team_layout}} imprime a chave do cartão seleccionado A forma mais simples de o utilizar é uma classe modificadora:
<div class="ts-team ts-team--{{team_layout}}">
...
</div>Com Grid selecionado, isso renderiza ts-team--grid. Quando um layout precisar de marcação diferente, verifique a chave com {% if %}. O exemplo mostra uma biografia curta apenas no layout da Lista:
{% if team_layout == 'list' %}
<p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}
Em seguida, escreva um conjunto de regras CSS por chave:
.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }
Até que um editor clique em um cartão, o token não imprime nada e a classe acima se torna ts-team--. Dê a base .ts-team classifique um layout que pareça bom por si só, para que o widget nunca pareça quebrado antes que uma escolha seja feita.
Use o controle Visual Choice no Elementor #
Adicione o widget a uma página, ou recarregue o editor se a página já estiver aberta Os cartões aparecem na guia Conteúdo Clique em um e as atualizações da tela imediatamente.
Clicar em Lista muda a equipe para linhas e o {% if %} block adiciona a biografia:
O Spotlight torna o primeiro membro maior:
Clique no cartão selecionado novamente para limpar a escolha O modelo então recebe uma chave vazia, conforme descrito acima.
Casos de uso comum #
- Escolhedores de layout para widgets de equipe, blog, portfólio e depoimentos.
- Estilos de cartão ou cabeçalho que são mais fáceis de reconhecer a partir de uma imagem do que de um nome.
- Escolhas de posição da imagem, como imagem à esquerda, imagem à direita ou imagem na parte superior.
- Projetos predefinidos que alternam várias regras CSS ao mesmo tempo com uma classe.
Dicas para trabalhar com o campo Escolha Visual #
- Use o mesmo estilo de desenho para cada imagem de opção, para que as cartas pareçam um conjunto.
- Mantenha as chaves curtas, minúsculas e livres de espaços Eles acabam em nomes de classe.
- Não renomeie uma chave quando o widget estiver em uso As páginas que salvaram a chave antiga não corresponderão ao seu novo CSS.
- Defina Colunas para o número de opções quando você tiver três ou menos, para que todas as cartas fiquem em uma linha.
- Estilize o estado vazio Até alguém escolher um cartão, a chave fica em branco.
Perguntas frequentes #
O campo Escolha Visual é gratuito?
No. Visual Choice é um dos campos Pro no Widget Builder, então Master Addons Pro tem que estar ativo antes que você possa adicioná-lo a um widget.
O que o modelo obtém quando um cartão é selecionado?
A chave da opção Se o cartão Grid tiver a chave grid, {{team_layout}} impressões grid. O título e a imagem são usados apenas no painel.
Por que meu widget mostra apenas uma carta por linha no Elementor?
Não foi gravado Columns Digite um número na caixa Columns, mesmo que já mostre 2, então salve o widget e recarregue o Elementor.
Posso definir qual cartão está selecionado por padrão?
Não do painel de campo, que não tem Valor Padrão para Escolha Visual Estilo a classe base para que o widget olhe logo antes de um cartão ser escolhido.
O Visual Choice pode adicionar uma classe ao wrapper do widget?
Não do painel de campo Imprima a chave dentro de sua própria marcação, por exemplo class="ts-team ts-team--{{team_layout}}", e direcione essa classe em seu CSS.
Embrulhando #
Dê a cada opção uma chave, um título e uma imagem, digite um valor de Colunas e use {{field_name}} em um nome de classe ou um {% if %} verificar. Planeje o estado vazio, já que nada está selecionado até que um editor clique em um cartão. Para escolher em uma lista de texto, consulte o Selecione2 campo, e verifique preços para o que cada plano inclui.
