Guias

O Campo de guias organiza os controles de um widget em guias de painel, a mesma estrutura que os próprios widgets do Elementor usam para o estilo de estado Normal e Hover Inside the Master Addons Construtor de widgets, você define as guias, coloca controles filhos em cada uma e o painel Elementor as renderiza como uma faixa de guias compacta em vez de uma longa rolagem de campos.

Os suportes de controle Tabs Condições como todo campo, e seus filhos são lidos através do Mecanismo de modelo de sintaxe dupla com um token de três partes, {{ tabs.tab_1.field }}, nenhum laço exigido Ambos os guias cobrem os detalhes e as limitações.

Tabs é um campo estrutural Ele não detém nenhum valor próprio; os valores pertencem às crianças, e seu modelo lê cada um através de um caminho aninhado que nomeia o campo tabs, a guia e o campo dentro dele Sem loops, sem truques, apenas endereços.

O que o campo Tabs faz #

• Rende uma faixa de guias no painel do widget, construído sobre o mecanismo de guias de controle da Elementor.
• Possui um conjunto de guias, cada um com seu próprio nome, rótulo e lista de controles infantis.
• Mantém os estados relacionados juntos, sendo o emparelhamento clássico as versões Normal e Hover das mesmas configurações.
• Expõe valores filhos através de caminhos aninhados no seu template: o nome do campo tabs, depois a tab, depois o campo.
• Permite os mesmos nomes de filhos nas guias, então Normal e Hover podem se espelhar de forma limpa.

Se você está apenas começando com o construtor, leia o Visão geral do Widget Builder antes deste.

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 botão com um campo Tabs nomeado states segurando uma guia Normal e uma guia Hover, cada uma com um campo de cores nomeado bg.

Como adicionar um campo Tabs #

No editor Widget Builder, role o painel de campos à esquerda até encontrar o Guias campo, listado com outros campos estruturais, como Popover Toggle e Repeater.

Arraste-o para uma seção abaixo do Estilo tab, onde o estilo de estado vive, então defina as guias e solte os controles de filho em cada uma As opções do campo abrem à esquerda assim que ele pousar.

Opções de campo das guias explicadas #

• Etiqueta: o título mostrado acima da faixa de aba no Elementor.
• Nome: o identificador exclusivo para todo o grupo de guias, letras, números e sublinhados apenas, por exemplo states. É o primeiro segmento do caminho modelo de cada criança.
• Guias: a lista de guias Cada guia carrega um nome (usado em caminhos de modelo, por exemplo normal), um rótulo (mostrado na tira, por exemplo “Normal”) e seu próprio conjunto de controles filhos.
• Controles infantis: os campos dentro de cada guia Os tipos de campo de valor funcionam aqui, e cada um mantém suas próprias opções e forma de valor.
• Descrição, Mostrar etiqueta, separador e condições são as mesmas opções de exibição de todos os outros lugares.

Leia os valores das guias por caminhos aninhados #

Filhos de um campo Tabs são endereçados com um caminho de pontos de três partes: o nome do campo tabs, o nome da tab, depois o nome do campo child.

{{ tabsname.tabname.fieldname }}

Não há looping sobre guias Cada valor é lido exatamente onde você precisa Para o exemplo do botão, a states campo de guias com guias Normal e Hover, cada uma segurando um bg campo de cores, fios no painel CSS assim:

.ma-btn {
  background: {{ states.normal.bg }};
}
.ma-btn:hover {
  background: {{ states.hover.bg }};
}

Nomear a criança da mesma forma em ambas as guias é deliberado e suportado Internamente, o construtor deduz chaves duplicadas com um contador, mas o caminho do modelo permanece por guia, portanto bg em Normal e bg no Hover permanecem dois valores distintos e endereçados de forma limpa Os nomes espelhados são o padrão a ser almejado: quem lê o modelo vê as regras Normal e Hover diferirem em apenas um segmento de caminho.

Cuidado: o token plano {{ bg }} não resolve nada, assim como as duas partes {{ normal.bg }}. O caminho sempre começa com o próprio nome do campo Tabs Quando um valor de tabulação é impresso vazio, conte os segmentos primeiro Renomear uma tabulação quebra caminhos da mesma maneira silenciosa; o CSS continua compilando, o valor apenas para de chegar, então estabeleça os nomes das tabulações antes de escrever as regras.

Use o controle de guias no Elementor #

Adicione seu widget personalizado a uma página no Elementor (ou recarregue o editor se a página já estiver aberta).A faixa de guias é renderizada no painel com os rótulos das guias e clicar em uma guia revela seus controles filhos.

Um editor define o fundo Normal na primeira guia, muda para Hover e define a segunda cor, passar o botão na visualização mostra a transição imediatamente, uma vez que ambos os valores já estão nas regras CSS do widget.

Casos de uso comum #

• Estilo Normal e Hover para botões, cartões e links, o emparelhamento clássico.
• Estados ativos e inativos para alternâncias, filtros e itens de navegação.
• Configurações antes e depois em comparação ou revelar widgets.
• Variantes claras e escuras, permitindo que os editores sintonizem ambos os esquemas de uma seção.
• Estilo estranho e uniforme de linha em widgets de lista e tabela.

Dicas para trabalhar com o campo Tabs #

• Valores de endereço com o caminho completo de três partes. {{ states.hover.bg }} obras; {{ bg }} e {{ hover.bg }} não.
• Espelhe nomes de crianças nas guias. Mesmos campos, mesmos nomes, um segmento de caminho diferente; o modelo permanece legível e as guias permanecem comparáveis.
• Mantenha os nomes das guias curtos e minúsculos. Eles são identificadores de modelo, então normal e hover beat “Tab 1” e “Tab 2”.
• Use guias para estados, seções para tópicos. Duas variantes das mesmas configurações pertencem às guias; configurações não relacionadas pertencem a seções separadas.
• Lembre-se de que cada criança mantém a forma de valor do seu tipo. Um controle deslizante dentro de uma guia ainda é lido como {{ states.normal.gap.size }}{{ states.normal.gap.unit }}.

Perguntas frequentes #

Embrulhando #

O campo Abas do construtor de widgets transforma o estilo de estado em um padrão de painel organizado: defina normal e hover uma vez, espelhe os nomes das crianças e seu CSS será lido {{ states.normal.bg }} contra {{ states.hover.bg }} sem mais nada mudando Para repetir conteúdo em vez de estados emparelhados, o Campo repetidor é o irmão estrutural a alcançar. Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.