Última modificação: 28 de agosto de 2025
Compreender os módulos é a chave para compreender o CMS HubSpot e tudo o que ele permite fazer. Módulos são componentes reutilizáveis que podem ser usados em modelos ou adicionados a páginas por meio de áreas de arrastar e soltar e colunas flexíveis. Além de usar os módulos fornecidos pela HubSpot, os desenvolvedores podem criar seus próprios módulos para tudo, desde testemunhos até galerias de fotos. Os módulos são criados usando as ferramentas de desenvolvimento local ou usando o Gerenciador de design. Um módulo tem duas partes:
  1. Uma interface do usuário criada por meio de uma lista de campos que os usuários verão ao editar uma instância de módulo.
  2. Um fragmento de modelo HTML+HubL com CSS e JS associados para definir como o HTML será gerado

​
Um exemplo

Para entender melhor o que é um módulo, vamos analisar o módulo simples “Membro da equipe”. O módulo consiste em uma foto, o nome do membro da equipe, seu cargo e uma breve biografia, e quando faz parte de uma página web do CMS, é parecido com isso:
Instância do módulo de membro da equipe

​
A interface do usuário para edição

O desenvolvedor cria a interface do usuário (UI) para os módulos usando campos. O desenvolvedor então escolhe quais campos usar com base no tipo de módulo a ser criado, nos dados necessários e na experiência de edição. Neste caso, o módulo inclui:
  1. um campo de imagem, para a foto do membro da equipe;
  2. dois campos de texto, para o nome e o cargo do membro da equipe;
  3. e um campo rich text, para uma breve biografia.
Quando um criador de conteúdo edita um módulo, a UI é criada com base nos campos que o desenvolvedor adicionou ao módulo e como cada campo foi configurado.
Editor do módulo de membros da equipe

​
Módulo vs. instância de módulo

Há dois termos frequentemente utilizados em relação aos módulos. É importante entender a diferença entre eles.
  • Módulo - blocos de construção reutilizáveis que podem ser adicionados a modelos e páginas.
  • Instância de módulo - os módulos individuais renderizados na página. Eles podem ter valores de campo separados e, como resultado, parecer diferente das outras instâncias de módulo que se destinam ao mesmo módulo.

​
Fields.json

Os campos de um módulo são definidos em JSON como uma matriz de objetos. Cada campo tem um nome, tipo e valor padrão. Outras propriedades também estão disponíveis, dependendo do tipo de campo que controla a experiência de edição. 
// fields.json
[
  {
    "name": "team_member_photo",
    "label": "Team Member Photo",
    "required": true,
    "responsive": true,
    "resizable": true,
    "type": "image",
    "default": {
      "src": "",
      "alt": ""
    }
  },
  {
    "name": "team_member_name",
    "label": "Team member name",
    "required": true,
    "type": "text",
    "default": "Joshua Beck"
  },
  {
    "name": "team_member_position",
    "label": "Team member position",
    "required": true,
    "type": "text",
    "default": "CEO, Co-Founder"
  },
  {
    "name": "team_member_bio",
    "label": "Team member bio",
    "required": true,
    "type": "richtext",
    "default": "<p>Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.</p>"
  }
]
Para saber mais sobre todos os campos disponíveis, consulte Campos de tema e módulo.

​
Usar dados de campo de módulo para renderizar HTML

Os valores de cada campo são disponibilizados pelo fragmento HTML+HubL para um módulo por meio de uma variável module. Os dados de cada campo podem ser acessados por meio das propriedades da variável module. Usando o módulo de membro da equipe como exemplo, o nome do membro da equipe pode ser acessado via {{ module.team_member_name }}. 
<section class="team-member">
  <img class="team-member__image" src="{{ module.team_member_image.src }}" alt="{{ module.team_member_image.alt }}">
  <h3 class="team-member__name">{{ module.team_member_name }}</h3>
  <p class="team-member__position">{{ module.team_member_position }}</p>
  <div class="team-member__bio">{{ module.team_member_bio }}</div>
</section>

​
Usar módulos em modelos

Os módulos são adicionados aos modelos usando as tags module, module_block ou dnd_module e especificando o caminho para o módulo como um parâmetro. Os valores padrão dos campos em um módulo também podem ser substituídos no nível do modelo por meio da adição de parâmetros à tag que corresponde ao nome do campo, como mostrado na segunda parte do exemplo abaixo. 
{% module "unique_identifier" path="/modules/team-member.module" %}

{# override default values in a module instance #}

{% module "unique_identifier"
  path="/modules/team-member.module",
  team_member_name="Brian Halligan",
  team_member_position="CEO"
%}
Os módulos não podem ser aninhados uns dentro dos outros. Na maioria das vezes, você gostaria de fazer isso, normalmente por motivos de layout. As seções nas áreas de arrastar e soltar são muitas vezes o melhor curso de ação.

​
Os módulos são uma ótima ferramenta na caixa de ferramentas de acessibilidade

Os módulos são utilizados em um site, algumas vezes em várias páginas, até mesmo várias vezes em uma página. Devido a esta estrutura, o HTML, o CSS e o JS do seu módulo, considerando a acessibilidade, pode influenciar profundamente a capacidade de utilização do seu site para pessoas sem e com deficiência.

​
Os módulos podem tornar a localização mais fácil

Em um sentido semelhante ao da acessibilidade, construir módulos para que todo o seu conteúdo seja baseado em campos, torna possível a localização posterior. Por exemplo, você pode ter um módulo “Artigos em destaque”. Em vez de codificar o texto “Artigos em destaque”, use um campo de texto ou um campo rich text. Em seguida, o texto pode ser alterado para outros idiomas. Para saber mais sobre localização no CMS, consulte vários idiomas.

​
Introdução

Para começar, confira nosso tutorial Introdução aos módulos.

​
Aprofundando-se