Como adicionar e editar um texto no HostGator Studio

Ao escolher um dos modelos disponíveis no HostGator Studio, você pode alterar todos os elementos para personalizar e aplicar a identidade visual do seu negócio.

Na parte de texto você pode alterar a fonte, o tamanho das letras, a posição, incluir links, entre outros.

Para fazer essa edição, tanto de um template predeterminado ou de um projeto que queira iniciar do zero, confira abaixo como fazer:

1No Portal do Cliente, no menu lateral, clique em Studio - Pode ser acessado também pela aba "Início" e em seguida, HostGator Studio 

2Na tela inicial "HostGator Studio", escolha um template predefinido para começar a editar:

Se já tiver começado um template antes, clique em Projetos e abra o template que deseja continuar:

3Na tela do editor, selecione abaixo a opção que deseja:

• Editar texto
• Adicionar texto

Editar texto     

1No template, clique no elemento que possui caixa de texto: 

2No painel “Ajustes do texto”, selecione a opção de edição e confira como fazer: 

• Ordenar
• Alinhar
• Definir a transparência
• Trocar cor
• Escolher fonte
• Estilo da fonte
• Alterar tamanho
• Alinhamento do texto
• Estilo do texto
• Cor do Fundo
• Auto-ajuste
• Adicionar efeitos
• Adicionar link
• Excluir

Ordenar     

Define a posição do texto em relação aos outros elementos que o template possui:

1No painel “Ajustes do texto”, clique em Ordenar

2Em seguida, clique na opção que deseja:

• Para trás - colocar o texto atrás de imagens ou outros elementos;
• Para frente - colocar o texto acima dos outros elementos.

Alinhar      

Define a posição do texto em relação ao espaço do template:

1No painel “Ajustes do texto”, clique em Alinhar

2Em seguida, clique na opção que deseja:

• A) Alinhar à esquerda - o texto encosta no lado esquerdo do template;
• B) Centralizar horizontalmente - o texto fica no meio do template, na horizontal;
• C) Alinhar à direita - o texto encosta no lado direito;
• D) Alinhar no topo - o texto encosta na parte de cima da margem;
• E) Centralizar verticalmente - o texto fica no centro do template, na vertical;
• F) Alinhar na parte inferior - o texto encosta na parte de baixo, na base do projeto.

Definir a transparência     

Define o quanto o texto é visível no template - Parcialmente ou totalmente transparente

1No painel “Ajustes do texto”, clique em Transparência

2Em seguida, clique no botão, arraste e solte - Até deixar transparente na porcentagem que deseja, sendo 0% totalmente transparente

Trocar cor     

Para usar outra cor no seu texto:

1No painel “Ajustes do texto”, clique em Trocar:

2Em seguida, você pode adicionar a cor de várias formas:

• 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) Cores padrão

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):

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

Você também pode ajustar manualmente os valores de vermelho (R), verde (G) e azul (B) para encontrar a cor que deseja:

C) Cores padrão

Nesta seção você encontra uma paleta com cores prontas, clique sobre a cor que deseja ser aplicada.

Caso deseje deixar sem cor clique na caixa branca com linha vermelha:

3Ao escolher a cor, automaticamente é adicionado ao elemento de texto:

Outras ações que você pode fazer na escolha da cor são: 

• Favoritar uma cor: Clique no ícone de coração para salvar a cor como preferida e usá-la com mais facilidade depois:

Para voltar ao menu de ajustes de texto, clique na seta para expandir ou dentro do template sobre o texto:

Escolher fonte  

Você pode trocar o estilo da fonte - Confira como fazer  

Estilo da fonte   

Permite escolher o tipo de espessura da letra - Por exemplo: regular, bold, light, entre outros.

Para usar outro estilo no seu texto:

1No painel “Ajustes do texto”, clique no estilo da fonte por exemplo Regular – varia de acordo com a fonte do template

2Em seguida, clique na setinha para escolher outra variação - Se tiver disponível

Alterar tamanho     

Define o tamanho da fonte do texto:

1No painel “Ajustes do texto”, clique no campo de número

2Em seguida, clique na opção que deseja:

• “+” para aumentar o tamanho da letra
• “–” para diminuir o tamanho da letra

Alinhamento do texto     

Ajusta a posição do texto dentro do espaço da caixa de texto:

1No painel “Ajustes do texto”, clique no Alinhar texto (ícone com linhas) e escolha a opção que deseja:

• Esquerda - alinha o texto à esquerda dentro do espaço da caixa;
• Centralizado - centraliza o texto dentro do espaço da caixa;
• Direita - alinha o texto à direita dentro da caixa;
• Justificado - deixa o texto alinhado dos dois lados (esquerdo e direito)

2No ícone com setas para cima e para baixo para controlar o espaço interno entre o texto e as bordas da caixa:

3Em seguida, aplique formatações no texto:

• Negrito (B): Deixa o texto mais forte e destacado.
• Itálico (I): Inclina o texto para a direita, dando ênfase ou estilo ao conteúdo.

Estilo do texto    

Permite escolher o tipo de estrutura visual do texto, ou seja, como o texto vai aparecer no template ou página.

1No painel de edição acima da caixa do texto, clique em Estilo

2Em seguida, clique na opção que deseja:

• Título - deixa o texto maior e em destaque - Use para títulos principais.
• Subtítulo - um pouco menor que o título - Use para subtítulos ou seções.
• Parágrafo: formata como um texto corrido - Ideal para frases ou descrições.
• Normal - texto padrão, simples.
• Lista - organizar o conteúdo com marcadores (em tópicos)

Cor do Fundo     

Permite aplicar uma cor de fundo por trás da letra - Como se fosse um marca-texto.

1No painel de edição acima da caixa do texto, clique no ícone com a letra "A" sobre um fundo quadriculado (Cor do Fundo)

2Em seguida, você pode adicionar a cor de várias formas:

• C) Círculo colorido - definir uma cor personalizada, através de:
  • Seletor de cor manual - você arrasta o botão até chegar no tom que deseja
  • Com código HEX - código hexadecimal
  • Cores padrão

• D) Nenhuma cor atrás do texto - clique no círculo branco com um risco vermelho. Isso fará com que o texto fique da mesma cor que o fundo da página ou do seu modelo:

Auto-ajuste     

Ajusta automaticamente o tamanho da caixa de texto para se adequar ao conteúdo ou vice-versa.

No painel de edição, acima da caixa do texto, clique em Auto-ajuste

Adicionar efeitos     

Para alterar as cores e aspecto do texto:

1No painel “Ajustes do texto”, em “Adicionar efeitos”, clique no efeito que deseja:

• A) Remover efeito - remove qualquer efeito visual aplicado anteriormente ao texto, como sombra ou desfoque, deixando o texto limpo:

• B) Desfocado - aplica um desfoque ao texto:

• C) Sombra - adiciona uma sombra ao redor do texto, criando um efeito de profundidade que ajuda o texto a se destacar sobre o fundo:

Excluir     

Para remover o texto do template:

1No template para selecionar o conteúdo, clique na caixa de texto 

2No painel “Ajuste do texto”, no canto superior direito, clique no ícone de lixeira