Ultima atualização: Março 21, 2023
Você pode usar um modelo starter para criar um site ou uma landing page simples. Este artigo aborda como criar uma nova página, personalizar o design da sua página e publicá-la usando um modelo starter.
Observação: os modelos starter não são compatíveis com conteúdo inteligente, módulos personalizados, personalização, acesso ao código-fonte nos módulos de rich text, páginas protegidas por senha ou opções avançadas, como a troca de modelos e o acesso ao HTML do cabeçalho.
Criar uma página com um modelo starter
Para criar uma nova landing page com um modelo starter:
-
Acesse seu conteúdo:
- Páginas do site: Na sua conta da HubSpot, navegue até Marketing > Site > Páginas do site.
- Landing Pages: Na sua conta da HubSpot, navegue até Marketing > Landing Pages.
- No canto superior direito, clique no menu suspenso Criar e selecione Página do site ou Landing page.
- Na tela de seleção de modelos, os modelos do seu tema ativo serão exibidos na parte superior da página, enquanto todos os outros modelos estarão na seção Outros modelos na parte inferior. Clique em um modelo. Se você não selecionou um tema ativo, será solicitado a selecionar um ou clique em Pular para modelos para escolher um modelo existente.
- Para criar a página com o modelo selecionado, clique em Selecionar este modelo no canto superior direito. Para visualizar a página no dispositivo móvel ou no computador, clique em Visualizar.
Editar o conteúdo da página
Os modelos starter contêm blocos de conteúdo do site denominados módulos. Você pode organizar esses módulos em linhas horizontais ou colunas verticais.
Você pode agrupar linhas e colunas em seções de elementos. Ao agrupar elementos, você pode aplicar estilos de fundo a toda uma área da sua página. Você também pode arrastar e soltar esses elementos para reorganizar seu layout de página. Saiba mais sobre como editar o conteúdo da página em uma área de arrastar e soltar.
Para personalizar a aparência da sua página em dispositivos móveis, clique no ícone Editar para dispositivos móveis no editor da barra lateral.
Personalizar fontes, cores e botões
Para personalizar os estilos padrão para o seu modelo starter, clique na guia Tema no editor da barra lateral. Você também pode personalizar a cor ou a imagem de fundo de uma linha, coluna ou seção específica da página.
Tipografia
Na seção Tipografia, edite as fontes e os estilos de fonte aplicados ao corpo e aos títulos da página. Todas as fontes do Google são suportadas.- Texto de corpo: personalize a fonte, o tamanho e as cores da fonte do corpo principal da página:
- Clique no menu suspenso Texto do corpo e selecione uma fonte.
-
- Clique nas teclas de seta para ajustar o tamanho da fonte.
- Clique no seletor de cores e selecione uma cor para sua fonte. Para definir uma cor personalizada, clique na guia Avançado e insira um valor hexadecimal.
- Cabeçalhos: personalize a fonte e a cor do texto nos módulos com uma tag de título.
- Clique no menu suspenso Título e selecione uma fonte.
- Clique no seletor de cores e selecione uma cor de fonte. Para definir uma cor personalizada, clique na guia Avançado e insira um valor hexadecimal.
- Texto do link: personalize as fontes e cores aplicadas aos links na página.
- Clique no menu suspenso Texto do link e selecione uma fonte.
- Clique no seletor de cores e selecione uma cor de link. Para definir uma cor personalizada, clique na guia Avançado e insira um valor hexadecimal.
- Clique no menu suspenso e selecione um estilo para aplicar ao texto do seu link.
-
- Personalize a cor e a transparência quando o mouse pairar sobre seus links, eles forem clicados e já tiverem sido visitados:
- Cor ao passar o cursor do mouse sobre o link: clique no seletor de cores e selecione uma cor de link para ser usada quando um visitante passar o cursor do mouse sobre o link. Para alterar a transparência da cor, insira um valor percentual no campo de texto.
- Personalize a cor e a transparência quando o mouse pairar sobre seus links, eles forem clicados e já tiverem sido visitados:
-
-
- Cor do link ativo: clique no seletor de cores e selecione uma cor de link para ser usada quando o link for clicado. Para alterar a transparência da cor, insira um valor percentual no campo de texto.
-
-
-
- Cor do link visitado: clique no seletor de cores e selecione uma cor de link para ser usada quando o link já tiver sido clicado por um visitante. Para alterar a transparência da cor, insira um valor percentual no campo de texto.
-
Formulários e botões
Na seção Formulários e botões, personalize a maneira como os botões simples e os botões de envio de formulário são estilizados na página.- Cor de fundo do botão: personalize a cor aplicada ao fundo dos botões.
- Insira um valor hexadecimal ou clique no seletor de cores e selecione uma cor.
- Para definir a transparência da cor de fundo do botão, insira um valor percentual no campo.
- Cor do texto do botão: personalize a cor aplicada ao texto dos botões na sua página.
- Insira um valor hexadecimal ou clique no seletor de cores para selecionar a cor do texto.
- Para definir a transparência da cor de fundo do botão, insira um valor percentual no campo.
- Raio do canto do botão: personalize se os botões na sua página serão exibidos em formato arredondado ou quadrado.
- Insira um valor no campo ou clique e arraste o controle deslizante para uma nova posição.
- Um valor mais alto significa que os botões na página terão bordas arredondadas, enquanto um valor igual a zero significa que os botões serão retangulares.
Observação: a HubSpot recomenda manter as cores, as fontes e os estilos consistentes com base nas configurações na guia Design. Você pode substituir estilos padrão para um módulo individual na guia Opções do painel esquerdo.
Visualizar e publicar a página
Antes de ativar a página, clique em Visualizar, no canto superior direito, para testar como sua página será exibida no computador e em dispositivos móveis. Quando estiver satisfeito com a visualização da página, clique em Publicar no canto superior direito.
