Após
adicionar abas para sua página, gerencie cada aba individual e organize seu conteúdo. Altere a ordem das abas como desejar e personalize o layout e o design para que ele se ajuste ao tema do seu site.
Neste artigo, saiba como:
Gerenciar abas
Gerencie as abas para definir a ordem, o posicionamento e o nome dos itens. Você também pode adicionar, duplicar e excluir itens conforme necessário para manter seu conteúdo atualizado.
Para gerenciar as abas:
- Clique nas abas no seu Editor.
- Clique em Gerenciar abas.
- Selecione como você deseja gerenciar os itens da aba:
Adicione novos itens de aba para dividir, organizar e criar seu conteúdo.
Para adicionar um novo item de aba, clique em Adicionar nova aba na parte inferior do painel.
Altere o nome das suas abas para corresponder ao seu conteúdo.
Para renomear um item da aba:
- Passe o mouse sobre o item relevante no painel.
- Clique no ícone Mais ações .
- Clique em Renomear.
- Insira o novo nome no campo.
- Clique em OK.
Duplique uma aba para copiar seu design e conteúdo. Essa é uma ótima maneira de criar vários itens semelhantes, pois os elementos são transferidos.
Para duplicar uma aba:
- Selecione a aba relevante no painel.
- Clique em Duplicar aba na parte inferior do painel.
Reorganize a ordem dos itens da aba no menu superior. Você pode exibi-los como quiser, como em ordem alfabética ou por ordem de importância.
Para alterar a ordem dos itens da aba, basta clicar e arrastar os itens para a ordem desejada.
Defina o item que é exibido automaticamente quando um visitante abre a página que contém a aba.
Para definir seu item padrão:
- Passe o mouse sobre o item relevante no painel.
- Clique no ícone Mais ações .
- Clique em Definir como padrão.
Se você não precisar mais de um item da aba, você pode excluí-lo a qualquer momento.
Para excluir um item da aba:
- Passe o mouse sobre o item relevante no painel.
- Clique no ícone Mais ações .
- Clique em Excluir.
Alterar o layout da aba
Ajuste o layout das abas para definir o espaçamento, o alinhamento e muito mais. Use as configurações para que ele se adeque à estrutura da sua página e crie um layout claro para seus visitantes.
Para personalizar o layout:
- Clique nas abas no seu Editor.
- Clique no ícone Layout .
- Escolha como deseja ajustar o layout da sua aba:
- Menu da aba é: escolha o quanto você deseja que o menu da abas se estenda:
- Justificado: o menu não ocupa toda a largura da caixa. Você pode escolher se deseja alinhar os itens do menu à esquerda, ao centro ou à direita da caixa.
- Esticado: o menu ocupa a largura de toda a caixa. Você pode alinhar o conteúdo do menu à esquerda, ao centro ou à direita da caixa.
- Espaçamento entre abas: aumente ou diminua o espaçamento entre os itens da aba.
- Espaçamento entre abas e caixa: aumente ou diminua o espaço entre o menu e as caixas de conteúdo.
- Preenchimento horizontal: ajuste o preenchimento à esquerda e à direita dos itens de menu.
- Preenchimento vertical: ajuste o preenchimento na parte superior e inferior dos itens.
- Abas que não se encaixam: selecione como exibir para exibir itens que não se encaixam no menu superior:
- Rolar: os visitantes podem rolar pelo menu para ver todos os itens.
- Quebrar texto: outra linha é adicionada para abranger todos os itens. Você pode então usar o slider para aumentar ou diminuir o espaçamento entre as linhas.
- Mostrar as abas da: mostre e itens no menu superior da esquerda para a direita ou vice-versa.
Personalizar o design das abas
Ajuste a aparência da aba para criar uma maneira pessoal e atraente de mostrar o conteúdo. Você pode personalizar diferentes partes do elemento separadamente e escolher configurações como cor, bordas e muito mais.
Para criar o design das abas:
- Clique nas abas no seu Editor.
- Clique no ícone Design .
- Selecione uma opção em O que você deseja criar? e personalize-a com as opções disponíveis:
Personalize as cores, o layout e muito mais do seu menu da aba para que ele fique como você deseja.
Selecione Menu da aba no dropdown e ajuste-o com as seguintes opções:
- Background : escolha um background de menu para se adequar à sua página e ajuste sua visibilidade. Você pode adicionar várias camadas e personalizar cada uma separadamente para criar backgrounds únicos e atraentes.
- Bordas : adicione bordas ao background do menu para criar um contraste com a página do seu site. Escolha um design e uma cor e defina a largura para que ela fique do tamanho que você precisa.
- Cantos : escolha como deseja que os cantos do seu menu fiquem. Você pode ajustar cada canto de forma diferente e torná-los mais redondos ou mais quadrados.
- Sombra : adicione sombras ao background do menu para um efeito 3D legal. Você pode definir o tamanho, a visibilidade, o ângulo e muito mais para dar mais impacto.
- Layout : ajuste o preenchimento ao redor do menu da aba para torná-lo maior ou menor. Você pode ativar ou desativar o ícone de cadeado para ajustar cada lado separadamente ou fazer com que eles sejam os mesmos.
Personalize seus itens de menu (abas). Você pode ajustar o design separadamente para cada estado; normal, ao passar o mouse e selecionado.
- Selecione Abas no dropdown.
- Clique em um estado.
- Escolha como deseja personalizar os itens da aba para esse estado:
- Background : escolha a cor do background do item para se adequar à sua página e menu e ajuste sua visibilidade. Você pode adicionar várias camadas e personalizar cada uma separadamente para criar backgrounds únicos e atraentes.
- Texto : personalize o texto do item com configurações como fonte, tamanho e espaçamento. Você também pode adicionar formatação como negrito e itálico e escolher a cor.
- Bordas : adicione bordas aos itens do menu para destacá-los. Escolha um design e uma cor e defina a largura para que ela fique do tamanho que você precisa.
- Cantos : escolha como deseja que os cantos dos seus itens fiquem. Você pode ajustar cada canto de forma diferente e torná-los mais redondos ou mais quadrados.
- Sombra : adicione sombras aos seus itens para um efeito 3D legal. Você pode definir o tamanho, a visibilidade, o ângulo e muito mais para causar impacto.
Dica: clique no ícone Aplicar design a outros estados
para dar aos itens a mesma aparência para todos os estados.
Edite o design da caixa do contêiner da aba para que fique exatamente como você deseja. Você pode adicionar backgrounds de imagem, criar um efeito 3D com sombras e muito mais.
Clique em Caixa no dropdown e escolha como deseja personalizá-la:
- Background : escolha um background para a sua caixa contêiner e ajuste a opacidade para torná-la mais ou menos visível. Você pode adicionar várias camadas e personalizar cada uma separadamente para criar backgrounds únicos e atraentes.
- Bordas : adicione bordas à caixa para destacá-la na sua página. Escolha um design e uma cor e defina a largura para que ela fique do tamanho que você precisa.
- Cantos : escolha como deseja que os cantos da sua caixa de abas fiquem. Você pode ajustar cada canto de forma diferente e torná-los mais redondos ou mais quadrados.
- Sombra : adicione sombras à sua aba para um efeito 3D legal. Você pode definir o tamanho, a visibilidade, o ângulo e muito mais para dar mais impacto.
- Layout : defina o preenchimento ao redor do contêiner para torná-lo maior ou menor. Você pode ativar ou desativar o ícone de cadeado para ajustar cada lado separadamente ou fazer com que eles sejam os mesmos.