Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Design Manager

Criar e editar módulos

Ultima atualização: Novembro 12, 2020

Disponível para

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic (versão anterior)

Na ferramenta de gerenciador de design, você pode criar módulos com codificação personalizada para adicionar recursos personalizados ou avançados ao seu blog, páginas ou e-mails. O editor de módulos tem três painéis de edição: HTML e HubL, CSS e JavaScript. Módulos personalizados oferecem uma ampla variedade de funcionalidades, de modo que o conteúdo pode ser totalmente personalizado no editor de páginas, e-mails ou blog. Você pode criar módulos personalizados do zero ou adicionar módulos predefinidos à sua conta a partir do HubSpot Marketplace.

Observação: a criação de módulos exige conhecimentos em HTML, em CSS, em HubL e no gerenciador de design da HubSpot. É recomendável trabalhar com um designer para criar módulos codificados.


Criar um novo módulo

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • Na parte superior do finder, clique no menu suspenso Arquivo e selecione Novo arquivo.

novo-arquivo

  • Na caixa de diálogo exibida, selecione Módulo.

criar-novo-módulo-de-arquivo

  • Escolha se deseja usar esse módulo em  modelos de página,  modelos de blog e/ou modelos de e-mail.

Observação: há diferenças técnicas entre esses tipos de módulo que os fazem incompatíveis. Por exemplo, CSS e JavaScript será desativado se você selecionar modelos de e-mailpara compatibilidade de e-mail.

  • Selecione se desejar que o escopo do conteúdo do módulo seja um módulo localou módulo global. Se você criar um módulo global, a edição do conteúdo desse módulo atualizará cada local onde o módulo é usado. Saiba como trabalhar com conteúdo inteligente em um módulo global.
  • Dê um nome de arquivo a um módulo e clique emCriar.

defina-seu-novo-módulo

Rotular o módulo

O rótulo do módulo é exibido no gerenciador de design e no editor de conteúdo ao adicioná-lo à sua página ou e-mail. Você pode pesquisar um módulo no gerenciador de design e no editor de conteúdo por nome ou rótulo. Se deixado em branco, o módulo exibirá o nome do módulo.

design-manager-label-module

Adicione campos ao seu módulo

  • No inspetor do módulo à direita, clique no menu suspenso Adicionar campo  seção Campos e selecione um campo  para adicionar ao seu módulo.

campo-de-adicionar-módulo

  • Edite o nome do campo clicando no  ícone de lápis edit ao lado do nome do campo. Para editar o nome da variável do HubL, altere o campo Nome da variável do HubL

Adicionar conteúdo padrão do campo

Na seção Opções de conteúdo, você pode adicionar um conteúdo padrão que é exibido quando o módulo é usado em editores de conteúdo e modelos. As opções de conteúdo padrão serão diferentes dependendo do tipo de campo.

No exemplo abaixo, o tipo de campo é um campo de imagem, portanto as opções de conteúdo padrão devem selecionar uma imagem padrão e ocultar controles de tamanho.

opções de conteúdo de campo

Definir opções de editor de campo

Na seção Opções do Editor, você pode ativar as seguintes opções:

  • Tornar este campo obrigatório: o usuário não poderá deixar esse campo em branco.
  • Impeça editar no editor de conteúdo: o conteúdo do campo não pode ser editado por usuários finais quando o módulo for selecionado no editor de conteúdo. O conteúdo do campo ainda está editável no nível do modelo. Esta opção não está disponível para  módulos globais, o que não pode ser editado no nível de página.
  • Texto de ajuda da dica de ferramenta: adicione um texto de ajuda ao campo para fornecer contexto ou instruções aos usuários. Esse texto de ajuda será mostrado em uma dica de ferramenta quando um usuário passar o mouse sobre o campo ao editar. 

    custom-module-help-text
  • Texto de ajuda inline: adicione um texto de ajuda ao campo para fornecer contexto ou instruções aos usuários. Esse texto de ajuda será mostrado abaixo do campo quando um usuário estiver editando o módulo.

design-manager-module-field-options

Definir condições de exibição de campo

Você pode personalizar um campo do módulo para ser mostrado somente se outro campo atender a determinados critérios com condições de exibição de campo.

  • Na seção Condições do Display, clique no HubL variável   menu para selecionar um campo de módulo e clicar no menu suspenso não vazio para escolher a condição desse campo.
  • Se você selecionar a condição é igual a, insira um valor ou regex.

No exemplo abaixo, as condições de exibição estão sendo definidas para um campo de imagem. A condição é que o valor em título de imagem (um campo de texto) deve ser igual ao título para que o campo de imagem apareça no módulo.

condições-de-exibição-de-campo

As condições do display serão automaticamente ativadas uma vez que você definiu uma condição. Para desativar as condições do Display, clique no botão de opção à direita do Display Condições.

Definir opções de repetidor de campo

Por último, você pode definir as opções do repetidor para seu campo. Repetidores são campos e grupos que podem criar vários objetos e exibi-los usando um loop

  • Na seção  Opções do Repetidor, selecione um  mínimo e/ou máximonúmero de instâncias obrigatórias desse campo.
  • Você também pode escolher definir uma contagem de objeto padrão, que será o número de instâncias do campo que aparecerá por padrão no módulo.

