Como adicionar estruturas e elementos em uma página no Hotmart Pages?

No Hotmart Pages, é possível incluir diferentes recursos visuais e funcionais para organizar e enriquecer a sua página. Para isso, o editor oferece dois tipos de componentes: estruturas, que organizam o layout, e elementos, que compõem o conteúdo exibido.

Neste artigo, explicamos o que são estruturas e elementos e como adicionar cada um na sua página.

As estruturas são os blocos que organizam o conteúdo dentro das seções da sua páginas, criando espaços para posicionar e distribuir os elementos, facilitando a construção do layout. Elas ajudam a manter a organização e o alinhamento do conteúdo.

Os elementos são os componentes como textos, imagens, botões e formulários. Eles ajudam a apresentar informações, guiar ações dos visitantes ou capturar dados de contato.

• Seção (ou dobras): é a estrutura principal da página, divide sua página em partes, onde você poderá inserir as demais estruturas e elementos. É necessário ter seções para adicionar os demais componentes. Para saber mais sobre seções, acesse este artigo.
• Linha: organiza os conteúdos horizontalmente dentro de uma seção, ajudando a estruturar e distribuir os elementos na página.
• Coluna: divide uma linha em múltiplas partes, permitindo organizar elementos lado a lado no desktop ou empilhados no mobile.
• Caixa: agrupa elementos que precisam seguir o mesmo alinhamento ou comportamento visual.
• Carrossel: é um tipo específico de seção que exibe conteúdos em slides rotativos, com transição automática ou manual. Permite incluir imagens, textos e botões de forma sequencial.

• Título e Parágrafo: adiciona textos à página.
• Botão: orienta o visitante a realizar uma ação, como acessar links ou finalizar compras. Saiba mais sobre configuração de botão CTA.
• Formulário: integrado ao Hotmart Send, permite capturar informações do visitante conforme a configuração. Saiba mais sobre os Formulários.
• Imagem: insere fotos ou ilustrações na página. O arquivo deve ter até 1MB.
• Vídeo: incorpora conteúdos de plataformas como YouTube e Vímeo.
• HTML: possibilita incluir recursos externos, como rastreamento de anúncios e outros.
• Ícone: adiciona símbolos visuais que podem destacar informações e complementar o texto da página.
• Cronômetro: cria contagens regressivas ou de tempo limitado. Saiba como configurar um cronômetro.
• FAQ (Perguntas Frequentes): organiza respostas para dúvidas comuns sobre seu produto ou serviços.
• Pop-up: exibe uma janela automática na tela e pode destacar mensagens, ofertas ou capturas de contato. Saiba mais sobre os tipos de pop-ups.

As seções formam a base da página, enquanto as demais estruturas e elementos podem ser combinados entre si. Por exemplo, você pode adicionar uma caixa em uma seção ou em um carrossel e incluir elementos como texto e imagem. Testar diferentes combinações ajuda a identificar a melhor organização para o conteúdo da sua página.
 

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 componente desejado, arraste e solte no local onde deseja inserir.
7. Depois de adicionar as estruturas e elementos, personalize o conteúdo e o visual da forma desejada.

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.

Após adicionar estruturas e elementos à sua página, é possível ajustá-los para organizar melhor o conteúdo e definir o visual de cada componente. Entre os ajustes disponíveis estão:

• Posicionamento dos elementos: organize os elementos dentro de linhas, colunas e caixas de forma vertical ou horizontal. Esse ajuste é especialmente importante para garantir uma boa visualização na versão mobile.
• Espaçamento interno: ajuste margens e preenchimentos entre os elementos e as bordas da estrutura.
• Fundo: defina cores, imagens ou gradientes em seções, linhas e colunas. Para aplicar um gradiente, utilize o formato linear-gradient(#cor1, #cor2), onde #cor1 e #cor2 representam as cores desejadas.
• Estilo visual de Títulos e Parágrafos: ao adicionar Título ou Parágrafo, é possível ajustar:
  Tipo de texto (Cabeçalho 1, 2, 3 ou Parágrafo)
  Fonte e tamanho
  Cor do texto e cor de fundo (Destaque)
  Estilos (negrito, itálico, sublinhado ou riscado)
  Espaçamento entre linhas
  Alinhamento do texto
  Inserção de links
  Espaço interno
  Largura do texto na página (também pode ser ajustada diretamente na tela).
• Para o elemento Botão: além de ajustar as cores do texto e do botão, é possível definir a opacidade (hover) do texto e do fundo, destacando a interação visual quando o visitante passa o cursor sobre o botão.
• Visibilidade: configure se uma estrutura ou elemento deve aparecer apenas em determinados dispositivos, como desktop ou celular, permitindo ajustar a experiência de acordo com o formato de tela. O item permanece visível durante a edição e é ocultado apenas na versão publicada da página.

Importante: 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 estruturas e elementos, nossa equipe de suporte está à disposição para ajudar. Saiba como entrar em contato.