Um tour rápido pelo gerenciador de design

O gerenciador de design do HubSpot combina todas as ferramentas que os designers precisam para criar sites modernos, e ainda proporcional aos profissionais de marketing a flexibilidade que desejam ao criar conteúdo. 

Neste artigo, veja um tour de todos os recursos do gerenciador de design.Se você está procurando por exemplos específicos de código e documentação de referência, confira a documentação para desenvolvedores da HubSpot.

Ferramentas incluídas no gerenciador de design

O gerenciador de design agrega várias ferramentas importantes em um aplicativo poderoso:

• Localizador - um espaço para criar e organizar seus arquivos, modelos, módulos e pastas.
• Editor de Layout- editor de arrastar e soltar para estruturar sua página, blog, e-mail e modelos de sistema.
• Inspetor - é onde você pode editar as propriedades de um layout, módulo ou grupo. 
• Editor de código - um ambiente de desenvolvimento integrado (IDE) para todo o seu código de frontend (CSS, Javascript ou até mesmo seus próprios modelos HTML).
• Editor de módulo - módulos personalizados e reutilizáveis que você pode configurar para adicionar funcionalidade avançada ao seu site, que ainda pode ser gerenciado por usuários não técnicos.
• Gerenciador de arquivos - um sistema de hospedagem de arquivo para todos os recursos do seu site.

Navegue até seu gerenciador de design para explorar essas ferramentas. Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design. 

Localizador

O localizador é um espaço para gerenciar todas as suas pastas, modelos, módulos e arquivos codificados. Você pode organizar seus arquivos e pastas como quiser usar a interface de arrastar e soltar do localizador. Clicar em um arquivo pode expandir ou fechar seus arquivos.

Todas as contas do Marketing Hub Professional e Enterprise de do CMS Hub Professional e Enterprise têm a pasta @hubspot no gerenciador de design por padrão. Essa pasta contém todos os temas e módulos padrão, incluindo os módulos de e-mail do tipo arrastar e soltar. Esses temas e módulos são somente leitura, mas podem ser clonados se você quiser personalizá-los. Saiba mais sobre como personalizar temas e módulos padrão.

Clique em Arquivo para criar novos arquivos ou pastas, ou para realizar uma ação no recurso atualmente selecionado no localizador como excluir, clonar ou renomear o recurso. Use as opções em Exibir para gerenciar a disposição dos seus arquivos e pastas. Você pode clicar rapidamente em todas as pastas ou extrair recursos recentemente editados ou excluídos.

Observação: o Finder é contextual, o que significa que suas ações sempre serão relativas às pastas e arquivos selecionados. Para criar um novo arquivo ou pasta dentro de uma pasta específica, clique nessa pasta no localizador. Para criar um novo arquivo ou pasta fora de todas as pastas existentes, clique em Exibir e selecione Cancelar a seleção de tudo.

O menu Ações  só estará ativo se um arquivo ou pasta estiver selecionado no momento e fornecer opções contextuais para esse tipo de recurso. Você também pode clicar com o botão direito do mouse diretamente no recurso para fazer qualquer um dos seguintes:

• Clonar: fazer uma cópia do seu arquivo, pasta ou modelo.
• Mover: selecione uma nova pasta para seu recurso.
• Renomear: dar ao recurso um novo nome.
• Clonar para HTML: criar uma cópia de seu recurso codificado totalmente em HTML.
• Copiar para  portal: criar uma cópia do seu recurso e enviar para outra conta do HubSpot à qual você tenha acesso.
• Criar página/e-mail: criar uma nova parte do conteúdo usando este modelo.
• Mostrar dependentes: ver uma lista de qualquer conteúdo do HubSpot usando o arquivo.
• Mostrar histórico de revisão: revisar um histórico de versões salvas.
• Copiar snippet: usar isso para copiar rapidamente o trecho de código do seu código personalizado módulo em sua área de transferência. Esta opção aparecerá apenas quando clicar com o botão direito do mouseem um módulo.
• Bloquear pasta: bloqueie uma pasta para evitar que os usuários editem seu conteúdo no gerenciador de design. O conteúdo de pastas bloqueadas somente pode ser editado dentro do ambiente de desenvolvimento local.
• Excluir - excluir este arquivo, pasta, modelo ou módulo.

Guias

Quando você clicar no nome de um modelo, módulo ou arquivo codificado, ele abre sua seleção em uma guia no editor. As guias facilitam a tarefa e alternam entre vários modelos e arquivos codificados. Clique com o botão direito do mouse em qualquer  guia  para mostrar opções para gerenciar suas guias no editor. Você pode analisar uma lista completa de guias abertas clicando na  seta para baixo à direita.

Para ter mais espaço para trabalhar no editor de layout, você pode clicar no  ícone de recolhimento  first para recolher o localizador. Você pode expandir novamente clicando na pasta do ícone de pasta  folder.

Criando novos modelos e arquivos

Para criar um novo modelo,  móduloou  arquivo codificado, clique em  Arquivo  > Novo arquivo no canto superior esquerdo do localizador. Você tem a opção de criar qualquer um dos seguintes tipos de recursos:

