Ir para o conteúdo principal
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 página com um modelo starter

Ultima atualização: Setembro 15, 2021

Disponível para

Todos os produtos e planos

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
  • No menu da barra lateral esquerda da tela de seleção de modelo, clique em Todos os seus modelos.
  • Para exibir seus modelos starter disponíveis, clique no menu suspenso Filtrar por fonte e selecione Starter. 

select-a-starter-template

  • Passe o cursor do mouse sobre um modelo e clique em Visualizar no canto superior direito.
  • Para criar uma página com este modelo, clique em Usar modelo no canto superior direito.
  • Na caixa de diálogo, clique em Continuar
  • Insira um nome interno para sua página e clique em Criar página

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 mobile ediEditar para dispositivos móveis no editor da barra lateral.

edit-page-for-mobile

Personalizar fontes, cores e botões

Para personalizar os estilos padrão para seu modelo starter, clique na guia Design 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.

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 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. 
      • 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. 

edit-link-text

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