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

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

3. Na caixa de diálogo, clique no menu suspenso O que você gostaria de construir hoje? e selecione Módulo.
4. Clique em Próximo.
5. No campo Onde você gostaria de 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, Posts de blog, E-mails ou Landing pages). 
6. No campo Escopo do conteúdo do módulo, selecione uma opção (por exemplo, Módulo local ou 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. 
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.

Observação: os módulos usados em e-mails só podem ser criados em contas com uma assinatura do Marketing Hub Professional ou Enterprise. Não podem incluir CSS ou JavaScript. 

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 snippets 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 finder, 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 torne-o 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 finder, 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 finder, clique para abrir um módulo.
3. No inspetor, na seção Campos, passe o mouse sobre um campo 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, ao adicionar 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 finder, clique para abrir um módulo.
3. No inspetor, na seção Campos, passe o mouse sobre um campo 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 em 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 da dica de ferramenta ou no campo de Texto de ajuda em linha.
   • Texto de ajuda da dica de ferramenta: este texto aparecerá em uma dica de ferramenta quando um usuário passar o mouse sobre o ícone infoCircleIcon informações no editor de conteúdo.
   • Texto de ajuda em linha: 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 que um campo de módulo seja exibido somente se outro campo atender a determinados critérios.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No finder, clique para abrir um módulo.
3. No inspetor, na seção Campos, passe o mouse sobre um campo 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 ou Não está vazio). 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, desmarque a opção Condições de exibição.

Definir opções de repetidor de campo

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

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No finder, clique para abrir um módulo.
3. No inspetor, na seção Campos, passe o mouse sobre um campo e clique em Editar.
4. Na seção Opções do repetidor, informe um número nos campos Mínimo e Máximo (opcional). 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 objetos 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, desmarque as Opções do repetidor.

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 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. Você pode agrupar até quatro campos. Saiba mais sobre grupos de campos do módulo. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No finder, clique para abrir um módulo.
3. No inspetor, na seção Campos, clique no menu suspenso Ações e selecione Agrupar.
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 finder, clique para abrir um módulo.
3. No inspetor, na seção Opções do editor, insira texto no campo Texto de ajuda em linha.

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 landing pages. 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 finder, 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, E-mails ou Landing pages). 
   • Quando terminar, clique em Atualizar.

4. Para gerenciar a disponibilidade de um módulo em modelos ou páginas, ative a opção Disponibilizar para modelos e páginas 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. 

Observação: desativar a opção Tornar disponível para modelos ou páginas não removerá o módulo de modelos ou páginas existentes.

Copiar e colar snippets 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 finder, 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 Campos. Selecione Copiar snippet. 
4. No editor de módulos, cole o snippet de campo no local desejado dentro da seção module.html (HTML. + HubL). 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 nas seções module.html (HTML + HubL), module.css e module.js do editor de módulo. 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 finder, 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ódulo 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ê poderá 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 finder, 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.
   • No campo Pesquisar, digite o nome do módulo. Para restringir sua pesquisa a módulos personalizados, clique no menu suspenso Filtrar por categoria ou tags e selecione Módulos personalizados.
   • Clique no ícone dragHandleIcon arrastar e soltar e mova o módulo para a posição no editor de layout.
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 finder, e selecione Copiar snippet. Como alternativa, clique para abrir o módulo e, em seguida, na seção Uso do modelo do inspetor 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 da "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 da "Cor da fonte do timer". Isso atualizará o campo de nome da variável HubL para timer_font_color.

Observação: 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ódulo, 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:

// Function to calculate and display countdown
function updateCountdown() {
// Get the target date from the hidden span
const targetDate = new Date(document.getElementById('target-date').textContent);
// Get the current date
const currentDate = new Date();
// Calculate the time remaining (in milliseconds)
const timeRemaining = targetDate - currentDate;
// Check if the target date has passed
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired';
return;
}
// Calculate remaining days, hours, minutes, and seconds
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Display the countdown
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Update countdown every second
setInterval(updateCountdown, 1000);
// Initial call to update countdown immediately
updateCountdown();

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