Como adiciono estruturas e elementos ao criar uma página no Hotmart Pages?

Para organizar o layout de uma página que você criou com o Hotmart Pages e apresentar as informações da melhor maneira, o editor trabalha com estruturas, que organizam a página, e elementos, que compõem o conteúdo exibido.

Neste artigo, você vai entender o que são estruturas e elementos no Hotmart Pages, quais opções estão disponíveis e como adicioná-los à sua página, além de orientações práticas para personalização e organização do conteúdo.

O que são estruturas e elementos no Hotmart Pages?

Ao criar uma página no Hotmart Pages, é importante compreender a diferença entre estrutura e elemento, pois cada um cumpre um papel específico no editor:

• As estruturas são responsáveis por organizar o layout da página. Elas criam os espaços onde os conteúdos serão posicionados e ajudam a manter alinhamento, hierarquia visual e boa experiência de navegação.
• Já os elementos são os componentes que exibem o conteúdo para o visitante, como textos, imagens, botões e formulários.

Em outras palavras, as estruturas organizam a página, enquanto os elementos comunicam a mensagem.

Como adicionar estruturas e elementos à minha página?

Para adicionar estruturas e elementos no Hotmart Pages, siga o passo a passo abaixo:

1. Acesse sua conta pelo link http://app.hotmart.com. 
2. No menu lateral, clique em Marketing e depois em Criação de páginas.
3. Dentro do ambiente do Hotmart Pages, selecione Minhas páginas no menu lateral esquerdo.
4. Escolha a página que deseja editar e clique em Editar ou selecione Criar página para começar do zero.
5. No editor, clique no ícone + no menu lateral para Adicionar estruturas e elementos.
6. Selecione a estrutura ou elemento desejado e arraste para o local da página onde deseja inserir.
7. Após adicionar, clique sobre o componente para personalizar o conteúdo e as configurações visuais.

As alterações são salvas automaticamente como rascunho. Para tornar a página pública ou atualizar a versão publicada, clique em Publicar.

Quais estruturas estão disponíveis?

O Hotmart Pages oferece diferentes tipos de estruturas, que podem ser combinadas entre si:

❯ Seção: organiza estrutura principal da página. 

A Seção é a estrutura principal do Hotmart Pages. Ela funciona como um bloco que organiza o conteúdo da página em partes, facilitando a leitura, a navegação e a organização visual. Dentro de uma seção, você pode adicionar diferentes elementos, como textos, imagens, vídeos, botões, formulários, além de outras estruturas internas, como linhas, colunas e caixas.

A seção é indicada para blocos de conteúdo fixos, como:

• Cabeçalhos e banners
• Apresentações
• Áreas de informações
• Rodapés

Para adicionar uma Seção, siga os passos:

1. Na tela de Adicionar estruturas e elementos, selecione Seção e arraste para o local desejado na página.
2. Se preferir, clique em Substituir por modelo pronto e escolha um layout entre as categorias disponíveis.
3. Para personalizar livremente, arraste os elementos individualmente para dentro da seção.
4. 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 criada, a seção pode ser:

• Reordenada ou renomeada clicando no menu lateral no ícone de Estrutura da página.
• Duplicada, excluída ou salva para reutilização em outras páginas.
• Configurada com delay de exibição, por tempo ou por data.
• Personalizada com fundo, espaçamentos internos e visibilidade por dispositivo.

Importante: A opção Fixar seção está disponível apenas para a primeira seção da página e permite mantê-la visível no topo durante a rolagem.

❯ Linha e Coluna: organizam os conteúdos na vertical e na horizontal dentro de uma seção.

A Linha e a Coluna são estruturas usadas para organizar os elementos dentro de uma seção de forma alinhada e organizada, mas cada uma atua em um sentido diferente.

A Linha organiza os conteúdos na vertical, concentrando os elementos um abaixo do outro dentro da seção. Ela é usada como base para empilhar conteúdos e estruturar o fluxo da página. Já a Coluna divide o espaço da seção na horizontal, permitindo posicionar conteúdos lado a lado, como textos e imagens, botões ou blocos informativos.

