Visão geral do HubSpot CMS

Esta seção foi projetada para ajudá-lo a compreender os principais aspectos do Sistema de gerenciamento de conteúdo (CMS) e a criar sites excelentes grandes com base nele. Para tirar o máximo proveito disso, é esperado um entendimento de nível profissional dos conceitos básicos sobre desenvolvimento web, incluindo HTML, JavaScript e CSS.

Se você é novo no HubSpot CMS, sugerimos começar com o tutorial de início rápido e consultá-lo quando necessário.

Como o HubSpot CMS funciona

O HubSpot CMS é um CMS SaaS (software como um serviço) projetado para ajudar as empresas a aumentarem sua presença na web, com ênfase especial na capacitação de profissionais de marketing. Ele foi projetado para ser usado em sites comerciais nos quais criadores de conteúdo não técnico precisam ser capazes de construir, avaliar e iterar o conteúdo de forma independente enquanto trabalham com design, estilo e contenções funcionais que você, como desenvolvedor, pode configurar. O conteúdo, a coleta de leads e a análise também estão integrados ao HubSpot CRM, facilitando para os profissionais de marketing criarem experiências personalizadas para os visitantes e integrarem essas experiências com o resto do negócio.

O principal trabalho dos desenvolvedores do HubSpot CMS é trabalhar como um facilitador de conteúdo e não como um criador de conteúdo. Sites comerciais funcionam melhor quando o conteúdo está atualizado e otimizado. Os desenvolvedores devem eliminar o máximo de atrito possível enquanto estabelecem contenções, conforme necessário. O HubSpot CMS foi projetado para equilibrar as necessidades dos desenvolvedores com as necessidades dos criadores de conteúdo por meio de seu sistema de módulos, colunas flexíveis e áreas de arrastar e soltar. Isso significa menos trabalho de atualização de texto para você, como desenvolvedor, e usuários criadores de conteúdo mais felizes.

Os modelos e módulos podem ser usados tanto pelos desenvolvedores quanto pelos profissionais de marketing

Os principais conceitos e primitivos no sistema refletem esta filosofia: um site devidamente criado no HubSpot CMS deve ser desenvolvido em estreita colaboração com os criadores de conteúdo para compreender suas necessidades. Assim, exigirá menos suporte e manutenção contínua por parte de um programador. À medida que cria no HubSpot CMS, visualize continuamente a aparência da experiência de construção de páginas para os criadores de conteúdo. Isso garante que eles possam trabalhar de forma independente com o site, tanto quanto possível.

Animação mostrando o usuário criando uma página de arrastar e soltar

Como a HubSpot se encarrega da hospedagem e da manutenção do CMS, você não precisa de se preocupar com o gerenciamento de plugins, atualizações, hospedagem, escalonamento ou segurança. A desvantagem aqui é que o sistema impõe mais algumas restrições no que você pode fazer do que CMSs auto-hospedados. Por exemplo, você não pode alterar ou estender os fundamentos do sistema manualmente ou por meio de plugins, manipular renderizações de baixo nível ou acessar e alterar diretamente o conteúdo na base de dados.

O conteúdo criado pelo desenvolvedor (por exemplo, temas, modelos, módulos, JavaScript e CSS) é desenvolvido em um sistema de arquivos de desenvolvedor, enquanto o conteúdo da página (páginas, posts de blog) é disposto e criado em um bloco poderoso baseado em um editor WYSIWYG (o que você vê é o que você recebe) e os arquivos de mídia (imagens criadas pelo criador do conteúdo, PDFs etc.) são armazenados em um gerenciador de arquivos baseado em um aplicativo web.

Quando uma página é renderizada, o HubSpot encaminha o pedido para um dos muitos servidores baseados no domínio, renderiza a página em nossos servidores e a armazena em cache em uma rede de entrega de conteúdo (CDN), se possível.

Páginas do site, landing pages, blogs e e-mails

O HubSpot CMS permite ao profissionais de marketing criarem vários tipos de conteúdo. A interface do usuário (IU) para os criadores de conteúdo é ligeiramente diferente, dependendo do tipo de conteúdo. Isso influencia o que os desenvolvedores precisam estar cientes. 

