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

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

Ultima atualização: Setembro 28, 2021

Disponível para

Todos os produtos e planos

No editor de páginas de arrastar e soltar, os usuários podem reorganizar e aplicar estilos personalizados a diferentes seções de uma página. A edição por arrastar e soltar está disponível para páginas criadas com modelos iniciais, alguns modelos temáticos e modelos codificados com áreas de arrastar e soltar

Compreender o editor de arrastar e soltar

As áreas de arrastar e soltar são composta de módulos, que são blocos de conteúdo do site. Os módulos podem ser dispostos em linhas horizontais ou colunas verticais, que podem então ser agrupados em seções. 

Ao criar linhas, colunas e seções, você pode reorganizar ou aplicar o estilo a vários módulos ao mesmo tempo. Saiba mais sobre a personalização de estilos para conteúdo de arrastar e soltar.  

  1. Módulo: um bloco individual de conteúdo do site. Alguns módulos, como os módulos de texto rico, podem conter vários tipos de conteúdo. 
  2. Fila: uma fila horizontal de módulos. Você pode aplicar o estilo a uma linha inteira ou reorganizar sua posição em uma página. 
  3. Coluna: uma pilha vertical de múltiplos módulos. Você pode aplicar o estilo a uma coluna inteira ou reorganizar sua posição em uma página. 
  4. Seção: um grupo de várias linhas ou colunas que cobre toda a largura da página. Você pode aplicar o estilo a uma seção inteira ou reorganizar sua posição em uma página. 

edit-drag-and-drop-areas-in-page-editor

Use as seções

No editor de arrastar e soltar, você pode criar seções de página reutilizáveis arrastando os módulos para um layout de seção em branco. Os desenvolvedores também podem criar estas seções usando nossa documentação para desenvolvedores. Uma vez criadas, as seções podem ser usadas em qualquer página que suporte a edição por arrastar e soltar. As seções salvas que contêm regras inteligentes usarão essas regras quando adicionadas a uma página. 

Por favor, note não podem ser salvas mais de 25 seções reutilizáveis do editor de arrastar e soltar de uma só vez. Para guardar uma nova secção reutilizável, elimine uma secção reutilizável existente

Criar uma seção

  • 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.
  • Passe o cursor do mouse sobre uma página e clique em Editar.
  • No editor de conteúdo, flutue entre duas secções e clique noícone ++

add-a-page-section

  • No painel direito, clique no separador Layouts e seleccione um layout para a sua secção

add-blank-layout-to-page

  • No editor de conteúdo, arraste um módulo sobre o layout e coloque-o na posição. Repita para cada módulo da sua secção. 

drag-and-drop-onto-layout

  • Passe o cursor sobre a secção e clique no ícone do Carat parabaixo, depois seleccione Save section. 

save-a-section

Por favor, note as seções de páginas existentes e aquelas criadas sem layout também podem ser salvas como seções reutilizáveis


  • No painel direito, introduza um nome e descrição para a sua secção e, em seguida, clique em Guardar

Adicionar uma seção

  • 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.
  • Passe o cursor do mouse sobre uma página e clique em Editar.
  • No editor de conteúdo, flutue entre duas secções e clique noícone ++

add-a-page-section

  • No painel direito, passe o mouse sobre uma seção e clique em Select. As seções salvas do editor de arrastar e soltar aparecerão em seções Salvas, enquanto as criadas pelos desenvolvedores aparecerão em seções Tema.  
  • A adição de uma secção guardada que contenha regras inteligentes aplicará essas regras à nova secção adicionada. Estas secções serão rotuladas como inteligentes
  • Para excluir uma seção, clique noícone ++ para adicionar uma seção, depois passe o mouse sobre a seção e clique no ícone excluir.  Na caixa de diálogo, clique Excluir

secção add-smart

Editar linhas, colunas ou seções

  • No editor de página, flutue sobre a linha, coluna ou seção e, em seguida, clamber o editar editar ícone 
  • Para personalizar o estofamento e as margens ao redor da linha, coluna ou seção, clique em Alinhamento e espaçamento no editor da barra lateral.
  • Para editar o fundo de uma área, clique em Antecedentes no editor da barra lateral e selecione um opção de estilo  
    • Nenhum: remover qualquer cor ou imagem de fundo.
    • Cor: definir uma única cor como fundo. Insira umvalor hexadecimal , ou clique noseletor de cores e selecione umacor, depois insira um valor de transparência
    • Imagem: definir uma imagem como fundo. To add a new image, click Upload to add an image from your computer, or click Browse images to select an image from your files
    • Gradiente: colocar duas cores que se desvanecem como fundo. Clique no botão Direção e selecione um direção do gradiente. Para cada cor, digite umvalor hexadecimal , ou clique noseletor de cores e selecione umacor, depois digite um valor de transparência
edit-background-for-a-page-section
  • Para fazer uma cópia de um elemento existente, passe o mouse sobre o elemento e clique noícone de um ccclone duplicado.
  • Para remover um elemento da página, passe o mousesobre o elemento e clique noícone excluir

edit-column-icons

Adicionar e editar módulos

  • 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.
  • Passe o cursor do mouse sobre uma página e clique em Editar.
  • No editor de conteúdo, clique no módulo no editor da barra lateral, depois arraste-o para a posição na página. 
  • Para ajustar a largura de um módulo, clique no divisor vertical entre as colunas e arraste-o para a posição.

ajustado-em-diagrama-em-diagrama-em-editor

  • Para personalizar o conteúdo dentro de um módulo, passe o cursor do mouse sobre o módulo e clique em um ícone:
    • editar módulo Editar: editar o conteúdo do módulo
    • clonduplique o módulo Clone: faça uma cópia deste módulo na página.
    • Delete Delete module: remova este módulo da página.

edit-module-icons