Essas estruturas são especialmente úteis quando você precisa criar layouts mais organizados, como imagens e textos lado a lado, múltiplos botões em uma mesma área ou blocos de conteúdo distribuídos no desktop.

Para adicionar uma Linha ou Coluna, siga os passos:

1. Na tela de Adicionar estruturas e elementos, selecione Linha ou Coluna e arraste para o local desejado na página.
2. Linhas e colunas devem sempre estar dentro de uma seção.
3. Dentro da linha ou coluna, você pode adicionar elementos diretamente, dependendo da estrutura desejada.
4. 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.

❯ Caixa: agrupa elementos com alinhamento e comportamento visual semelhantes.

A Caixa é uma estrutura usada para agrupar elementos que precisam manter o mesmo alinhamento ou comportamento visual. Ela ajuda a organizar conteúdos relacionados e facilita ajustes de espaçamento e estilo em conjunto.

Para adicionar uma Caixa, siga os passos:

1. Na tela de Adicionar estruturas e elementos, selecione Caixa e arraste para o local desejado na página.
2. Clique na caixa que você acabou de adicionar para personalizar livremente.
3. Se desejar, arraste os elementos individualmente para dentro da caixa.
4. 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.

Você pode adicionar ícones dentro de uma caixa para deixar sua página mais personalizada. Confira como na seção seguinte.

❯ Carrossel: exibe conteúdos em slides rotativos

O Carrossel é um tipo especial de seção que exibe conteúdos em slides rotativos, permitindo apresentar textos, imagens e botões de forma sequencial. Ele é indicado quando você deseja mostrar múltiplas informações no mesmo espaço da página, como destaques, benefícios, depoimentos ou chamadas importantes.

Diferente das seções comuns, o carrossel não possui configuração de delay de exibição. Ele é exibido assim que a página é carregada.

Para adicionar um Carrossel, siga os passos:

1. Na tela de Adicionar estruturas e elementos, selecione Carrossel e arraste para o local desejado na página.
2. Clique no carrossel que você acabou de adicionar para configurar:
   • Slides: adicionar, duplicar, renomear, reordenar ou excluir.
   • Comportamento: ativar ou desativar a rotação automática e definir o tempo de transição.
   • Navegação: exibir ou ocultar setas e indicadores de slides.
3. Personalize seu carrossel com espaçamento interno, estilo de fundo e visibilidade.
4. Se desejar, arraste elementos individualmente para dentro do carrossel.
5. 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.

Quais elementos posso adicionar à minha página?

Os elementos são responsáveis por exibir o conteúdo da página. Entre os principais disponíveis no Hotmart Pages estão:

❯ Título e Parágrafo: usados para inserir textos e organizar a hierarquia da informação.

Os elementos Título e Parágrafo são usados para adicionar textos à sua página no Hotmart Pages. Eles ajudam a estruturar as informações, criar hierarquia visual e guiar a leitura do visitante ao longo do conteúdo.

Enquanto o Título é indicado para destacar seções, chamadas e pontos importantes, o Parágrafo é usado para textos explicativos, descrições e informações complementares.

Para adicionar Títulos e Parágrafos, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione Título ou Parágrafo e arraste para o local desejado na página.
2. Clique no elemento inserido para editar o conteúdo.
3. Personalize o estilo do texto, como tamanho e peso da fonte, cor e alinhamento.
4. As alterações ficam salvas como rascunho. Para aplicá-las, clique em Publicar.
    

Dicas e cuidados importantes:

• Mantenha uma hierarquia clara: títulos maiores para seções principais e menores para subtópicos.
• Evite textos muito longos em um único parágrafo. Prefira dividir o conteúdo em blocos curtos.

❯ Botão: direciona o visitante para uma ação.

Use o Botão (também chamado de CTA) para direcionar o visitante a uma ação específica, como acessar outra página, entrar em um grupo de WhatsApp, baixar um material ou seguir para o checkout.

