Como adicionar e configurar imagens, vídeos e GIFs na minha página do Hotmart Pages?

Os elementos visuais, como imagens, GIFs e vídeos, tornam suas páginas mais atrativas, complementam o conteúdo e podem contribuir para uma comunicação mais completa. No Hotmart Pages, é possível inserir esses recursos e ajustar tamanho, posicionamento, bordas e comportamento em diferentes dispositivos.

Neste artigo, você encontra orientações sobre formatos e tamanhos recomendados, boas práticas de otimização e o passo a passo para adicionar e configurar esses elementos na sua página.

Tamanho do arquivo: para manter o carregamento da página eficiente, priorize imagens mais leves, geralmente entre 100 e 300 KB, com um máximo de 1 MB por imagem.

Por que isso importa: arquivos muito pesados aumentam o tamanho total da página e podem impactar a navegação, especialmente em dispositivos móveis ou em conexões mais lentas.

Como otimizar: antes de enviar, você pode compactar as imagens em ferramentas como Squoosh ou TinyPNG, que permitem ajustar qualidade e formato para reduzir o peso do arquivo.

• Exemplo: imagine uma página com uma logo, cinco imagens e duas seções com fundo ilustrado.
  Se cada arquivo tiver 1 MB, essa página somará cerca de 7 MB apenas em imagens, o que pode aumentar o tempo de carregamento significativamente, por isso, otimizar os arquivos ajuda a manter uma experiência mais fluída.

Formatos recomendados: JPEG, PNG, WEBP e AVIF são os formatos mais indicados. WEBP e AVIF tendem a gerar arquivos menores mantendo boa qualidade.

Nome do arquivo: sem acentos ou caracteres especiais (como ç, #, %, !, @).

Tamanhos sugeridos:

• Favicon: 32 × 32 px.
• Imagem de compartilhamento (Open Graph): 1200 × 630 px.
• Fundo de seção: não há um tamanho fixo; priorize opções sem textos ou elementos essenciais, pois o recorte pode variar conforme o dispositivo. Para fundos que ocupam a tela inteira, utilize imagens com cerca de 1920 x 1080 px ou em uma resolução proporcional.

Proporções ideais: proporções clássicas, como 16:9, 4:3 e 1:1, facilitam a responsividade e evitam distorções em diferentes telas.

1. Acesse sua conta Hotmart pelo link app.hotmart.com.
2. No menu lateral, vá em Marketing e depois em Criação de páginas.
3. Dentro do Hotmart Pages, acesse o menu lateral e selecione Minhas páginas.
4. Escolha a página em que deseja personalizar e clique em Editar; ou em Criar página para começar do zero.
5. No editor, clique no ícone + no menu lateral para Adicionar estruturas e elementos.
6. Selecione o Elemento desejado, arraste e solte no local onde deseja inserir:
   Imagem: para inserir uma imagem comum ou configurar um GIF posteriormente.
   Vídeo: para incorporar vídeos hospedados em plataformas compatíveis.
   
   Importante:
   Para inserir vídeos, eles precisam estar hospedados em plataformas como YouTube, Vimeo, Hotmart Player ou Panda.
   Para inserir GIFs, é necessário hospedá-los em um serviço como o GIPHY e utilizar o link gerado.
7. Clique no elemento inserido para abrir as opções de envio ou configuração.
   Para imagens, envie o arquivo do seu computador ou selecione um item da galeria.
   Para vídeos ou GIFs, cole o link da plataforma onde o conteúdo está hospedado.

Os elementos visuais compartilham várias opções de personalização no Hotmart Pages. Entre as configurações gerais estão:

• Tamanho: ajuste altura e largura em pixels ou porcentagem. Prefira manter a proporção original sempre que possível.
• Margens: configure o espaçamento superior, inferior, esquerdo e direito.
• Borda: escolha entre sem borda ou borda sólida, e personalize espessura, estilo e cor.
• Arredondamento: aplique cantos arredondados.
• Visibilidade: defina se a seção será exibida no desktop, no celular ou em ambos. Durante a edição, ela permanece visível; a configuração só é aplicada na versão publicada da página.

Após adicionar o elemento de Imagem à sua página, você pode ajustar o componente para organizar melhor o conteúdo e definir o visual desejado. As opções incluem:

• Trocar imagem: substitua por outra da galeria ou por um link externo (incluindo GIFs).
• Descrição da imagem: recurso essencial para acessibilidade e SEO; descreva brevemente o conteúdo exibido.
• Redimensionar:
  Cobrir: a imagem preenche toda a área disponível.
  Manter aspecto: preserva a proporção original enquanto se adapta ao espaço.
  Esticar: adapta a imagem ao espaço, mesmo que isso altere a proporção.
  Tamanho original: mantém as dimensões reais do arquivo.
• Link: direcione o visitante ao clicar na imagem.
  Comportamento: defina se o link abre na mesma aba ou em uma nova.

O elemento de vídeo possui ajustes próprios relacionados à fonte e ao comportamento:

• Link do vídeo: cole a URL de um arquivo hospedado no YouTube, Vimeo ou plataforma compatível.
• Reproduzir automaticamente: defina se o vídeo inicia automaticamente ou apenas quando o visitante clicar em play. Ao ativar o autoplay, o vídeo será reproduzido sem som, conforme o comportamento padrão.

Se preferir incorporar um vídeo por código, é possível adicioná-lo via HTML. Para isso, acesse este artigo.

• As alterações são salvas automaticamente como rascunho. Clique em Publicar para colocar a página no ar ou atualizar a versão publicada.
• As páginas do Hotmart Pages são responsivas e adaptam automaticamente o conteúdo para diferentes tamanhos de tela. No entanto, ajustes de tamanho e espaçamento podem ser personalizados para cada dispositivo. Por isso, antes de publicar, revise a visualização mobile para oferecer uma melhor experiência aos seus visitantes.

Se você ainda tiver dúvidas sobre configuração de imagens, gifs e vídeos na página, nossa equipe de suporte está à disposição para ajudar. Saiba como entrar em contato.