Questa guida spiega come personalizzare il codice sorgente, modificare il CSS o la sezione 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 tramite il Manager Infomaniak (avete 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. Fare clic su Design nel menu laterale sinistro.
2. Fare clic su Altre impostazioni.
3. Fare clic su Codice personalizzato in fondo:
   
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 parte 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 web:
   
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 web. 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 web

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 doppie "{" 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 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.