Se as definições do design não forem suficientes, pode adicionar o seu próprio CSS e HTML ao seu site. Consoante o que o código deve fazer, há quatro locais para ele. Todos estão disponíveis em todos os pacotes.
Onde colocar o seu código
- Folha de estilos própria para todo o site: Definições → Área do cabeçalho, secção Folha de estilos CSS própria adicional. As suas regras CSS aplicam-se a todas as páginas e também ao esquema para telemóvel.
- Código na área head: Definições → Área do cabeçalho, secção Código HTML próprio adicional (entre <head> e </head>). É o local para as tags
<style>e<link>, meta tags adicionais ou tipos de letra web. - HTML no início ou no fim de cada página: Definições → Geral, secção Todo o site, campos Início de cada página e Final de cada página. Adequado para códigos de contadores e fragmentos semelhantes que têm de aparecer em todas as páginas.
- Código numa única página: no editor de conteúdo, através de Adicionar bloco → Especial → HTML incorporado, por exemplo para um mapa, um widget ou o código de incorporação de um vídeo. O Editor HTML na barra de ferramentas permite ainda editar diretamente o HTML do conteúdo da página.
Adicionar a sua própria folha de estilos
- Escreva as suas regras CSS num editor de texto e guarde o ficheiro com a extensão
.css. - Carregue o ficheiro em Ficheiros → Carregar ficheiros (consulte Carregar ficheiros). Os ficheiros CSS pertencem à pasta dos ficheiros de código; a opção Seleção automática de pasta coloca-os lá.
- Abra Definições → Área do cabeçalho e escolha o ficheiro em Folha de estilos CSS própria adicional, no campo URL (do ficheiro .css):.
- Clique em Guardar e recarregue o seu site.
Se só precisar de algumas regras, pode em alternativa colocá-las no campo Código HTML em Código HTML próprio adicional (entre <head> e </head>), dentro de uma tag <style>...</style>.
Incorporar código numa página
- Abra a página em Páginas → Gerir páginas → Editar o conteúdo da página.
- Clique em Adicionar bloco (ou em Adicionar elemento depois num elemento existente), abra o separador Especial e escolha HTML incorporado.
- Cole o código e guarde a página.
Bom saber
- As suas alterações ficam ativas de imediato; não existe uma versão de teste separada do seu site.
- O CSS próprio também se aplica ao esquema para telemóvel. Evite larguras fixas e utilize
max-width: 100%para que os seus elementos caibam em ecrãs pequenos (consulte Sites adaptados a telemóveis). - Ficheiros HTML completos (
.htm,.html) só podem ser carregados com o pacote Premium. Para as noções básicas de HTML, consulte O que é HTML?.