Como usar o "Kit de Marca" no HostGator Studio

O "Kit de Marca" é um recurso do HostGator Studio que permite reunir em um só lugar os principais elementos da identidade visual do seu negócio.

Se você já tem uma identidade visual definida para sua marca, o "Kit de Marca" é importante para manter um padrão em todos seus projetos e templates criados na plataforma, ao usar as mesmas cores, imagens, fontes e acesso rápido ao seu logotipo.

Confira os seguintes tópicos:

• Como adicionar os elementos no Kit de Marca
• Como usar o Kit de Marca em um template
• Como excluir elementos do Kit de Marca
• Dicas e soluções para problemas comuns

Como adicionar os elementos no Kit de Marca     

1No Portal do Cliente, no menu lateral, clique em Studio  

Pode ser acessado também pela aba de "Início", clique em HostGator Studio

2Em seguida, clique em Projetos:

3No painel “Studio”, no menu lateral, clique em Kit de Marca

4Na tela “Kit de Marca”, são exibidas as seções. Clique na opção que deseja e confira como adicionar:

• Logo
• Imagens
• Cores
• Fontes

Logo

O logotipo é o elemento central da sua identidade visual. Confira como adicionar:

5Em "Logo", clique em Enviar arquivo:

6Escolha o arquivo com o logo no seu computador - Os formatos permitidos são .PNG, .JPG, .WEBP e .SVG (recomendado .SVG para melhor qualidade):

Após o envio, o logo é salvo no “Kit de Marca” e pode ser usado no editor do HostGator Studio

Imagens

Adicione elementos gráficos complementares à sua identidade visual, confira como fazer:

5Em “Kit de Marca”, clique em Imagens

6Em seguida, clique em Enviar arquivo:

7Escolha o arquivo de imagem no seu computador - Os formatos permitidos são .PNG, .JPG, .WEBP e .SVG (recomendado .SVG para melhor qualidade)

Após o envio, a imagem é salva no "Kit de Marca" e pode ser usada no editor do HostGator Studio

Cores

Você pode escolher uma ou mais cores que representem visualmente o seu negócio. Confira como fazer:

5Em “Kit de Marca”, clique em Cores

6Em “Paletas de cores”, clique em Nova cor:

7Você pode adicionar a cor de várias formas, escolha a que deseja:

• A) Seletor de cor manual - você arrasta o botão até chegar no tom que deseja
• B) Com código HEX - código hexadecimal
• C) Com HGB - combinação de três componentes: matiz, saturação e brilho
• D) Com RGB - combinação de três cores primárias: vermelho, verde e azul

A) Seletor de cor manual

1. Na barra de cores colorida, arraste a bolinha para escolher a cor principal (vermelho, azul, verde, etc).

2. Depois, no quadrado grande, clique e arraste o círculo branco até achar o  tom e a intensidade da cor (mais claro, mais escuro ou mais vivo).

3. Para ajustar a transparência, use a barra azul:

• Arraste para a esquerda - cor mais transparente.
• Arraste para a direita - cor mais sólida.

B) Com código HEX

Caso já tenha definido o código da cor (código hexadecimal), no campo “HEX” informe para aplicar - Por exemplo: para o branco, o código para inserir é #FFFFFF

No campo “100%”, defina a opacidade da cor - Para cores de marca, o ideal é manter em 100%:

C) Com HGB 

Mostra a cor com base em três ajustes: Matiz (cor), Saturação (intensidade da cor) e Brilho. Confira como fazer:

• No campo “HEX” escolha HSB e preencha as seguintes informações:
  • 1º campo - Representa o tom da cor, como vermelho, azul, verde etc. - Por exemplo para um tom azul é 200 é um tom de azul
  • 2º campo - Indica o quanto a cor é viva. 100% é o máximo de cor pura.
  • 3º campo - Indica o quão clara ou escura é a cor. 80% é um brilho forte, mas não totalmente claro.

D) Com RGB 

Mostra a cor com base na combinação de Vermelho (Red), Verde (Green) e Azul (Blue). Cada valor vai de 0 a 255 e juntos formam a cor final.

8Para concluir, clique em Adicionar Cor:

Após a definição da(s) cor(es) será salva no “Kit de Marca” e pode ser usada no editor do HostGator Studio

Fontes 

Se você tem uma fonte personalizada que deseja usar nos templates (por exemplo, a fonte oficial da sua marca), confira como inserir:

1Em “Kit de Marca”, clique em Fontes

2Em “Fontes”, clique em Enviar arquivo:

3Escolha o arquivo da fonte no seu computador - Formatos permitidos são .TTF 

Após o envio, a fonte é salva no “Kit de Marca” e pode ser usada no editor do HostGator Studio

Como usar o Kit de Marca em um template     

Depois de configurar o "Kit de Marca", essas opções predefinidas estarão disponíveis ao editar qualquer template no HostGator Studio.

Para usar seu "Kit de Marca" em um elemento específico:

1No Portal do Cliente, no menu lateral, clique em Studio  

Pode ser acessado também pela aba de "Início", clique em HostGator Studio

2Na tela inicial “HostGator Studio”, escolha o modelo que deseja ou para acessar um que já começou a edição, clique em Projetos e abra o template:

3No editor, no menu lateral esquerdo, clique em Kit de Marca

4Selecione e aplique os elementos visuais (logo, imagens, fontes e cores) previamente salvos

Como excluir elementos do Kit de Marca     

1No Portal do Cliente, no menu lateral, clique em Studio  

Pode ser acessado também pela aba de "Início", clique em HostGator Studio

2Na tela inicial “HostGator Studio”, escolha o modelo que deseja ou para acessar um que já começou a edição, clique em Projetos e abra o template

3Na plataforma, no menu lateral, clique em Kit de Marca

4Em “Kit de Marca”, acesse a seção que contém o elemento que deseja deletar - Logo, Imagens, Cores ou Fontes  

5Em seguida, clique em Selecionar

6Escolha o(s) elemento(s) que deseja excluir:

• A) Para um único elemento: marque a caixa de seleção
• B) Para múltiplos elementos: marque a opção Selecionar todos

7Em seguida, clique em Excluir

8Na mensagem de confirmação, clique novamente em Excluir

Caso deseje adicionar novos elementos, repita os passos da seção como adicionar os elementos no Kit de Marca 

Dicas e soluções para problemas comuns