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 e editar páginas com o editor de arrastar e soltar (BETA)

Ultima atualização: Novembro 5, 2019

Em Beta

Disponível para

Marketing Hub  Starter

Com o editor de arrastar e soltar, você pode definir e personalizar o layout e o estilo das suas páginas da HubSpot, sem precisar acessar folhas de estilos e modelos. Para hospedar a página em um domínio específico, conecte o domínio no HubSpot.

  • Na sua conta da HubSpot, acesse Marketing Landing pages.
  • No canto superior direito, clique em Criar.
  • Passe o cursor do mouse sobre um modelo e clique em Visualizar.
  • Para selecionar o modelo da sua página, clique em Usar este modelo ou clique em Voltar para ver mais opções.
  • Insira o Nome da página e clique em Criar página.

Conteúdo

Os modelos de arrastar e soltar são compostos por módulos, que podem ser agrupados em linhas horizontais ou colunas verticais. Esses módulos, linhas ou colunas podem ser agrupados em seções de elementos. Na guia Conteúdo, você pode personalizar o conteúdo, o espaçamento e o layout dos elementos da página.

  • Para adicionar um módulo à página, clique e arraste-o da guia Adicionar para o painel esquerdo. Você verá uma linha azul indicando onde o módulo será posicionado.

add%20module%20to%20dnd%20template

  • Para mover um módulo, linha, coluna ou seção, arraste o elemento desejado e solte-o onde pretende adicioná-lo.
  • Para ajustar a largura dos elementos em uma coluna dentro da mesma seção, clique e arraste o divisor vertical entre os módulos.
  • Você pode desfazer ou refazer uma ação clicando nos ícones de seta no canto superior esquerdo.

edit%20layout%20of%20dnd%20template2

  • Para personalizar, duplicar ou excluir um módulo, passe o cursor do mouse sobre ele na visualização à direita.
    • Para editar o conteúdo do módulo, clique no ícone de lápis edit . No painel esquerdo, faça as alterações ao conteúdo, às imagens, etc. Os módulos de rich text também podem ser editados na visualização da página à direita.
    • Para modificar o estilo e a posição do módulo, clique no ícone de pincel styles .
    • No painel esquerdo, personalize a cor de fundo, a forma e os estilos de borda do módulo. As opções de estilos disponíveis dependem do tipo de módulo
    • Para criar uma cópia de um módulo em uma mesma coluna, clique no ícone de cópia duplicate .
    • Para excluir um módulo da página, clique no ícone de lixeira delete .
  • Para editar os estilos de um grupo de elementos, passe o cursor do mouse sobre a linha, coluna ou seção, clique no menu suspenso e selecione Estilo de [elemento].
    • Na guia Fundo, selecione um Tipo de fundo e personalize as configurações. A visualização é atualizada à medida que as alterações são feitas.
      • Nenhum: selecione esta opção para remover cores ou imagens de fundo.
      • Cor: selecione esta opção para definir uma única cor como fundo. Insira um valor de cor de fundo e um percentual de transparência.
      • Imagem: selecione esta opção para definir uma imagem como fundo. Se houver uma imagem no modelo por padrão, clique em Substituir para alterá-la. Clique em Upload para adicionar uma imagem do computador ou em Procurar imagens para selecionar uma imagem dos seus arquivos.
      • Gradiente: selecione esta opção para definir duas cores que se fundem como fundo. Defina a direção do gradiente. Insira um valor hexadecimal e defina a transparência de cada cor.
    • Clique na guia Espaçamento para modificar o tamanho e o espaçamento da linha, da coluna ou da seção.
      • Insira uma largura máxima para o conteúdo deste elemento na página.
      • Clique nas guias Deslocamento e Margem para modificar o espaçamento ao redor do conteúdo. O deslocamento controla o espaço ao redor do elemento na página. A margem controla o espaço entre o conteúdo e a borda do elemento.
  • Para criar uma cópia de um elemento existente, passe o cursor do mouse sobre o elemento, clique no menu suspenso e selecione Clonar [elemento].
  • Para excluir um elemento da página, passe o cursor do mouse sobre o elemento, clique no menu suspenso e selecione Excluir [elemento].

Conforme você edita a página, as atualização são salvas automaticamente. Se quiser restaurar uma revisão anterior:

  • No canto superior esquerdo, passe o cursor do mouse sobre Salvar automaticamente.
  • No alerta exibido, clique em revisões para ver as versões da página salvas anteriormente.
  • No painel esquerdo, selecione a revisão que deseja restaurar com base na marcação de data e hora. Você verá uma prévia da revisão à direita.
  • Para restaurar a revisão selecionada, clique em Restaurar esta versão. Para retornar à versão atual, clique em Voltar.

Design

Você pode modificar a formatação de texto padrão e o estilo de formulários e botões na página como um todo:

  • Clique na guia Design para abrir o painel esquerdo.
    • 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.
    • Na seção Botões, personalize o estilo dos botões dos módulos e formulários 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.

Configurações

Personalize as configurações da página para editar os detalhes mostrados internamente e no navegador da Web do visitante.

  • Clique na guia Configurações para personalizar os detalhes da página:
    • Nome da página interna: o nome da página para referência interna. Esse nome é exibido no painel da página.
    • Título da página: o título da página aparece na barra de título do navegador e nos resultados de pesquisa.
    • URL da página: personalize a URL da página. Saiba como conectar o domínio do seu site ao HubSpot.
    • Metadescrição: adicione uma metadescrição para que os usuários possam ver o assunto da sua página na página de resultados da pesquisa.
    • Imagem em destaque: adicione uma imagem em destaque, que é renderizada nas visualizações quando a página é compartilhada nas mídias sociais.

Otimização

Clique na guia Otimizações para ver recomendações para melhorar o conteúdo da página para SEO (otimização do mecanismo de pesquisa). Saiba mais sobre as práticas recomendadas de SEO e como essas dicas afetam o tráfego orgânico para o seu site.

Visualização

Para ver uma visualização de como a página será exibida para os visitantes:

  • Clique em Visualizar no canto superior direito para entrar no modo de visualização. Você verá uma visualização atualizada do conteúdo à direita.
    • Tipo de dispositivo: selecione um tipo de dispositivo para ver como a página será exibida em um computador ou em diferentes orientações de um dispositivo móvel ou tablet. 
    • Visualizar como um contato específico: para testar a personalização, clique no menu suspenso Visualizar como um contato específico e selecione um contato do seu CRM.
    • Visualização compartilhável: clique em Abrir em uma nova janela para ver uma versão compartilhável do e-mail em uma janela do navegador ou clique em Copiar para copiar o link de visualização para a área de transferência para compartilhamento.
  • Para voltar ao editor de conteúdo, clique em Sair do modo de visualização no canto superior direito.

Publicar

Para publicar a página, clique em Publicar no canto superior direito.

/pt/cms-general/create-and-edit-pages-with-the-drag-and-drop-editor