Modificare il codice (sorgente / CSS) su Site Creator

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

Prerequisiti

• Accedi a Site Creator:
  1. Clicca qui per accedere alla gestione del tuo prodotto su Manager Infomaniak (hai bisogno di aiuto?).
  2. Clicca direttamente sul nome attribuito al prodotto interessato.
  3. Clicca su Personalizza il mio sito:
     

Aggiungere codice personalizzato

Una volta in Site Creator:

1. Clicca su Design nel menu laterale sinistro.
2. Clicca su Altri parametri.
3. Clicca su Codice personalizzato in basso:
   
4. Inserisci codice HTML, JavaScript (con i suoi tag script) o CSS personalizzato (con i suoi tag stile) - leggere più in basso per alcuni esempi.
5. Salva le modifiche in fondo alla pagina.

Metadati in HEAD & BODY

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

1. Fai clic su Impostazioni nel menu laterale sinistro.
2. Fai clic su SEO & Metadati nella sezione Configurazione del sito web.
3. Scendete fino a Codice personalizzato.
4. Scegliete di aggiungere sotto le schede HEAD o sotto BODY.
5. Registra le modifiche in fondo alla pagina:
   

Esempi di personalizzazione CSS

Questi esempi permettono di iniziare la personalizzazione avanzata delle pagine del sito web. Tuttavia, esiste il rischio che, a seconda delle modifiche apportate, non si possa più accedere all'editor stesso, il che vi obbligherà a ricominciare da capo.

Personalizzare lo sfondo del sito web

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

1. Andate al punto 3 visibile nella prima immagine in alto di questa guida.
2. Inserisci il codice <style> per indicare che desideri modificare il codice CSS,
3. poi body { per indicare che si desidera modificare il corpo della pagina e il "{" per aprire lo spazio che consente di inserire i comandi,
4. poi background-image: url("../data/files/fond01.jpg"); con il percorso & il nome esatto 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; per far sì che l'immagine di sfondo rimanga fissa anche se il visitatore fa scorrere la pagina verso il basso o verso l'alto per leggere il contenuto.
7. } per chiudere lo spazio di inserimento aperto in precedenza.
8. </style> per indicare che il codice termina qui.

Spaziare le lettere di tutti i collegamenti del sito

Per allargare molto lo spazio tra le lettere nei collegamenti cliccabili:

1. Andate al punto 3 visibile nella prima immagine in alto di questa guida.
2. Inserisci il codice (se non ancora presente) <style> per indicare che desideri modificare il codice CSS,
3. poi .container div a { per indicare che si desidera modificare i blocchi della pagina e, più precisamente, i collegamenti ("a") e la "{" per aprire lo spazio che consente di inserire i comandi,
4. poi letter-spacing:1em; riducendo il valore (0.9em ad esempio) senza dimenticare il punto e virgola per poter inserire il comando successivo o terminare.
5. } per chiudere lo spazio di inserimento aperto in precedenza.
6. </style> per indicare che il codice termina qui.

Prendi visione di questi altri esempi di codice CSS da inserire nel tuo sito.