Os modelos e módulos estão associados a um ou mais dos tipos de conteúdo mencionados abaixo. Os desenvolvedores podem restringir o uso a tipos específicos de conteúdo.

Páginas do site e landing pages

As páginas do site e landing pages são criadas de forma independente umas das outras. As páginas são baseadas em modelos, e as alterações podem ser feitas tanto localmente para essa página como para o modelo. 

A funcionalidade oferecida aos criadores de conteúdo é muito semelhante entre páginas do site e landing pages. A diferença entre elas é que as páginas do site são feitas para apresentar informações que fazem parte do seu site e são projetadas para serem encontradas de forma orgânica, enquanto que uma landing page geralmente está associada a uma oferta ou campanha de marketing específica (por exemplo, um link em um e-mail de marketing enviado para uma lista específica de contatos). 

Na IU para profissionais de marketing, a análise e a organização desses tipos de páginas também são independentes, já que, muitas vezes, as landing pages têm objetivos de conversão específicos.

Blogs

Por outro lado, os blogs no HubSpot CMS têm duas visualizações: uma para a página de listagem e outra para a página de posts individuais, e ambas são preenchidas com cada post de blog. Um portal (o termo usado para uma instância individual do HubSpot) pode ter mais de um blog, mas o modelo usado para um post individual não pode ser especificado por post. Os modelos usados para a página de listagem do blog e a página de posts do blog, assim como a ferramenta para criar novos blogs, estão definidos na IU do HubSpot em Configurações > Site > Blog.

E-mails

A ferramenta de e-mail HubSpot Custom (ou "clássica") foi desenvolvida com base na mesma plataforma do CM; por isso, os modelos e módulos também podem ser incluídos nos e-mails usados com essa ferramenta. Os e-mails criados com a ferramenta de arrastar e soltar não podem usar modelos personalizados.

Sistema de arquivos do desenvolvedor

Os ativos principais (modelos, temas e módulos), bem como os arquivos JavaScript, CSS e imagens que os suportam são criados em um sistema de arquivos do desenvolvedor que mapeia a um banco de dados nos bastidores. Você pode ver este sistema de arquivos no painel esquerdo do Gerenciador de design ou em pastas sincronizadas localmente usando as ferramentas de desenvolvimento local. Dentro do sistema de arquivos, os ativos podem se referir uns aos outros com caminhos absolutos ou relativos.

É importante considerar que, nos bastidores, estes arquivos não são armazenados exatamente assim em um disco no HubSpot; eles são mapeados a entradas em uma base de dados. É por isso que o acesso ao sistema de arquivos do desenvolvedor se dá por meio das ferramentas de CLI da HubSpot em vez do acesso direto SSH ou FTP, e alguns recursos do sistema de arquivos que você pode esperar, como permissões e links simbólicos, não são oferecidos no sistema de arquivos do desenvolvedor.

Isso difere da abordagem dos CMSs tradicionais, mas significa que as referências quebradas entre erros de arquivo ou sintaxe são capturadas no momento da publicação e não no momento da execução, proporcionando um isolamento extra contra falhas acidentais quando o tráfego dinâmico atinge um site.

O CMS detectará os modelos no sistema de arquivo e os apresentará aos criadores de conteúdo ao criarem novas páginas, então a estrutura do sistema de arquivos fica a seu critério. Não é necessário que os módulos residam em uma pasta /modules/ ou o JavaScript em uma pasta /js/. No entanto, sugerimos que organize os seus ativos como no exemplo de código do boilerplate para o CMS. O layout dos seus ativos parecerá familiar se você já tiver trabalhado com outras ferramentas de desenvolvimento padrão do setor.

Temas, modelos, módulos e campos

Temas, modelos, módulos e campos são os objetos com os quais você mais trabalhará no HubSpot CMS como um desenvolvedor. A utilização eficaz destes diferentes objetos oferece aos criadores de conteúdos a liberdade de trabalhar e iterar nos sites de forma independente, mantendo-se dentro das contenções de estilo e layout definidas.