Para adicionar o elemento Botão, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione Botão e arraste para o local desejado na página.
2. Clique no botão para inserir o texto e abrir o menu de personalização.
3. Em Ação, escolha o que acontecerá ao clicar no botão:
   • Link externo: direciona para uma URL (outra página do Hotmart Pages ou um site externo).
   • Link de pagamento Hotmart: vincula uma oferta do seu produto.
   • Ancorar seção: leva o visitante para uma seção específica da mesma página.
   • Abrir pop-up: exibe uma janela pop-up configurada na página.
4. Em Efeito, defina quando o botão será exibido:
   • Desabilitado: o botão aparece imediatamente.
   • Por data: exibe o botão em uma data e horário específicos.
   • Por tempo: exibe o botão após um tempo de espera (em segundos ou minutos).
5. Em Animação, selecione um efeito visual para destacar o botão (como Vibrar, Cintilar, Sacudir, Gelatina, Oscilar, Quicar, Pulsar ou Piscar). Em seguida, ajuste:
   • Variação da animação.
   • Repetições.
   • Tempo de duração.
6. Personalize o estilo do botão, como cor, tamanho, bordas e espaçamentos.
7. As alterações ficam salvas como rascunho. Para aplicar na página, clique em Publicar.
    

Dicas e cuidados importantes:

• É possível adicionar mais de um botão na mesma página, configurando cada um individualmente.
• Para disponibilizar arquivos, hospede o material em um serviço externo e utilize a ação Link externo.

❯ Imagem e GIF: adiciona conteúdos visuais à página.

O elemento Imagem permite adicionar conteúdos visuais estáticos à sua página no Hotmart Pages, enquanto os GIFs permitem exibir conteúdos visuais dinâmicos. Ambos seguem o mesmo caminho de adição no editor e podem ser usados de forma combinada ao longo da página, de acordo com o objetivo do conteúdo.

Para adicionar Imagens ou GIFs, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione Imagem e arraste para o local desejado na página.
2. Clique sobre o elemento inserido para abrir o menu de configurações e personalização.

Em seguida, considere os seguintes pontos:

• Imagem: o elemento Imagem é indicado para exibir banners, ilustrações, fotos, mockups ou qualquer outro conteúdo visual estático. Ao configurar uma imagem, você pode:
  • Selecionar a imagem a partir do seu computador ou de uma URL.
  • Ajustar o tamanho, alinhamento e espaçamento dentro da estrutura.
  • Definir bordas, cantos arredondados e sombras, conforme o estilo da página.
  • Adicionar link à imagem, direcionando o visitante para outra página, checkout ou site externo.
  • Configurar a visibilidade da imagem por dispositivo, escolhendo se ela aparece no desktop, mobile ou em ambos.
• GIFs: os GIFs permitem exibir animações curtas na página e podem ser usados para destacar informações, ilustrar ações ou tornar o conteúdo mais dinâmico. 
  • Para inserir GIFs, é necessário hospedá-los em um serviço como o GIPHY e utilizar o link gerado.
  • No Hotmart Pages, os GIFs são adicionados por meio de um link externo, utilizando o mesmo elemento de Imagem.
     

Dicas e cuidados importantes:

• Prefira imagens otimizadas, entre 100 e 300 KB, com limite de 1 MB.
• Evite imagens muito grandes em excesso, principalmente no mobile.
• Para evitar cortes ou distorções em diferentes dispositivos, utilize os tamanhos abaixo como referência:
  • Favicon: 32 × 32 px
  • Imagem de compartilhamento (Open Graph): 1200 × 630 px
  • Fundo de seção em tela cheia: cerca de 1920 × 1080 px
  • Proporções indicadas: 16:9, 4:3 e 1:1

❯ Vídeo: adiciona conteúdos visuais dinâmicos à página.

O elemento de Vídeo permite exibir conteúdos visuais dinâmicos na sua página, como aulas, depoimentos, demonstrações ou animações curtas. 

Para adicionar Vídeos, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione Vídeo e arraste para o local desejado na página.
2. Clique sobre o elemento inserido para abrir o menu de configurações e personalização.

