Áreas de arrastar e soltar
Esta página ilustra e explica a experiência e os conceitos de dnd_area. Como essa experiência é bastante abrangente, é uma boa ideia familiarizar-se com ela antes de se debruçar sobre o código.
Quando você estiver pronto para começar, consulte a introdução a dnd_area e a referência dnd_area.
As áreas de arrastar e soltar permitem aos desenvolvedores criar áreas de páginas e partials globais que são úteis para os criadores de conteúdo. As áreas de arrastar e soltar permitem aos criadores de conteúdo adicionar módulos e alterar o layout e parte do estilo dentro dos editores de conteúdo. Dessa forma, você precisa criar menos modelos, que os criadores de conteúdo podem usar para fazer uma infinidade de páginas com diferentes propósitos e layouts por conta própria. Os criadores de conteúdo podem fazer isso sem se preocupar com codificação ou a necessidade de criar novos modelos para fazer pequenas alterações de layout. Por serem tão flexíveis e úteis, é uma boa ideia ter pelo menos um modelo no seu tema com áreas de arrastar e soltar.
Observação: as áreas de arrastar e soltar não podem ser usadas em posts de blog e em modelos de e-mail no momento.
Quando um criador de conteúdo cria uma página usando um modelo com áreas de arrastar e soltar, o que ele vê primeiro é a página com os módulos predefinidos dispostos em um layout pelo desenvolvedor. Isso ajuda o criador do conteúdo a compreender como a maioria das páginas que usam esse modelo devem ou tendem a parecer visualmente. Esse é um ponto de partida, mas não uma aparência fechada. O criador do conteúdo pode arrastar e soltar módulos, seções, linhas e colunas para reordená-los. Eles podem redimensioná-los, editar o seu conteúdo e ajustar várias configurações de estilo visual que lhes permitem alinhar verticalmente e horizontalmente o conteúdo e adicionar fundos.
Para os criadores de conteúdo, isso significa muito. Isso lhes dá flexibilidade suficiente para fazer mudanças de página simples, sem incomodar um desenvolvedor por pequenos ajustes.
Observação: um criador de conteúdo pode trocar o modelo de uma página por outro do mesmo tipo, dependendo se tem tags dnd_area.
- Os modelos criados com o editor visual de layout de arrastar e soltar podem ser trocados por outros modelos de arrastar e soltar ou codificados com ou sem as tags
dnd_area. - Os modelos codificados com tags dnd_area somente podem ser trocados por outros modelos codificados com tags
dnd_area. - Os modelos codificados sem tags
dnd_areasomente podem ser trocados por outros modelos codificados sem tagsdnd_area.
Para os desenvolvedores, o trabalho com dnd_area é parecido com o trabalho com frameworks CSS comuns e seus grids. Os desenvolvedores compreendem a página usando containers (chamados seções) que contêm linhas. Dentro dessas linhas estão os módulos e as colunas. Quase tudo o que os criadores de conteúdo podem fazer no editor de páginas com tags de arrastar e soltar os desenvolvedores podem fazer com código nos próprios modelos. O que os desenvolvedores estão criando é o conteúdo padrão das páginas que usam esse modelo.
O benefício de usar áreas de arrastar e soltar em comparação às tags de módulo com codificação complexa no modelo é que os criadores de conteúdo podem alterar o conteúdo e o layout dentro delas. Devido a essa flexibilidade, um modelo com áreas de arrastar e soltar pode ser usado para uma infinidade de designs de página.
Consulte os modelos de temas do boilerplate do CMS para ver as tags dnd_area em uso.
As áreas de arrastar e soltar são constituídas por componentes básicos que definem o layout e permitem alinhar o estilo com flexibilidade. A tag dnd_area cria uma região na página que o editor de páginas reconhece, o que permitindo adicionar, remover e reorganizar os elementos de arrastar e soltar. Você os define usando HubL dentro dos modelos HTML+HubL. Todos os elementos de arrastar e soltar residem em uma área de arrastar e soltar. Não é possível aninhar áreas de arrastar e soltar, e os elementos não podem conter áreas de arrastar e soltar.
Um aspecto importante para compreender como desenvolvedor é que o conteúdo da área de arrastar e soltar que você define no modelo é um ponto de partida para páginas que usam esse modelo. Os criadores de conteúdo podem alterar completamente o conteúdo dentro de uma área de arrastar e soltar. O seu trabalho é fornecer um ponto de partida que faça sentido, para que eles possam fazer as modificações.
Este diagrama apresenta os detalhes de como os vários elementos de arrastar e soltar podem ser aninhados. Um conceito importante é que tanto as seções quanto as linhas podem conter colunas e módulos.
As seções são um tipo especial de linha. As seções são criadas nos modelos usando a tag dnd_section. Elas são o único elemento de arrastar e soltar que pode ser um descendente direto de uma área de arrastar e soltar. Você pode pensar nas seções como um container de encapsulamento. Elas podem permitir que o conteúdo tenha uma largura total ou uma largura máxima confinada ao centro. Como as seções envolvem as colunas e os módulos, elas facilitam a reorganização e a implementação de grandes porções de conteúdo. A tag dnd_section não renderiza um elemento HTML <section>.
A aparência de uma seção no editor de páginas.
Os desenvolvedores podem fornecer modelos de seções que criam seções reutilizáveis no editor de páginas. Estas são seções predefinidas pelo desenvolvedor que os criadores de conteúdo podem usar como ponto de partida. As seções reutilizáveis têm alguns recursos exclusivos, incluindo a possibilidade de usá-las de forma similar a um partial de modelo padrão do hubL.
As colunas são wrappers para filas e módulos. Você coloca colunas dentro de uma linha, ou seção que é uma linha especializada. As colunas são criadas nos modelos usando a tag dnd_column.
Use várias colunas dentro de uma linha para colocar as linhas e os módulos que elas contêm na horizontal.
As colunas são regiões verticais que podem conter linhas. Você pode alterar o tamanho das colunas alterando sua largura. O tamanho de uma linha é de 12 "colunas" de largura; isso se refere à grid do CSS. As colunas dentro de uma linha podem ter qualquer tamanho inferior a 12, mas não podem somar mais de 12.
Quando várias linhas são colocadas dentro de uma coluna, os módulos dentro dessas linhas aparecerão empilhados na vertical. Como os módulos são colunas em si, um módulo não pode ser um descendente direto de uma coluna, eles devem estar contidos dentro de uma linha.
A aparência de uma coluna no editor de páginas.
As linhas são wrappers de colunas. As linhas são criadas nos modelos usando a tag dnd_row. Como os módulos são colunas, você pode colocá-los diretamente dentro de uma linha. Isso fará com que os módulos apareçam na horizontal, uns ao lado dos outros.
Os módulos podem ser organizados na vertical ao colocá-los dentro de linhas. Se você quiser colocar um módulo acima de outro, será necessário colocar o módulo dentro de uma linha e então adicionar o outro módulo em uma linha acima ou abaixo daquela primeira linha.
A aparência de uma linha no editor de páginas.
Os módulos são uma parte fundamental do HubSpot CMS e funcionam como os componentes básicos reutilizáveis que você usa para criar um site e exibir o conteúdo. Ao construir um modelo, você coloca os módulos dentro de linhas e seções de arrastar e soltar usando a tag dnd_module. Os módulos também são colunas. Ou seja, se você colocar duas tags de módulo, ou um módulo e uma coluna diretamente um ao lado do outro, elas aparecerão lado a lado horizontalmente.
Nenhum elemento de arrastar e soltar pode ser colocado dentro de um módulo. Os módulos não podem ser elementos secundários diretos de uma tag dnd_area.
Quando renderizados, as áreas de arrastar e soltar e seus elementos têm nomes de classe para um grid de 12 colunas com base no bootstrap 2. Para facilitar, você pode usar o arquivo _layout.css do Boilerplate de temas do CMS. Isso fornece estilos padrão para esses nomes de classe.
Você não é obrigado a usar esta folha de estilos e pode fornecer seus próprios estilos. Se você está construindo seu site com base no Boilerplate de temas do CMS e quer usar seu próprio CSS, talvez queira remover a chamada do layout.css no base.html. Para o seu próprio grid CSS, você precisará direcionar esses mesmos nomes de classes de grid, mas o estilo ficará ao seu critério.
Quando renderizadas, as áreas de arrastar e soltar criam divs com classes que são usadas pelo editor de páginas. Os exemplos são widget-span e widget-type-cell. Você não deve direcionar diretamente essas classes, pois elas são usadas pelo editor de páginas e podem mudar ao longo do caminho.
Em vez disso, na tag dnd_area do HubL, adicione um parâmetro de classe com o nome de classe que você gostaria de usar.
Com as áreas de arrastar e soltar, os criadores de conteúdo podem influenciar o estilo da página. Por exemplo, eles podem definir uma seção para ter um fundo. Os desenvolvedores podem passar valores padrão para essas configurações através de atributos.
Quando a página é renderizada, os estilos gerados com base nessas configurações são adicionados a standard_header_includes.
Na inicialização de dnd_area, esses estilos são carregados de standard_footer_includes. Isso foi alterado recentemente para standard_header_includes e está sendo implementado em todas as contas da HubSpot que usam o HubSpot CMS.
Se estiver alterando modelos construídos com colunas flexíveis para usar áreas de arrastar e soltar, há algumas coisas que você deve saber. As colunas flexíveis não são como as áreas de arrastar e soltar. Você não pode trocar um modelo que só tem uma coluna flexível por outro que só tem uma área de arrastar e soltar. Não permitimos isso por precaução. O conteúdo não seria mapeado da coluna flexível para a área de arrastar e soltar. Para ilustrar o porquê disso, suponha que você criou um novo modelo para exibir uma barra lateral e uma área de conteúdo principal. A barra lateral é uma coluna flexível; o conteúdo principal é uma área de arrastar e soltar. A ferramenta de troca mapearia a coluna flexível para a coluna flexível.
Agradecemos pelos seus comentários. Eles são muito importantes para nós.