Os temas e módulos contêm campos, que são configurações de tipos de dados específicos. (Por exemplo, números, strings, rich text, imagens etc.) Os desenvolvedores podem controlar como os objetos são usados ao renderizá-los, bem como como eles devem ser organizados e aparecer no editor WYSIWYG. Os criadores de conteúdo podem definir valores para os campos no editor WYSIWYG, que são aplicados ao tema ou módulo no momento da renderização.

Temas

Se você já trabalhou com outros CMSs, está familiarizado com os temas. Os temas são objetos de alto nível que definem a aparência de um site e criam uma experiência de edição de conteúdo amigável ao profissional de marketing. Esses ativos podem incluir modelos, módulos, arquivos CSS, arquivos JavaScript, imagens e muito mais.

Os temas permitem aos desenvolvedores criarem um conjunto de campos que os criadores de conteúdo usam para ganhar controle sobre o estilo global de um site sem ter que editar o CSS. Você pode especificar no CSS onde esses controles são aplicados, organizar controles que são herdados de outros controles e gerenciar como são apresentados e organizados para os profissionais de marketing no Editor de tema. Os criadores de conteúdo usam o Editor de tema para modificar os Campos do tema, visualizar essas alterações em relação aos modelos existentes dentro de um tema e publicar suas alterações.

Esses campos de tema podem ser definidos globalmente em um site ou substituídos em nível de página.

Editor de tema

Modelos

Os modelos definem a marcação e o estilo de base de um conjunto de páginas que os utilizam. Eles podem conter HubL, HTML e links arbitrários para arquivos JavaScript e CSS, e podem ser limitados para uso com tipos específicos de conteúdo. Você tem total flexibilidade na marcação e estilo que pode incluir em um modelo, mas é encorajado a aderir a algumas práticas recomendadas e usar algumas características-chave do CMS para garantir que os profissionais de marketing possam editar as páginas com facilidade.

Tenha em mente que, ao criar modelos, você também está criando a experiência de edição para quem vai montar páginas a partir dos seus modelos. Essa pessoa pode ser o seu colega de trabalho ou um cliente, ou você mesmo. De qualquer forma, certifique-se de que a experiência de edição seja fácil e intuitiva.

Isso inclui:

  • Criar modelos como parte de um tema e usar CSS em nível de tema, incluindo campos de tema, para aplicar a maioria do estilo dentro de um modelo. Isso facilitará aos criadores de conteúdo fazer alterações de estilo globais e locais de forma consistente, sem a necessidade de editar o CSS.
  • Usar módulos (mais informações sobre isso na próxima seção) para a maioria dos componentes da página, o que permite reorganizá-los e reutilizá-los em um site.
  • Usar áreas de arrastar e soltar sempre que possível para o conteúdo da página principal, especialmente em páginas internas. As áreas de arrastar e soltar permitem definir um layout padrão para os módulos que compõem uma página e oferecem aos profissionais de marketing flexibilidade para editar o layout e o estilo de forma independente.
  • Usar partials globais para conter o conteúdo compartilhado, como cabeçalhos e rodapés, que você quer manter consistente em um site.

Os modelos podem ser criados com HTML + HubL ou com uma interface de arrastar e soltar no Gerenciador de design. Se você está iniciando um novo projeto, sugerimos usar modelos codificados, pois eles oferecem mais opções de fluxo de trabalho como desenvolvedor e suporte a áreas de arrastar e soltar.

Código VS com modelo HTML e HubL aberto

Módulos

Os módulos são componentes reutilizáveis que você pode colocar em modelos e páginas no HubSpot CMS. Eles incluem controles para profissionais de marketing e contêm marcação HubL/HTML, CSS e JavaScript que, juntos, criam os componentes reutilizáveis e editáveis de um site.

Os controles de um módulo são definidos nos campos, então construir um módulo grande significa considerar tanto a aparência resultante em uma página quanto a experiência de edição para editores de conteúdo.

