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: Novembro 23, 2020

Disponível para

Todos os produtos e planos

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. Este artigo aborda como criar uma nova landing page, como personalizar o design da página e como publicar a página.

Observação: os modelos starter não oferecem suporte ao conteúdo inteligente, aos módulos personalizados, à personalização, nem acesso ao código-fonte em módulos de rich text. Esses modelos também não oferecem suporte às opções avançadas, como a troca de modelos e o acesso ao cabeçalho HTML.

Para saber como criar e publicar uma landing page em um tutorial de vídeo, confira estas lições gratuitas 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.
  • Na parte superior, clique no menu suspenso Filtrar por fonte e selecione Starter.
  • Passe o cursor do mouse sobre um modelo 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 o conteúdo da página

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 selecionar uma cor de 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.

Otimizar a página para os mecanismos de busca

Na navegação superior, clique na guia Otimizar para abrir para 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 interna é o nome adicionado ao criar a página e é referenciado no painel. Não é exibido para visitantes.
  • Título da página: o título exibido na guia, no canto superior do seu navegador da Web, quando a página é carregada.
  • URL da página: a URL da página é exibida na barra de URL dentro do navegador quando os visitantes navegam para esta página. Você pode personalizar o Slug de conteúdo da URL da página.
  • 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 Upload para selecionar uma imagem do seu computador.

Visualizar e publicar a página

Antes de sua página ser publicada, clique em Visualizar no canto superior direito para testar como sua página será exibida em um dispositivo móvel. Você também pode testar como a personalização ou o conteúdo inteligente aparecerá para os visitantes na visualização da página.

Para personalizar a forma como a página é exibida nos dispositivos móveis, clique  no ícone mobile ediEditar para dispositivos móveis no canto superior esquerdo.

Quando estiver satisfeito com a visualização da sua página, clique em Publicar no canto superior direito.