As páginas criadas no Hotmart Pages são responsivas por padrão e se adaptam automaticamente a diferentes tamanhos de tela. Ainda assim, você pode ajustar elementos separadamente em cada visualização sempre que precisar oferecer uma experiência mais adequada aos visitantes.
Neste artigo, explicamos como a responsividade funciona e o que pode ser personalizado em cada versão.
Informações importantes antes da edição
O editor trabalha com duas visualizações principais: Computador e Celular.
- Versão desktop como base: a visualização para computador serve como referência para toda a página.
- Visualização para celular: permite ajustes específicos para telas menores.
- Tablets: a exibição se adapta conforme o tamanho da tela, seguindo o padrão de computador ou celular.
Algumas configurações são sempre sincronizadas entre as versões, enquanto outras podem ser personalizadas de forma independente.
❯ Configurações sincronizadas
As alterações abaixo são aplicadas em ambas as visualizações, pois representam a base da página:
- Conteúdo
- Estruturas
- Fontes
- Links
- Imagens
❯ Configurações personalizadas
Esses ajustes podem ser aplicados de forma independente no computador ou no celular:
- Tamanho da fonte
- Tamanho dos elementos (altura e largura)
- Padding
- Margens
- Alinhamento de textos
Ao personalizar um item apenas para celular, um ícone de mobile aparece na barra lateral indicando que a configuração é específica dessa visualização. Para voltar ao padrão do computador, basta remover a personalização.
❯ Ocultar elementos por dispositivo
O Hotmart Pages permite controlar a exibição de elementos ou seções de forma independente para cada dispositivo. Por padrão, todos os itens são exibidos tanto no desktop quanto no mobile, mas você pode ocultar itens em uma das versões caso queira personalizar a experiência conforme o tipo de tela.
No menu lateral, use a opção Visibilidade para definir como cada elemento será exibido:
- Ocultar no computador: o item será exibido apenas no mobile.
- Ocultar no celular: o item será exibido apenas no desktop.
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.
Exemplo de utilização: se uma imagem funciona bem no desktop, mas fica desproporcional no celular, você pode mantê-la visível apenas no computador. Para isso, selecione o elemento, acesse Visibilidade e oculte a exibição no celular.
Dica avançada (opcional): alguns elementos não podem ser ajustados separadamente entre desktop e mobile, como botões com cores ou estilos diferentes. Nesses casos, você pode duplicar o elemento e usar a Visibilidade para criar versões distintas para cada dispositivo.
Como editar a página em cada versão
- Acesse sua conta Hotmart pelo link app.hotmart.com.
- No menu lateral, vá em Marketing e depois em Criação de páginas.
- Dentro do Hotmart Pages, acesse o menu lateral e selecione Minhas páginas.
- Escolha a página em que deseja personalizar e clique em Editar; ou em Criar página para começar do zero.
- A página será aberta na versão Computador. Organize o layout inicialmente nessa visualização.
- Na barra superior, selecione o ícone de Celular e ajuste apenas o que for necessário para telas menores (como tamanhos, espaçamentos e alinhamentos).
- Se desejar alterar a visibilidade de um elemento, clique sobre ele e acesse Visibilidade no menu lateral. Por padrão, o item é exibido em ambos; marque Ocultar no computador ou Ocultar no celular apenas se quiser escondê-lo em uma das versões.
- Utilize Visualizar rascunho para conferir uma prévia da página nas versões para computador e celular.
- 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.
Se você ainda tiver dúvidas sobre responsividade, nossa equipe de suporte está à disposição para ajudar. Saiba como entrar em contato.