Ir para o conteúdo principal
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: Agosto 30, 2021

Disponível para

Marketing Hub Professional, Enterprise
CMS Hub Starter, 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 avançados ao seu blog, páginas ou e-mails. 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 Marketplace da HubSpot.

Observação: a criação de módulos exige conhecimentos em HTML, em CSS, em HubL e no gerenciador de design da HubSpot. A HubSpot recomenda 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, clique no menu suspenso O que você gostaria de construir hoje? e selecione Módulo.

build-a-module

  • Clique em Próximo.
  • Selecione se esse módulo será usado em modelos de página, em modelos de blog e/ou em modelos de e-mail. Os módulos usados em modelos de e-mail não podem incluir CSS ou JavaScript. 
  • Selecione se esse módulo será um módulo local ou um 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.
  • Insira um nome de arquivo para seu módulo e clique em Criar.

set-up-your-new-module

Rotular o módulo

Por padrão, o editor de conteúdo referenciará um módulo usando o nome fornecido no gerenciador de design. Se quiser que seu módulo use um nome diferente no editor de conteúdo, você poderá fazer isso inserindo um rótulo. 

design-manager-label-module

Adicione campos ao seu módulo

Adicione campos ao módulo para definir o conteúdo ou estilo do módulo e torne-o editável no editor de conteúdo. Saiba mais sobre os tipos de campo disponíveis em nossa documentação para desenvolvedores. 

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

module-add-field

  • 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; as opções para o conteúdo padrão são selecionar uma imagem padrão e ocultar os controles de tamanho.

field-content-options

Definir opções de editor de campo

Na seção Opções do editor, você pode ativar as seguintes opções sobre como os usuários podem editar o módulo no editor de conteúdo:

  • Tornar este campo obrigatório: o usuário não poderá deixar esse campo em branco no editor de conteúdo.
  • Impeça a edição em editores de conteúdo: o conteúdo do campo não pode ser editado no editor de conteúdo; mas pode ser editado em nível de 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 em linha: 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 usar condições de exibição de campo para definir que um campo de módulo seja exibido somente se outro campo atender a determinados critérios.

  • Na seção Condições do Display, clique no HubL variável menu 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 um campo de texto chamado image_title deve ser igual a Retrato para que o campo de imagem apareça no módulo.

field-display-conditions

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

Você pode definir as opções do repetidor para o seu campo na seção Opções do Repetidor. 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.

field-repeater-options

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.

Agrupar campos de módulo

Depois de criar campos, você pode agrupar até 4 deles para manter seus campos 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  menu, selecione Copiar trecho.
  • Clique no local que deseja adicionar o campo no editor HTML + HubL, depois cole o snippet pressionando Ctrl+ ou Cmd+V.

copy-paste-field-snippet

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 funcionará no 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.

preview-module

Publicar seu módulo

Quando terminar de adicionar os campos e de escrever a sintaxe do módulo, você poderá prosseguir para publicar seu módulo. No canto superior direito, clique em Publicar alterações.

publish-module

Torne seu módulo disponível para modelos

  • Ative o botão Disponibilizar para os modelos na parte superior direita 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.

make-module-available

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.

add-custom-module

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: se o módulo for gratuito ou pago
    • Função: o tipo de função que o módulo inclui (por exemplo, calculadora, galeria, mapa)
    • Trabalha com: os tipos de modelos nos quais o módulo pode ser usado
    • Provedor: o(s) provedor(s) que oferece(em) o módulo
  • Passe o cursor do mouse sobre o módulo escolhido e clique em Exibir detalhes.
  • Clique em Obtenha o módulo gratuitamente ou Comprar módulo por $  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.