Ultima atualização: Janeiro 19, 2023
Disponível com qualquer uma das seguintes assinaturas, salvo menção ao contrário:
Todos os produtos e planos
|
No editor de página do tipo arrastar e soltar, os usuários podem reorganizar e aplicar estilos personalizados a diferentes seções de uma página. A edição do tipo arrastar e soltar está disponível para páginas criadas com modelos Starter, alguns modelos de tema 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 organizados em linhas horizontais ou em colunas verticais, que podem então ser agrupadas 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 como personalizar estilos para conteúdo de arrastar e soltar.
- Módulo: um bloco individual de conteúdo do site. Alguns módulos, como módulos de rich text, podem conter vários tipos de conteúdo.
- Linha: uma linha horizontal de módulos. Você pode aplicar estilo a uma linha inteira ou reorganizar sua posição em uma página.
- Coluna: uma pilha vertical de vários módulos. Você pode aplicar 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 estilo a uma seção inteira ou reorganizar sua posição em uma página.
Organize o conteúdo
No editor da barra lateral, você pode ver uma visão geral das seções, linhas, colunas e módulos em seu conteúdo. Em seguida, você pode renomear, editar, clonar, excluir ou ocultá-los:
-
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 da barra lateral, clique na guia Conteúdo.
- Você pode controlar quais elementos da página estão visíveis no editor da barra lateral:
- Para ver apenas as seções da sua página, clique em Recolher tudo. Isso recolherá todas as linhas, colunas e módulos, portanto, apenas as seções serão visíveis no editor da barra lateral.
- Para ver todo o conteúdo da sua página, clique em Expandir tudo. Isso mostrará todas as seções, linhas, colunas e módulos no editor da barra lateral.
- Para exibir um elemento ou recipiente de página individual, clique no sinal de + mais ao lado do nome.
- Para ocultar um elemento ou recipiente, clique no sinal de menos ao lado do seu nome.
- Você também pode editar, renomear, clonar, excluir e ocultar elementos de página:
- Para editar um elemento, clique em seu nome.
- Para renomear um elemento, clique nas três pontos ao lado do seu nome e selecione Renomear [elemento]. Na caixa de diálogo, insira um nome para o elemento e clique em Salvar.
- Para clonar um elemento, clique nas três pontos ao lado do seu nome e selecione Clonar. Isso criará uma cópia exata do elemento original adjacente a ele.
- Para excluir um elemento, clique nas três pontos ao lado do nome dele e selecione Excluir.
- Para ocultar um módulo, clique nas três pontos ao lado do seu nome e selecione Ocultar este módulo. Isso ocultará o módulo na visualização da página, mas não no editor da barra lateral. Para exibir um módulo oculto na página, clique nas três pontos ao lado do seu nome e selecione Mostrar este módulo.
Usar secções
No editor de arrastar e soltar, você pode criar seções de página reutilizáveis arrastando módulos para um layout de seção em branco. Os desenvolvedores também podem criar essas seções usando nossa documentação de desenvolvedor. Uma vez criadas, as seções podem ser usadas em qualquer página que ofereça suporte à edição de arrastar e soltar. As seções salvas que contêm regras inteligentes usarão essas regras quando adicionadas a uma página.
Observação: não é possível salvar mais de 50 seções reutilizáveis do editor de arrastar e soltar ao mesmo tempo. Para salvar uma nova seção reutilizável, exclua uma seçã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, passe o cursor do mouse entre duas seções e clique no ícone de adição +.
- No painel direito, clique na guia Layouts e selecione um layout para a sua seção.
- No editor de conteúdo, arraste um módulo sobre o layout e solte-o na posição. Repita para cada módulo da sua secção.
- Passe o cursor do mouse sobre a seção e para baixoCarat down e selecione Salvar seção.
Observação: as seções de página existentes e aquelas criadas sem um layout também podem ser salvas como seções reutilizáveis.
- No painel direito, insira um nome e descrição para a seção e clique em Salvar.
Adicionar ou excluir uma secçã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, passe o cursor do mouse entre duas seções e clique no ícone de adição +.
- No painel direito, passe o mouse sobre uma seção e clique em Selecionar. 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 de tema.
- Adicionar uma seção salva que contenha regras inteligentes aplicará essas regras à seção recém-adicionada. Estas secções serão rotuladas como Inteligentes.
- Para excluir uma seção, clique no + ícone de adição para adicionar uma seção e, em seguida, passe o cursor do mouse sobre a seção e clique no ícone de exclusão. Na caixa de diálogo, clique Excluir.
Editar linhas, colunas ou seções
- No editor de página, passe o cursor do mouse sobre a linha, a coluna ou a seção e clique no ícone de edição.
- Para personalizar o deslocamento e as margens ao redor da linha, da coluna ou da seção, clique em Alinhamento e espaçamento no editor da barra lateral.
- Para editar o plano de fundo da área, clique em Plano de fundo no editor da barra lateral e selecione uma opção de estilo:
- Nenhuma: remova todas as cores ou imagens de fundo.
- Cor: defina uma cor única como plano de fundo. Insira um valor hexadecimal ou clique no seletor cor, selecione uma cor e insira um valor de transparência.
- Imagem: defina uma imagem como plano de fundo. 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: defina duas cores que se fundem no plano de fundo. Clique no menu suspenso Direção e selecione uma direção de gradiente. Para cada cor, insira um valor hexadecimal ou clique no seletor de cor, selecione uma cor e insira um valor de transparência.
- Para fazer uma cópia de um elemento existente, passe o cursor do mouse sobre o elemento e clique no ícone de clonagem de cc .
- Para remover um elemento da página, passe o cursor do mouse sobre o elemento e clique no ícone de exclusão.
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 e o arraste 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:
-
- Editar módulo: edite o conteúdo do módulo
- Clone module: faz a cópia desse módulo na página.
- Excluir módulo: remove esse módulo da página.