O elemento Vídeo pode ser utilizado para incorporar vídeos hospedados tanto no Hotmart Player, quanto em plataformas externas, como YouTube, Vimeo ou Panda. Ao configurar um vídeo, você pode:

• Inserir a URL do vídeo hospedado na plataforma escolhida.
• Definir se o vídeo será reproduzido automaticamente ou apenas após o clique do visitante.
• Escolher se os controles do player ficarão visíveis.
• Ajustar o tamanho, alinhamento e responsividade para diferentes dispositivos.
   

Dicas e cuidados importantes:

• O upload direto de vídeos não é suportado. Utilize sempre URLs externas.
• Evite excesso de vídeos ou conteúdos pesados na mesma página.
• Caso você queira adicionar um vídeo de uma plataforma que não seja compatível, você deverá adicioná-lo via HTML.

❯ Formulário do Send: integrado ao Hotmart Send, coleta informações do visitante.

O Formulário do Send é usado para capturar dados como nome, e-mail e telefone. Ele é indicado para páginas de captura, listas de espera e inscrições, com integração direta ao Hotmart Send.

Para adicionar um Formulário do Send na sua página, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione Formulário do Send e arraste para o local desejado na página.
2. Clique em Clique aqui para configurá-lo para configurar seu formulário.
3. Selecione o formulário que receberá os dados capturados. Caso ainda não exista um formulário, é possível criá-lo durante a configuração.
4. Em seguida, clique no elemento do formulário para abrir o menu de personalização.
5. Personalize o texto do botão de envio, as mensagens exibidas após o envio e o estilo visual do formulário, como cores, tipografia e espaçamentos.
6. As alterações ficam salvas como rascunho. Para começar a capturar informações, clique em Publicar.
    

Dicas e cuidados importantes:

• Formulários com menos campos tendem a ter melhores taxas de envio.
• É possível usar mais de um formulário por página.
• O formulário só começa a capturar dados após a página ser publicada.
• Caso realize alguma alteração no Formulário, é importante atualizá-lo na página onde ele está inserido e publicar novamente para aplicar as mudanças.

Importante: se você quiser adicionar um formulário externo, você deverá adicioná-lo com o código HTML. Confira ainda nesta seção como inserir elementos HTML na sua página.

❯ Ícone: adiciona símbolos visuais que ajudam a destacar informações.

O elemento Ícone permite adicionar símbolos visuais para reforçar mensagens, destacar benefícios ou organizar informações.

Para adicionar Ícones, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione Ícone e arraste para o local desejado na página.
2. Clique sobre o ícone inserido para abrir o menu de configurações. 
3. Escolha o ícone que deseja utilizar na biblioteca disponível.
4. Ajuste o tamanho, a cor e o alinhamento do ícone conforme o layout da página.
5. Personalize o espaçamento para manter o alinhamento visual com os outros elementos.
6. As alterações ficam salvas como rascunho. Para aplicá-las na página, clique em Publicar.
    

Para criar blocos informativos mais completos, você pode combinar o ícone com textos, como títulos ou parágrafos. A forma mais indicada é usar uma estrutura de Caixa, que ajuda a manter o alinhamento e a organização visual. Um exemplo de estrutura:

• Selecione a estrutura de Caixa e dentro dela, adicione:
  • Um Ícone.
  • Um Título ou Parágrafo logo abaixo ou ao lado.

Esse formato é ideal para listas de benefícios, explicações rápidas ou apresentação de funcionalidades.

❯ Cronômetro: exibe uma contagem regressiva na sua página.

O Cronômetro permite exibir uma contagem regressiva para comunicar prazos, como encerramento de ofertas ou inscrições.

Para adicionar o Cronômetro na sua página, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione Cronômetro e arraste para o local desejado na página.
2. Clique sobre o cronômetro inserido para abrir o menu de configurações.
3. Em Tipo de contagem, escolha como o prazo será exibido:
   • Prazo ao entrar na página: a contagem começa no momento em que cada visitante acessa a página. Nesse caso, o tempo exibido pode variar de pessoa para pessoa.
   • Prazo por data específica: a contagem é baseada em uma data e horário definidos por você e será a mesma para todos os visitantes.
