Como editar o fundo do template no HostGator Studio

Se você deseja personalizar o visual dos seus projetos no HostGator Studio, uma das ações importantes é a edição do fundo das páginas. O fundo pode ser alterado com cores, imagens, efeitos visuais, transparência, entre outros.

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 do “HostGator Studio”, escolha uma das opções:

3No painel de edição, à direita do template, há um menu com diversas opções. Confira abaixo como:

• Alterar cor do fundo da página
• Alterar imagem de fundo da página
• Ativar/desativar transparência ao fundo da página
• Ajustar página

Alterar cor do fundo da página     

1No editor, ao lado do template, clique no ícone de paleta de cores (Alterar cor do fundo da página)

2Na seção “Ajustes de página” escolha uma das formas para definir a cor:

• 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

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 fundo clique na caixa branca com linha vermelha:

3Ao escolher a cor, automaticamente é adicionada ao fundo:

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 página, clique na seta para expandir ou dentro do template sobre o template:

Alterar imagem de fundo da página     

Caso deseje inserir uma imagem como plano de fundo, confira como fazer:

1No editor, ao lado do template, clique no ícone de imagem (Alterar imagem de fundo da página):  

2Na seção “Configurações de fundo da página”, clique em imagens e selecione a que deseja - Se necessário, confira como adicionar uma imagem da plataforma ou própria

3Em "posição”, selecione a colocação da imagem no fundo:

• Topo Esquerdo - a imagem encosta na margem esquerda;
• Topo Direito - a imagem encosta na margem direita;
• Topo Centro - a imagem fica centralizada na vertical do template;
• Centro Esquerdo - a imagem no meio, mas encostada no lado esquerdo do espaço;
• Centro Direito - a imagem no meio, mas encostada no lado direito do espaço;
• Centro - a imagem exatamente no meio;
• Rodapé Esquerdo - a imagem no canto inferior esquerdo do espaço;
• Rodapé Direito - a imagem no canto inferior direito do espaço;
• Rodapé Centro - a imagem no centro da parte de baixo do espaço.

Caso deseje deletar a imagem adicionada no fundo, clique em Remover imagem:

4Na seção “Adicionar efeitos”, aplique o que deseja:

• A) Remover efeitos - Apaga qualquer efeito visual (como filtro ou duotone) que tenha sido aplicado anteriormente ao elemento);

• B) Duotone - Aplica duas cores diferentes à imagem. Escolha a combinação que melhor se ajusta ao seu estilo;

• C) Filtros - Ajustam o visual da imagem com efeitos prontos, como realce de cores, preto e branco, entre outros:

5Na seção “Transparência da imagem” defina o quanto a imagem é visível no fundo, clique no botão branco e arraste e solte - Valores mais baixos tornam a imagem mais transparente.

Ativar/desativar transparência ao fundo da página     

Deixe o fundo mais transparente ou sólido:

1No editor, ao lado do template, clique no ícone de grade:

2Em seguida, escolha o que deseja: 

• A) Fundo transparente - clique uma vez sobre o ícone:

• Fundo sólido - clique duas vezes sobre o ícone:

Confira como ajustar o tamanho da página do template