Este guia explica como personalizar o código fonte, modificar o CSS ou alterar a parte HEAD ou BODY de um site criado com o Site Creator da Infomaniak.

Pré-requisitos

• Aceder ao Site Creator:
  • Clique aqui para aceder à gestão do seu produto no Manager Infomaniak (precisa de ajuda?).
  • Clique diretamente no nome atribuído ao Site Creator em questão.
  • Clique no botão Editar o meu site para iniciar o editor:
    

Adicionar código personalizado

Depois de acessar o Site Creator:

1. Clique em Design no menu lateral esquerdo.
2. Clique em Mais configurações.
3. Clique em Código personalizado na parte inferior:
   
4. Insira código HTML, JavaScript (com suas tags script) ou CSS personalizado (com suas tags style) – veja abaixo alguns exemplos.
5. Salve as alterações na parte inferior da página.

Metadados em HEAD e BODY

Para adicionar código JavaScript ou qualquer outro código na parte HEAD ou BODY do código-fonte do seu site:

1. Clique em Configurações no menu lateral esquerdo.
2. Clique em SEO e Metadados na seção Configuração do site:
   
3. Desça até à secção Código personalizado.
4. Escolha adicionar o código antes ou depois das secções HEAD ou BODY.
5. Salve as alterações na parte inferior da página:
   

Exemplos de personalização CSS

Estes exemplos permitem iniciar a personalização avançada das páginas do site. No entanto, existe o risco de, dependendo das modificações efetuadas, não conseguir aceder ao editor, o que o obrigará a começar tudo de novo.

Personalizar o fundo da página do site

Para definir a imagem de sua preferência (que deve ser carregada na biblioteca de arquivos) como fundo da página e personalizar sua exibição:

1. Vá para o ponto 3, visível na primeira imagem no topo deste guia.
2. Insira o código <style> para indicar que deseja modificar o código CSS.
3. em seguida, body { para indicar que você deseja modificar o corpo da página e as "{" para abrir o espaço onde as instruções podem ser inseridas,
4. em seguida, background-image: url("../data/files/fond01.jpg"); com o caminho e o nome exatos da imagem carregada na biblioteca, sem esquecer o ponto e vírgula para poder inserir o comando seguinte.
5. background-repeat: repeat; para repetir a imagem inserida.
6. background-attachment: fixed; para que a imagem de fundo permaneça fixa, mesmo que o visitante role a página para baixo ou para cima para ler o conteúdo.
7. } para fechar o espaço de inserção aberto anteriormente.
8. </style> para indicar que o código termina aqui.

Aumentar o espaçamento entre as letras de todos os links do site

Para aumentar (consideravelmente) o espaçamento entre as letras nas palavras clicáveis (links):

1. Vá para o ponto 3, visível na primeira imagem no topo deste guia.
2. Insira o código (se ainda não estiver presente) <style> para indicar que deseja modificar o código CSS.
3. em seguida, .container div a { para indicar que você deseja modificar os blocos da página e, mais especificamente, os links ("a") e o "{" para abrir o espaço onde você pode inserir os comandos;
4. em seguida, letter-spacing:1em;, diminuindo o valor (0.9em, por exemplo), sem esquecer o ponto e vírgula para poder inserir o comando seguinte ou finalizar.
5. } para fechar o espaço de inserção aberto anteriormente.
6. </style> para indicar que o código termina aqui.

Consulte estes outros exemplos de código CSS para inserir no seu site.