CMS-General

Criar e editar equipes

Ultima atualização: November 21, 2018

Disponível para

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic

Você pode usar o editor de módulo no gerenciador de design para criar módulos para adicionar recursos personalizados ou avançados ao seu blog, página ou e-mail, enquanto ainda permite que seus profissionais de marketing personem o conteúdo do módulo no editor de conteúdo.

O editor de módulo tem três painéis de edição para HTML e HubL, CSS e JavaScript. Incluir todos os três elementos permite usar módulos consistentemente em vários portais que você gerencia, ou em vários modelos. Exemplos do que você pode usar o editor de módulo para criar incluem:

  • Páginas de imagem personalizadas ou setores de imagem
  • Uma lista de eventos
  • Uma lista de funcionários com cabeçalhos e ofertas
  • Uma seção que permite que o usuário alterne classes de CSS para controlar sua apresentação

Observe: a criação de módulos requer conhecimento de HTML, CSS, HubL e o gerenciamento de design da HubSpot, cabe ao usuário incluir as folhas de estilo necessárias e os arquivos JavaScript relevantes em qualquer página usando módulos criados personalizados. É recomendável trabalhar com um designer para criar módulos.

Criar um novo formulário.

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • Na parte superior do localizador, clique emArquivo>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.

Observe: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.
  • Dê um módulo um nome de arquivo e clique emCriar.

defina-seu novo módulo

Adicione campos ao seu módulo

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

campo de adicionar módulo

  • Você pode editar o nome do seu campo clicando no  ícone de lápis  ao lado do nome do campo, bem como editar o  nome variável do HubL.

Adicionar conteúdo padrão do campo

Na seção Opções de conteúdo, você pode adicionar conteúdo padrão ao seu campo. Esse conteúdo padrão aparecerá quando o módulo for usado em modelos e editores de conteúdo, e 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: adicionar texto de ajuda ao campo para fornecer contexto de usuários ou instruções.

opções do editor de campo

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

Você pode exibir um campo para um usuário apenas se outro campo atende a determinados critérios.

  • Na seção Condições do Display, clique no HubL variável menu suspenso 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.

Saiba mais sobre condições de exibição de campo  na documentação do designer.

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 o campo repetir e loops  na documentação do designer.

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 painel 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 suspenso, selecione Copiar trecho.
  • Clique no local que deseja adicionar o campo no painel HTML + HubL editor, depois cole o trecho pressionando o 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ódigo de módulo  e  a referência de sintaxe de módulo  na documentação do designer.

Visualizar o modelo

Você pode visualizar como seu módulo aparecerá e trabalhar em um editor de conteúdo a qualquer momento 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 como 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. Clique em Publicar alterações no canto superior direito do editor de módulo.

módulo de publicação

Torne seu módulo disponível para modelos

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

botão de conteúdo

  • Desligue o botão OFF  se quiser 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 para o local que deseja colocá-lo no 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 sua conta HubSpot  Marketing Hub  Basic, , Professional ou  Enterprise , navegue para  Marketing > >Arquivos e modelos  > Marketplace.

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. Na página de detalhes do módulo, clique em Teste este módulo no canto superior direito para testar a funcionalidade do módulo antes de adicioná-la ao seu gerenciador de design. Por exemplo, você pode adicionar seu próprio conteúdo personalizado para ver se esse módulo funciona para o design do seu site.

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.

adicionar módulo marketplace