Modificare il codice (sorgente / CSS) su Site Creator

Questa guida spiega come personalizzare il codice sorgente, modificare il CSS e modificare la parte HEAD o BODY di un sito web realizzato con Site Creator di Infomaniak.

Aggiungere codice personalizzato

Per accedere a Site Creator:

1. Accedi al Manager di Infomaniak (manager.infomaniak.com) da un browser web come Brave o Edge
2. Fai clic sull'icona nell'angolo in alto a destra dell'interfaccia (o naviga attraverso il menu laterale sinistro, ad esempio)
3. Scegli Hosting (universo Web & Dominio)
4. Fai clic sul nome dell'oggetto in questione nella tabella visualizzata
5. Fai clic su Site Creator nel menu laterale sinistro
6. Fai clic su Personalizza il mio sito

Una volta in Site Creator:

1. Fai clic su Design nel menu laterale sinistro
   
2. Fai clic su Altri impostazioni
3. Fai clic su Codice personalizzato in basso
   
4. Inserisci del codice HTML, JavaScript (con i suoi tag script) o CSS personalizzato (con i suoi tag style) - leggi di seguito alcuni esempi
5. Salva le modifiche nella parte inferiore della pagina

Metadati in HEAD e BODY

Per aggiungere del codice JavaScript o qualsiasi altro codice nella parte HEAD o BODY del codice sorgente del tuo sito web:

1. Fai clic su Impostazioni nel menu laterale sinistro
2. Fai clic su SEO & Metadati nella sezione Configurazione del sito web
3. Scorri fino a Codice personalizzato
4. Scegli di aggiungere sotto le schede HEAD o sotto BODY
5. Salva le modifiche nella parte inferiore della pagina
   

Esempi di personalizzazione CSS

Questi esempi ti consentono di iniziare con la personalizzazione avanzata delle pagine del sito web. Tuttavia, c'è il rischio, a seconda delle modifiche apportate, di non poter più accedere allo stesso editor, il che ti costringerebbe a ricominciare da capo.

Personalizza lo sfondo del sito web

Per impostare l'immagine di tua scelta (da caricare nella libreria dei file) come sfondo della pagina e personalizzarne la visualizzazione:

1. Vai al punto 3 visibile nella prima immagine in alto in questa guida
2. Inserisci il codice <style> per indicare che desideri modificare il CSS
3. Quindi, body { per indicare che desideri modificare il corpo della pagina e "{" per aprire lo spazio per inserire i comandi
4. Quindi, background-image: url("../data/files/fond01.jpg"); con il percorso e il nome dell'immagine caricata nella libreria, senza dimenticare il punto e virgola per poter inserire il comando successivo
5. background-repeat: repeat; per ripetere l'immagine inserita
6. background-attachment: fixed; affinché l'immagine di sfondo rimanga fissa anche se il visitatore scorre la pagina su e giù per leggerne il contenuto
7. } per chiudere lo spazio per l'inserimento aperto in precedenza
8. </style> per indicare che il codice termina qui

Separare le lettere di tutti i link del sito

Per separare (molto) le lettere tra loro nelle parole collegabili:

1. Vai al punto 3 visibile nella prima immagine in alto in questa guida
2. Inserisci il codice (se non è già presente) <style> per indicare che desideri modificare il CSS
3. Quindi, .container div a { per indicare che desideri modificare i blocchi della pagina e, in particolare, i link ("a") e il "{" per aprire lo spazio per inserire i comandi
4. Quindi, letter-spacing:1em;, riducendo il valore (ad esempio, 0.9em) senza dimenticare il punto e virgola per poter inserire il comando successivo o per terminare
5. } per chiudere lo spazio per l'inserimento aperto in precedenza
6. </style> per indicare che il codice termina qui

Consulta altri esempi di codice CSS da inserire nel tuo sito web.