4. Em Ação ao término da contagem, defina o que acontecerá quando o tempo acabar:
   • Redirecionar o visitante para outra página.
   • Exibir uma mensagem personalizada.
5. Ajuste o Formato de exibição, escolhendo se o cronômetro mostrará dias, horas, minutos e segundos, além das legendas que acompanham os números.
6. Personalize os aspectos visuais, como cores, fonte, tamanho dos números, espaçamentos, bordas e visibilidade por dispositivo.
7. As alterações ficam salvas como rascunho. Para aplicá-las na página, clique em Publicar.
    

Dicas e cuidados importantes:

• Se escolher a opção de redirecionamento ao final da contagem, verifique se o link de destino foi inserido corretamente. Sem o link, o redirecionamento não acontece.
• Ao usar Prazo ao entrar na página, lembre-se de que testes repetidos podem apresentar variações por conta do cache do navegador.

❯ FAQ: organiza respostas para dúvidas frequentes.

O elemento FAQ permite criar uma seção de perguntas e respostas, exibindo o conteúdo apenas quando o visitante interage.

Para adicionar o elemento Cronômetro, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione FAQ e arraste para o local desejado na página.
2. Clique sobre a FAQ inserida para abrir o menu de configurações.
3. Adicione as perguntas e respostas que deseja exibir.
4. Personalize o texto das perguntas e respostas conforme o conteúdo da página.
5. Ajuste o estilo visual, como cores, tipografia, espaçamento e ícones de abertura, se disponível.
6. As alterações ficam salvas como rascunho. Para aplicá-las, clique em Publicar.

❯ Pop-up: exibe janelas automáticas ou acionadas por botão.

O Pop-up é um recurso do Hotmart Pages que permite exibir janelas sobrepostas na tela do visitante após uma ação específica. Ele pode ser usado para apresentar avisos, ofertas, mensagens importantes ou formulários, ajudando a direcionar a atenção e aumentar o engajamento com o conteúdo da página.

Ao configurar um pop-up, você pode escolher como ele será exibido:

• Pop-up acionado por botão: aparece quando o visitante clica em um botão específico da página. É indicado para destacar ofertas, conteúdos extras, inscrições, downloads ou ações pontuais.
• Pop-up de saída: é exibido quando o sistema identifica que o visitante está prestes a sair da página, como ao mover o cursor em direção ao fechamento do navegador. Esse tipo de pop-up é exibido apenas na versão desktop e pode ser usado para tentar reter o visitante com uma última mensagem ou incentivo.

Para adicionar o elemento Pop-up, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione Pop-up e arraste para o local desejado na página.
2. Durante a edição, ele será exibido abaixo da primeira seção.
3. Após adicionar o elemento, escolha uma das opções:
   • Substituir por modelo pronto, para usar um layout existente.
   • Adicionar elementos, para criar um pop-up do zero.
4. Clique sobre o pop-up inserido para abrir o menu de configurações.
5. Defina um nome interno para facilitar a identificação do pop-up.
6. Em Quando exibir, escolha uma das opções:
   • Ao clicar em um botão.
   • Ao tentar sair da página.
7. Personalize o conteúdo do pop-up adicionando elementos como textos, botões, imagens ou formulários do Hotmart Send.
8. Ajuste estilo, cores, espaçamentos e demais configurações visuais conforme o layout da página.
9. As alterações ficam salvas como rascunho. Para aplicá-las, clique em Publicar.
    

Você também pode editar, reutilizar ou excluir um pop-up. Veja abaixo como:

1. Para editar ou excluir um pop-up, acesse a Estrutura da página pelo ícone de camadas no menu lateral do editor.
2. Clique no ícone de lápis para editar ou na lixeira para excluir.
3. É possível adicionar novos pop-ups por esse mesmo caminho, reutilizando modelos prontos, pop-ups salvos anteriormente ou criando um pop-up em branco.
4. Se quiser reutilizar o pop-up em outras páginas, utilize a opção Salvar pop-up disponível no menu lateral.
    

