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: Abril 29, 2020

Disponível para

Marketing Hub  Starter, Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic (versão anterior)

Com um modelo starter, você pode criar com rapidez e facilidade uma landing page para apresentar uma oferta de conteúdo para os visitantes do seu site. Você coletará as informações de contato do visitante e enviará um e-mail de acompanhamento para fornecer sua oferta de conteúdo. Saiba como configurar uma landing page e personalizar o design da página em um modelo starter.

Observação: para saber como criar uma landing page com um modelo starter em um tutorial de vídeo, confira esta lição do HubSpot Academy.

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 qualquer modelo identificado com uma tag Starter e clique em Visualizar no canto superior direito.

starter-template-create-page

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

Editar conteúdo em uma área de arrastar e soltar

Os modelos starter contêm módulos, que são blocos de conteúdo do site. Esses módulos podem ser organizados em linhas horizontais ou em 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 o layout da landing page.

Saiba mais sobre como editar o conteúdo da página em uma área de arrastar e soltar

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 de corpo para selecionar uma 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.
  • Títulos: personalize a fonte e a cor do texto dos módulos que têm 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 modificar a cor do link.
    • Clique nos botões de estilo ou no menu suspenso para selecionar os estilos aplicados ao texto do link, incluindo se deseja que os links apareçam sublinhados na página.
    • 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 na página.
      • Cor do link ativo: personalize a cor e a transparência do texto do link por padrão, 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 maior significa que os botões na página terão bordas arredondadas. Um valor igual a zero significa que os botões serão retangulares.

Observação: é uma prática recomendada manter as cores, as fontes e os estilos consistentes com base nas configurações na guia Design. Se, por algum motivo, você quiser substituir os estilos padrão de um elemento específico na página, poderá substituir os estilos padrão para um módulo na guia Opções no painel esquerdo.

Próximas etapas

Agora que você está pronto para compartilhar sua landing page com outras pessoas:

/pt/landing-pages/edit-a-page-using-a-starter-template