Zum Hauptinhalt springen

Produtos suportados

Requer um dos seguintes produtos ou superior.
Marketing HubMarketing Hub -Professional
Content HubContent Hub -Professional
Última modificação: 10 de outubro de 2025
Modelos de arrastar e soltar não são recomendados para novos modelos. Esses modelos não podem fazer parte de um tema e, portanto, não suportam a funcionalidade de tema, como campos de tema e módulos de tema. Modelos de arrastar e soltar NOT são compatíveis com o CMS Hub Starter; em vez disso, use dnd_area. Os Modelos de arrastar e soltar não são compatíveis com vários dos recursos mais recentes do CMS (associações, áreas de arrastar e soltar, seções reutilizáveis, GraphQL e muitos outros recursos). Eles não têm extensibilidade e não fornecem uma experiência de criador e desenvolvedor de conteúdo tão boa quanto os modelos codificados. Em vez disso, recomendamos modelos HTML + HubL codificados com áreas de arrastar e soltar, que oferecem uma experiência melhor para desenvolvedores e profissionais de marketing. Para um início rápido no CMS, recomendamos verificar o Boilerplate do tema do HubSpot, criado usando modelos codificados.
Os modelos de arrastar e soltar foram projetados para que usuários menos técnicos possam criar facilmente um site no HubSpot CMS. Os Modelos de arrastar e soltar aproveitam um criador de modelos visuais, que gera HTML + HubL de modo subjacente. Para que o construtor visual funcione, a saída HTML é controlada pelo HubSpot e você não tem controle direto sobre as partes estruturais dele. Além disso, um arquivo layout.css é carregado na página, habilitando uma grade básica de 12 colunas com base no bootstrap 2. Isso faz com que todos os sites criados com Modelos de arrastar e soltar sejam, por padrão, responsivos, fazendo com que as linhas de conteúdo sejam empilhadas verticalmente. Para uma capacidade de resposta mais complexa e personalizada, adicione seus próprios estilos responsivos. Os Modelos de arrastar e soltar são criados no Gerenciador de design. Ao interagir com eles por meio da API ou das ferramentas de desenvolvimento local, eles são representados como JSON. Devido à natureza dos Modelos de arrastar e soltar, a única maneira recomendada de editá-los é por meio da interface do Gerenciador de design. Se você preferir codificar, use o controle de versão ou, se simplesmente quiser editar localmente usando suas ferramentas preferidas, os modelos codificados HTML + HubL oferecem a melhor experiência para os desenvolvedores. A funcionalidade dnd_area para modelos HTML + HubL também oferece uma experiência melhor para os criadores de conteúdo do que a interface de arrastar e soltar do gerenciador de design, pois os mantém no editor de conteúdo visual.

​
O Criador de modelos do tipo arrastar e soltar

Para criar um modelo de arrastar e soltar, abra o Gerenciador de design e, no localizador, crie um novo arquivo, escolha um modelo e o tipo de modelo que você está criando. Os Modelos de arrastar e soltar são compostos de blocos de criação. Esses blocos são módulos, grupos, grupos globais e colunas flexíveis. Saiba como usar o criador de modelos de arrastar e soltar.

​
Módulos

Os módulos são componentes reutilizáveis que são partes editáveis de uma página. Os módulos são compostos por um fragmento de modelo HTML + HubL, CSS, JS e campos. Os módulos podem ser colocados dentro de colunas flexíveis e dnd_areas por editores de conteúdo e são a principal maneira pela qual os editores de conteúdo gerenciam o conteúdo do site. Você pode criar módulos para lidar com qualquer número de funções, pesquisa, galerias de imagens, menus, animações de marketing complexas, calculadoras, comparações de produtos; as possibilidades ficam por conta da sua imaginação e o que você achar que fornece uma boa experiência para os criadores de conteúdo. Os campos são como o editor de conteúdo controla seu resultado. Os módulos não são exclusivos para Modelos de arrastar e soltar; eles são um bloco de criação central muito importante para o HubSpot CMS. Em Modelos de arrastar e soltar, os valores padrão para campos de módulo podem ser configurados no inspetor. Saiba mais sobre os Módulos.
Interface do Gerenciador de design com módulos em destaque

​
Grupos

Os grupos são envoltórios de outros grupos e módulos; eles podem ter classes de CSS e divisão de texto HTML. Os grupos se manifestam como divisão de texto HTML com classes de layout para facilitar o posicionamento e o dimensionamento dos grupos. Os grupos também podem ter um nome apenas interno. Com isso, você pode agrupar módulos no Gerenciador de design, facilitando a identificação visual de partes de uma página. Um exemplo disso pode ser para barras laterais ou banners.
Como os arquivos HTML + HubL são o caminho recomendado para novos sites, as colunas, seções e linhas das áreas de arrastar e soltar substituem em grande parte as finalidades dos grupos.Além disso, um desenvolvedor pode criar parciais e parciais globais, que podem conter código de forma livre, além de áreas de arrastar e soltar.As áreas de arrastar e soltar, parciais e parciais globais não são compatíveis com Modelos de arrastar e soltar.
Captura de tela do gerenciador de design com o grupo da barra lateral selecionado

​
Grupos globais

Os grupos globais são grupos que, quando editados, afetam todo o site, e não apenas a página em que estão. Os grupos globais podem existir em vários modelos e são normalmente usados para cabeçalhos e rodapés de sites. Os grupos globais são semelhantes aos parciais, mas estão limitados à estrutura aplicada pelos Modelos de arrastar e soltar. Eles podem ser incorporados em arquivos HTML + HubL, se necessário, mas na maioria das vezes faz mais sentido usar uma parcial global.
Interface do gerenciador de design com grupos globais de cabeçalho e rodapé destacados

​
Colunas flexíveis

As colunas flexíveis são um tipo especial de grupo. Elas podem conter um conjunto padrão de módulos, mas os editores de conteúdo podem adicionar, remover e mover módulos dentro delas. As colunas flexíveis permitem o reordenamento dos módulos de forma unidimensional, verticalmente para cima e para baixo. Ao contrário das tags dnd_area, **as colunas flexíveis não são compatíveis com seções ou recursos de estilo, fornecidos aos módulos dentro delas.**As colunas flexíveis não são exclusivas para Modelos de arrastar e soltar; há uma tag HubL que pode ser usada nos modelos HTML + HubL. Saiba como adicionar uma coluna flexível a um modelo de arrastar e soltar.
Geralmente, é recomendável usar áreas de arrastar e soltar, pois na maioria das vezes elas são mais úteis e fornecem todos os recursos das colunas flexíveis.Ainda pode haver momentos úteis para usar uma coluna flexível, para algo como uma barra lateral. Para as principais áreas de conteúdo, as áreas de arrastar e soltar são muito mais flexíveis.
Captura de tela do Gerenciador de design com o grupo de conteúdo principal selecionado
Por que usar colunas flexíveis? Os sites geralmente não são rígidos. Eles são criados e mantidos por longos períodos de tempo. Por exemplo, uma página inicial para uma empresa pode mostrar produtos em destaque e mudar frequentemente à medida que as necessidades de marketing da empresa mudam ao longo do tempo. Como o conteúdo de uma coluna flexível pode ser adicionado/removido e modificado por editores de conteúdo, a experiência é menos trabalhosa para os profissionais de marketing e permite que os desenvolvedores se concentrem no que gostam, criando materiais interessantes, em vez de fazer pequenos ajustes na página. Da mesma forma, as páginas em todo o site podem ter necessidades estruturais diferentes. As colunas flexíveis dão aos profissionais de marketing o controle para criar essas páginas usando módulos personalizados.