Seção da lista de imagens

Use a seção Lista de imagens quando quiser exibir um conjunto de imagens e textos relevantes.

Usando esta seção, você pode vincular facilmente páginas diferentes no site ou adicionar links onde deseja adicionar uma imagem e descrição também para cada link.

Neste artigo:

1. O que é uma Lista de Imagens?
2. Adicionando uma seção de lista de imagens à página
3. Adicionar e editar itens da lista
4. Sequenciando itens da lista
5. Excluindo itens da lista
6. Alteração do layout da seção
7. Opções de estilo
8. O Estilo Carrossel
9. Exemplo vivo

Lista de Imagens

• Uma lista de imagens é uma coleção de imagens onde você pode adicionar uma descrição para a imagem e adicionar um link ou botão para conectá-la a qualquer outra página do site ou qualquer outro link.

Adicionar seção de lista de imagens

• Uma seção pode ser adicionada a uma página. Você pode adicionar uma seção a uma página já existente ou crie uma nova página dentro do seu site.
• Na sua página, Clique no ícone + azul para adicionar um Nova Seção para sua página.

• Você vai agora ver o categorias de seção no lado esquerdo.
• Escolha o Lista (1) categoria e clique no botão Lista de Imagens guia (2) onde você pode escolher layouts diferentes da Lista de Imagens (3).

• Escolha qualquer layout de seção e clique nele para adicioná-lo à sua página.

Adicionar e editar itens da lista

Adicionar item de lista

Depois de adicionar a seção:

• Clique no Editar lista de imagens (1) botão para abrir o painel de itens da lista.

• Clique no Adicionar item (2) botão para adicionar um novo item de lista.
• Você pode optar por Dduplicar ou excluir (3) os itens da lista.

Editar item da lista

Clique no item da lista que você deseja editar. Ele abrirá as opções de edição de itens de lista específicos.

A partir daqui, você pode:

• Carregar/Remover Imagem (1) para o item da lista. Você também pode definir o Cor de destaque da imagem a partir daqui, que será exibido ao passar o mouse sobre a imagem.
• Adicionar uma Título (2), Subtítulo (3), e Descrição (4) do item da lista.
• Você pode não encontrar a opção de legenda e descrição em determinados itens da lista, dependendo do layout que escolher.
  Antes de adicionar a descrição, verifique isto artigo.

• Clique no ícone Link Builder do Link do título (5) para abrir o construtor de links para vincular o título do item da lista a qualquer página. Saiba mais sobre Criador de links.
• Defina o Link para abrir em um nova aba ou na mesma aba (6).
• Adicione qualquer tipo de Ligação (7) para o item da lista. Você pode adicionar um botão/link de imagem/ícone social/link de texto. Saiba Mais.
• Salvar (8) suas mudanças.

Veja a edição de um item de lista de imagens em ação:

Itens da lista de sequência

• Você pode facilmente arrastar e soltar os itens da lista para alterar a sequência.

Veja a sequência dos itens da lista de imagens em ação: 

Excluir um item da lista

Depois de adicionar um item de lista, você pode editá-lo e excluí-lo.

• Clique no Apagar ícone ao lado do item da lista de imagens.
• entao, clique no Apagar botão no pop-up de confirmação.
• Finalmente, salvar suas mudanças.

Veja como excluir um item da lista de imagens em ação: 

Layout da seção

• Clique no Gerenciar lista de imagens (1) botão.
• Escolha o traçado (2) aba.
• Selecionar (3) o layout da sua seção e Salvar (4) as mudanças.

Estilize sua seção

• Clique em Gerenciar lista de imagens (1) botão.
• Escolha o Estilo (2) aba.
• Altere o estilo dos elementos da seção e Salvar (3) suas mudanças.

Você terá várias opções de estilo para a seção: 

Unid 

1. Escolha Mostrar itens in Linhas e colunas or carrossel 
   • Se você escolheu o Linhas e colunas opção, os itens da lista serão organizados em linhas e colunas. Nesse caso, você precisa especificar o número de linhas e colunas.
   • Se você escolheu o carrossel opção, os itens da lista serão apresentados como uma apresentação de slides. Saiba mais.
