- Revise os principais conceitos do CMS Hub, mesmo que você já esteja acostumado a desenvolver no HubSpot. Você entenderá melhor como todas as peças se encaixam.
- Você também precisará usar a CLI do CMS; portanto, se ela não estiver instalada, configure-a primeiro.
Tema
Os temas do CMS Hub são um pacote de modelos, módulos, arquivos CSS, JSON e JS. Como os temas são um pacote, eles afetam toda a experiência do editor de conteúdo. Ao criar um novo site ou landing page, o criador de conteúdo recebe uma grade dos temas em sua conta. Selecione o tema que está usando e será mostrada uma grade com apenas os modelos desse tema. Ao editar uma página usando um modelo de um tema, os módulos desse tema receberão tratamento especial, destacando-os no painel Adicionar módulo.1. Colocar os arquivos existentes em uma pasta
Se todos os seus modelos, módulos, arquivos CSS e JS estiverem na mesma pasta, eles serão considerados como parte de um tema. Não importa se eles estão organizados em subpastas; importa apenas que esses ativos estejam contidos em uma pasta. Se eles já estiverem armazenados dessa maneira, ótimo; caso contrário, crie uma pasta e mova seus ativos para ela. Dê a essa pasta o nome que deseja dar ao seu tema. O nome depende totalmente de você, mas talvez nomeá-lo com base na marca da empresa que o site reflete, juntamente com o ano da reformulação ou atualização.2. Tornar uma pasta um tema
Os temas exigem dois arquivos JSON, e apenas um deles precisa de conteúdo real inicialmente.- Theme.json - contém as configurações do seu tema.
- Fields.json - contém campos que podem ser usados para fazer alterações de design em todo o site.
- Busque a pasta que você criou na etapa “colocar os arquivos existentes em uma pasta” no seu computador.
- Dentro da pasta no seu computador, crie um novo arquivo com o nome
theme.json. - Copie o exemplo de arquivo
theme.jsonno documento de temas. - Cole o código de exemplo no seu arquivo
theme.json. - Altere o valor de
"label"para o nome do tema, como você deseja que os criadores de conteúdo o vejam. - Altere
"preview_path"para o caminho do modelo da página inicial ou do modelo usado com mais frequência. - Faça uma captura de tela da página inicial do site. Nomeie a imagem como
thumb.jpg. Coloque a imagem dentro da mesma pasta do seu arquivotheme.json. - Altere
"screenshot_path"em theme.json para o caminho da sua imagemthumb.png. - Salve o arquivo.
- Dentro da mesma pasta que seu
theme.json, crie um novo arquivo com o nome fields.json. Dentro desse arquivo, digite apenas[]e salve o arquivo.
hs upload. Agora você tem um tema básico. Os módulos e modelos dentro desse tema serão exibidos associados ao tema.
3. Adicionar campos de tema
Os campos de tema são controles que você pode fornecer a um criador de conteúdo para permitir que ele faça alterações de estilo em todo o tema. Durante a criação inicial de um site, esses controles de tema permitem que os criadores de conteúdo se envolvam, ajudando a definir a marca em todo o site. As equipes podem achar que isso libera o desenvolvedor para se concentrar nos aspectos mais técnicos do desenvolvimento do site. Para sites existentes, os campos de tema podem ser desnecessários. Afinal, se o site já foi criado de forma personalizada, provavelmente não há propósito em adicionar controles de cor e tipografia em todo o site. Se a marca de um site estiver passando por uma mudança significativa, pode ser mais apropriado criar um novo design do que adicionar campos retroativamente. Em última análise, esta é uma decisão que você deve tomar mutuamente com as outras partes interessadas envolvidas no site. Para adicionar campos ao tema, adicione o JSON deles ao seu arquivo fields.json. Os campos seguem a mesma estrutura que os campos do módulo. Certifique-se de que os usuários que devem ter acesso para alterar os valores do campo do tema tenham a permissão “Editar temas e conteúdo global”. Certifique-se de que os usuários que não devem editar essas configurações não tenham essa opção ativada.
Clonar áreas de arrastar e soltar como HTML no gerenciador de design
As áreas de arrastar e soltar e as parciais globais exigem o uso de arquivos HTML + HubL codificados. Se o seu site existente puder ser criado usando o antigo sistema de gerenciamento de design de arrastar e soltar e você quiser usar esses novos recursos, esses modelos podem precisar ser clonados como HTML. Para clonar esses modelos como modelos HTML + HubL:- Abra o gerenciador de design e encontre o modelo na busca.
- Clique com o botão direito no modelo.
- No menu de contexto que aparece, escolha “Clonar como HTML”
Áreas de arrastar e soltar
As áreas de arrastar e soltar podem ser adicionadas aos modelos para fornecer aos criadores de conteúdo uma maneira de incluir módulos horizontal e verticalmente em uma página. As áreas de arrastar e soltar também fornecem controle de estilo adicional para o criador de conteúdo. Como um modelo com uma área de arrastar e soltar pode ser usado para criar muitos layouts diferentes, isso libera o desenvolvedor para se concentrar nos aspectos técnicos da criação e atualização do site.Faz sentido converter todas as páginas existentes para usar áreas de arrastar e soltar?
Isso depende se a página está atendendo aos seus objetivos de negócios. Em outras palavras, se algo está funcionando bem, não há necessidade de mexer. Se o layout da página precisar ser alterado, então sim, provavelmente é aconselhável converter a página para usar as áreas de arrastar e soltar. Se a página está cumprindo seu propósito e não precisa de alterações de layout, provavelmente está tudo certo.Converter modelos existentes
É relativamente fácil criar um clone de um modelo antigo e alterar a coluna flexível para uma área de arrastar e soltar. Essa é uma boa ideia, pois abre muitas possibilidades para os criadores de conteúdo. Isso dá aos criadores de conteúdo muito controle criativo para novas páginas. Se o seu modelo for um modelo de arrastar e soltar do gerenciador de design, veja clonar áreas de arrastar e soltar como HTML no gerenciador de design.- A solução mais fácil é encontrar as instâncias de colunas flexíveis, que usam a tag HubL
{% widget_container "my_unique_column_name" %}. - Substitua cada instância conforme necessário por
{% dnd_area "my_unique_area_name" %}. - Se não quiser definir os módulos padrão, deixe
dnd_areaem branco. Se você quiser transferir os módulos padrão para a região ou definir novos padrões úteis, dentro dednd_area, adicione uma seçãodnd_e, dentro dela, umadnd_column. - Para cada tag de módulo dentro do
widget_containerantigo, você desejará criar umadnd_rowcontendo umdnd_modulecom um caminho correspondente aos módulos que deseja exibir por padrão. Isso criará o mesmo layout vertical que a coluna flexível tinha.
Como faço para migrar páginas existentes?
Se você quiser converter uma página para usar áreas de arrastar e soltar, a maneira mais segura de fazer isso é usar a preparação de conteúdo.- Abra a ferramenta de preparação de conteúdo, encontre a página existente e teste-a. Escolha “Preparar página em branco”.
- Selecione o novo modelo que usa a área de arrastar e soltar.
- Copie e cole as informações da versão original da página, criando o layout desejado.
- Quando terminar, publique em preparação.
- Na ferramenta de preparação de conteúdo, navegue até a guia “Publicar”. Selecione a página e publique em preparação.
Parciais globais
Parciais globais são partes de conteúdo HTML e HubL que podem ser reutilizadas em todo o site. Os tipos mais comuns de parciais globais são cabeçalhos de sites, barras laterais e rodapés. Para criadores de conteúdo, as parciais globais se manifestam no editor de conteúdo como regiões que eles podem selecionar para editar no editor de conteúdo global. O editor de conteúdo global se parece com o editor de página, mas é usado para editar conteúdo global. Para ilustrar, você pode implementar o cabeçalho como uma parcial global com módulos de navegação e outros conteúdos. Para o criador de conteúdo, se precisar adicionar um link à navegação, ele pode clicar no cabeçalho no editor de páginas, clicar no módulo de menu e atualizar o menu. Certifique-se de que os usuários que devem ter acesso para editar conteúdo global tenham a permissão “Editar temas e conteúdo global”.