CMS-General

Um tour rápido pelo Gerenciador de design

Ultima atualização: November 21, 2018

Disponível para

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

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

Neste artigo, você receberá um tour de todos os recursos do gerenciador de design.Se estiver procurando exemplos específicos de código e documentação de referência, confira nossasDocumentação de Designers.

Ferramentas incluídas no gerenciador de design

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

  • Orientação - 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 da extremidade dianteira (CSS, Javascript ou até mesmo seus próprios modelos HTML).
  • Editor de módulo - módulos personalizados 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 como usar a interface de arrastar e soltar do localizador. Clicar em um arquivo pode expandir ou fechar seus arquivos.

Clique em Arquivo para criar novos arquivos ou pastas, ou para realizar 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.

gerenciador de design recolher e desmarcar pastas

O localizador é 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. Você pode clicar em Exibir  > desmarque todos se quiser criar um novo arquivo ou pasta fora de qualquer uma das suas pastas existentes.

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 clique direito 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 -crie uma cópia de seu recurso codificado totalmente em HTML.
  • Copiar para  portal- crie uma cópia do seu recurso e envie para outra conta da HubSpot que você tem acesso.
  • Criar página/e-mail-crie uma nova peça de conteúdo usando este modelo.
  • Mostrar dependentes -ver uma lista de qualquer conteúdo da HubSpot usando o arquivo.
  • Mostrar histórico de revisão -revise um histórico de versões salvas.
  • Copie o trecho-use 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 clicando no botão direitoem um módulo.
  • Excluir -excluir este arquivo, pasta, modelo ou módulo.

clique com botão direito

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 abas facilitam a tarefa e alternar entre vários modelos e arquivos codificados. Clique com o botão direito em qualquer  guia  para revelar opções para gerenciar suas guias no editor. Você pode revisar uma lista completa de guias abertas clicando na  seta para baixo à direita.

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

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 são disponibilizadas por algum CSS  integrado.

Você aprenderá sobre como  criar e editar modelos, além de  adicionar estilos ao seu modelo, em seções mais tarde deste guia.

Inspetor

O inspetor permite adicionar e editar componentes em um modelo ou módulo. É contextualmente dependente da tarefa que você está realizando e o 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 para os 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 torná-los mais facilmente pesquisáveis no localizador. Você também pode encontrar recortes 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 da HubSpot é um poderoso IDE que permite gerar  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 leva 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.

Você aprenderá mais sobre  como usar o editor de código em uma seção posterior deste guia.

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

gerenciador de arquivos