Principais conclusões
- As abas verticais colocam os títulos em uma coluna à esquerda ou à direita, com o painel ao lado delas Eles se adequam a títulos longos e seis ou mais seções, onde uma faixa horizontal seria envolta.
- O widget Tabs do próprio Elementor faz isso com o controle Direction definido como Iniciar ou Terminar. Nenhum CSS necessário.
- O Widget de guias de complementos mestres tem uma predefinição no estilo Vertical Tabs, que chega estilizada em vez de simples.
- Abaixo de cerca de 768 px não há largura suficiente para uma coluna lateral, então ambas as rotas empilham Apenas o widget do núcleo se transforma em um acordeão.
- Escolha o núcleo se os widgets entrarem nos painéis e o complemento se a própria coluna de guias precisar de ícones ou de uma aparência finalizada.
As guias horizontais quebram quando os títulos ficam longos ou numerosos. Seis títulos em uma coluna de 1.200 px envolvem duas linhas ou diminuem o texto até que ninguém os leia.
As abas verticais viram a tira de lado: uma coluna estreita de títulos com o painel ativo ao lado Cada título recebe uma linha completa, então “Shipping e returns” cabe sem embrulhar Ambas as maneiras de construí-la seguem.
Índice
Quando a vertical bate na horizontal
Vertical é o melhor layout quando qualquer um deles é verdadeiro:
- Mais de cinco seções, onde uma tira envolve, mas uma coluna fica mais alta.
- Títulos com mais de duas palavras. “A garantia e os reparos” precisam de uma linha completa.
- Painéis de alturas muito diferentes, pois a coluna do título permanece colocada enquanto o painel muda de tamanho.
- Conteúdo que parece um menu: seções de documentação, listas de serviços, perguntas frequentes agrupadas.
Fique na horizontal por três ou quatro títulos curtos Uma coluna lateral come cerca de um quarto da largura e, com três abas, essa negociação não vale a pena.
Método 1: Controle de direção do elementor
O widget Tabs no Elementor lida com isso sem um complemento.
- Arraste o widget Tabs para a página.
- No Layout, defina Direção para Iniciar para títulos à esquerda ou Fim para títulos à direita.
- Defina Alinhar Título para controlar se o texto do título fica à esquerda, no centro ou à direita dentro da coluna.
- Construa cada painel dentro de seu contêiner como de costume.
Start coloca a coluna à esquerda em uma linguagem da esquerda para a direita e inverte automaticamente para a direita para a esquerda, e é por isso que os valores são chamados de Iniciar e Fim em vez de Esquerda e Direita.
O resultado é funcional e sem estilo: títulos de texto em uma coluna, o painel ao lado deles e todas as bordas e cores deixadas para a guia Estilo.
Método 2: predefinição das Tabelas Verticais
O widget Master Addons trata o layout como uma predefinição em vez de uma direção, então o estilo vem com ele.
- Arraste o widget Tabs para dentro.
- Defina o estilo predefinido em guias verticais.
- Adicione um item repetidor por seção, cada um com um título de guia.
- Defina Tipo de Ícone para Ícone ou Imagem se os títulos precisarem de um e escolha o ícone.
- Escreva o conteúdo do painel e alterne Definir como padrão em qualquer guia que deva abrir primeiro.
A coluna chega com seu próprio plano de fundo, espaçamento e estado ativo, então um bloco utilizável leva um minuto em vez de uma sessão de estilo O limite é o mesmo que o addon sempre tem: os painéis contêm conteúdo do editor, portanto, um formulário ou galeria dentro de uma guia significa um modelo salvo no Pro ou o widget principal.
Uma variante mais silenciosa: borda ativa esquerda
Vale a pena conhecer a terceira predefinição. A borda ativa esquerda mantém a coluna vertical, mas deixa cair a aparência em caixa: os títulos ficam no fundo da página e o ativo é marcado com uma barra colorida na borda esquerda.
Este é o único a alcançar em páginas de estilo de documentação, onde uma coluna de guia pesada luta contra o corpo do texto para chamar a atenção.
O que acontece em um telefone
Uma tela de 390 px não tem espaço para uma coluna lateral mais um painel, portanto, ambas as rotas abandonam o layout vertical.
O widget principal é empilhado em um acordeão vertical abaixo do ponto de interrupção escolhido em configurações adicionais, com cada título diretamente acima de seu próprio painel. O widget de complemento empilha os títulos em uma coluna de largura total com o painel embaixo, que funciona, embora não seja um acordeão: o painel aberto fica abaixo de toda a lista de títulos.
De qualquer forma, verifique a visualização do telefone antes de publicar O layout que você projetou na área de trabalho não é o layout que um visitante do telefone vê.
Qual método usar
| Situação | Método |
|---|---|
| Formulários, galerias ou tabelas de preços dentro dos painéis | Guias principais, direção definida para iniciar |
| Precisa ser um acordeão nos telefones | Guias principais |
| Títulos à direita em vez de à esquerda | Guias principais, direção definida como final |
| Ícones ou imagens nos títulos | Addon, Predefinição de guias verticais |
| Coluna estilizada sem trabalho de guia de estilo | Addon, Predefinição de guias verticais |
| Navegação lateral em estilo de documentação simples | Addon, Predefinição da borda ativa esquerda |
| Os painéis ligam o hover | Addon, Efeito Tab definido como Hover |
Perguntas frequentes
Elementor pode fazer abas verticais sem um complemento?
Sim. Defina o controle de Direção do widget Tabs para Iniciar ou Terminar e os títulos se movem para uma coluna lateral.
Por que os valores de Direção são chamados de Início e Fim, não de Esquerda e Direita?
Então o layout vira corretamente nas linguagens da direita para a esquerda O início é o lado em que o texto começa.
Quantas abas funcionam em um layout vertical?
Seis a dez é confortável. Depois disso, a coluna fica mais alta que o painel ao lado, o que parece estranho.
As abas verticais permanecem verticais no celular?
Não. Não há largura suficiente, então ambas as rotas são empilhadas. O widget principal se torna um acordeão; o complemento acumula títulos acima do painel.
Posso colocar um formulário dentro de uma aba vertical?
Com o widget principal, sim, porque cada painel é um contêiner Com o addon, o equivalente é apontar o Tipo de Conteúdo para um modelo salvo, que é uma opção Pro.
Pensamentos finais
Ir vertical é como você resolve um problema de largura sem encurtar os títulos O controle de Direção do Elementor faz isso sem addon e mantém contêineres nos painéis, o que importa se algo interativo entrar As predefinições de addon importam quando a coluna de título tem que parecer terminada sem que você a estilize Ambas levam aproximadamente o mesmo tempo para construir, então o que vive no painel decide.
Leitura relacionada