2. Colocou o Numero de colunas para a lista de imagens. Você pode escolher de 1 a 10 colunas.
3. Especifique o Espaço Entre Colunas dos itens da lista.
4. Especifique o Espaço entre linhas dos itens da lista.
5. Escolha o Ordem do conteúdo ou seja, as imagens dos itens da lista a serem exibidos primeiro ou o texto associado.
6. Alinhar o conteúdo horizontalmente na Lista de Imagens. Você pode configurá-los para serem alinhados à esquerda, à direita ou ao centro.
7. Alinhar o conteúdo verticalmente na lista de imagens. Você pode configurá-los para serem alinhados na parte superior, central e inferior.

Se a opção Carrossel for selecionada na Etapa 1, você verá as seguintes opções adicionais:

8. Escolha Percorra o carrossel ou não.
9. No caso do Carrossel, escolha o Controles de navegação. Você pode escolher entre Sem Controles, Setas – Centro Inferior/Cima Direita/Inferior Direita, Divisa ou Pontos.

Display para celular

10. Defina o número de Colunas da grade para dispositivos móveis. Você pode configurá-lo para no máximo 3 colunas.
11. Definir o Espaçamento entre grades (em pixels).

Imagens 

12. Escolha o Icolheita de mago para os itens da lista. Você pode definir as imagens como Quadrado, Círculo, Horizontal, Retrato e Original.
13. Escolha ter um raio de canto comum ou raio de canto diferente para cada lado dos itens da lista e defina um número (em px) para o Craio próximo das imagens dos itens da lista. Saiba mais.

• Caso tenha escolhido cantos divididos, você pode definir diferentes raios de canto para cada canto.

Ao passar o mouse sobre a imagem 

14. Escolha o Cor do foco da imagem para ser o cor de destaque ou ser especificada. Se você escolheu o cor de destaquee especifique o opacidade.
15. Se você escolheu o especifique a cor opção, em seguida, defina o Cor base e opacidade do foco para os itens da lista.
16. Colocou o elementos cor para os itens da lista da seção.
17. Escolha Animar as imagens dos itens da lista ao passar o mouse clicando em Sim. Verifique esse recurso em uma página ao vivo.
18. Escolha um Estilo de Animação para imagens quando o cursor passa sobre elas.

Tamanho e espaço 

19. Especifique o Largura da imagem para itens de lista.
20. Especifique o Largura do conteúdo para os itens da lista.
21. Especifique o Espaço abaixo do título da seção em px.
22. Especifique o Espaço abaixo das imagens dos itens da lista (em %).
23. Especifique o Espaço abaixo dos títulos dos itens da lista (em %).
24. Especifique o Espaço abaixo das legendas dos itens da lista (em %).

Texto 

25. Clique no Alterar Estilo do Texto botão para visitar o Design seção e gerencie seus tamanhos e estilos de fonte. 
26. Colocou o Título estilo de fonte para os itens de lista da seção.
27. Colocou o Legenda estilo de fonte para os itens de lista da seção.
28. Definir o padrão Descrição estilo de fonte para os itens de lista da seção.

Cartões 

29. Veja como para gerenciar cartões.

Shadow

30. Ecrã – Escolha mostrar a sombra atrás dos itens da lista sempre ou apenas ao passar o mouse.
31. Style – Escolha entre as predefinições existentes ou crie uma sombra personalizada.
    Caso tenha escolhido a opção Personalizado, então visite este Gerador de sombra de caixa para criar uma sombra personalizada. Por fim, copie e cole o sombra de caixa CSS.
32. Caso você tenha escolhido a opção de presets, então Escolha estilos de sombra da lista suspensa.

Botões e links

33. Veja como para gerenciar o estilo de Botões e links.
34. Salvar todas as mudanças de estilo.

O Estilo Carrossel

O estilo Carrossel mostra os itens da lista como uma apresentação de slides, ou seja, os itens da lista serão alternados um após o outro.

Veja como funciona o estilo carrossel: 

Aqui está uma lista de imagens ao vivo: 

Veja um site de demonstração ao vivo. 

Veja como funciona o Corner Radius: 

Artigos relacionados:

• Tipos de Seções
• Adicionar espaçador/divisor entre seções
• Construa seu site