Nesse tutorial vou te mostrar alguns ajustes que é possível realizar tanto na seção como nas estruturas na edição de página do Hotmart Pages.
💡 Atenção: O editor do Hotmart Pages se adapta a diferentes dispositivos (desktop, tablet e mobile), tamanhos de tela e resoluções, oferecendo uma experiência de navegação agradável e consistente para seus usuários. Ao realizar ajustes no seu conteúdo, lembre-se de verificar como as edições impactam nos diferentes formatos de tela, pois:
- As edições feitas no desktop serão automaticamente atualizadas nas versões tablet e mobile.
- As alterações feitas na versão tablet também serão refletidas na versão mobile.
- Já as edições feitas na versão mobile serão aplicadas exclusivamente nesse formato.
Essa abordagem assegura que o seu conteúdo seja visualizado da melhor maneira possível em qualquer dispositivo, proporcionando uma experiência consistente e otimizada para todos que visualizarem a página.
Índice:
- Ajustes de seções e estruturas
- Ajustar ou Personalizar um Container (Linha) ou Coluna
- Alterar Posicionamento dos elementos dentro do Container (Linha)
- Alterar distância entre os elementos (Botões, Texto, etc.) e a borda do Container ou Coluna
Ajustes de seções e estruturas
1. Clique na área em branco da seção que deseja personalizar;
2. No menu lateral aberto, clique na lista abaixo do texto Fundo:
3. Caso deseje que o fundo da seção seja transparente, selecione Transparente;
4. Caso deseje que o fundo da seção seja de alguma cor, selecione Cor.
5. Então clique no ícone com a cor em branco e selecione a cor que deseja.
6. Caso deseje que o fundo da seção tenha uma imagem, selecione Imagem
7. Então clique no botão Acessar Galeria;
8. Caso já tenha carregado a imagem, selecione a imagem desejada e clique no botão Usar como plano de fundo. Caso não tenha carregado, clique em Carregar Imagem para carregar a imagem desejada, selecione a imagem na lista e clique no botão Usar como plano de fundo.
9. Caso deseje que o fundo da seção tenha um efeito degradê, selecione Gradiente:
10. No campo Digite o método do gradiente, para que se consiga o degradê, deve ser inserido o seguinte método: linear-gradient (#ef4e23, #355cc0), onde os códigos #ef4e23 e #355cc0 são representações das cores que deseja usar (os códigos alteram de acordo com a cor desejada).
💡 Dica
Caso esteja configurando o fundo da seção como Gradiente e deseja encontrar a representação de uma cor, pode ser feita uma pesquisa na internet por Representação hexadecimal de cores.
Ajustar ou Personalizar um Container (Linha) ou Coluna
- Alterar Cor de fundo
1. Clique na área do Container ou Coluna que deseja personalizar
2. No menu lateral aberto, desça a barra de rolagem até o final, clique na lista abaixo do texto Fundo:
3. Caso deseje que o fundo da seção seja transparente, selecione Transparente
4. Caso deseje que o fundo da seção seja de alguma cor, selecione Cor. Então, clique no ícone com a cor em branco e selecione a cor que deseja.
5. Caso deseje que o fundo da seção tenha uma imagem, selecione Imagem
6. Então clique no botão Acessar Galeria
7. Caso já tenha carregado a imagem, selecione a imagem desejada e clique no botão Usar como plano de fundo. Caso não tenha carregado, clique em Carregar Imagem para carregar imagem desejada, selecione a imagem na lista e clique no botão Usar como plano de fundo.
8. Caso deseje que o fundo da seção tenha um efeito degradê, selecione Gradiente
9. No campo Digite o método do gradiente, para que se consiga o degradê, deve ser inserido o seguinte método: linear-gradient (#ef4e23, #355cc0), onde os códigos #ef4e23 e #355cc0 são representações das cores que deseja usar (os códigos alteram de acordo com a cor desejada)
💡 Dica
Caso esteja configurando o fundo da seção como Gradiente e deseja encontrar a representação de uma cor, pode ser feita uma pesquisa na internet por Representação hexadecimal de cores.
Alterar Posicionamento dos elementos dentro do Container (Linha)
1. Clique na área do Container ou Coluna que deseja personalizar;
2. No menu lateral aberto, clique na lista abaixo do texto Direção dos elementos;
3. Caso deseje que os elementos dentro do Container ou Linha fiquem em cima do outro, selecione Vertical;
4. Caso deseje que os elementos dentro do Container ou Linha fiquem lado a lado, selecione Horizontal;
5. Na caixa abaixo do texto Posição dos Elementos, seleciona o posicionamento que deseja para os elementos inseridos dentro do Container ou da Linha
Alterar distância entre os elementos (Botões, Texto, etc.) e a borda do Container ou Coluna
1. Clique na área do Container ou Coluna que deseja personalizar;
2. No menu lateral aberto, desça a barra de rolagem até Espaço interno;
3. Dentro de cada uma das caixas: Superior, Inferior, Esquerda e direita, aumente ou diminua o espaçamento entre as bordas e os elementos digitando o número desejado.
Tem alguma dúvida ou precisa de ajuda?
Se você já é cliente, nossos canais de atendimento estão disponíveis na própria plataforma. Ao efetuar o login na sua conta, basta clicar no botão de ajuda (?) localizado no canto superior direito.
Se você ainda não é cliente e não encontrou resposta para sua dúvida aqui na nossa Central de Ajuda, pode nos enviar um email através do formulário, clicando aqui.
*Imagens meramente ilustrativas. O painel dentro da plataforma pode sofrer alterações de acordo com novas atualizações.