Dicas e cuidados importantes:

• Se o pop-up for exibido ao clicar em um botão, lembre-se de vincular corretamente o botão à ação de abrir o pop-up.
• O pop-up de saída funciona apenas no desktop.

❯ HTML: permite inserir códigos externos para formulários e conteúdos.

O elemento HTML permite incorporar conteúdos externos na sua página do Hotmart Pages por meio de trechos de código. Ele é indicado quando você precisa adicionar recursos que não estão disponíveis nos elementos nativos do editor, como formulários externos, players específicos, mapas, widgets ou outros conteúdos incorporáveis.

Por meio do elemento HTML, é possível incorporar conteúdos como:

• Formulários externos, criados em ferramentas de e-mail marketing ou no Google Forms.
• Players e conteúdos incorporados via <iframe>.
• Outros trechos de código indicados pela ferramenta externa, utilizando tags como <iframe>, <form>, <div>, <img>, <audio> ou <video>.

O código deve ser sempre fornecido pela plataforma externa que hospeda o conteúdo.

Para adicionar conteúdo externo via HTML, siga os passos abaixo:

1. Na tela de Adicionar estruturas e elementos, selecione HTML e arraste para o local desejado na página.
2. Clique sobre o elemento inserido para abrir o painel de configurações.
3. Selecione a opção Editar HTML.
4. Cole no campo indicado o trecho de código HTML fornecido pela plataforma externa.
5. As alterações ficam salvas como rascunho. Para aplicá-las, clique em Publicar.
    

Cuidados importantes ao usar o elemento HTML:

• Utilize apenas trechos de HTML, e não páginas completas. Códigos que contenham <html>, <head>, <body> ou <!DOCTYPE html> não são compatíveis com o editor.
• Scripts e códigos de rastreamento não devem ser inseridos pelo elemento HTML. Esses códigos precisam ser configurados pelo menu de Scripts nas configurações da página. Para saber mais, consulte este artigo.
• Para formulários ou conteúdos incorporados, ajuste o atributo width para 100%, garantindo uma boa exibição em dispositivos móveis.
• Sempre que possível, priorize os elementos nativos do Hotmart Pages. O HTML deve ser usado como complemento, quando o resultado desejado não puder ser atendido pelas opções padrão.

Esses elementos podem ser combinados livremente dentro das estruturas para criar diferentes layouts.

Como personalizar estruturas e elementos?

Depois de adicionar estruturas e elementos, é possível ajustar o visual e o comportamento de cada componente diretamente pelo menu lateral do editor. Entre as principais opções de personalização estão:

• Posicionamento e alinhamento dos elementos dentro de linhas, colunas e caixas.
• Espaçamento interno, ajustando margens e preenchimentos.
• Fundo, com cor sólida, imagem ou gradiente (nas seções, linhas e colunas).
• Estilo de textos, como fonte, tamanho, cor, alinhamento e espaçamento entre linhas.
• Responsividade, definindo se o componente será exibido no desktop, no celular ou em ambos.

Como funciona a responsividade no Hotmart Pages?

As páginas criadas no Hotmart Pages são responsivas por padrão, o que significa que se adaptam automaticamente a diferentes tamanhos de tela, como computador, celular e tablet.

Mesmo com essa adaptação automática, o editor permite realizar ajustes específicos para cada dispositivo, ajudando a melhorar a experiência do visitante em telas menores. O editor trabalha com duas visualizações:

• Computador: é a versão base da página e serve como referência para o layout.
• Celular: permite ajustes específicos para telas menores.

A visualização em tablet se ajusta automaticamente, seguindo o padrão mais adequado conforme o tamanho da tela.

❯ As mesmas configurações se aplicam tanto em computador quanto em celular?

Algumas configurações são sempre sincronizadas entre as versões e não podem ser alteradas separadamente, como conteúdo dos textos, estruturas da página, fontes, links e imagens.

Outras configurações podem ser personalizadas de forma independente no computador ou no celular, como tamanho da fonte, tamanho dos elementos (altura e largura), espaçamentos internos (padding) e margens e alinhamento de textos.

