Usar módulos de controle deslizante de imagem

Você pode usar o módulo de controle deslizante de imagem para exibir várias imagens no mesmo módulo. Você pode definir imagens para percorrer automaticamente ou pode dar suporte a visitantes que alternam manualmente entre elas. 

Adicionar e editar slides em módulos de controle deslizante de imagem

1. Acesse seu conteúdo:

   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
   • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
2. Clique no nome do conteúdo.
3. No editor de conteúdo, clique no ícone add Adicionar na barra lateral esquerda. 
4. Clique para expandir a categoria Mídia, clique no módulo Controle Deslizante de Imagem e arraste-o para a posição. 
5. Na barra lateral esquerda, passe o mouse sobre um slide e clique no botão edit Ícone Editar para adicionar uma imagem a esse slide: 
   
   • Na seção Imagem, clique em Carregar para selecionar uma imagem do computador ou em Procurar imagens para selecionar uma imagem da ferramenta Arquivos. Para gerar uma imagem, clique em Gerar com IA.
   • No campo Legenda, insira uma legenda que aparecerá abaixo da imagem. Para exibir a imagem sem uma legenda, exclua o texto padrão. 
   
   • Para adicionar um link ao slide:
     • Clique no menu suspenso Link to e selecione um tipo de link.
     • Especifique o destino do link no campo exibido. Aprender mais sobre trabalhando com links no HubSpot. 
     • Para manter seu conteúdo aberto e ter o link aberto em uma nova janela, ative o link Abrir em nova janela. 
     • Para identificar o destino do link como não fazendo parte de seus sites para mecanismos de pesquisa, marque a caixa de seleção Não seguir. 
   • Clique em Aplicar alterações para salvar as alterações neste slide. 
6. Na parte superior do editor de barra lateral, clique no controle deslizante Imagem para retornar à visão geral do módulo. 

7. Para adicionar mais slides, passe o mouse sobre um slide diferente e clique no edit Ícone Editar .
8. Para finalizar as alterações, clique em Aplicar alterações. 

Editar configurações de módulos de controle deslizante de imagem

1. Acesse seu conteúdo:

   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
   • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
2. Clique no nome do conteúdo.
3. No editor de conteúdo, clique no módulo de controle deslizante de imagem. 
4. No editor de barra lateral, clique em Configurações para editar as configurações do módulo. 
5. Clique para expandir a seção Slides para editar opções de slide: 
   • No campo Slides por página, insira o número de slides que aparecerão de cada vez no controle deslizante da imagem. Você pode exibir até cinco slides de cada vez. Quando vários slides de uma vez são selecionados, as legendas e miniaturas não são exibidas. 
   • No campo Dimensionamento da imagem, selecione uma opção de proporção. Por padrão, as imagens serão exibidas usando suas proporções carregadas. Para padronizar uma única proporção entre imagens, selecione Forçar proporção. Isso pode fazer com que algumas imagens pareçam distorcidas. 
   • Para adicionar ou remover legendas dos slides, marque a caixa de seleção Mostrar legendas . Por padrão, a caixa de seleção Mostrar legendas é selecionada.
   • No menu suspenso Posição da legenda , selecione a posição das legendas. 

6. Clique para expandir a seção Movimento para editar as opções de transição de slide: 
   • Para configurar a transição de slides, selecione uma opção de transição (por exemplo, Atenuar).
   • Para que os slides se repitam quando o último slide for alcançado, marque a caixa de seleção Repetir slides. 
   • Para que os slides circulem automaticamente, marque a caixa de seleção Reprodução automática. Se você tiver menos slides do que a configuração Slides por página, nenhum ciclo poderá ocorrer. 
7. Clique para expandir a seção Navegação para editar opções de navegação: 
   • Para exibir setas que permitem aos visitantes alternar manualmente entre slides, marque a caixa de seleção Mostrar setas de navegação. 
   • Para mostrar miniaturas de imagem abaixo da navegação, marque a caixa de seleção Mostrar miniaturas. 
   • Para exibir pontos abaixo das imagens que mostrarão o número total de slides e permitir que os visitantes selecionem uma imagem específica, selecione Mostrar navegação por pontos. 
8. Quando terminar, clique em Aplicar alterações. 

Editar estilos para módulos de controle deslizante de imagem

Você pode editar estilos para módulos de controle deslizante de imagem, incluindo estilo para os slides, navegação e o controle deslizante de imagem.

1. Acesse seu conteúdo:

   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
   • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
2. Clique no nome do conteúdo.
3. No editor de conteúdo, clique no módulo de controle deslizante de imagem. 
4. No editor de barra lateral, clique na aba Estilos . 
5. Para continuar editando estilos para o módulo de controle deslizante de imagem, clique em Slides, Navegação ou Deslizante. 

Editar estilos para slides

Para editar estilos de como as imagens são exibidas nos slides:

1. Clique em Slides.
2. Clique para expandir a seção Imagens.
3. Digite valores de pixel no campo Raio do canto. Quanto maior o valor, mais arredondados os cantos aparecerão. 
4. Quando terminar, clique em Aplicar alterações.

Para editar estilos de como as legendas são exibidas nos slides:

