Como criar um carrossel no editor por Componentes

Objetivo: Ensinar como inserir um carrossel de imagens ou de imagens e textos no Construtor por Componentes.
Para que serve: O carrossel é um recurso muito utilizado em páginas, pois permite mostrar uma série de imagens e textos no formato de slide para que os usuários possam navegar.

Requisito Obrigatório:
1. Ter uma página feita no Construtor por Componentes.
Caso queira saber mais sobre o editor, Construtor Componentes.

Inserindo o carrossel na página

Nº1– Dentro da edição, selecione o componente “Carrossel” e arraste-o até o local da sua página em que deseja inserir.

Nº2– Clique em “Editar carrossel”.

Nº3– Um pop-up abrirá com duas opções de modelo. O primeiro deles (001) é um carrossel somente com imagens, já o segundo (002) têm imagens e textos.

Abaixo explicaremos quais edições é possível fazer em cada um deles.

Modelo 001

Nº4– Para adicionar uma imagem ao carrossel, basta passar o mouse sobre o modelo até aparecer a opção “Alterar imagem” e clicar nela para escolher o arquivo no seu computador.

Observação: Não há um tamanho ideal para as imagens, mas recomendamos que elas sejam na horizontal e que todas tenham as mesmas dimensões.

Nº5– Adicione aqui um novo slide ao carrossel.

Nº6– Para navegar entre as telas, clique nos ícones de flecha na lateral esquerda e direita.

Nº7– Deixe esta opção habilitada se quiser que o carrossel rode automaticamente na página.

Nº8– Coloque o tempo, em segundos, da transição de um slide para outro.

Nº9– Caso queira que mais de uma imagem apareça ao mesmo tempo, uma ao lado da outra, escolha aqui a quantidade de slides por tela (é permitido até 5).

Nº10– Se escolher mais de um slide por tela, defina também o espaço entre eles.

Nº11– Aqui você pode determinar a cor de fundo que ficará na borda das imagens do seu carrossel.

Nº12– Marque esta caixa para aparecer na navegação as flechas ao lado dos slides e o indicador de qual está ativo no momento.

Nº13– Se selecionar a opção do passo anterior, escolha a cor dos ícones de navegação.

Nº14– Para resetar as configurações do modelo para o padrão, clique neste botão.

Modelo 002

Nº4– Escreva um título para o seu slide.

Nº5– Faça a descrição que desejar logo abaixo.

Observação: O título e a descrição do slide podem não ficar visíveis logo ao começar a editar o modelo. Para escrever nestes campos, clique do lado esquerdo da imagem até o quadrado de texto ser habilitado para editar.

Nº6– Para inserir uma foto, clique no ícone “Alterar imagem” e escolha o arquivo do seu computador.

Nº7– Se quiser adicionar um novo slide, basta clicar no botão correspondente a essa função logo abaixo.

Nº8– Navegue pelas telas clicando nos ícones de seta na lateral esquerda e direita.

Nº9– Caso queira que o carrossel rode automaticamente na página, marque esta opção.

Nº10– Defina aqui o tempo que irá durar a transição do autoplay.

Nº11– Determine o espaço, em pixels, entre um slide e outro.

Nº12– Escolha uma cor para ser aplicada ao fundo, atrás das imagens e textos.

Nº13– Marque este checkbox caso queira que as flechas para navegar e o indicador de qual slide está ativo no momento fiquem visíveis.

Nº14– Se selecionou a opção indicada no passo anterior, defina uma cor para os ícones de navegação.

Nº15– Escolha aqui uma cor para ser utilizada no título.

Nº16– Faça o mesmo para o conteúdo do texto.

Nº17– Se quiser resetar as configurações e voltar para os padrões do modelo, clique aqui.

Salvando as configurações

Depois que finalizar a criação do seu carrossel, você pode visualizar um preview, cancelar as edições ou aplicar as alterações que você fez.

Assim que inserir na página, ao clicar sobre ele dentro do editor abrirá um menu na lateral direita no qual será possível editar o carrossel, esconder o bloco em que ele está e ativar um identificador para ele, que pode ser utilizado para configurar uma âncora mais tarde.

Suporte

Se surgir qualquer dúvida ou situação, ou se precisar de qualquer ajuda durante este procedimento, por favor, entre em contato com o nosso suporte!