Ultima atualização: Março 29, 2022
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.
- 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.
- 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.
- 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.
- 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.
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
Você pode salvar uma seção para torná-la reutilizável em outras páginas usando o mesmo tema.
-
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 ++ .
- No painel direito, clique no separador Layouts e seleccione um layout para a sua secção.
- 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.
- Passe o cursor sobre a secção e clique no ícone do parabaixo, depois seleccione Save 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 ++ .
- 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 . Na caixa de diálogo, clique Excluir.
Copiar seção do HubL
No editor de páginas, você pode copiar a marcação HubL para uma seção para reutilizar o código conforme necessário. Isso pode ser útil quando se deseja recriar uma seção de arrastar e soltar em um arquivo codificado.
Aprenda a copiar a marcação HubL de uma secção.
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 í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 uma cor, 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 Sentido e selecione um direção do gradiente. Para cada cor, insira umvalor hexadecimal , ou clique noseletor de cores e selecione uma cor, depois insira um valor de transparência
- Para fazer uma cópia de um elemento existente, passe o mouse sobre o elemento e clique noícone .
- Para remover um elemento da página, passe o mousesobre o elemento e clique noícone .
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.
- Para personalizar o conteúdo dentro de um módulo, passe o cursor do mouse sobre o módulo e clique em um ícone:
-
- módulo Editar: editar o conteúdo do módulo
- módulo Clone: faça uma cópia deste módulo na página.
- Delete module: remova este módulo da página.