O HubSpot CMS inclui módulos padrão comuns como cabeçalhos, rich text, imagens, botões e CTAs que você usará como componentes fundamentais, mas também é provável que você queira construir elementos que possam ter layouts mais interessantes e adequados ao seu tema e modelos. Alguns exemplos comuns de módulos que você pode criar incluem painéis sanfonados, controles deslizantes e grupos de abas.

Forma do módulo no editor

Você pode considerar um módulo como um objeto, e módulos em páginas como instâncias desse objeto, o que significa que as atualizações no HubL, no CSS ou no JavaScript de um módulo são aplicadas em todas as instâncias desse módulo dentro de páginas ou modelos em um determinado portal. Os módulos também podem ser transferidos entre os portais, esteja você usando a ferramenta de cópia integrada no Gerenciador de design, vendendo no Marketplace ou compartilhando o código diretamente com as ferramentas de desenvolvimento locais. Isso significa que você pode implementar uma solução de design uma vez e usá-la em várias páginas e portais, e quando precisar atualizá-la, as alterações poderão ser aplicadas nas páginas sem a necessidade de editar várias páginas ou vários modelos.

Os módulos também podem ser incluídos em temas, o que permite utilizar campos de tema para manipular a aparência dos módulos e garantir que eles sejam exibidos de forma proeminente no editor de páginas para que os criadores de conteúdo possam ter acesso fácil a módulos que combinam com o design que você criou.

Para obter mais informações, consulte a visão geral do Sistema de módulos.

Campos

Os campos são os controles que os criadores de conteúdo utilizam para ajustar os parâmetros que são passados para seus temas e módulos. Os campos são digitados, incluindo tipos simples, como booleano, texto, URL, escolha e arquivo, mas também incluem campos mais complexos, como fonte com estilo, bem como campos específicos do HubSpot, como links para outros conteúdos ou formulários no sistema HubSpot.

Os campos também podem ser colocados dentro de repetidores que irão passar uma matriz para o módulo — um exemplo disso pode ser um carrossel de imagens em que você quer que um conjunto de imagens seja passado com o texto alternativo associado. Em vez de criar vários campos de imagem e texto, você pode criar um de cada e colocá-los em um grupo de repetição.

Os campos de um módulo são especificados dentro do Gerenciador de design ou por esta sintaxe em um arquivo fields.json.  Os campos de um tema devem ser especificados no arquivo fields.json na raiz do tema.

Como acontece com os outros objetos do HubSpot CMS, preste atenção à experiência de edição que você está criando ao construir campos em um módulo ou tema, incluindo como usar grupos de campos para tornar a hierarquia clara.

A linguagem do HubL

O HubSpot CMS usa a HubSpot Markup Language ou HubL (pronuncia-se "Hubble"). O HubL é a extensão da HubSpot do Jinjava, um mecanismo de modelagem baseado em Jinja. O HubL usa uma quantidade razoável de marcação que é exclusiva da HubSpot e não suporta todos os recursos do Jinja. É executado completamente no lado do servidor quando uma página é renderizada.

O HubL tem os recursos que você esperaria de uma linguagem de modelos simples, como variáveis, loops For e instruções If, mas também suporta macros de renderização mais complexa, busca de dados e mapeamento com tags, funções e filtros

Dito isso, o HubL não é uma linguagem de programação. Os CMS, como o WordPress, têm um limite ambíguo entre a lógica de modelos e de backend. Essa ambiguidade abre as portas para uma série de abordagens para a construção de modelos. Existem vantagens e desvantagens dessa flexibilidade das quais não vamos falar aqui. Como regra geral, o HubSpot CMS é mais prescritivo. Se você alcançar os limites do que é possível com o HubL, a HubSpot oferece APIs para criar soluções mais personalizadas. As contas do CMS Hub Enterprise podem utilizar as funções sem servidor, permitindo uma programação mais sofisticada do lado do servidor. 

Conforme você desenvolve no HubSpot CMS, pode consultar a Referência da linguagem HubL para obter mais detalhes sobre recursos específicos da linguagem.


Esse artigo foi útil?
Este formulário é para comentários sobre nossos documentos de desenvolvimento. Se tiver comentários sobre o produto da HubSpot, em vez disso compartilhe sua opinião no Fórum de Ideias.