Landing Pages

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

Ultima atualização: Outubro 19, 2020

Disponível para

Todos os produtos e planos

Com a edição do tipo arrastar e soltar, você pode reorganizar facilmente seu layout e aplicar estilos de fundo personalizados a diferentes seções da sua página. A edição do tipo arrastar e soltar está disponível nas páginas criadas com um modelo starter, um modelo de tema padrão da HubSpot ou um modelo codificado com uma área de arrastar e soltar.

Este artigo aborda como editar o conteúdo e o layout da página com os recursos de edição do tipo arrastar e soltar. Saiba como editar as configurações da página e publicar uma página no seu site.

Como funciona a edição do tipo arrastar e soltar

As áreas de arrastar e soltar são composta de 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 os elementos, você pode aplicar estilos de fundo a toda uma área da sua página. Você também pode arrastar e soltar linhas, colunas ou seções para reorganizar o layout da página.

  1. Módulo: um bloco individual de conteúdo do site. Você pode editar o texto e as imagens da sua página em um módulo individual.
  2. Coluna: uma pilha vertical de vários módulos ou linhas. Você pode mover ou reorganizar colunas em sua página e aplicar uma cor de fundo ou estilo a uma coluna.
  3. Linha: uma linha horizontal de módulos ou colunas. Você pode mover ou reorganizar linhas em sua página e aplicar uma cor de fundo ou estilo a uma linha.
  4. Seção: um grupo de várias linhas ou colunas. Você pode mover ou aplicar uma cor de fundo ou estilo a uma seção.

overview-of-drag-and-drop

Editar conteúdo do módulo

Para personalizar o conteúdo de um módulo, passe o mouse sobre o módulo e clique no ícone da ação desejada:

  • edit Editar: edite o conteúdo do seu módulo em linha diretamente na página ou no painel esquerdo. 
  • styles Estilo: gerencia os estilos disponíveis neste módulo no painel Estilo à esquerda. A maioria dos estilos de módulo pode ser gerenciada na guia Estilo, mas algumas opções de estilo específicas para o seu tema podem estar disponíveis na guia Opções.
  • clonduplicate Clonar: faz a cópia deste módulo na sua página.
  • delete Excluir: remove este módulo da sua página.

edit-module

Editar linhas, colunas ou seções

Você pode editar os estilos de uma linha, coluna ou seção de elementos. Por exemplo, você pode centralizar seu conteúdo, aplicar uma imagem de fundo ou editar o espaçamento entre os elementos da página.

Para editar os estilos de uma linha, coluna ou seção:

  • No editor de página, passe o cursor do mouse sobre a linha, a coluna ou a seção, clique na seta suspensa e selecione styles Estilo de [linha/coluna/seção].
  • No painel esquerdo, clique em Alinhamento e espaçamento para personalizar o deslocamento e a margem ao redor da linha, da coluna ou da seção.
  • Clique em Plano de fundo para expandir as opções de estilo desta seção:
    • 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. Para adicionar uma nova imagem, 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. Primeiro, defina a direção do gradiente. Insira um valor hexadecimal e defina a transparência de cada cor.
  • Para fazer uma cópia de um elemento existente, passe o cursor do mouse sobre o elemento e clique no ícone de setae selecione duplicate Copiar [linha/coluna/seção].
  • Para excluir um elemento da página, passe o cursor do mouse sobre o elemento, clique no ícone de seta e selecione delete Excluir [linha/coluna/seção].

remove-a-column

Conforme você edita a página, as atualização são salvas automaticamente. Para acessar os rascunhos salvos anteriormente da sua página não publicada, passe o cursor do mouse sobre Salvo automaticamente no canto superior esquerdo e clique em revisões.

Adicionar um módulo comum à página

Arraste e solte um novo módulo no local para adicionar um elemento à sua página. Isso facilita o ajuste do design de uma página para caber no seu conteúdo.

add%20a%20common%20module%20to%20a%20page

Ajuste o layout da sua página

Ao adicionar e editar módulos no layout da sua página, você pode ajustar a largura dos elementos na sua página, clicando e arrastando o divisor vertical entre as colunas.

edit%20column%20width%20in%20page

Editar estilos de página

Para editar as cores, as fontes ou o espaçamento na sua página, clique na guia Design.

design-tab-options