Cosa sono i widget?

Per widget intendiamo tutti quegli elementi che possono essere composti contemporaneamente o in parte da testi, immagini, titoli e video. A differenza degli elementi di solo testo i widget permettono di realizzare delle pagine web in modo complesso e creativo, pur mantenendo una semplicità di realizzazione.

Widget card

I widget card sono degli elementi composti da titolo e testo di dimensioni predefinite, all'interno di una cornice che distingue la card da tutti gli altri testi.
Nel caso della CardTitleTextToAction il testo che vediamo sul bottone è richiamato tramite il tag textlink che è stato aggiunto in File/Configurazione del progetto (CTRL+W o cliccando configurazione del progetto) nella scheda variabili/body. Nel caso si volessero avere dei testi differenti per il bottone è sufficiente duplicare il widget CardTitleTextToAction con una numerazione progressiva e cambiare il nome al tag @@textlink@@, dopo di che creare un tag corrispondente nelle variabili e assegnare un nuovo testo.

Esempio: scrivere in una CardTitleTextToAction

@CardTitleTextToAction Titolo della card>esempio.link.html
Inserire qui il testo del paragrafo della card. All'interno della card non è possibile inserire altri elementi di testo come i Paragraph o i Title o altri widget, a meno che non si utilizzi il linguaggio html.
@End

Tipi di Card

CardTitleTextToAction

Questo è un esempio di Card call to Action che permette l'inserimento di un link con bottone

CardTitleTextCenter

Questo esempio di Widget Card viene utilizzato quando si desidera avere il titolo centrale

CardTitleTextSide

Questo esempio di Widget Card viene utilizzato quando si desidera avere il titolo a sinistra

Immagini con didascalia

All'interno del tema ci sono due modi per inserire immagini con didascalia: con collegamento ipertestuale ImageCaptionLink e senza collegamento ImageCaption.
Quando si utilizza il widget ImageCaptionLink è necessario associare nella sezione Variabili di progetto (menù File/Configurazione del progetto , sezione Variabili di progetto) al nome della variabile "link" l'indirizzo del collegamento ipertestuale al quale deve indirizzare il link.
Nel caso in cui ci siano più immagini con link ipertestuale è indispensabile duplicare il widget ImageCaptionLink, assegnando un nome progressivo univoco e modificando il nome della variabile al suo interno in modo univoco. Salvato il nuovo widget bisognerà aggiungere nella sezione Variabili di progetto il nome della nuova variabile e il relativo link.

Esempio: inserire un immagine con didascalia con il link

@ImageCaptionLink assets/images/immagine.jpg;alt immagine
didascalia immagine
@End

Tipi di Immagini

Tabelle

Sono presenti due tipi di tabelle nel tema Start: Table e TableColor.
Table è impostata per essere realizzata con la lettura facilitata, mentre TableColor è pensata per essere utilizzata con righe che abbiano colori personalizzati. La personalizzazione è richiamata con i seguenti parametri:
  • altBlue
  • altIndigo
  • altPurple
  • altPink
  • altRed
  • altOrange
  • altYellow
  • altGreen
  • altTeal
  • altCyan
  • altGray
  • altGray-dark
  • altWhite
Entrambi le tabelle hanno una grammatica comune ma sono distinte dalla dichiarazione iniziale, per quanto rigurada il tipo di tabella scelta, e la definizione del colore della riga personalizzato quando si utilizza TableColor.

Esempio: inserire una tabella di tipo Table

@Table
@Head
@Row|Colonna 1|Colonna 2|Colonna 3|Colonna4  Nella riga Row dell'Head si inseriscono i titoli delle colonne separate dal simbolo |
@EndHead
@Body
@Row |Valore1|Valore2|Valore3|Valore4  Nelle righe Row dentro al Body si inseriscono i valori di ogni colonna separati dal simbolo |
@Row |Valore1|Valore2|Valore3|Valore4
@Row |Valore1|Valore2|Valore3|Valore4
@Row |Valore1|Valore2|Valore3|Valore4
@Row |Valore1|Valore2|Valore3|Valore4
@Row |Valore1|Valore2|Valore3|Valore4
@EndBody
@End

