Editor X: usar repetidores
9 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
Um repetidor é uma lista de itens que têm o mesmo design e layout, mas conteúdo diferente em cada um. É uma maneira rápida e fácil de exibir seu conteúdo.
No Editor X, os repetidores são organizados em um layout flexível que reorganiza automaticamente o conteúdo quando é redimensionado, deixando-o incrível em todos os tamanhos de tela.
Neste artigo, saiba como:
Dica:
Você também pode usar repetidores para mostrar conteúdo dinâmico de uma coleção ao conectá-lo ao CMS (sistema de gerenciamento de conteúdo).
Adicionar um repetidor
Oferecemos muitas seções predefinidas de repetidor para você adicionar ao seu site e personalizar como você deseja. Alguns repetidores contêm imagens, outros têm um estilo de "lista" com mais ênfase no texto.
Para adicionar um repetidor:
- Clique em Elementos
na parte superior do Editor X. - Clique em Layout.
- Clique em Repetidores.
- Arraste um repetidor para sua página.
Adicionar conteúdo a um repetidor
Todos os itens no repetidor têm o mesmo design. Quando você adiciona um elemento a um item do repetidor, ele é adicionado automaticamente aos outros itens para manter o design consistente.
Dito isso, você ainda pode personalizar os elementos individuais dentro de um item (por exemplo: texto, imagens). Por exemplo, adicionar um botão a um item o adiciona ao resto, mas você pode alterar o texto do botão em cada item para dizer algo diferente.
Quais elementos não podem ser adicionados a um repetidor?
Para adicionar conteúdo a um repetidor:
- Clique em Elementos na parte superior do Editor X.
- Arraste o elemento desejado diretamente para o repetidor.
- Clique no elemento e personalize-o individualmente para cada item.
Dica:
Remover um elemento de um item do repetidor o exclui de todos os outros itens.
Gerenciar seus itens do repetidor
Você pode facilmente duplicar, renomear, reordenar e excluir itens do repetidor no painel Inspetor.
Para gerenciar seus itens:
- Clique no seu repetidor.
- Clique no ícone Inspetor
na parte superior do Editor X. - (No Inspetor) Clique em Gerenciar ao lado do número de itens.
- Escolha como deseja gerenciar seus itens do repetidor:
- Duplicar um item: clique em Duplicar item na parte inferior.
- Excluir um item: clique no ícone Mais ações
ao lado do item e clique em Excluir. - Renomear um item: clique no ícone Mais ações ao lado do item e clique em Renomear.
- Reordenar itens: clique e arraste os itens para uma nova posição.
Fazer o design do seu repetidor
Personalize o design do seu repetidor para que ele fique do seu jeito. Você pode alterar a cor do background dos itens, adicionar bordas, sombra ou um cursor interessante que aparece quando os visitantes passam o mouse sobre o repetidor.
Para fazer o design do seu repetidor:
- Clique no seu repetidor.
- Clique no ícone Inspetor na parte superior do Editor X.
- Clique na aba Design
. - Use as opções disponíveis para personalizar seu repetidor:
- Altere a cor de preenchimento e a opacidade de todos os itens.
- Adicione uma borda e sombra para destacar os itens.
- Deixe os cantos do item retangulares ou redondos.
- Adicione um cursor divertido para aparecer quando os visitantes passarem o mouse sobre o repetidor.
Você usa um padrão AB?
Essas alterações de design se aplicam a todos os itens do repetidor, independentemente do padrão AB.
Definir um padrão AB para itens do repetidor
Importante
Esse recurso ainda não está disponível para todos.
Divida seus itens do repetidor em 2 grupos para criar um design mais elaborado. O padrão AB permite que você crie duas versões do mesmo design, com estilos e interações diferentes.
Depois de ativar o padrão AB, seus itens do repetidor são divididos nos grupos A e B. Você pode ver quais itens pertencem a cada grupo no seu Editor. Ao personalizar qualquer um dos itens A ou B, os outros itens no grupo mudam automaticamente para corresponder.
Para definir um padrão AB para itens do repetidor:
- Clique no seu repetidor.
- Clique no ícone Inspetor na parte superior do Editor X.
- Role para baixo até Exibição.
- Ative a alavanca Definir padrão AB.
- Personalize os itens A e B:
- Clique no item A ou B do seu repetidor.
Dica: pode ser qualquer item do grupo relevante. - (No Inspetor) Clique na aba Design
. - Escolha como deseja personalizar esse grupo de itens:
- Escolha um design predefinido na seção Design.
- Altere a Cor e opacidade do preenchimento dos itens.
- Adicione uma interação ao passar o mouse ou ao clicar na aba Interações
.
- Clique no item A ou B do seu repetidor.
Alterar o layout do seu repetidor
Defina como os itens do repetidor são reorganizados quando o tamanho da tela é alterado. Dependendo do tipo de exibição escolhido (por exemplo.: Cartões, Lista, Slider, Grade), você pode personalizar as margens, alinhamento, direção e outras configurações.
Trabalhando com breakpoints:
- Você pode ter um layout diferente para seu repetidor para cada breakpoint.
- Listas e sliders são muito usados em tamanhos de tela menores, como tablets e dispositivos móveis.
Para personalizar ainda mais o layout de um repetidor:
- Clique no seu repetidor.
- Clique no painel Inspetor
na parte superior do Editor X. - Personalize o layout do seu repetidor com base no tipo de exibição selecionado:
Cartões: opções de layout
Lista: opções de layout
Slider: opções de layout
Grade: opções de layout
Observação sobre intervalos:
Alguns navegadores antigos não suportam esse recurso (por exemplo: Chrome 76-83, Safari 12-14 e Edge 79-83). Isso significa que os visitantes que acessam seu site usando esses navegadores não veem os intervalos que você definiu entre os itens do repetidor.
Saiba mais sobre repetidores:
Vá para a Academy X para acessar nossas aulas e exercícios sobre repetidores.
Esse artigo foi útil?
|