Quando um ajuste é feito apenas para o celular, um ícone de mobile indica que aquela configuração é específica dessa visualização.

Você pode definir se um elemento ou seção será exibido em cada dispositivo:

• Ocultar no computador: o item aparece apenas no celular.
• Ocultar no celular: o item aparece apenas no desktop.

Durante a edição, todos os elementos permanecem visíveis. A visibilidade configurada só é aplicada na versão publicada da página. Esse recurso é útil quando um elemento funciona bem no desktop, mas não se adapta corretamente ao mobile.

❯ Como ajustar a página para computador e celular?

Com a página já aberta no editor de páginas do Hotmart Pages:

1. Verifique se você está na visualização Computador e organize o layout primeiro nessa versão.
2. Na barra superior, clique no ícone de Celular.
3. Ajuste apenas o que for necessário para telas menores, como tamanho de fontes, espaçamentos e alinhamentos.
4. Para controlar a exibição de um item por dispositivo, clique no elemento e acesse Visibilidade no menu lateral.
5. Por padrão, o item aparece em ambas as versões. Se quiser, selecione:
   • Ocultar no computador (exibe apenas no celular), ou
   • Ocultar no celular (exibe apenas no computador).
6. Clique em Visualizar rascunho para conferir como a página aparece no computador e no celular.
7. As alterações ficam salvas como rascunho. Para aplicá-las, clique em Publicar.

Importante: durante a edição, todos os elementos permanecem visíveis para facilitar a organização. As configurações de visibilidade só são aplicadas na versão publicada da página.

Perguntas frequentes

❯ Como personalizar uma seção no Hotmart Pages? 

Para personalizar uma seção, clique sobre ela no editor e utilize o menu lateral para ajustar as configurações disponíveis. É possível:

• Fixar a seção (opção disponível apenas para a primeira seção da página): mantém a seção fixa no topo durante a rolagem, sendo útil para menus, avisos ou chamadas importantes.
• Definir um efeito de exibição (delay):
  • Por tempo: a seção aparece após um número de segundos.
  • Por data: a seção fica visível a partir de uma data e horário definidos.
• Ajustar o espaçamento interno, controlando margens e preenchimento entre o conteúdo e as bordas da seção.
• Personalizar o estilo de fundo, escolhendo entre:
  • Transparente
  • Cor sólida
  • Imagem de fundo
  • Gradiente, combinando duas cores
• Controlar a visibilidade por dispositivo, definindo se a seção será exibida no desktop, no celular ou em ambos.

Durante a edição, a seção permanece visível no editor. As configurações de visibilidade são aplicadas apenas na versão publicada da página.

❯ Preciso usar uma seção para adicionar elementos na página?

Sim. Toda página do Hotmart Pages precisa de seções, pois elas são a base onde os elementos (como textos, imagens e botões) são inseridos. Sem uma seção, não é possível adicionar outros conteúdos à página.

❯ Posso combinar diferentes estruturas na mesma página?

Sim. As estruturas podem ser combinadas livremente. Por exemplo, é possível usar seções com linhas, colunas e caixas para criar diferentes layouts e organizar melhor os elementos da página.

❯ Posso reutilizar seções ou pop-ups em outras páginas?

Sim. Tanto seções quanto pop-ups podem ser salvos para reutilização e adicionados em outras páginas, facilitando a padronização e economizando tempo na criação.

❯ Posso ocultar um elemento apenas no celular ou apenas no computador?

Sim. É possível controlar a visibilidade por dispositivo, definindo se um elemento ou seção será exibido no desktop, no celular ou em ambos. Essa configuração só é aplicada na versão publicada da página.

❯ O que acontece se eu não publicar a página após fazer alterações?

As alterações ficam salvas automaticamente como rascunho, mas só ficam visíveis para os visitantes depois que a página é publicada ou atualizada.

❯ Posso testar o layout antes de publicar a página?

Sim. Utilize a opção de visualização de rascunho para conferir como a página será exibida no desktop e no celular antes de publicar.