Editor X: adicionar e personalizar uma Sanfona

5 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
Use o elemento Sanfona para mostrar uma grande quantidade de conteúdo em um espaço pequeno. Ao permitir que os visitantes expandam e recolham itens, eles podem encontrar facilmente as informações de que precisam sem precisar rolar por uma longa lista.
Um GIF mostrando um exemplo do elemento Sanfona em um site do Editor X
Neste artigo, saiba como:

Adicionar o elemento Sanfona

Selecione um design de Sanfona que você gosta para começar. Você pode personalizar cada item no seu Acordeão para mostrar seu conteúdo. Adicione os elementos necessários e organize-os como quiser dentro do contêiner. 

Para adicionar um elemento Sanfona:

  1. Clique em Elementos  na parte superior do Editor X.
  2. Clique em Layout.
  3. Clique em Sanfona.
  4. Arraste uma Sanfona que você gosta para sua página. 
  5. Edite o conteúdo de cada item de Sanfona:
    1. Clique no elemento Sanfona no seu Editor.
    2. Clique em Gerenciar itens.
    3. Clique no item que você deseja editar. Isso abre o item para que você possa ver o que ele está mostrando.
    4. Adicione os elementos e informações relevantes ao seu item.

Adicionar e gerenciar itens da Sanfona

Gerencie os itens que aparecem no seu elemento Sanfona. Você pode adicionar mais itens ao seu conteúdo, dar novos títulos e alterar a ordem em que aparecem.

Para adicionar e gerenciar itens da Sanfona:

  1. Clique no elemento Sanfona no seu Editor.
  2. Clique em Gerenciar itens.
  3. Passe o mouse sobre o item e clique no ícone Mais ações .
  4. Escolha o que fazer com este item da Sanfona: Duplicar, Renomear ou Excluir.
Dicas:
  • Clique em Adicionar item na parte inferior do painel para adicionar um novo item em branco.
  • Você pode alterar a ordem dos seus itens. Segure o ícone Reordenar  ao lado de um item e arraste-o para o local desejado.

Escolher como a Sanfona abre e fecha

Decida como sua Sanfona ficará quando os visitantes carregarem a página. Você pode deixar todos os itens abertos para que as informações fiquem facilmente acessíveis ou fechados para uma aparência mais minimalista. Você também pode escolher se os visitantes podem ou não abrir vários itens ao mesmo tempo.  

Para escolher como a Sanfona abre e fecha:

  1. Clique no elemento Sanfona no seu Editor.
  2. Clique no ícone Configurações .
  3. Selecione uma opção em Escolha o estado padrão:
    • Todos os itens fechados: os visitantes veem primeiro os itens da Sanfona fechados. Eles escolhem qual item expandir para ler mais.
    • Primeiro item aberto: os visitantes veem o conteúdo do item superior enquanto os outros itens estão fechados.
    • Todos os itens abertos: os visitantes veem o conteúdo de todos os itens quando a página é carregada. 
  4. Clique na alavanca Permitir vários itens abertos:
    • Ativada: os visitantes podem deixar abertos quantos itens quiserem na sanfona. 
    • Desativada: os visitantes só podem abrir um item por vez.
  5. (Opcional) Adicione um efeito de transição que aparece quando os visitantes clicam em um item para abri-lo.

Fazer o design da Sanfona

Você pode personalizar cada parte da Sanfona para que ela combine com o resto da sua página. Personalize os títulos dos itens, os contêineres que mostram o conteúdo de cada item ou todo o espaço de um item (título e contêiner incluídos).

Para fazer o design de uma Sanfona:

  1. Clique no elemento Sanfona no seu Editor.
  2. Clique no ícone Inspetor  na parte superior do Editor X.
  3. Clique na aba Design .
  4. Escolha o que você deseja personalizar no dropdown:
    • Títulos: esses são os títulos dos seus itens. Você pode personalizar os títulos para que tenham uma aparência diferente quando os visitantes passarem o mouse sobre eles. 
    • Contêineres: são os contêineres que mostram o conteúdo de cada item.
    • Itens em sanfona: controla todo o espaço de um item da Sanfona (título e contêiner incluídos).
  5. Use as opções disponíveis para escolher diferentes backgrounds, fontes, cantos, bordas e mais.

Ajustar o layout da Sanfona

Ajuste o layout do elemento Sanfona como preferir. Você pode escolher o alinhamento, o preenchimento e a posição dos títulos dos itens, bem como o ícone que aparece ao lado de cada título.

Para ajustar o layout da Sanfona:

  1. Clique no elemento Sanfona no seu Editor.
  2. Clique no ícone Layout .
  3. Ajuste o layout do elemento Sanfona:
    • Escolha um ícone: selecione o ícone que aparece ao lado dos títulos do item: Seta ou Mais
    • Posição do ícone: decida se o ícone aparece à esquerda ou à direita dos seus títulos. 
    • Preenchimento do título: arraste os sliders para adicionar preenchimento horizontal e vertical ao redor dos títulos dos itens. 
Dica:
Cada item vem com uma grade integrada que você pode ajustar como preferir. Adicione mais linhas e colunas para criar seu layout perfeito.

Esse artigo foi útil?

|