Esercitazione: Aggiungere un CSS personalizzato al sito

L'area di lavoro Stile ti consente di modificare alcune caratteristiche del tema del tuo sito, ad esempio i caratteri e i colori. In alternativa puoi applicare temi CSS personalizzati creati da te.

Puoi creare il tuo tema personale definendo un file CSS personalizzato e caricandolo nel tuo sito.

Questa esercitazione illustra come:

Prerequisiti

• Una sottoscrizione o versione di valutazione di Power Pages. Scarica una versione di valutazione di Power Pages qui.
• Un sito di Power Pages creato. Crea un sito di Power Pages.
• Un file tema personalizzato creato utilizzando il tuo editor CSS preferito.

Aggiunta di un file CSS personalizzato al sito

Il seguente video mostra come applicare il codice personalizzato CSS al tuo sito.

In questo esempio, si aggiungeranno alcuni file CSS personalizzati che permetteranno di aggiungere effetti ombra ai pulsanti sul sito Web. Puoi usare il tuo file CSS personalizzato o utilizzare il campione fornito.

1. Per creare un campione, nel tuo editor CSS preferito, crea il file tema personalizzato button_shadow.css e salva.

   .button1 {
   box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
    }
   

2. Vai a Power Pages.

3. Seleziona il sito a cui vuoi aggiungere il tema personalizzato e scegli Modifica.

4. Apri l'area di lavoro Stile.

5. Seleziona un tema e seleziona ... (puntini di sospensione), quindi seleziona Gestisci CSS.

   

6. Nella sezione Personalizza CSS seleziona Carica e scegli il tuo file CSS personalizzato. Puoi caricare un solo file CSS alla volta, ma è possibile caricare più file. Se più file CSS aggiornano lo stesso attributo, verranno applicati gli attributi nel file CSS il file in fondo all'elenco. Puoi regolare l'ordine dei tuoi file CSS personalizzati.

7. Dovresti vedere immediatamente i risultati degli aggiornamenti sul canvas delle pagine.

   

8. Puoi disabilitare o spostare l'ordine dei tuoi file CSS personalizzati. Il file elencato per ultimo avrà la precedenza sugli altri.

   

9. È possibile modificare un file CSS direttamente selezionando i puntini di sospensione (...), quindi Modifica codice. Questo passaggio aprirà l'editor Visual Code per il Web. Seleziona CTRL-S per salvare le modifiche.

   

10. Seleziona Sincronizza in studio di progettazione per aggiornare il CSS e visualizzare le modifiche.

11. Seleziona Anteprima per visualizzare il tema personalizzato nel tuo sito.