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

• Accedere a Site Creator:
  • Clicca qui per accedere alla gestione del tuo prodotto su Infomaniak Manager (hai bisogno di aiuto?).
  • Clicca direttamente sul nome assegnato al Site Creator interessato.
  • Clicca sul pulsante Modifica il mio sito per avviare l'editor:
    

Aggiungere codice personalizzato

Una volta in Site Creator:

1. Clicca su Design nel menu laterale sinistro.
2. Clicca su Altre impostazioni.
3. Clicca su Codice personalizzato in basso:
   
4. Inserisci codice HTML, JavaScript (con i suoi tag script) o CSS personalizzato (con i suoi tag style) - leggi sotto per alcuni esempi.
5. Salva le modifiche in fondo alla pagina.

Metadati in HEAD & BODY

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

1. Clicca su Impostazioni nel menu laterale sinistro.
2. Clicca 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. Salvate 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 sia più possibile accedere all'editor stesso, il che vi obbligherà a ricominciare da capo.

Personalizzare lo sfondo del sito Web

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

1. Andate al punto 3 visibile nella prima immagine in alto di questa guida.
2. Inserite il codice <style> per indicare che desiderate modificare il codice CSS,
3. poi body { per indicare che desiderate modificare il corpo della pagina e il "{" per aprire lo spazio che permette di inserire i comandi,
4. poi background-image: url("../data/files/fond01.jpg"); con il percorso & nome esatto dell'immagine caricata nella biblioteca 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 link del sito

Per aumentare (molto) lo spazio tra le lettere delle parole cliccabili (link):

1. Andate al punto 3 visibile nella prima immagine in alto di questa guida.
2. Inserite il codice (se non ancora presente) <style> per indicare che desiderate 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; diminuendo 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.

Prendete visione di questi altri esempi di codice CSS da inserire nel vostro sito.