Como adicionar um SLIDER DE IMAGENS (carrossel) na sua página

Para criar um Slider de Imagens em uma página siga o tutorial abaixo:

1. No editor de página, através do menu do lado esquerdo da tela, clique no Ícone de slider;

2. Em seguida, o elemento de slide estará inserido dentro do editor. Clique em Editar;

3. No canto direito da tela, abrirá uma aba. Nela você poderá configurar a aparência do Slider, começando pela aba de Estilos;

SETAS E TIPOS DE SETAS

• Setas: Habilite ou desabilite o ícone de setas clicáveis nos lados do Sliders.
• Tipos de setas: Escolha o ícone de seta que será usado no elemento.

ESTILIZAÇÃO, BORDAS E SOMBRAS

• Cor de fundo: Cor de fundo da seta usada no Slider.
• Tamanho: Tamanho da seta usado no Slider.
• Bordas das setas: Opção de usar ou não bordas no ícone de seta do Slider.
• Bordas do slider: Adicionar bordas no elemento de Slider.
• Sombra do slider: Adicionar efeito de sombra no elemento de Slider.

ANIMAÇÃO

• Efeito: Selecione o estilo de efeito desejado para o elemento. Alternando entre os efeitos, você pode ver como cada um funciona.
• Direção: Aqui você pode definir a direção da animação, por exemplo: para cima, para baixo, para a direita ou para a esquerda.
• Velocidade: Aqui você define a velocidade da sua animação. Quanto mais próximo de 250 ms, mais rápida a animação; quanto mais próximo de 2000 ms, mais lenta a animação.
• Atraso: Esta configuração permite definir o tempo de atraso da sua animação. Este tempo varia de 0 ms a 2000 ms.
• Repetir: Nesta função, você pode escolher se a animação aparecerá apenas uma vez ou continuamente.

4. Na aba de Configurar, você poderá inserir as imagens que irão rodar no slider, clicando em "Adicionar imagem";

Também é possível excluir as imagens de exemplo clicando no ícone de lixeira ao lado de cada uma delas, ou alterá-las clicando no ícone de lápis.

5. Abaixo disso, você poderá realizar novas configurações, como:

IMAGEM POR VIEW

• Imagens: Configurar se aparecerá uma imagem por vez no slider ou se aparecerão duas por vez.
• Espaçamento: Caso opte por aparecerem 2 imagens por vez, poderá habilitar o espaçamento entre elas.

CONFIGURAÇÕES

• Slider automático: O slider passará automaticamente a próxima imagem, sem que precise do clique para passar para a próxima.
• Ajustar imagens ao slider: Independente do tamanho da imagem, ela ficará proporcionalmente ajustada no tamanho do slider.

6. Por último, ainda na tela de Configurar habilite ou desabilite a opção de "Visibilidade", para ocultar ou não o elemento no Desktop ou Mobile;

7. Na última tela de Edição, no menu "Código", você poderá copiar o ID do elemento ou alterar o visual dele através de campo HTML (altere esse campo apenas se tiver conhecimento em código).

Ficou com alguma dúvida? Chame nosso suporte, estamos sempre prontos para ajudar!

Atualizado em: 28/08/2026