• Arraste e solte: um modelo criado adicionando módulos a uma interface intuitiva de arrastar e soltar.
• HTML_e HUBL: um modelo de código personalizado criado no editor de código usando HTML, CSS e Javascript.
• Folha de estilo: um arquivo CSS codificado que pode ser usado para módulos e arquivos.
• Javascript: um arquivo codificado de Javascript que pode ser aplicado aos módulos e arquivos.
• Módulo: um módulo codificado personalizado que pode ser adicionado a um modelo.

Editor de Layout

O editor de layout é uma interface de arrastar e soltar para a estrutura e conteúdo padrão das suas páginas e e-mails. Você verá os nomes dos seus módulos e grupos, juntamente com a classe de corpo aplicada a cada componente. Você pode modificar cada módulo ou grupo clicando nele para editá-lo no lado direito, ou clicando com botão direito no componente para acessar a funcionalidade do inspetor.

Arraste e solte componentes no editor de layout para ajustar seu posicionamento e tamanho em seu modelo. Há botões de Desfazer  e Refazer  no canto superior esquerdo para ajudá-lo a reverter rapidamente suas alterações. Você também pode clicar com botão direito em um módulo para agrupar rapidamente, clonar ou alterar um tipo de módulo ou usar  atalhos de teclado  para atingir as mesmas ações.Clique no botão Visualizar  no canto superior direito para visualizar seu trabalho e testar seu layout em diferentes tamanhos de tela.

Todos os layouts de modelo da HubSpot são responsivos, o que significa que eles se ajustam automaticamente em diferentes tamanhos de tela. Este editor compila seus módulos de arrastar e soltar em uma marcação HTML limpa que é disponibilizada por algum CSS  integrado.

Saiba mais sobre como criar e editar modelos e adicionar estilos ao seu modelo.

Inspetor

O inspetor permite adicionar e editar componentes em um modelo ou módulo. É contextualmente dependente da tarefa que você está realizando e do tipo de arquivo. Por exemplo:

• Quando um componente é selecionado no editor de arrastar e soltar, o inspetor mostrará todos os recursos e opções desse componente.
• Quando nenhum componente é selecionado no editor de arrastar e soltar, o inspetor mostrará opções para o próprio modelo.
• Ao editar um módulo, o inspetor permite editar e adicionar campos.

Dependendo do tipo de módulo selecionado no modelo, pode haver diferentes opções disponíveis no inspetor. 

Para modelos de arrastar e soltar, a guia + Adicionar é usada para adicionar novos componentes ao seu layout. A guiaEditar  do inspetor pode ser usada para atribuir classes de CSS personalizadas, editar conteúdo padrão ou anexar arquivos codificados.

O inspetor inclui uma breadcrumb navegação no canto superior para ajudá-lo a navegar rapidamente entre o ativo, módulo, grupo e modelo que você está trabalhando no momento.

Para modelos e módulos HTML e HUBL de código personalizado, você pode usar o inspetor para adicionar novos campos ou links aos arquivos codificados.  Você também pode adicionar tags de filtro para indicar o tipo e função de conteúdo de seus modelos e módulos codificados para que eles sejam mais facilmente pesquisáveis no localizador. Você também pode encontrar snippets e mais detalhes sobre como esses recursos de código personalizado podem ser usados em seus modelos.

Editor de código

O editor de código do HubSpot é um poderoso IDE que permite codificar  arquivos CSS,  arquivos Javascript e até mesmo  modelos HTML. Ao codificar ou editar suas folhas de estilo, você pode visualizar ao vivo os efeitos de suas alterações em uma variedade de tamanhos de tela. O editor de código também tem vantagens de muitos outros recursos IDE úteis, como classes codificadas por cores, verificação de erro, destacamentos de sintaxe, autopreenchimento, tags de fechamento automático, recuo automático e muito mais.

Saiba mais sobre como usar o editor de código.

Nota: por defeito, o HubSpot minifica automaticamente JavaScript e CSS incluídos no gestor de design para remover espaços desnecessários, quebras de linha, e comentários. Isto também se aplica ao JavaScript e CSS carregado para o gestor de design através do CLI. Isto significa que não deve adicionar código já minificado directamente ao gestor de design.

Saiba mais sobre JavaScript e CSS minification.

Editor de módulo

Embora os modelos de arrastar e soltar do HubSpot venham com um número de módulos padrão  para escolher, designers ocasionalmente precisam de uma solução de design mais personalizada.Módulos  são componentes personalizados reutilizáveis compostos de HTML e HubL campos, CSS e Javascript. Esses módulos podem ser adicionados a um modelo e personalizado no editor de página sem nenhum código.

Use o inspetor para adicionar campos, anexar arquivos codificados ou adicionar tags para organizar seus recursos. Assim como no editor de código, você pode visualizar ao vivo o seu trabalho em uma variedade de tamanhos de tela. Você também pode especificar conteúdo padrão para seus campos de módulo, bloquear conteúdo padrão ou criar campos de módulo específicos. 

Gerenciador de arquivos

O gerenciador de arquivos do HubSpot armazena todos os recursos que você usa para criar conteúdo. Esta ferramenta permite carregar PDFs, imagens, vídeos, arquivos de áudio, fontes e muito mais. Você pode acessar recursos criativos ou carregar rapidamente novos arquivos sem precisar sair do aplicativo.