1. Clique em Legendas.
2. Clique para expandir a seção Plano de fundo . 
   • Para adicionar margens acima ou abaixo de suas legendas, insira valores de pixel nos campos Margem acima e Margem abaixo.
   • Para adicionar preenchimento às suas legendas, insira um valor de pixel no campo Preenchimento. Para adicionar valores separados para cada lado, clique em Editar separadamente e insira valores de pixel nos campos.
   • Para adicionar uma cor de plano de fundo às suas legendas, insira um valor hexadecimal no primeiro campo da seção Cor ou clique no selecionador de cores Cores personalizadas podem ser adicionadas na guia Avançado.
   • Para definir a transparência de uma cor de plano de fundo, insira um valor percentual no segundo campo da seção Cor. Uma transparência de 100% será opaca, enquanto uma transparência de 0% não será visível. 
3. Clique para expandir a seção Texto . 
   • Para alterar o tipo de fonte, clique no menu suspenso Selecionar fonte e selecione uma fonte. 
   • Para alterar o tamanho da fonte, clique no menu suspenso Tamanho e selecione um tamanho de fonte. 
   • Para alterar a cor da fonte, clique no seletor de cores e selecione uma cor. Cores personalizadas podem ser adicionadas na guia Avançado.
   • Para alterar a espessura da fonte, clique no botão bold ícone espessura da fonte para negrito, italicIcon em itálico, ou underlineIcon texto sublinhado.
4. Quando terminar, clique em Aplicar alterações.

Editar estilos para navegação

Você pode editar estilos de navegação, incluindo setas deslizantes, pontos e botão de reprodução automática, e a miniatura navigation. As opções de estilo disponíveis dependerão das configurações de navegação do módulo do controle deslizante de imagem.

Setas deslizantes

1. Clique em Navegação.
2. Clique para expandir a seção Setas do controle deslizante.
3. Insira um valor hexadecimal na seção Cor de plano de fundo . Você também pode clicar no seletor de cores e selecionar uma cor. Cores personalizadas podem ser adicionadas na guia Avançado .
4. Para definir a transparência da cor do plano de fundo, insira um valor percentual no segundo campo da seção Cor do plano de fundo. Por exemplo, uma transparência de 100% será opaca, enquanto uma transparência de 0% não será visível.
5. Para substituir os ícones usados nas setas para a esquerda e para a direita, clique em Substituir acima do ícone para a esquerda e do ícone para a direita. No painel direito, selecione um ícone. 
6. Para definir a cor dos ícones esquerdo e direito, insira um valor hexadecimal no primeiro campo da seção Cor do ícone. Você também pode clicar no seletor de cores e selecionar uma cor. Cores personalizadas podem ser adicionadas na guia Avançado .
7. Para definir a transparência da cor do plano de fundo do ícone, insira um valor percentual no segundo campo da seção Cor do ícone. Por exemplo, uma transparência de 100% será opaca, enquanto uma transparência de 0% não será visível. 
8. Quando terminar, clique em Aplicar alterações.

Pontos e botão de reprodução automática

1. Clique para expandir a seção Pontos e botão de reprodução automática .
2. Insira um valor hexadecimal no primeiro campo da seção Cor ou clique no selecionador de cores e selecione a cor . Cores personalizadas podem ser adicionadas na guia Avançado.
3. Quando terminar, clique em Aplicar alterações.

Navegação em miniatura

1. Clique para expandir a seção de navegação em miniatura .
2. Para editar a cor do plano de fundo, insira um valor hexadecimal no primeiro campo da seção Cor do plano de fundo da seta ou clique no selecionador de cores de seta. Cores personalizadas podem ser adicionadas na guia Avançado.
3. Para editar a transparência da cor do plano de fundo, insira um valor percentual no segundo campo da seção Cor do plano de fundo da seta. Uma transparência de 100% será opaca, enquanto uma transparência de 0% não será visível. 
4. Para substituir os ícones usados nas setas para a esquerda e para a direita, clique em Substituir acima do ícone de seta para a esquerda e ícone de seta para a direita e. No painel direito, selecione um ícone.

5. Para editar a cor dos ícones de seta para a esquerda e para a direita, digite um valor hexadecimal no primeiro campo da seção Corde preenchimento do ícone de seta. Você também pode clicar no seletor de cores e selecionar uma cor. Cores personalizadas podem ser adicionadas na guia Avançado.
6. Para definir a transparência da seta, insira um valor percentual no segundo campo da seção Cor do ícone. Por exemplo, uma transparência de 100% será opaca, enquanto uma transparência de 0% não será visível. 
7. Para editar a proporção de imagens em miniatura, a largura e os cantos arredondados:
   • Clique para expandir a seção Imagens em miniatura.
   • Para definir as proporções usadas para todas as imagens em miniatura, clique no menu suspenso de proporções e selecione uma proporção. 
   • Para definir a largura usada para todas as imagens em miniatura, insira um valor de pixel no campo Largura. 
   • Para definir como os cantos arredondados das imagens em miniatura são exibidos, insira um valor de pixel no campo Raio. Quanto maior o valor, mais arredondados os cantos aparecerão. 
8. Quando terminar, clique em Aplicar alterações.

Editar estilos para o controle deslizante

1. Clique em Controle Deslizante. 
2. Clique para expandir a seção Espaçamento.
3. Para adicionar margens acima e abaixo do controle deslizante, insira valores de pixel na Margem acima e na Margem abaixo. 
4. Para adicionar preenchimento ao controle deslizante, digite um valor em pixel no campo Preenchimento. Para adicionar valores separados para cada lado, clique em Editar separadamente e insira valores de pixel nos campos.
5. Quando terminar, clique em Aplicar alterações.