Editor do Wix Studio: adicionar e personalizar uma sanfona
6 min de leitura
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.
Neste artigo confira como:
Adicionar o elemento sanfona
Selecione um design de sanfona que você gosta para começar. Você pode personalizar cada item na sua sanfona para mostrar o conteúdo do seu cliente. Adicione os elementos necessários e organize-os como quiser dentro do contêiner.
Para adicionar um elemento sanfona:
- Clique em Elementos
no lado esquerdo do Editor. - Clique em Ferramentas de layout.
- Clique em Sanfonas.
- Arraste uma sanfona que você gosta para sua página.
- Edite o conteúdo dos itens da sanfona:
- Selecione o elemento de sanfona que você adicionou.
- Clique em Gerenciar itens.
- Clique no item que deseja editar.
Dica: isso abre o item na tela para que você possa ver o que ele está mostrando. - Adicione os elementos e informações relevantes ao seu item.
Adicionar e gerenciar itens da sanfona
Gerencie os itens que aparecem no seu elemento de sanfona. Você pode adicionar mais itens ao conteúdo do seu cliente, dar novos títulos e alterar a ordem em que aparecem.
Para adicionar e gerenciar itens da sanfona:
- Selecione o elemento sanfona.
- Clique em Gerenciar itens.
- Passe o mouse sobre o item e clique no ícone Mais ações
. - Escolha o que fazer com esse item da sanfona: Duplicar, Renomear ou Excluir.
Dicas:
- Clique em Adicionar item na parte inferior do painel para adicionar um novo item vazio.
- Você pode alterar a ordem dos seus itens. Clique e 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:
- Selecione o elemento sanfona.
- Clique no ícone Configurações
. - 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.
- 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 de cada vez.
- (Opcional) Aplique um efeito de transição que aparece quando os visitantes clicam em um item para abri-lo.
Observação:
A opção de permitir que vários itens sejam abertos na sanfona não está disponível se você escolher Todos os itens abertos como o estado padrão.
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:
- Selecione o elemento sanfona.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- 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).
- 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.
Dica:
Você pode aplicar uma grade CSS a cada item individual para criar seu layout perfeito.
Para ajustar o layout da sanfona:
- Selecione o elemento sanfona.
- Clique no ícone Layout
. - 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.
Esse artigo foi útil?
|