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

Aggiungere codice personalizzato

Inizia accedendo al Manager Infomaniak con le tue credenziali (l'utente deve disporre dei diritti necessari sul prodotto in questione):

1. Clicca qui per accedere alla gestione degli hosting e dei siti (filtrata per visualizzare solo Site Creator).
   • Se non viene visualizzato nulla, potresti non trovarti nell'Organizzazione a cui è associato il tuo sito (❓: guida).
2. Fare clic sul nome del Site Creator desiderato:
   
3. Fare clic sul pulsante per modificare il sito:
   

Una volta all'interno di Site Creator:

1. Fare clic su Design nel menu laterale sinistro.
2. Fare clic su Altre impostazioni.
3. Fare clic su Codice personalizzato in basso:
   
4. Inserisci codice HTML, JavaScript (con i relativi tag script) o CSS personalizzato (con i relativi tag style); consulta le informazioni riportate di seguito per alcuni esempi.
5. Salva le modifiche in fondo alla pagina.

Metadati in HEAD e BODY

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

1. Fare clic su Impostazioni nel menu laterale sinistro.
2. Fare clic su SEO e metadati nella sezione Configurazione del sito:
   
3. Scorri fino alla sezione Codice personalizzato.
4. Scegli se aggiungere il codice sotto la scheda HEAD o sotto la scheda BODY.
5. Salva le modifiche in fondo alla pagina:
   

Esempi di personalizzazione CSS

Questi esempi consentono di iniziare a personalizzare in modo avanzato le pagine del sito. Tuttavia, esiste il rischio che, a seconda delle modifiche apportate, non sia più possibile accedere all'editor, il che vi obbligherebbe a ricominciare da zero.

Personalizzare lo sfondo del sito

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

1. Recatevi al punto 3, visibile nella prima immagine in alto in questa guida.
2. Inserite il codice <style> per indicare che desiderate 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 mantenere l'immagine di sfondo fissa anche quando l'utente 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 nel 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 si desidera modificare i blocchi della pagina e, in particolare, i collegamenti ("a") e il "{" per aprire lo spazio in cui 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 terminare.
5. } per chiudere l'area di inserimento aperta in precedenza.
6. </style> per indicare che il codice termina qui.

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