Como adicionar e personalizar seções e carrossel no Hotmart Pages?

No Hotmart Pages, as Seções formam a estrutura principal da página, dividindo o layout em blocos que organizam o conteúdo, facilitam a navegação e permitem adicionar e personalizar diferentes tipos de informações.

Neste artigo, explicamos o que são as seções, quais tipos estão disponíveis e como utilizá-las na construção da sua página.

As seções, também chamadas de dobras, são os blocos que formam a estrutura principal de uma página. Cada seção pode receber diferentes elementos, como textos, imagens, vídeos, botões, formulários e outras estruturas internas, como colunas e linhas.

No Hotmart Pages, existem dois tipos:

• Seção: modelo mais utilizado, ideal para blocos de conteúdo fixos, como cabeçalhos, banners, apresentações, áreas de informações e rodapés.
• Carrossel: formato especial com slides rotativos para exibir textos, imagens e botões de forma sequencial, com rotação automática ou manual.

Você pode adicionar seções usando modelos prontos ou criá-las do zero, reordenar ou renomear conforme a necessidade, salvar versões para reutilizar em outras páginas e controlar quando cada uma aparece utilizando o recurso de delay.

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. Escolha Seção ou Carrossel, arraste e solte onde deseja inserir.
7. Se estiver adicionando uma seção, é possível usar um layout pronto selecionando Substituir por modelo pronto e escolhendo entre as categorias disponíveis. Para personalizar livremente, arraste os elementos individualmente para dentro da seção ou do carrossel.

Clique na seção desejada. No canto superior direito da seção, estão disponíveis:

• Salvar para reutilizar: clique no ícone de bandeira para adicionar a seção à sua biblioteca.
• Duplicar: use o ícone de cópia para criar uma réplica da seção.
• Excluir: clique no ícone de lixeira.
• Restaurar ações recentes: utilize o botão de desfazer no topo do editor.
  Observação: o recurso desfaz apenas a última ação realizada; útil, por exemplo, se você acabou de remover uma seção.

❯ Ajustes estruturais

No menu lateral, acesse o ícone de camadas para abrir a Estrutura da página para:

• Alterar a posição: arraste a seção para reorganizá-la.
• Renomear: dê dois cliques no título da seção para editar o nome.

❯ Inserir seção salva

1. No menu lateral, clique no ícone de página para acessar Modelos.
2. Selecione Modelos de seções e, em seguida, Minhas seções.
3. Escolha a seção desejada e arraste para o ponto da página onde deseja adicioná-la.

Clique na seção que deseja editar e, no menu lateral, ajuste as configurações disponíveis:

• Fixar seção (disponível para a primeira seção da página): ative o toggle para manter a seção fixa no topo durante a rolagem. Essa opção é útil para destacar informações importantes, como avisos, menus ou chamadas principais. 
• Efeito: configure o delay para definir quando a seção será exibida. 
  • Por tempo: determine o número de segundos até a exibição.
  • Por data: informe a data e o horário em que a seção deve ficar visível.
• Espaçamento interno: ajuste as margens e o preenchimento entre o conteúdo e as bordas da seção.
• Estilos: escolha o tipo de fundo da seção:
  • Transparente: deixa o fundo sem cor ou imagem.
  • Cor: permite escolher uma cor sólida.
  • Imagem: insira uma imagem de fundo usando a galeria do Pages.
  • Gradiente: combine duas cores usando o método linear-gradient (#cor1, #cor2), onde #cor1 e #cor2 representam as cores desejadas.
• 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.

O Carrossel não possui configurações de delay (exibição por tempo ou por data). Como ele é projetado para mostrar conteúdo dinâmico de forma contínua, sua exibição segue diretamente o carregamento da página.

Clique no carrossel para as configurações específicas, como: 

• Slides: adicionar, duplicar, reordenar ou excluir slides; cada slide pode receber um nome para organização.
• Comportamento: ativar ou desativar a reprodução automática e definir o tempo de transição entre os slides.
• Navegação: ativar ou desativar setas e indicadores de slides para facilitar a navegação.

Outras configurações, como Espaçamento interno, Estilo (fundo) e Visibilidade, funcionam da mesma forma que nas seções.

• 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 e gerenciamento de seções, nossa equipe de suporte está à disposição para ajudar. Saiba como entrar em contato.