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: Agosto 2, 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 múltiplas 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

Adicionar seções

Os desenvolvedores podem criar seções de páginas reutilizáveis que estão disponíveis no editor de arrastar e soltar. Saiba mais sobre como criar seções reutilizáveis em nossa documentação para desenvolvedores. No editor de arrastar e soltar, também estão disponíveis layouts em branco para seções. 

  • Navegue até ao seu conteúdo:

    • Páginas do site Na sua conta da HubSpot, navegue até Marketing > Site > Páginas do site.
    • Páginas de Aterragem 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

  • Para adicionar uma secção personalizada, no painel direito, seleccione a secção

secção adicional-usuário

  • Para adicionar um layout em branco, no painel direito, clique na guia Layouts e selecione um layout. Em seguida, é possível adicionar módulos às áreas em branco do layout. 

add-blank-layout-to-page

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 quaisquer cores ou imagens 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 Direcçã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

  • Navegue até ao seu conteúdo:

    • Páginas do site Na sua conta da HubSpot, navegue até Marketing > Site > Páginas do site.
    • Páginas de Aterragem 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