Como adicionar uma galeria ao seu site
Com o criador de sites da SendPulse, você pode adicionar uma galeria para exibir várias imagens como um carrossel, uma grade ou uma colagem. Por exemplo, você pode usar uma galeria como seu portfólio ou mostrar seus produtos e suas avaliações.
Vamos falar sobre como adicionar uma galeria ao seu site e configurar sua exibição.
Adicionar elemento
Adicione o widget "Galeria" em uma parte do seu site.
Faça o upload das imagens
Clique em Escolher arquivo e selecione uma opção para adicionar sua imagem:
| Gerenciador de arquivos | Abre o gerenciador de arquivos onde você pode selecionar uma imagem existente ou enviar uma nova. |
| Banco de imagens |
Abre uma janela modal onde você pode escolher uma imagem das fotos gratuitas do Unsplash. Você pode buscar pelo nome da imagem, selecionar uma da lista e clicar em Selecionar, na parte inferior, para adicioná-la à sua página. |
As imagens do site são redimensionadas automaticamente para se ajustar ao tamanho da tela do dispositivo do visitante (720, 1080, ou 1920 px) e convertidas para o formato webp. Caso o tamanho desejado não esteja disponível, o visitante do site verá a imagem original, que fica armazenada no gerenciador de arquivos.
Você pode adicionar na galeria apenas uma imagem por vez.
Para adicionar mais imagens, clique em Adicionar.
Para rearranjar ou apagar uma imagem, passe o mouse sobre ele, e clique no ícone correspondente.
Para rearranjar imagens na grade, arraste e solte-as na localização necessária.
Configurar sua galeria
Selecione o tipo de galeria (carrossel, grade ou colagem) e clique em Personalizar.
Carrossel
Usado para criar um slideshow que roda várias imagens.
Personalize a aparência do carrossel:
| Número de imagens numa linha | Selecione quantas imagens exibir em uma única linha. |
| Exibir como | Selecione um modo de exibição do carrosel.
As opções incluem: Linha: todas as imagens aparecem em uma única linha. Thumbnails: uma imagem principal aparece com uma linha de thumbnails abaixo. |
| Exibir a borda do último thumbnail | Marque esta caixa de seleção para mostrar de forma parcial o próximo thumbnail na borda da linha, indicando que há mais imagens disponíveis.
Aplicável apenas a Thumbnails. |
| Escala de imagem de visualização | Decida como as imagens se ajustam aos seus recipientes.
As opções incluem: Preencher o recipiente: preenche toda a área; as imagens podem ser cortadas. Conter imagens inteiras: mostra a imagem completa sem cortes. Use a opção Conter imagens inteiras para imagens com proporções fora do padrão, como capturas de tela de depoimentos. |
| Escala de imagem de visualização | Selecione como as imagens em thumbnail se ajustam aos seus recipientes. Escolha Preencher o recipiente ou Conter imagens inteiras.
Aplicável apenas a Thumbnails. |
| Cor de fundo | Selecione uma cor de fundo para os recipientes de imagem.
Essa cor aparece quando você usa o modo de escala Conter imagens inteiras ou quando a galeria tem mais imagens do que cabe na tela. |
| Espaçamento | Defina o espaçamento da imagem na linha usando valores em pixels. |
| Arredondamento | Arredonde os cantos da imagem usando valores em pixels. |
| Cor do botão anterior/próximo | Selecione uma cor para as setas de navegação do carrossel. |
Você também pode configurar opções adicionais para interação do usuário, habilitando ou desabilitando a abertura da imagem após um clique* e automatizando as transições de slides.
*Quando essa opção está habilitada, a imagem será aberta em uma janela modal em seu tamanho original.
Grade
Usado para apresentar todas as imagens de uma vez em um bloco e no mesmo tamanho.
Personalize a aparência da sua grade:
| Número de imagens por linha | Selecione quantas imagens exibir em uma única linha. |
| Escala de imagem de visualização | Decida como as imagens se ajustam aos seus recipientes.
As opções incluem: Preencher o recipiente: preenche toda a área; as imagens podem ser cortadas. Conter imagens inteiras: mostra a imagem completa sem cortes. Use a opção Conter imagens inteiras para imagens com proporções fora do padrão, como capturas de tela de depoimentos. |
| Cor de fundo | Selecione uma cor de fundo para os recipientes de imagem.
Essa cor aparece quando você usa o modo de escala Conter imagens inteiras ou quando a galeria tem mais imagens do que cabe na tela. |
| Espaçamento | Defina o espaçamento da imagem na linha usando valores em pixels. |
| Arredondamento | Arredonde os cantos da imagem usando valores em pixels. |
Você também pode configurar opções adicionais para interação do usuário, habilitando ou desabilitando a abertura da imagem após um clique.
Colagem
Usado para apresentar todas as imagens de uma vez em um bloco usando a forma de colagem selecionada.
Personalize a aparência da sua colagem:
| Exibir como | Selecione um template de layout de colagem. |
| Escala de imagem | Decida como as imagens se ajustam aos seus recipientes.
Preencher o recipiente: preenche toda a área; as imagens podem ser cortadas. Conter imagens inteiras: mostra a imagem completa sem cortes. Use a opção Conter imagens inteiras para imagens com proporções fora do padrão, como capturas de tela de depoimentos. |
| Cor de fundo | Selecione uma cor de fundo para os recipientes de imagem.
Essa cor aparece quando você usa o modo de escala Conter imagens inteiras ou quando a galeria tem mais imagens do que cabe na tela. |
| Espaçamento | Defina o espaçamento da imagem na linha usando valores em pixels. |
| Arredondamento | Arredonde os cantos da imagem usando valores em pixels. |
Você também pode configurar opções adicionais para interação do usuário, habilitando ou desabilitando a abertura da imagem após um clique.
Edite suas imagens
Você pode personalizar o tamanho da imagem e adicionar um ponto focal (uma parte da imagem na qual você deseja chamar mais atenção) para realçar o objeto principal em uma foto grande.
Clique em uma imagem no widget e arraste a alça de dimensionamento para redimensionar sua imagem. Clique no centro da imagem para definir seu ponto focal.
Você pode editar imagens diretamente no criador de sites. É possível, por exemplo, adicionar textos ou usar vários efeitos.
Saiba mais: Como editar imagens usando o criador de sites.
Copie o ID do seu elemento
Cada elemento tem um ID que o distingue na página. Com ele, você pode adicionar estilos e scripts, mostrar pop-ups e rastrear eventos para este elemento.
Para copiar um ID, clique nele. Para editar um ID, clique no ícone de lápis.
Saiba mais: Bloco e ID do widget.
Última Atualização: 16.04.2026
ou