Como usar os componentes Galeria e controle deslizante de imagem no Website Builder

Quer exibir várias imagens no seu site? Com os componentes Galeria e controle deslizante de imagem do Website Builder, você pode inserir várias imagens em uma grade ou organizá-las em uma apresentação de slides. Este guia vai mostrar como adicionar os componentes à sua página e ajustá-los ao seu gosto.


Inserir um componente no seu site

  1. Abra o Website Builder a partir do painel de controlo da one.com.
  2. Ir para Galeria no menu do lado esquerdo e selecione uma variante de galeria.
  3. Arraste o componente desejado para o espaço de trabalho e solte-o onde deseja colocar sua galeria ou controle deslizante.
  4. Selecione as imagens que pretende inserir ou carregue-as a partir do seu computador ou de um URL externo. Clique em Adicionar à página na parte inferior da janela pop-up.
  5. Ajuste o tamanho e o posicionamento do componente ao seu gosto.
  6. Clique em Configurações da galeria/Configurações do controle deslizante de imagem na parte superior do componente para ajustar as Configurações da sua galeria.
  7. Clique em Salvar e Publicar para tornar as imagens visíveis no seu site.

ezgif.com-gif-maker__17_.gif


Alterar imagens e adicionar novas

Quando você clica no componente inserido, duas abas aparecem: Configurações da galeria/Configurações do controle deslizante de imagem e Alterar imagens.

Clique na aba Alterar imagens para mudar as imagens da sua galeria. Você pode remover uma imagem clicando no ícone da lixeira no canto, ou editá-la clicando no ícone do lápis. Também pode adicionar novas imagens à galeria clicando em Adicionar imagens no canto superior direito.

Observação: O título da imagem também funciona como texto alternativo nesses componentes. Se quiser adicionar um texto alternativo, basta fazê-lo em Título (alt) no lado direito, na visão geral de Ordenar e editar imagens.

Screenshow showing the 'Sort & edit images' overview in the Gallery component.


Configurações dos componentes Galeria e controle deslizante de imagem

Dois menus aparecerão ao clicar na aba Configurações do componente. Aqui, você pode alterar as seguintes opções:

Componente Galeria:

1 - Menu superior/inferior

  • Colunas - Ajuste o número de colunas.
  • Espaçamento - Ajuste o espaço em branco entre as imagens.
  • Cortar - Marque esta caixa se as imagens devem ser cortadas, para que todas tenham o mesmo tamanho na galeria.
  • Vista compacta - Marque esta caixa se quiser que as imagens fiquem tão próximas quanto possível dentro das margens azuis.
  • Largura total - Marque esta caixa se quiser que a galeria se estenda por toda a largura da sua página.

 

2 - Menu flutuante

  • Ao clicar - Selecione o que deve acontecer quando um usuário clica na imagem. Escolha nada, mostre uma imagem maior ou abra um link.
  • Legendas - Selecione se você quer adicionar legendas às imagens na galeria. Clique em "Gerenciar legendas" para inserir texto e texto alternativo. Escolha se a legenda deve ser alinhada à esquerda, à direita ou centralizada. Você também pode escolher o estilo da legenda – as opções aqui são clássica, modelo e personalizada.
  • Estilo da imagem - Aqui, você pode alterar a proporção da sua imagem, por exemplo, para paisagem ou retrato. Você também pode adicionar bordas e cantos arredondados.
  • Largura total - Aqui, você pode ajustar toda a largura da galeria para ficar fora das margens azuis (largura total) ou dentro delas (padrão).

Screenshot showing the Gallery component. Red, numbered dots mark the properties panel and the floating menu in the image.

Componente do controle deslizante de imagem:

1 - Menu superior/inferior

  • Colunas - Ajuste o número de colunas (1-5) no controle deslizante. Na captura de tela, selecionamos três.
  • Transição - Escolha entre um efeito slide-in ou fade-in para a transição entre imagens.
  • Cortar - Você pode escolher cortar cada uma das suas imagens para que fiquem do mesmo tamanho no controle deslizante. O corte estará sempre ativo se você tiver várias imagens (colunas) por slide.
  • Velocidade - Escolha a velocidade de transição de imagem. O mínimo é de 1 segundo e o máximo é de 15.
  • Largura total - Escolha se você deseja exibir suas imagens em largura total. Esta função só está disponível se tiver apenas uma coluna de imagens por slide.

 

2. Menu flutuante

  • Navegação - Escolha se as imagens devem mudar automaticamente e ajuste ou oculte as setas de navegação e o indicador.
  • Ao clicar - Selecione o que deve acontecer quando um cliente clica em uma imagem. Escolha nada, mostre uma imagem maior ou abra um link.
  • Legendas - Selecione se as legendas devem ser mostradas com as imagens. Marque esta caixa para ter mais opções de personalização: adicione legendas e escolha o alinhamento e o posicionamento.
  • Largura total - Se você tiver apenas uma coluna, você pode ajustar a largura do controle deslizante para ficar fora das margens azuis (largura total) ou dentro delas (padrão).
Screenshot showing the image slider component. Red dots marked '1' and '2' point to the properties panel and the floating menu.

Artigos relacionados:

Este artigo foi útil?

Não tá conseguindo achar o que procura?

Iniciar uma conversa

É o jeito mais rápido de entrar em contato, todos os dias do ano.