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 di Infomaniak.

Prerequisiti

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

Aggiungere codice personalizzato

Una volta all'interno di Site Creator:

1. Cliccare su Design nel menu laterale sinistro.
2. Cliccare su Altre impostazioni.
3. Cliccare su Codice personalizzato in basso:
   
4. Inserire codice HTML, JavaScript (con i relativi tag script) o CSS personalizzato (con i relativi tag style) - leggere di seguito per alcuni esempi.
5. Salvare 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 sito:

1. Cliccare su Impostazioni nel menu laterale sinistro.
2. Fare clic su SEO e metadati nella sezione Configurazione del sito web:
   
3. Scorrere verso il basso fino a Codice personalizzato.
4. Scegliere se aggiungere il codice nelle schede HEAD o BODY.
5. Salvare le modifiche in fondo alla pagina:
   

Esempi di personalizzazione CSS

Questi esempi consentono di iniziare la personalizzazione avanzata delle pagine del sito web. Tuttavia, esiste il rischio che, a seconda delle modifiche apportate, non si riesca più ad accedere all'editor, costringendo a ricominciare da zero.

Personalizzare lo sfondo del sito web

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

1. Andare al punto 3, visibile nella prima immagine in alto in questa guida.
2. Inserire il codice <style> per indicare che si desidera modificare il codice CSS,
3. quindi body { per indicare che si desidera modificare il corpo della pagina e le virgolette "{" per aprire lo spazio in cui inserire i comandi,
4. quindi background-image: url("../data/files/fond01.jpg"); con il percorso e il nome esatti 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 fare in modo che l'immagine di sfondo rimanga fissa anche se il visitatore scorre la pagina verso l'alto o verso il basso per leggere il contenuto.
7. } per chiudere lo spazio di inserimento aperto in precedenza.
8. </style> per indicare che il codice termina qui.

Aumentare lo spazio tra le lettere di tutti i link del sito

Per aumentare (notevolmente) lo spazio tra le lettere nelle parole cliccabili (link):

1. Recati 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 codice 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 in cui inserire i comandi,
4. quindi 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.

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