No exemplo abaixo, o campo de imagem está sendo configurado como um controle deslizante de imagem. Os limites de contagem de objetos são definidos sendo assim:um mínimo de 3 campos de imagem aparecerá no módulo, até um máximo de 5  campos de imagem. Um usuário verá  4 campos de imagem aparecem no módulo por padrão e pode escolher adicionar um campo de imagem ou remover um campo de imagem existente.

opções de repetidor de campo

As opções do repetidor serão ativadas automaticamente assim que você tiver modificado uma das opções. Para desativar as opções do repetidor, clique no botão de opção à direita de Opções do Repetidor.

Saiba mais sobre loops e repetição de campos  na documentação do designer.

Agrupamento de campos do módulo

Depois de criar os campos, você pode agrupá-los para mantê-los organizados por relevância. Os grupos de campo podem ser usados para criar uma lógica de campo personalizada. Saiba mais sobre grupos de campos do módulo

Para agrupar campos do módulo:

  • Clique no Grupo na barra lateral direita do editor do módulo.

    design-manager-group-fields
  • Selecione os campos que deseja agrupar.
  • Clique em Criar grupo.

Copiar e colar seus trechos de campo

  • Quando estiver pronto para incorporar um dos seus campos personalizados em seu módulo, copie e cole o trecho do campo no HTML + HubL do módulo.
    • Se estiver no campo inspetor, clique em  Copiar trechono lado direito do nome variável do HubL do campo.
    • Se estiver no complemento do módulo, posicione o ponteiro do mouse sobre o campo e clique em Ações   , selecione Copiar trecho.
  • Clique no local que deseja adicionar o campo no editor HTML + HubL, depois cole o snippet pressionando Ctrl+ ou Cmd+V.

copiar trecho de campo de pasta

Escrever seu módulo sintaxe

Enquanto você edita seu módulo, você pode escrever uma sintaxe módulo adicional deHTML + HubL,CSS eeditor de painel JS. Saiba mais sobre o editor de códigos de módulo e a referência da sintaxe do módulo  na documentação da HubSpot para designers.

Adicionar texto de ajuda ao módulo

Na seção Opções do editor, adicione um texto de ajuda para fornecer contexto aos usuários ao editarem o módulo. O texto de ajuda não pode ter mais de 300 caracteres. 

design-manager-help-text

Quando um usuário edita o módulo no editor de conteúdo, o texto de ajuda é mostrado acima dos campos do módulo.

page-editor-module-help-text

Visualizar o modelo

Você pode visualizar como seu módulo aparecerá e trabalhar em um editor de conteúdo clicando no botão Visualizar no canto superior direito do editor de módulo. a visualização do seu módulo será aberta em uma nova guia. Esta visualização é sincronizada com o editor e atualizará automaticamente conforme você trabalha.

módulo-de-visualização

Publicar seu módulo

Depois de terminar de adicionar campos, escreva o seu módulo sintaxe e se estiver satisfeito com como o módulo aparece e funciona na visualização, você pode prosseguir para publicar seu módulo. No canto superior direito, clique em Publicar mudanças.

módulo-de-publicação

Torne seu módulo disponível para modelos

  • Ative o botão Disponibilizar para os modelos na parte superior do editor para tornar esse módulo disponível para adicionar aos seus modelos.

botão de conteúdo

  • Desative o botão para fazer alterações ou testar a funcionalidade do módulo. Se esse botão for desativado, sua equipe verá um alerta que esse módulo não está disponível para modelos.

disponibilizar-módulo

Adicionar seu módulo a um modelo

  • No editor de layout do modelo, clique na guia Adicionar no canto superior do inspetor de layout e depois pesquise seu módulo. Módulos personalizados que você criou pode ser identificado pelo  ícone de módulo personalizado Módulos personalizados.
  • Arraste e solte o módulo em seu modelo.

adicionar-módulo-personalizado

Adicionar ou comprar um módulo do Marketplace

Além de criar seus próprios módulos, você pode adicionar ou comprar módulos personalizados que outros usuários ou provedores criaram no HubSpot Marketplace.

  • Na conta da HubSpot, clique no ícone do Marketplace marketplace na barra de navegação principal.
  • Na seção Filtrar produtos à esquerda, clique no menu suspenso Todos os produtos em Categoria  e selecione Módulos. Você pode filtrar os módulos disponíveis de acordo com:
    • Preço: selecione se o módulo estiver grátis ou pago
    • Função: selecione o tipo de função que o módulo inclui (e.g. calculadora, galeria, mapa)
    • Trabalha com: selecione o tipo (s) de modelo que o módulo pode ser usado
    • Comprar: selecione o (s) provedor (s) que o módulo é oferecido
  • Depois de decidido em um módulo, posicione o ponteiro do mouse sobre ele e clique em Exibir detalhes.
  • Clique em Obtenha o módulo gratuito ou Comprar por $x  no canto superior direito. Se o módulo estiver grátis, ele será adicionado automaticamente ao seu gerenciador de design. Se o módulo for pago, prossiga para inserir seus detalhes de pagamento.
  • Assim que o pagamento for processado, o módulo será adicionado ao seu gerenciador de design.