Nesse tutorial vou te mostrar como fazer os ajustes de estilo do seu formulário de captura e do botão da sua página utilizando o Hotmart Pages.
Agora que você já tem uma página com formulário de captura, eu vou te mostrar como fazer ajustes para deixá-lo ainda mais atrativo.
Caso você tenha dúvida de como inserir um formulário de captura na sua página, temos dois tutoriais específicos sobre o tema.
- Como implementar um formulário na sua página com a ajuda do Hotmart Send
- Como integrar um formulário via HTML usando o Hotmart Send
Índice:
- Ajustes do formulário de captura
- Alterar o texto e cor do botão
- Inserir o efeito de hover em um botão
- Inserir borda em um botão
- Arredondar as bordas do botão
- Alterar largura do botão
- Alterar distância entre o texto do botão e a borda do botão (Espaço interno ou Padding)
- Alterar distância entre o botão e outros elementos
- Inserir Link e comportamento do Link no botão
Ajustes do formulário de captura
1. Clique no formulário e um menu irá aparecer na lateral esquerda;
2. Ajuste os estilos de cor do seu texto de acordo com sua estratégia;
3. É possível alterar a fonte e tamanho do texto;
4. Caso deseja colocar borda no formulário, é possível ajustar a espessura e cor;
Alterar o texto e cor do botão
1. Clique no botão que deseja personalizar;
2. Para alterar a cor do texto do botão:
3. No menu lateral aberto, clique na caixa em verde (cor padrão) abaixo do texto Cor do texto;
4. Selecione a cor desejada.
5. Para alterar a cor do preenchimento do botão:
6. No menu lateral aberto, clique na caixa em verde (cor padrão) abaixo do texto Cor do fundo;
7. Selecione a cor desejada.
💡 Dica
Também é possível alterar uma cor colando um código de uma cor específica. Use essa opção quando quiser ter mais de um elemento na sua página com a mesma cor, copiando o código de um elemento e colando no campo de alteração de cor de outro.
Inserir o efeito de Hover em um botão
1. Clique no botão que deseja personalizar;
2. Para colocar o Hover no texto do botão:
3. No menu lateral aberto, clique na caixa abaixo do texto Texto - Hover;
4. Selecione a cor desejada para o efeito de Hover;
5. Para colocar o Hover no preenchimento do botão:
6. No menu lateral aberto, clique na caixa abaixo do texto Fundo - Hover;
7. Selecione a cor desejada para o efeito de Hover;
Inserir borda em um botão
1. Clique no botão que deseja personalizar;
2. No menu lateral aberto, desça a barra de rolagem até encontrar a opção Borda;
3. Clique na lista abaixo do texto Estilo;
4. Seleciona a opção Sólida;
5. Clique no campo abaixo do texto Espessura, digite a espessura desejada para a borda do botão;
6. Clique em "Cor" e selecione a cor desejada da borda.
Arredondar as bordas do botão
1. Clique no botão que deseja personalizar;
2. No menu lateral aberto, desça a barra de rolagem até encontrar a opção Arredondamento;
3. Clique em cada uma das quatro caixas, e digite o número correspondente ao arredondamento que deseja para os quatro cantos do botão.
Alterar largura do botão
1. Clique no botão que deseja personalizar;
2. No menu lateral aberto, desça a barra de rolagem até encontrar a opção Tamanho;
3. Clique no campo abaixo do texto Largura;
4. Digite o número correspondente a largura que deseja para o seu botão.
💡 Dica
A largura pode ser definida em “Pixels” ou “Porcentagem”. Digite um número baixo e vá colocando números maiores, até que o botão esteja do tamanho que você deseja.
Alterar distância entre o texto do botão e a borda do botão (Espaço interno ou Padding)
1. Clique no botão que deseja personalizar;
2. No menu lateral aberto, desça a barra de rolagem até encontrar o campo Espaço Interno;
3. Clique nas caixas abaixo das palavras Superior, Inferior, Esquerda e Direita, e digite o número correspondente ao espaçamento desejado.
💡 Dica
Use essa a opção também para manipular o tamanho do botão na vertical.
Alterar distância entre o botão e outros elementos
1. Clique no botão que deseja personalizar;
2. No menu lateral aberto, desça a barra de rolagem até encontrar o campo Margem;
3. Clique nas caixas abaixo das palavras Superior, Inferior, Esquerda e Direita, e digite o número correspondente ao espaçamento desejado.
💡 Dica
Use essa a opção para manipular o posicionamento do botão dentro do Contêiner ou Linha e consequentemente na sua página.
Inserir Link e comportamento do Link no botão
1. Clique no botão que deseja personalizar;
2. No menu lateral aberto, desça a barra de rolagem até encontrar o campo Outros;
3. Clique no campo abaixo da palavra Link do botão;
4. Cole ou digite o link que deseja direcionar os usuários do seu site quando clicarem no botão;
5. Clique na lista abaixo do texto Comportamento do link;
6. Se deseja que o link seja aberto em uma nova aba, selecione Nova Aba;
7. Se deseja que o link seja aberto na mesma aba, selecione Mesma Aba.
💡 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.
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.