header-logo
Primeiros passosConfira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.
Crie o seu siteAprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.
Conta e faturamentoRevise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.
Use os apps mobile do WixUse o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.
Conecte um domínioEntenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.
Gerencie o seu negócioEncontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.
Promova o seu siteConfira como promover seu site nos motores de busca, enviar campanhas de email e veicular anúncios pagos.
Wix Studio, Parceiros e empresasTire o máximo proveito da sua conta do Wix Studio, Parceiro Wix ou Wix Empresarial, para que você possa expandir seus negócios.
AjudaObtenha informações sobre como resolver os problemas técnicos e de desempenho do seu site. Além disso, acompanhe os próximos recursos em nosso roadmap de produtos.
placeholder-preview-image
Wix LearnDomine novas habilidades com nossos cursos e tutoriais.
Blog do WixConfira nossas dicas de web design, marketing e mais.
Learning Hub de SEOAumente o tráfego orgânico vindo dos motores de busca.
Website developmentDesenvolva um site único com a nossa plataforma full-stack.
Contrate um profissionalAlcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image
  1. Início
  2. Crie o seu site
  3. Use o Editor do Wix Harmony
  4. Adicione e personalize elementos
  5. Editor do Wix Harmony: adicionar e personalizar abas

Editor do Wix Harmony: adicionar e personalizar abas

Neste artigo
  • Adicionar abas a uma página
  • Personalizar o conteúdo das abas
  • Gerenciar abas
  • Fazer o design das abas
  • Adicionar transições
As abas ajudam você a agrupar conteúdo relacionado em um só lugar para que os visitantes possam alternar entre as seções sem precisar rolar para baixo ou sair da página. Elas mantêm suas páginas limpas e direcionadas, ao mesmo tempo em que dão aos visitantes acesso rápido a todas as informações de que precisam.
Navegando entre as abas no elemento abas em um site online criado no Wix Harmony

Adicionar abas a uma página

Adicione abas quando quiser manter muitas informações em um só lugar sem sobrecarregar a página. Escolha um layout que você gosta e personalize-o para que ele combine com o seu site.

Para adicionar abas:

  1. Vá para o seu editor.
  2. Clique em + Elementos no canto superior esquerdo do editor.
  3. Clique no ícone Caixa à esquerda.
  4. Clique em Abas.
  5. Selecione um design e arraste-o para a página.
    Dica: você pode personalizar totalmente o design após adicionar o elemento abas.
A seção Abas do painel Elementos no Editor do Wix Harmony

Personalizar o conteúdo das abas

Após adicionar o elemento abas, crie o conteúdo dentro de cada aba. Clique em qualquer elemento no design existente para personalizá-lo e adicione mais conteúdo usando o painel Elementos.

Para personalizar suas abas:

  1. Vá para o seu editor.
  2. Clique no elemento abas relevante.
  3. Clique no dropdown no canto superior esquerdo e selecione a aba que deseja personalizar.
O dropdown que permite que você navegue entre as abas no elemento aba no Editor do Wix Harmony
  1. Escolha o que fazer a seguir:
    • Editar elementos existentes: clique em um elemento na aba e personalize-o usando as opções disponíveis na barra de ação.
    • Adicionar mais elementos:
      1. Clique em + Elementos no canto superior esquerdo do editor.
      2. Arraste o elemento escolhido sobre a aba.
      3. Solte o elemento quando vir a mensagem Anexar ao contêiner.
Anexando um elemento de arte vetorial a uma aba específica no elemento abas no Wix Harmony

Gerenciar abas

Use o painel Gerenciar itens para acompanhar suas abas. Aqui, você pode reordená-las, adicionar ou remover abas, duplicar as que funcionam bem e renomear cada aba para que ela corresponda claramente ao seu conteúdo.

Para gerenciar as abas:

  1. Vá para o seu editor.
  2. Clique no elemento abas relevante.
  3. Clique em Gerenciar itens na barra de ação.
  4. Escolha o que fazer a seguir:
O elemento abas no Editor do Wix Harmony e o painel Gerenciar itens, mostrando as opções disponíveis para um item

Fazer o design das abas

Dê às suas abas um visual que combine com o seu site. Você pode ajustar o espaçamento ao redor de todo o elemento abas, estilizar o menu da aba (cor, texto, bordas, layout e mais) e personalizar o contêiner da aba para que tudo fique coeso. Se você definir seu menu da aba para rolar, você também pode estilizar o botão de rolagem para que ele combine com o resto.

Para personalizar o design das abas:

  1. Vá para o seu editor.
  2. Clique no elemento abas relevante.
  3. Clique no ícone Todas as opções de design na barra de ação.
  4. Selecione a opção relevante em Selecione uma parte e personalize o design do elemento:
O elemento abas no editor do Wix Harmony e o painel design, a parte do contêiner de conteúdo está selecionada

Adicionar transições

Adicione um efeito de transição para que seus visitantes possam alternar entre as abas facilmente. Escolha um tipo de transição (cross-fade ou slide) e defina quanto tempo dura o efeito.

Para adicionar um efeito de transição:

  1. Vá para o seu editor.
  2. Clique no elemento abas relevante.
  3. Clique no ícone Configurações na barra de ação.
  4. Escolha um tipo de transição e ajuste-a como desejar:
    • Cross-fade: as abas aparecem e desaparecem quando os visitantes clicam entre elas. Arraste o slider em Duração da transição para definir por quanto tempo a transição é reproduzida.
    • Deslizar: as abas deslizam para dentro quando os visitantes clicam nelas.
      • Duração da transição: arraste o slider para definir por quanto tempo a transição é reproduzida.
      • Direção da transição: selecione se as abas deslizam de baixo ou de cima.
O elemento abas no Editor do Wix Harmony e seu painel Configurações, selecionando a transição de slide entre as abas

Esse artigo foi útil?

|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Começar
Neste artigo
  • Adicionar abas a uma página
  • Personalizar o conteúdo das abas
  • Gerenciar abas
  • Fazer o design das abas
  • Adicionar transições

Esse artigo foi útil?

|