Compatibilità:

WebSite X5 Evo e Pro

Nella pagina principale del Blog così come nella galleria creata attraverso l'Oggetto Elenco Prodotti, gli articoli vengono presentati attraverso delle card. Il compito di queste card, generate in automatico da WebSite X5, è di attrarre l'attenzione dei visitatori e di invitarli a leggere gli articoli completi.


In questa guida vedremo, dunque, quando vengono utilizzate, come vengono generate e com'è possibile intervenire per personalizzarne composizione e stile grafico.


Card degli articoli: cosa sono

Una card non è altro che un box in cui vengono riassunte alcune informazioni basilari su un articolo e, nella maggior parte dei casi, reso disponibile il pulsante per andare alla pagina con l'articolo completo. Sono l'equivalente di un biglietto da visita e la Home Page del Blog può contenerne molte.



Servono per introdurre sinteticamente gli articoli agli utenti che, in questo modo, possono iniziare a farsi un'idea di ciò che può interessare loro e poi decidere quali contenuti leggere.


Quando vengono create

Le card degli articoli vengono create in automatico dal software nel caso in cui si usi:

  • il Blog, come abbiamo detto la Home Page del Blog propone un sommario degli articoli e ogni articolo è presentato attraverso una card;
  • l'Oggetto Elenco Articoli, utile per presentare in una pagina del sito solo un gruppo di articoli selezionato tra tutti quelli previsti per il Blog.     

In tutti questi casi, gli articoli individuati vengono mostrati attraverso apposite card.


Come sono composte

Le card sono composte dai seguenti elementi: 

  • Sfondo: è semplicemente uno sfondo colorato o trasparente a cui è possibile disegnare un bordo.
  • Copertina: è l'immagine inserita come Copertina dell'articolo.
  • Contenuti: è la parte testuale della card. Comprende tutti gli elementi che seguono:
    • Titolo
    • Descrizione
    • Dettagli
    • Pulsante 'Leggi'


Naturalmente puoi intervenire sulla composizione delle card e decidere che uno o più di questi elementi non vengano inseriti:

  • Apri la finestra delle impostazioni (lo puoi fare selezionando l'Oggetto Elenco Articoli inserito o la pagina 'Blog: Pagina principale' e cliccando sul pulsante Modifica) e, se necessario, vai nella sezione Impostazioni.
  • Utilizza il menu a discesa in Stile card per selezionare l'elemento sul quale vuoi agire.
  • Clicca per mettere o togliere il segno di spunta accanto all'opzione Visibile per fare in modo che l'elemento in questione sia presente o meno all'interno delle card. 
  • Nel caso specifico dei Dettagli, puoi decidere quali informazioni rendere disponibili nelle card in maniera puntuale. 


Quali informazioni riportano

Per creare le card WebSite X5 utilizza principalmente le informazioni inserite attraverso la finestra Impostazioni Articolo a cui si accede quando si aggiunge un nuovo articolo o se ne modifica uno già esistente (Passo 1 - Impostazioni > Blog > Articoli). 


Ovviamente se un'informazione non viene specificata attraverso la finestra Impostazioni Articolo, non verrà inserita nella card.


Come possono essere personalizzate

Come abbiamo detto, le card vengono create in automatico da WebSite X5 utilizzando le informazioni inserite sugli articoli. Di default, l'aspetto delle card è determinato dal Modello che hai scelto per il sito ma puoi personalizzarlo. 

  • Apri la finestra delle impostazioni (lo puoi fare selezionando l'Oggetto Elenco Articoli inserito o la pagina 'Blog: Pagina principale' e cliccando sul pulsante Modifica) e, se necessario, vai nella sezione Impostazioni.
  • Inizia con il definire come vuoi che le card siano disposte all'interno della pagina. Usa l'opzione Disposizione per scegliere tra:
    • 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 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.
    • SlideShow: (disponibile solo per l'Oggetto Elenco Articoli) le card hanno uguale altezza e sono mostrate su una sola riga all’interno di uno slideshow, con tanto di pulsanti di navigazione.
  • A questo punto puoi decidere come devono essere impaginati i diversi elementi all'interno delle card. Usa l'opzione Contenuti per 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. 
  • A livello generale puoi anche definire il numero di Card per riga e il numero massimo di Righe per pagina. Se il numero degli articoli previsto è superiore, verrà introdotta la paginazione.
  • Se vuoi, modifica l'Altezza delle card. Considera che in base a questo parametro verranno ridimensionate le immagini di copertina degli articoli. Per quanto riguarda i testi, invece, se risulteranno troppo lunghi verrà visualizzata la barra di scorrimento.
  • Per perfezionare l'aspetto della pagina, puoi ancora intervenire sui Margini tra le card.
  • Infine puoi occuparti degli elementi che compongono le card: usa il menu in Stile card per selezionare l'elemento su cui vuoi agire. In base all'elemento selezionato potrai usare opzioni diverse, come colore, font, margini ed effetti.