Criar e editar módulos no gerenciador de design

Com o gerenciador de design, você pode criar módulos personalizados para adicionar recursos avançados ao seu blog, páginas ou e-mails. Os módulos personalizados oferecem uma ampla variedade de funcionalidades para que o conteúdo possa ser totalmente personalizado na página, no e-mail ou no editor de blog.

Observe que a criação de módulos requer conhecimento de HTML, O HubSpot recomenda trabalhar com um desenvolvedor para criar módulos codificados.

Criar um novo módulo

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. Na parte superior do localizador, clique no menu suspenso Arquivo e selecioneNovo arquivo.

3. Na caixa de diálogo, clique no menu suspenso What would you like to build today? (O que você gostaria de construir hoje).
4. Clique em Próximo.
5. No campo Onde você deseja usar este módulo, marque a caixa de seleção ao lado de cada tipo de conteúdo em que seu módulo será usado (por exemplo, Postagens de blog, 
6. No campo Escopo de conteúdo do módulo , selecione uma opção (por exemplo, Módulo local ou módulo). Se você criar um módulo global, a edição do conteúdo desse módulo atualizará todos os locais em que o módulo for usado. 
7. Digite um nome de arquivo para o módulo.
8. Para alterar o local do arquivo do módulo, clique em Alterar na seção Local do arquivo. Na caixa pop-up, selecione um novo local e clique em Selecionar.
9. Quando terminar, clique em Criar.
10. Continue editando o módulo.

Observe: os módulos usados em e-mails só podem ser criados em contas com uma assinatura Marketing hub Professional ou Eles não podem incluir 

Editar um módulo

Depois de criar um módulo no gerenciador de design, você pode personalizar sua funcionalidade e aparência. Rotule o módulo para maior clareza, adicione e configure campos e ajuste as opções do editor de campos, como conteúdo padrão. Defina as condições de exibição e as opções do repetidor e agrupe os campos relacionados para uma melhor organização. Você também pode copiar e colar trechos de campo, escrever sintaxe de módulo personalizada, adicionar texto instrucional útil e editar com quais tipos de modelo seu módulo pode ser usado.

Adicionar um rótulo a um módulo

No gerenciador de design, você pode adicionar ou atualizar um rótulo para um módulo para ajudar os usuários a identificá-lo no editor de conteúdo. Se o rótulo estiver em branco, o nome do módulo será mostrado por padrão.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo para o qual você gostaria de editar o rótulo.
3. No inspetor, insira um rótulo.

Adicionar campos a um módulo

Adicione campos a um módulo para definir o conteúdo ou estilo do módulo e torná-lo editável no editor de conteúdo. Saiba mais sobre os tipos de campo disponíveis. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. No inspetor, na seção Campos , clique no menu suspenso Adicionar campo . Em seguida, selecione um campo para adicionar ao módulo.

4. Para editar o nome do campo, clique no edit ícone editar e insira um novo nome. Para editar o nome da variável HubL, insira um novo nome no campo nome da variável HubL. 

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

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. No inspetor, na seção Campos, passe o mouse sobre um campo de interferência e clique em Editar.
4. Na seção Opções de conteúdo , adicione ou edite opções de conteúdo padrão . As opções de conteúdo padrão disponíveis dependerão do tipo de campo selecionado.

Por exemplo, adicionando um tipo de campo Data e hora a um módulo, você pode selecionar uma data e hora padrão. Você também pode inserir um intervalo de tempo padrão.

Definir opções de editor de campo

Na seção Opções do editor, você pode tornar um campo obrigatório e impedir a edição no editor de conteúdo. Você também pode personalizar o texto de ajuda. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. No inspetor, na seção Campos, passe o mouse sobre um campo de interferência e clique em Editar.
4. Na seção Opções do editor , para tornar o campo obrigatório, ative a opção Tornar este campo obrigatório . Isso impedirá que os usuários deixem o campo em branco no editor de conteúdo.
5. Para impedir que o conteúdo de um campo seja editado, ative a opção Impedir edição nos editores de conteúdo . O conteúdo do campo ainda pode ser personalizado no gerenciador de design no nível do modelo. Esta opção não está disponível para módulos globais.
6. Para adicionar contexto ou instruções sobre como usar o campo, insira texto no campo de texto de ajuda Dica de ferramenta ou no campo de texto de ajuda.
   • Texto de ajuda da dica de ferramenta: este texto aparecerá em uma dica de ferramenta quando um usuário passar o mouse sobre o infoCircleIcon no editor de conteúdo.
   • Texto de ajuda in-line: este texto aparecerá abaixo do campo quando um usuário estiver editando o módulo no editor de conteúdo.

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

Na seção Condições de exibição , você pode usar condições de exibição de campo para definir um campo de módulo para ser exibido somente se outro campo atender a determinados critérios.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. No inspetor, na seção Campos, passe o mouse sobre um campo de interferência e clique em Editar.
4. Na seção Condições de exibição , clique no menu suspenso da variável HubL e selecione uma variável. 
5. Clique no segundo menu suspenso e selecione uma opção (por exemplo, É igual a Podem ser necessários mais campos de condição, dependendo da opção selecionada. Por exemplo, se você selecionar É igual a, um campo de valor adicional será necessário.
6. Por padrão, as condições de exibição são ativadas automaticamente assim que uma condição é configurada. Para desativar as condições de exibição, desative as Condições de Exibição.

Definir opções de repetidor de campo

Na seção Opções do repetidor , você pode configurar opções do repetidor para campos e grupos. Quando as opções do repetidor estiverem ativadas, vários objetos serão criados e exibidos usando um for loop.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. No inspetor, na seção Campos, passe o mouse sobre um campo de interferência e clique em Editar.
4. Na seção Opções do repetidor, informe um número nos campos de menu Isso definirá o número mínimo de vezes que o campo aparecerá no módulo até o valor máximo. 
5. Para definir o número de vezes que um campo deve ser exibido por padrão, informe um número no campo Contagem de objeto padrão .
6. Por padrão, as opções do repetidor são ativadas automaticamente depois de configuradas. Para desativar as opções do repetidor, alterne as opções do Repetidor para desativá-las.

Por exemplo, as opções de repetidor de um campo de imagem são alteradas para mostrar pelo menos três e até cinco campos de imagem. Um valor de quatro campos de imagem é configurado como padrão. No editor de conteúdo, um usuário verá quatro campos de imagem por padrão e poderá adicionar mais um campo de imagem ou remover um campo de imagem existente.

Agrupar campos de módulo

Depois de criar campos, você pode agrupá-los para manter seus campos organizados por relevância. Os grupos de campo podem ser usados para criar uma lógica de campo personalizada. Você pode agrupar até quatro campos. Saiba mais sobre grupos de campos de módulo. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. No inspetor, na seção Campos, clique no menu suspenso AçõesGerenciadas e selecione Grupo.
4. Selecione um ou mais campos para agrupar e clique em Criar grupo.

Adicionar texto de ajuda ao módulo

Na seção Opções do editor , você pode adicionar texto de ajuda para fornecer contexto aos usuários ao editar o módulo. Este texto será exibido acima dos campos no módulo. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. No inspetor, na seção Opções do editor , insira o campo de texto de ajuda .

Gerenciar tipos de conteúdo e disponibilidade para um módulo

Adicione ou remova os tipos de conteúdo para os quais os usuários podem usar um módulo, como posts de blog ou páginas iniciais. Você também pode ativar ou desativar a disponibilidade de um módulo em modelos e páginas.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. Para editar tipos de conteúdo para um módulo, clique nos tipos de Conteúdo abaixo do nome do módulo no inspetor na parte superior direita.

1. • Na caixa de diálogo, marque ou desmarque a caixa de seleção ao lado de cada tipo de conteúdo no qual o módulo será ou não usado (por exemplo, posts de blog, ou e-mails, ou não será usado). 
   • Quando terminar, clique em Atualizar.

4. Para gerenciar a disponibilidade de um módulo em modelos ou páginas, alterne a opção Disponibilizar para modelos e páginas ativada no canto superior direito. Para testar a funcionalidade do módulo ou desativar a disponibilidade em modelos e páginas, ative a opção Tornar disponível para modelos e páginas desativada. 

Por favor, note: alternar o Tornar disponível para modelos ou páginas desligue, não removerá o módulo de quaisquer modelos ou páginas existentes.

Copiar e colar trechos de campo

Ao incorporar um campo em um módulo, você pode copiar e colar o snippet de campo na seção module.html (HTML + HubL) dentro do editor de módulo.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. No inspetor, passe o mouse sobre um campo de módulo e clique no menu suspenso Ações na seção. Em seguida, selecione Copiar snippet . 
4. No editor de módulos, cole o campo snippet no local desejado dentro da seção de módulo . Você pode usar o atalho do teclado Cmd+V ou Ctrl+V. 

Gravar sintaxe do módulo

À medida que edita o módulo, você pode escrever a sintaxe do módulo no module.html (HTML + HubL), module.css e no módulo.js Saiba mais sobre o editor de módulos e a visão geral do módulo.

Visualizar e publicar um módulo

Quando terminar de editar um módulo, incluindo a adição de campos e a gravação da sintaxe do módulo, você poderá visualizar e publicar o módulo. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um módulo.
3. Para visualizar um módulo, clique em Visualizar no canto superior direito. Você será direcionado para uma nova guia do navegador para visualizar o módulo. Esta visualização é sincronizada com o editor de módulos e será atualizada automaticamente à medida que as edições ocorrerem.
4. Para publicar um módulo, clique em Publicar alterações. 

Adicionar um módulo a um modelo

Depois de publicar um módulo, você pode usá-lo entre modelos adicionando-o a um modelo de arrastar e soltar ou a um modelo codificado personalizado no gerenciador de design. Para adicionar módulos no editor de conteúdo, saiba mais sobre como adicionar e editar módulos no editor de conteúdo.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique para abrir um modelo.
3. Para adicionar um módulo a um modelo de arrastar e soltar no editor de layout, clique na + guia Adicionar na parte superior do inspetor de layout .
   • No campo Pesquisar, informe o nome do módulo. Para restringir sua pesquisa a módulos personalizados, clique no menu suspenso Filtrar por categoria ou marcas e selecione Módulos personalizados.
   • Clique no botão dragHandleIcon arraste e solte o ícone e mova o módulo para a posição no editor de layoutogic.
4. Para adicionar um módulo a um modelo codificado personalizado:
   •  Clique com o botão direito do mouse ou Ctrl+clique no módulo no localizador, e selecione GerenciarCopiar snippet . Como alternativa, clique para abrir o módulo e, em seguida, na seção Uso do modelo doInspetor de ferramentas, clique em Copiar snippet .
   • No modelo codificado personalizado, cole o snippet do módulo no editor de código.
5. Quando terminar, clique em Publicar alterações na parte superior direita.

Exemplo

Criar um módulo de contagem regressiva

1. Crie um módulo no gerenciador de design e nomeie-o como 'Timer de contagem regressiva'.
2. No inspetor, na seção Campo, clique no menu suspenso Adicionar campo .

• • Selecione o campo Data e hora . Insira o nome 'Data e hora do evento'. Isso atualizará o campo de nome da variável HubL para event_date_and_time.

• • Selecione o campo Cor . Digite o nome 'Cor da fonte do temporizador'. Isso atualizará o campo de nome da variável HubL para timer_font_color.

Observe: os nomes de variáveis HubL devem corresponder aos nomes de variáveis incluídos na seção de código module.html (HTML + HubL) abaixo.

3. No editor de módulos, copie e cole o código a seguir na seção module.html (HTML + HubL):

<!-- Hidden span to store the target date -->
<span id="target-date" style="display: none;"></span>

<!-- Display countdown timer -->
<div style="float: left; width: 100%; color: ;">
 <div class="time_container" style="margin-left: 30%;">
 <span id="days"></span><br>
 Dias
 </div>
 <div class="time_container">
 <span id="hours"></span><br>
 Horas
 </div>
 <div class="time_container">
 <span id="minutes"></span><br>
 Minutos
 </div>
 <div class="time_container">
 <span id="seconds"></span><br>
 Segundos
 </div>
</div>

4. Copie e cole o seguinte código na seção module.css :

.time_container {
float: left;
width: 10%;
text-align: center;
}
.time_container span {
font-weight: bold;
font-size: 200%;
}

5. Copie e cole o seguinte código na seção module.js :

// Função para calcular e exibir a função
countdownfunction updateCountdown() {
// Obtenha a data de destino a partir do
spanconst oculto targetDate = new Date(document.getElementById('target-date').textContent);
// Obtenha o
dateconst atual currentDate = new Date();
// Calcule o tempo restante (em milissegundos)


<

}






}
}
}
}
}



const timeRemaining = targetDate - currentDate;atualizações// Verifique se a data de destino tem document.getElementById('countdown').innerText = 'Contagem regressiva expirada';* 60));Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));Math.floor((1000 * 60)) `${daysId('hours').innerText = `${hoursById('minutes') Atualizar imediatamente Contagem Regressiva();

6. Quando terminar, visualize e publique o módulo.
7. Continue adicionando o módulo a um modelo.