Finestra Blog: Pagina principale

Passo 3 - Mappa >

Finestra Blog: Pagina principale

Previous pageReturn to chapter overviewNext page

Attraverso le opzioni proposte in questa finestra, richiamata selezionando la Pagina Speciale "Blog: Pagina Principale" sulla Mappa e cliccando sul pulsante Modifica, è 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 Card.

Clicca per espandere/ridurre
Esempio di Card Articolo

La Card di un Articolo è composta dai seguenti elementi, quasi tutti definiti attraverso gli appositi campi della sezione Contenuti:

▪Sfondo;
▪Copertina;
▪Contenuti
▪Titolo;
▪Descrizione: viene ripresa la Descrizione breve e, se questa non è disponibile, il Contenuto troncato;
▪Dettagli: comprendono la Categoria, l'Autore, la Data e il Tempo di lettura;
▪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 Card.

Attraverso le opzioni disponibili nella sezione Impostazioni Card è dunque possibile definire come queste devono essere composte e impaginate. Per prima cosa, occorre definire la Disposizione delle Card all'interno della Pagina, scegliendo tra le seguenti opzioni:

Altezza fissa: le Card vengono disposte in una griglia. Dal momento che tutte le Card assumono la stessa altezza, la griglia risulta regolare e compatta.

Altezza variabile: le Card vengono sempre disposte in griglia ma l'altezza di ciascuna varia in funzione delle proporzioni dell'immagine usata come Copertina. Le Card, dunque, possono non occupare completamente le celle della griglia in cui sono inserite: per questo può rimanere dello spazio vuoto fra le Card. Questa disposizione è particolarmente indicata quando si decide di visualizzare un'unica Card per riga, oppure quando si prevede la visualizzazione su una sola riga divisa in più colonne.

Masonry: anche in questo caso l'altezza delle Card varia in funzione delle proporzioni dell'immagine di Copertina. La differenza rispetto alla disposizione precedente è che le Card non sono incasellate in una griglia regolare ma allineate su più righe e colonne senza lasciare spazi che compensano le dimensioni più ridotte di alcune di esse.

Definita la Disposizione è necessario decidere come devono essere impaginati i diversi Contenuti all'interno della Card. In questo caso è possibile scegliere 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

Copertina come sfondo

 

Fatte queste scelte, si può procedere agendo sulle seguenti opzioni:

▪Card per riga: definisce quante Card possono essere affiancate per ciascuna riga, da un minimo di 1 a un massimo di 6.
▪Righe per pagina: imposta il numero massimo di righe da visualizzare nella Pagina.
▪Altezza card: definisce il valore in pixel dell'altezza che deve essere assunta da ciascuna Card.
▪Margine card: imposta il valore in pixel della distanza che deve essere mantenuta tra le Card.

Definiti questi parametri, è poi possibile sfruttare le opzioni della sezione Stile Card per impostare le proprietà grafiche dei diversi elementi che compongono le Card degli Articoli. In base all'elemento selezionato attraverso l'apposito menu, vengono poi proposte opzioni diverse:

▪Colore Sfondo: specifica il colore dello Sfondo della Card e del Pulsante. La finestra Colore offre la possibilità di agire anche sull'opacità e di definire, quindi, quanto il colore scelto deve risultare trasparente o coprente. Poter agire sull'opacità serve soprattutto se si sceglie la disposizione "Copertina come sfondo": in questo caso, infatti i contenuti verranno sovrapposti all'immagine di copertina e potranno essere resi più leggibili inserendoli in un riquadro di cui è possibile, appunto, stabilire colore e opacità.
▪Bordo: specifica lo spessore, il colore, il fattore di smusso per gli angoli  e l'ombra dei bordi dello Sfondo della Card e del Pulsante.
▪Margini: impostano la distanza in pixel tra l'immagine di Copertina o il Contenuto e i bordi della Card, oppure tra la scritta e il bordo del Pulsante.
▪Adatta dimensioni: se attiva, fa in modo che l'immagine di Copertina occupi tutto lo spazio a disposizione all'interno della Card, 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.
▪Larghezza (%)/Altezza: definisono lo spazio occupato dai Contenuti rispetto alla Card. Nel caso i Contenuti siano posizionati a sinistra o a destra della Card, è possibile definire la larghezza in percentuale dell'area a loro dedicata. Se invece i Contenuti sono posizionati in alto o in basso o se la Copertina viene usata come sfondo, è possibile impostare l'altezza in pixel dell'area che occupano.
▪Allineamento: definisce se i Contenuti devono essere allineati a destra, a sinistra o al centro.
▪Visibile: fa in modo che l'elemento selezionato sia visibile o meno all'interno della Card. Questa opzione è disponibile per il Titolo, la Descrizione e il Pulsante.
▪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 (solo se in modalità Testo). 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 (solo se in modalità Testo). Selezionando l'elemento Dettagli, il colore definito per il Testo viene utilizzato anche per la linea posta fra Descrizione e Categoria, Autore, Data e Tempo di lettura.
▪Mostra Categoria / Mostra Autore / Mostra Data / Mostra tempo di lettura: se attivate, fanno in modo che all'interno della Card venga visualizzato la Categoria in cui è inserito l'Articolo, l'Autore, la Data di pubblicazione e il Tempo che si stima sia necessario per la lettura. Sono tutte informazioni impostate attraverso la finestra Impostazioni Articolo | Contenuti.
▪Modalità: determina se il Pulsante con il link all'Articolo completo deve essere inserito nella Card come Testo o come Immagine: in questo secondo caso viene richiesto di importare l'immagine che deve essere impiegata.  
▪Posizione: definisce se il Pulsante deve essere posizionato a destra, a sinistra o al centro rispetto allo spazio disponibile.

All'interno della Pagina Principale del Blog, è possibile decidere se visualizzare o meno dei blocchi laterali con gli strumenti di navigazione e se gli ultimi Articoli pubblicati devono essere distinti rispetto a quelli meno recenti. Per farlo è sufficiente utilizzare le opzioni disponibili nella sezione Opzioni:

▪Visualizza Blocchi laterali: se attiva, fa in modo che la barra con i Blocchi laterali venga proposta all'interno della Home Page del Blog.  
▪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 Card 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 Card di presentazione.
▪Articoli in evidenza: specifica il numero degli ultimi Articoli pubblicati che devono essere messi in evidenza.
▪Altezza card: definisce l'altezza in pixel delle Card 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).

 


Leggi le Guide:

-

Come si definisce il layout della Pagina principale del Blog?