Attraverso le opzioni proposte in questa sezione è possibile definire l'aspetto grafico della Pagina Principale, ovvero della pagina che fa da Home Page del Blog e che presenta un sommario degli ultimi Articoli pubblicati, ciascuno riassunto attraverso un'apposita Scheda.
La Scheda di un Articolo è composta dai seguenti elementi, quasi tutti definiti attraverso gli appositi campi della sezione Contenuti:
| ▪ | Descrizione: viene ripresa la Descrizione breve e, se questa non è disponibile, il Contenuto troncato; |
| ▪ | Dettagli: comprende la Categoria, l'Autore e la Data; |
| ▪ | Pulsante: ha attivo il link alla pagina con l'Articolo completo. |
Ovviamente, nel caso in cui elementi come la Copertina, l'Autore o la Data non siano stati specificati, queste informazioni non saranno inserite nella Scheda.
Attraverso le opzioni disponibile nella sezione Impostazioni Schede è dunque possibile definire come queste devono essere composte e impaginate. Per prima cosa, occorre impostare il tipo di visualizzazione scegliendo tra:
|
Copertina a sinistra, titolo e contenuti a destra
|
|
Titolo e contenuti a sinistra, copertina a destra
|
|
Copertina in alto, titolo e contenuti in basso
|
|
Titolo in alto, copertina e contenuti in basso
|
Impostato il tipo di visualizzazione, è poi possibile agire sulle seguenti opzioni:
| ▪ | Schede per riga: definisce quante Schede possono essere affiancate per ciascuna riga, da un minimo di 1 a un massimo di 6. |
| ▪ | Schede visibili: imposta il numero massimo di Schede da visualizzare nella Pagina Principale del Blog. Se, per esempio, si decide di avere 10 Schede visibili, nella Home Page del Blog verranno visualizzate 10 Schede relative ai soli ultimi 10 Articoli pubblicati. |
| ▪ | Altezza schede: definisce il valore in pixel dell'altezza che deve essere assunta da ciascuna Scheda. |
| ▪ | Margine schede: imposta il valore in pixel della distanza che deve essere mantenuta tra le Schede. |
| ▪ | Dimensione copertina (%): imposta la larghezza dell'immagine di Copertina rispetto ai contenuti, nel caso sia posizionata a sinistra o a destra, o rispetto all'altezza della Scheda, nel caso sia posizionata in alto, sopra o sotto il Titolo. |
| ▪ | Margine copertina / Margine contenuti: impostano rispettivamente il valore in pixel per la distanza tra l'immagine di Copertina o il contenuto (Titolo e Descrizione) e i bordi della Scheda. |
Definiti questi parametri, è poi possibile impostare le proprietà grafiche dei diversi elementi che compongono le Schede degli Articoli. Selezionato quello su cui si vuole agire, nella sezione Elementi vengono proposte le opzioni disponibili:
| ▪ | Visibile: fa in modo che l'elemento selezionato sia visibile o meno all'interno della Scheda. Questa opzione non è disponibile per lo Sfondo e la Copertina. |
| ▪ | Tipo di Font: specifica il tipo di carattere, le dimensioni e lo Stile del testo per il Titolo, la Descrizione, i Dettagli e il Pulsante. Il menu a tendina propone: il comando per applicare il Font di default (definito dallo Stile dell'elemento Testo della Pagina nella finestra Stile dei Testi); la lista dei Safe Fonts, ovvero dei font presenti su tutti i dispositivi e per i quali, quindi, non è necessaria alcuna pubblicazione; tutti i Google Fonts e i Web Fonts aggiunti attraverso la finestra Aggiungi Web Font richiamata dal comando Altri tipi di carattere. |
| ▪ | Colore Testo: specifica il colore del testo per il Titolo, la Descrizione, i Dettagli e il Pulsante. Selezionando l'elemento Dettagli, il colore definito per il Testo viene utilizzato anche per la linea posta fra Descrizione e Categoria, Autore e Data. |
| ▪ | Colore Sfondo: specifica il colore dello Sfondo della Scheda e del Pulsante. |
| ▪ | Bordo: specifica lo spessore, il colore e il fattore di smusso per gli angoli dei bordi dello Sfondo della Scheda e del Pulsante. |
| ▪ | Ombra: applica un'ombra allo Sfondo della Scheda, definendone il colore, la posizione, la diffusione e la dimensione. |
| ▪ | Adatta dimensioni: se attiva, fa in modo che l'immagine di Copertina occupi tutto lo spazio a disposizione all'interno della Scheda, sia in larghezza che in altezza. Nel caso in cui le proporzioni non corrispondano, l'immagine viene centrata e tagliata. Se non attiva, invece, l'immagine di Copertina viene adattata o alla larghezza o all'altezza dello spazio a disposizione. |
| ▪ | Effetto su passaggio: applica all'immagine di Copertina un effetto su passaggio del mouse. |
| ▪ | Mostra Categoria / Mostra Autore / Mostra Data: fanno in modo che all'interno della Scheda venga visualizzato la Categoria in cui è inserito l'Articolo, l'Autore e la Data di pubblicazione, informazioni impostate attraverso la finestra Impostazioni Articolo | Contenuti. |
| ▪ | Margini: imposta il valore in pixel per il margine tra la scritta e il bordo del Pulsante. |
All'interno della Pagina Principale del Blog, gli ultimi Articoli pubblicati possono essere distinti rispetto a quelli meno recenti. Per farlo è sufficiente utilizzare le opzioni disponibili nella sezione Articoli in evidenza:
| ▪ | Visualizzazione: definisce se e come gli ultimi Articoli pubblicati devono essere messi in evidenza rispetto a quelli meno recenti. È possibile scegliere fra le seguenti voci: |
| • | Nessun articolo in evidenza |
| • | Primi articoli in evidenza con una scheda: le Schede degli ultimi Articoli pubblicati, a differenza di tutte le altre, sono larghe quanto l'intera Pagina. |
| • | Primi articoli in evidenza con uno slideshow: le immagini di Copertina degli ultimi Articoli pubblicati compongono uno SlideShow inserito all'inizio della Home Page del Blog e largo quanto la Pagina. Su ciascuna immagine dello SlideShow è riportato il Titolo ed è inserito un link che punta alla Pagina con l'Articolo completo. Oltre ad essere presenti nello SlideShow, per ciascuno degli Articoli in evidenza viene anche visualizzata la Scheda di presentazione. |
| ▪ | Articoli in evidenza: specifica il numero degli ultimi Articoli pubblicati che devono essere messi in evidenza. |
| ▪ | Altezza schede: definisce l'altezza in pixel delle Schede degli Articoli in evidenza (per l'opzione Primi articoli in evidenza con una scheda) o dello SlideShow (per l'opzione Primi articoli in evidenza con uno slideshow). |
Best practice:
Approfondimenti:
