1. Home
  2. Construtor de sites
  3. Como inserir uma galeria de imagens no seu site com o construtor da Hostbits

Como inserir uma galeria de imagens no seu site com o construtor da Hostbits

Quem contratou um plano de hospedagem na Hostbits tem acesso ao construtor de sites da plataforma, que é uma ferramenta completa, pensada para possibilitar a construção de sites de um modo fácil e com layouts profissionais, mesmo que o design do site não entenda muito de programação Web.

Entre as ferramentas disponíveis no construtor, encontra-se a de inserção de galerias de imagens. Se você começou a construir o seu site e deseja inserir uma galeria de imagens interativa e que traga imagens importantes para o conteúdo da página, este tutorial vai te ajudar a tirar todas as dúvidas sobre a inserção de galerias, confira!

1 – Inserindo a galeria

Para inserir uma galeria em seu site é muito simples, basta acessar o seu Layout e escolher o espaço em que você quer inserir a galeria. 

Em seguida, procure o ícone de Galeria no menu superior. Arraste o ícone até o local onde você quer que a galeria esteja localizada. 

Uma janela de escola de galeria vai aparecer. Veja todas as opções e selecione a que mais gostar. Existem muitas opções, neste tutorial escolhemos a galeria em formato de Lista. 

Depois de escolher, basta posicionar a galeria no espaço em que você escolheu. 

2 – Editando a galeria

Existem 3 botões na parte superior da galeria. O primeiro é o cursor de mover a galeria pela tela. O do meio serve para aumentar ou diminuir o espaço de fundo da galeria e o terceiro é um lápis de edição, por onde você acessa um menu com várias opções de edição e formatação da galeria. 

3 – Alterando e inserindo imagens à galeria

Todas as galerias já vem com imagens modelo, para alterar as imagens da galeria e inserir as de sua preferência, clique no ícone de lápis para acessar o menu e selecione a opção Alterar Imagens

Uma janela de configuração da galeria vai aparecer, na qual você poderá visualizar as imagens existentes e editá-las, de acordo com o mapa da imagem a seguir: 

1 – Ao selecionar uma imagem, clicando sobre ela, um ícone de X aparece. Através dele você pode excluir uma imagem.

2 – Você pode adicionar um título de sua preferência na imagem, esse título vai aparecer quando a imagem estiver na galeria. 

3 – Se você quiser que a imagem direcione o visitante do seu site para uma outra página, âncora, ou outro site, você pode adicionar um link à imagem. 

4 – A Descrição nada mais é do que a legenda da imagem, que ficará visível também para o visitante. 

5 – Você pode adicionar mais imagens selecionando Adicionar imagens (botão verde) ou Adicionar novo

Existe a possibilidade de adicionar imagens relacionadas ao tema ou layout que você escolheu na hora de criar o site (1) ou de carregar uma imagem do seu computador. Você também pode ir em Biblioteca de mídia (3) e acessar imagens que você tenha carregado anteriormente. 

Existe ainda uma galeria gratuita (4) onde você pode encontrar bastante variedade de imagens, que podem ser procuradas a partir de um tema de sua preferência (5) 

Depois que fizer todas as alterações nesta janela, não esqueça de clicar em Aplicar, para que as alterações sejam salvas. 

4 – Mudando o layout da galeria

É possível alterar o tipo de layout mesmo depois de ter feito a escolha inicial, basta ir em Editar > Alterar tipo e escolher a melhor opção para o seu site. 

5 – Alterando a cor da galeria

Para alterar a cor de fundo do layout, basta ir no ícone de Editar e selecionar a opção Alterar Cor.

A seguinte janela irá aparecer:

É possível escolher uma cor movimentando o cursor (1) e alterar a transparência da galeria (2). Você também pode inserir um código hexadecimal de cor (3) para definir uma cor exata. Quando decidir a cor, clique em aplicar e pronto, sua galeria terá uma nova cor.

6 – Ajustes para edição da galeria no layout

Na janela de exibição também existe uma seção com 4 opções para facilitar a edição da galeria no Layout, são elas: 

1 – Bloquear: permite que você trave a galeria em um ponto específico da tela, evitando mudá-la de posição por acidente enquanto edita alguma outra parte do site. 

2 – Ordem: permite que você altere a ordem da galeria do Layout, se algo vai ficar na frente dela, ou se ela ficará à frente de todos os outros objetos de layout. 

3 – Excluir: como o próprio nome já diz, permite que você exclua a galeria inteira.

4 – Ocultar: oculta a galeria do layout, deixando-a invisível. 

7 – Configurando propriedades mais avançadas

Por último, existem algumas outras configurações mais avançadas que podem ser efetuadas em Propriedades, conforme o mapa das próximas imagens: 

1 – A primeira Aba das propriedades traz as configurações gerais da Galeria, é possível acessar o atalho para editar imagens (2), alterar a cor do plano de fundo (3) e inserir uma borda (4), também é possível alterar o tipo de galeria (5) e realizar configurações avançadas (6), como alterar o tamanho da miniatura de fotos ou definir se a imagem vai ficar maior quando o visitante clicar sobre uma foto. 

7 – A segunda Aba oferece opções de configuração das legendas. Nela é possível definir se a legenda da foto aparecerá sempre ou apenas quando o mouse estiver encostado (8) e se haverá um fundo de outra cor na legenda (9).

10 – Ainda na aba de legendas, é possível alterar o tipo da fonte do título da imagem, bem como o tamanho, espaçamento entre letras, estilo, alinhamento e cor. 

11 – É possível alterar também a fonte da legenda (descrição) da foto, também mudando o tipo e o tamanho da fonte, o espaçamento entre letras, estilo, alinhamento e cor.

12 – Na aba de opções, é possível escolher se a galeria vai ocupar a tela inteira ou não, se será exibida apenas em uma página, em todas ou em algumas páginas específicas e também é possível regular o tamanho e a posição da galeria de maneira mais precisa do que arrastando, através da definição de quantidade de pixels. 

13 – Ainda na aba de opções, é possível também vincular a galeria a uma âncora, através da inserção do nome da âncora. 

14 – Por fim, depois de fazer qualquer alteração na janela de propriedades, lembre sempre de clicar em aplicar, para que a configuração seja salva.

Este artigo foi útil ?

Artigos Relacionados