> ## Documentation Index
> Fetch the complete documentation index at: https://br.developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
> [accordion] Produtos suportados
> [!WARNING]
>
> **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](https://br.developers.hubspot.com/docs/cms/start-building/features/memberships/overview.md), [áreas de arrastar e soltar](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview), [seções reutilizáveis](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/sections/sections.md), 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](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/templates/html-hubl-templates.md) com [áreas de arrastar e soltar](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview), 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](https://github.com/HubSpot/cms-theme-boilerplate), criado usando modelos codificados.
Os [modelos](https://br.developers.hubspot.com/docs/guides/cms/content/templates/overview) 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,](https://br.developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/install-the-cli.md) 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](https://br.developers.hubspot.com/docs/cms/reference/hubl/tags/dnd-areas.md) 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](https://br.developers.hubspot.com/docs/guides/cms/content/templates/overview#template-types) 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.](https://knowledge.hubspot.com/pt/design-manager/structure-and-customize-template-layouts)
### 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](https://knowledge.hubspot.com/pt/design-manager/a-quick-tour-of-the-design-manager). [Saiba mais sobre os Módulos.](https://br.developers.hubspot.com/docs/guides/cms/content/modules/overview)
### 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](https://knowledge.hubspot.com/pt/design-manager/structure-and-customize-template-layouts#group-modules) 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.
> [!WARNING]
>
> Como os arquivos [HTML + HubL](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/templates/html-hubl-templates.md) são o caminho recomendado para novos sites, as colunas, seções e linhas das [áreas de arrastar e soltar](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview) substituem em grande parte as finalidades dos grupos.
>
> Além disso, um desenvolvedor pode criar parciais e [parciais globais](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/global-content.md), 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](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview), \*\*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](https://br.developers.hubspot.com/docs/cms/reference/hubl/tags/standard-tags.md#flexible-column) que pode ser usada nos modelos [HTML + HubL](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/templates/html-hubl-templates.md). [Saiba como adicionar uma coluna flexível a um modelo de arrastar e soltar.](https://knowledge.hubspot.com/pt/design-manager/structure-and-customize-template-layouts#add-a-flexible-column)
> [!TIP]
>
> 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.
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.
### Adicionar código personalizado aos Modelos de arrastar e soltar
Existem algumas maneiras de adicionar um código personalizado aos Modelos de arrastar e soltar. O método principal é por meio de módulos personalizados. Às vezes, você pode precisar adicionar código que envolva módulos ou grupos. Para fazer isso, clique no módulo ou grupo para visualizá-lo no inspetor e encontrar o campo de divisão de texto HTML. Adicione o HTML.
Às vezes, você pode precisar adicionar um código ao cabeçalho do seu HTML ou logo acima de ` `. Com o modelo aberto, certifique-se de que você não tenha nada selecionado. O inspetor mostrará os campos para o próprio modelo. Aqui, você pode vincular folhas de estilo e arquivos javascript, além de incluir HTML adicional no cabeçalho ou logo antes da tag ``.
Para isso, use o[ inspetor](https://knowledge.hubspot.com/pt/design-manager/a-quick-tour-of-the-design-manager). O inspetor tem campos no nível do modelo para [folhas de estilo, javascript](https://knowledge.hubspot.com/pt/design-manager/a-quick-tour-of-the-design-manager##attach-stylesheets-and-javascript-files), marcação [`