Colonna 1 Colonna 2 Colonna 3 Colonna4
Valore1 Valore2 Valore3 Valore4
Valore1 Valore2 Valore3 Valore4
Valore1 Valore2 Valore3 Valore4
Valore1 Valore2 Valore3 Valore4
Valore1 Valore2 Valore3 Valore4
Valore1 Valore2 Valore3 Valore4

Esempio: inserire una tabella di tipo TableColor

@Table
@Head
@Row|Colonna 1|Colonna 2|Colonna 3|Colonna4  Nella riga Row dell'Head si inseriscono i titoli delle colonne separate dal simbolo |
@EndHead
@Body
@Row altOrange  |Valore1|Valore2|Valore3|Valore4  Nelle righe Row dentro al Body si inseriscono i valori di ogni colonna separati dal simbolo | preceduti dalla definizione del colore
@RowaltOrange  |Valore1|Valore2|Valore3|Valore4
@RowaltPurple  |Valore1|Valore2|Valore3|Valore4
@RowaltPurple  |Valore1|Valore2|Valore3|Valore4
@RowaltWhite  |Valore1|Valore2|Valore3|Valore4
@RowaltYellow  |Valore1|Valore2|Valore3|Valore4
@EndBody
@End

Colonna 1 Colonna 2 Colonna 3 Colonna4
valore1 Valore2 Valore3 Valore4
valore1 Valore2 Valore3 Valore4
valore1 Valore2 Valore3 Valore4
valore1 Valore2 Valore3 Valore4
valore1 Valore2 Valore3 Valore4
valore1 Valore2 Valore3 Valore4

Box di immagine e di scrittura

I box di immagine e di scrittura sono delle composizioni molto utili che comprendono il titolo, una immagine e il paragrafo di testo. La loro grammatica è identica per tutti i box e segue le stesse regole che sono usate per inserire i titoli le immagini e i paragrafi.
Qualsiasi sarà il box di immagine e di scrittura utilizzato la grammatica di inserimento sarà sempre la stessa, ad esclusione della dichiarazione iniziale che indicherà il tipo di box utilizzato.

Esempio: inserire il box di immagine e di scrittura TitleImageText

@TitleImageTextassets/images/immagine.jpg;alt immagine>Titolo da inserire qui
In questa sezione va scritto il testo che si vuole utilizzare nel box di immagine e di scrittura TitleImageText.
@End

Titolo da inserire qui

immagine di esempio

In questa sezione va scritto il testo che si vuole utilizzare nel box di immagine e di scrittura TitleImageText.

Altri tipi di box di immagine e di scrittura
immagine di esempio

TitleImageTextBoxLeft

Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.

immagine di esempio

TitleImageTextBoxRight

Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.

immagine di esempio

TitleImageTextCircleLeft

Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.

immagine di esempio

TitleImageTextCircleRight

Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.

TitleImageFloatRight

immagine di esempio

Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.
Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu. Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu. Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu. Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu. Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.

TitleImageFloatLeft

immagine di esempio

Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.
Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu. Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu. Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu. Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu. Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.

Box di scrittura

I box di scrittura si comportano come i box di immagine e di scrittura. Sono due box molto semplici composti da un titolo o cantrale o a sinistra e un paragrafo.

Esempio: inserire il box di scrittura TitleTextCenter

@TitleTextCenterTitolo da inserire qui
In questa sezione va scritto il testo che si vuole utilizzare nei box di scrittura TitleTextCenter e TitleTextLeft.
@End

I box di scrittura

TitleTextCenter

Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.

TitleTextLeft

Nulla placerat placerat pharetra. In ultrices rhoncus magna et maximus. Nam volutpat velit nulla, sit amet tempus orci gravida vel. In hac habitasse platea dictumst. Duis eros nisl, efficitur sed venenatis in, iaculis eu diam. Nunc vitae erat nisi. Curabitur ac enim viverra, malesuada massa placerat, scelerisque lacus. Praesent auctor malesuada elit, sit amet rhoncus ipsum tempor eu.