Arrastar e soltar
Modelos de arrastar e soltar
Os Modelos de arrastar e soltar do Gerenciador de design são criados usando um construtor visual. Eles não são recomendados para novos modelos, pois os modelos codificados oferecem uma experiência melhor.
Produtos suportados
Requer um dos seguintes produtos ou superior.
Marketing HubProfessional
Content HubProfessional Última modificação: 28 de agosto 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.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.
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.
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.
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.
