Criar e editar módulos

Written by HubSpot Support | 3/ago/2018 18:35:58

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 parte superior do finder, clique no menu suspenso Arquivo e selecione Novo arquivo.

Na caixa de diálogo, clique no menu suspenso O que você gostaria de construir hoje? e selecione Módulo.

Clique em Próximo.
Marque a caixa de seleção ao lado de cada tipo de conteúdo onde seu módulo será usado: páginas, posts de blog, listas de blogs, e-mails ou citações. Os módulos usados em modelos de e-mail não podem incluir CSS ou JavaScript.

Observação: módulos personalizados para uso em e-mails só podem ser criados em contas com uma assinatura do Marketing Hub Professional ou Enterprise.

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.

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.

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 na seção Campos e selecione um campo para adicionar ao seu 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; as opções para o conteúdo padrão são selecionar uma imagem padrão e ocultar os controles de tamanho.

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.

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.

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 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.

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áximo nú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.

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.

Selecione os campos que deseja agrupar.

Clique em Criar grupo.

Copiar e colar seus trechos de campo

Quando estiver pronto para incorporar um campo no 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+V ou Cmd+V.

Escrever seu módulo sintaxe
Enquanto você edita seu módulo, você pode escrever uma sintaxe módulo adicional de HTML + HubL, CSS e editor 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.

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

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.

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.

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.

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.

Adicionar seu módulo a um modelo

Depois de publicar um módulo, você pode usá-lo em suas páginas adicionando-o a um modelo.

Para adicionar um módulo a um modelo de arrastar e soltar:

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: customModules.

Arraste e solte o módulo para o modelo.

Para adicionar um módulo a um modelo codificado, você pode copiar e colar o trecho do módulo no modelo:

Para copiar o snippet do módulo do editor de módulo, na parte inferior da barra lateral direita, clique em Copiar snippet.

Para copiar o snippet do módulo da barra lateral esquerda do gerenciador de design:

Na barra lateral esquerda, localize o módulo personalizado.

Clique com o botão direito do rato no módulo e, em seguida, seleccione Copiar snippet. Como alternativa, você pode selecionar o módulo, clicar em Ações no canto superior esquerdo e selecionar Copiar snippet.

No modelo codificado, cole o snippet onde necessário.

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 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.

View full post