Benvenuti alla Sezione 3 del Corso di Formazione di Livello Principiante sul Sito Web World.
Dopo aver completato questa sezione, sarai in grado di:
- modifica i caratteri tipografici generali visualizzati sul tuo sito web
- cambiare i caratteri su una pagina specifica del tuo sito web
- modifica i colori generali visualizzati sul tuo sito web
- cambiare i colori su una pagina specifica del tuo sito web
Modificare il tipo e la dimensione del carattere
È possibile modificare il tipo e la dimensione del carattere tramite l'opzione Design nel menu (per l'intero sito web) oppure su ciascuna pagina (per le singole pagine). Iniziamo concentriamoci sul carattere per l'intero sito web. Dal menu Design, selezionare Colori e caratteri.
Scorri la pagina verso il basso finché non visualizzi le opzioni della casella Caratteri. Qui potrai modificare: Carattere generale, Carattere del titolo, Dimensione del carattere e Interlinea.
Per selezionare un nuovo carattere, fai clic sul pulsante blu "Seleziona carattere". In questo esempio, modificheremo il carattere principale (generale) e la dimensione del carattere, selezionando Arial, Helvetica, URW Gothic L, sans-serif e la dimensione 16px.
Vedrai anche una casella intitolata Caratteri personalizzati (inclusi meta). È qui che puoi incollare il codice specifico da Google Fonts, cosa che faremo per il titolo del carattere. Per fare ciò, apri una nuova scheda del browser, visita la Google Fonts Sul sito web, cerca il carattere Merriweather, selezionalo e il sito web di Google Fonts ti mostrerà qualcosa di simile a questo:
Il codice presente sotto Standard @ Import deve essere copiato e incollato nella casella Caratteri personalizzati. Fare clic su Modifica nella casella Caratteri personalizzati, quindi incollare il codice sotto il codice esistente in questo modo:
Fai clic sul pulsante Salva modifiche e poi chiudi l'editor. Successivamente, copia il testo per la famiglia di caratteri e incollalo nella casella Carattere (Intestazioni), come nell'immagine sottostante, e premi Pubblica per salvare il lavoro svolto finora.
Modificare il carattere di una pagina specifica di un sito web
Apri la pagina dei Termini e Condizioni, perché è qui che modificheremo il tipo e la dimensione del carattere solo per questa pagina.
Innanzitutto, evidenzia la sottosezione "Politica di reso" e poi fai clic sulla freccia a discesa accanto alla casella Famiglia di caratteri nella barra degli strumenti di modifica. Tieni presente che l'aspetto sarà diverso se utilizzi un editor diverso da quello che stiamo usando attualmente, TinyMCE3510 (nell'angolo in alto a destra puoi vedere il nome dell'editor corrente e passare a una nuova modalità di modifica).
Seleziona il carattere Comic Sans MS e solo il testo evidenziato cambierà in questo carattere, mentre il resto della pagina rimarrà invariato. Evidenzia nuovamente il testo "Politica di reso" e questa volta fai clic sulla freccia a discesa accanto a Dimensione carattere e seleziona l'opzione 24pt. Noterai anche che questo titolo era di default un H3 o Titolo 3, che va bene per questa pagina. La tua pagina Termini e condizioni ora appare così (vedi la freccia rossa - dove il sottotitolo è più grande e di un carattere diverso):
Modificare i colori generali del tuo sito web
La modifica dei colori generali dell'intero sito web si effettua tramite la scheda Design, selezionando l'opzione Colori e caratteri. Nella pagina Opzioni di design, sarà possibile modificare i colori di diverse aree del sito.
Ai colori viene assegnato un codice esadecimale o un numero, che li rende più specifici rispetto a una semplice denominazione generica come "blu scuro". Puoi inserire il codice esadecimale nella casella accanto all'elemento di cui desideri modificare il colore e poi cliccare in un'altra casella per salvarlo. In alternativa, puoi cliccare sul pulsante "Seleziona colore", scegliere manualmente un colore dalla procedura guidata e infine cliccare sul pulsante "Usa colore".
IMPORTANTE: annota il codice esadecimale di ogni colore scelto in un luogo sicuro, come un'agenda o un file sul tuo dispositivo. Questo ti sarà utile qualora dovessi modificare il design del tuo sito web. (come nella Sezione 1 del corso di livello intermedio).
Ecco i colori che abbiamo scelto di utilizzare:
Salva il tuo lavoro facendo clic sui pulsanti Salva modifiche e poi su Pubblica.
Modificare il colore del testo nelle singole pagine web
Apri nuovamente la pagina dei Termini e Condizioni. Noterai che il colore dell'intestazione è stato modificato in base al colore che hai scelto nelle Opzioni di progettazione. Questa modifica è stata applicata a tutto il sito.
È possibile cambiare il colore del testo su una singola pagina, ed è proprio quello che faremo ora. Selezionate l'intestazione "Politica di reso" e poi fate clic sul menu a tendina accanto all'icona "Colore del testo". Si aprirà un elenco di colori predefiniti tra cui scegliere, oltre alla possibilità di selezionarne altri facendo clic sull'opzione "Altri colori".
Per questo esempio, selezioneremo l'opzione "Altri colori", quindi inseriremo il codice esadecimale #0628f8 nella casella del colore e infine faremo clic sul pulsante "Applica". L'intestazione cambierà colore e apparirà così:
Fai clic sui pulsanti Salva modifiche e poi su Pubblica per salvare il lavoro svolto finora.
Congratulazioni, hai appena completato la Sezione 3 del corso per principianti. Ora dovrai completare una valutazione che metterà in pratica le competenze acquisite nelle Sezioni 1, 2 e 3 di questo corso, intitolata Valutazione Uno. Il superamento di questa valutazione è obbligatorio per ottenere la certificazione e la valutazione verrà effettuata da un membro del nostro team di supporto di Website World.
