Editor X: criar tabelas usando repetidores
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
Adicione uma tabela ao seu site usando um repetidor, uma lista de itens com o mesmo design e layout, mas conteúdo diferente em cada um.
Ao adicionar grades aos itens do repetidor, você cria as linhas e colunas que formam a tabela:
Etapa 1 | Adicione um repetidor
Para começar, escolha um repetidor no painel Elementos e adicione-o ao seu site.
Para adicionar um repetidor:
- Clique em Elementos
na parte superior do Editor. - Clique em Layout.
- Clique em Repetidores.
- Selecione um repetidor e arraste-o para o local desejado em sua página.
Etapa 2 | Configure a tabela
Após adicionar um repetidor, crie as linhas da sua tabela ao alterar o tipo de exibição para Lista. Em seguida, adicione as colunas aplicando uma grade. Você pode arrastar as linhas da grade conforme necessário para que elas se encaixem na tabela desejada.
Para configurar a tabela:
- Altere o layout do repetidor:
- Selecione o novo repetidor no Editor.
- Clique no ícone Inspetor
no canto superior direito. - (No Inspetor) Clique na aba Layout
. - Selecione Lista em Tipo de exibição.
- (Opcional) Defina o espaçamento entre as linhas ao lado de Intervalos.
- Aplique uma grade aos itens do repetidor:
- Selecione qualquer item do repetidor.
- Clique no dropdown 1x1.
- Dependendo do número de colunas que você precisa, escolha um layout.
Dica: clique em Outro para escolher uma quantidade diferente de linhas e colunas. - Configure as células da tabela ao arrastar as linhas da grade conforme necessário.
Etapa 3 | Faça o design e adicione conteúdo à tabela
Agora que você criou sua tabela, personalize o design e adicione o conteúdo relevante. Você pode adicionar quantas linhas precisar e elementos como texto, imagens e linhas separadoras.
Quando você adiciona um elemento a um item do repetidor, ele é adicionado automaticamente a cada item no repetidor para manter o design consistente. Da mesma forma, remover um elemento o exclui de todos os itens. Você pode personalizar os elementos individuais dentro de um item (por exemplo: editar o texto, alterar as imagens), mas o design sempre permanece o mesmo.
Clique em uma opção abaixo para saber mais:
Adicionar linhas separadoras
Adicionar mais linhas à tabela
Personalizar o design da tabela
.
: clique no seletor de cores para alterar a cor do background das suas linhas. Arraste o slider para ajustar a opacidade da cor de preenchimento.
: altere a cor da borda de suas linhas. Use os sliders para ajustar a opacidade e a largura da borda.
: arredonde os cantos das suas linhas ao alterar o raio (em px).
: ajuste a sombra de suas linhas. Você pode alterar configurações como ângulo, distância, tamanho, cor e muito mais.Esse artigo foi útil?
|