Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Landing Pages

Criar uma landing page com um modelo starter

Ultima atualização: Março 26, 2021

Disponível para

Todos os produtos e planos

Você pode usar um modelo starter para criar uma landing page simples que apresente uma oferta de conteúdo para os visitantes do seu site. Este artigo aborda como criar uma nova landing page, como personalizar o design da página e como publicar a página.

Observação: 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 ou opções avançadas, como a troca de modelos e acesso ao HTML do cabeçalho.


Antes de começar

Criar uma landing page com um modelo starter

Para criar uma nova landing page com um modelo starter:

  • Na sua conta da HubSpot, navegue até Marketing > Site > Landing pages.
  • No canto superior direito, clique em Criar > Landing page.
  • No menu da barra lateral esquerda, clique em Todos os filtros salvos.
  • Passe o cursor do mouse sobre um modelo e clique em Visualizar no canto superior direito.

preview-starter-template

  • Para criar uma página com este modelo, clique em Usar modelo no canto superior direito.

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.

Linhas e coluna podem ser agrupadas 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 maneira como o conteúdo da página é exibido em um dispositivo móvel, clique no ícone mobile ediEditar para dispositivos móveis no canto superior esquerdo.

edit-page-for-mobile

Personalizar fontes, cores e botões

Para personalizar os estilos padrão para o seu modelo starter, clique na guia Design no painel esquerdo. Você também pode personalizar a cor ou a imagem de fundo de uma linha, coluna ou seção específica da página.

edit-starter-theme-on-page

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 para selecionar a fonte.
    • Clique nas teclas de seta para selecionar o tamanho da fonte.
    • Clique no círculo de cores para selecionar uma cor para a 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ítulos para selecionar uma fonte.
    • Clique no círculo de cores para selecionar uma cor de fonte.
  • Texto do link: personalize as fontes e cores aplicadas aos links na página.
    • Clique no menu suspenso Texto do link para selecionar uma fonte.
    • Clique no círculo de cores para selecionar uma cor de link.
    • Clique nos botões de estilo ou no menu suspenso para selecionar os estilos aplicados ao texto do seu link.
    • Para personalizar como os links são exibidos quando o visitante interage com sua página, você pode personalizar a cor e a transparência dos links.
      • Cor do link ao passar o cursor do mouse: personalize a cor e a transparência do link quando um visitante passar o cursor do mouse sobre o link.
      • Cor do link ativo: personalize a cor e a transparência do texto do link antes dele ser clicado.
      • Cor do link visitado: personalize a cor e a transparência do link depois de ser clicado por um visitante.

Botões

Na seção Botões, personalize o estilo dos botões simples e de envio de formulário 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 círculo de cores para selecionar uma cor.
    • Insira um percentual ou clique nas teclas de seta para definir a transparência da cor de fundo do botão.
  • Cor do texto do botão: a cor aplicada ao texto dos botões na página.
    • Insira um valor hexadecimal ou clique no círculo de cores para selecionar a cor do texto.
    • Insira um percentual ou clique nas teclas de seta para definir a transparência da cor do texto do botão.
  • Raio de canto do botão: personalize a forma dos botões do formulário, inserindo um valor ou arrastando o controle deslizante. 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 da guia Design. Você pode substituir estilos padrão para um módulo individual na guia Opções do painel esquerdo.

Otimizar a página para os mecanismos de busca

Clique na guia Otimizar para abrir a ferramenta de otimização de SEO. Aqui você pode revisar as recomendações para melhorar o desempenho do seu conteúdo nos resultados dos mecanismos de busca.

Editar as configurações da página

Clique na guia Configurações para personalizar os detalhes da página.

  • Nome da página interna: o nome da página que apenas os usuários da HubSpot podem visualizar. Não é exibido para visitantes.
  • Título da página: o título que os visitantes veem na guia, na parte superior do navegador, ao carregar a página.
  • URL da página: a URL da sua página. É exibido na barra de URL dentro do navegador quando os visitantes navegam para esta página. Você pode editar a URL da página mesmo depois de publicada.
  • Metadescrição: o conteúdo que aparecerá nos resultados de pesquisa abaixo do título da página.
  • Imagem em destaque: clique para ativar este botão se quiser que uma imagem específica seja destacada quando sua página for compartilhada nas mídias sociais. Clique em Carregar para selecionar uma imagem do seu computador ou em Procurar imagens para selecionar uma imagem da ferramenta de arquivos.

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óveisQuando estiver satisfeito com a visualização da página, clique em Publicar no canto superior direito.