Gantry 5 contiene tantissime utility presenti già nel componente. Tra questi ci sono un assortimento di Classi Utili che rendomo facile e rapidamente di impostare degli elementi e farli apparire sul sito come e quando si desidera.

Classi Utili Responsive

Queste classi sono utilizzate per nascondere e rendere visibili vari blocchi a seconda delle dimensioni della finestra del browser utilizzata per visualizzare la pagina. Questo rende possibile di creare un'esperienza unica, e ottimizzata per una varietà di dispositivi da mobile a desktop di grandi dimensioni.

È possibile impostare i punti di interruzione per queste classi nel pannello di amministrazione Styles. Basta navigare fino alla parte inferiore del pannello amministrativo e cercare la sezione Configuration Styles.


Ad esempio, supponiamo che abbiamo un blocco che vogliamo nasconderlo quando il sito viene visualizzato sullo smartphone. Per realizzare questo, dobbiamo andare nelle impostazioni del blocco di quel determinato blocco e inserire il testo hidden-phone nel campo CSS Classes.


Ma la cosa importante dell'esistenza di queste classi presenti in Gantry 5, e che non dobbiamo limitarci nel'utilizzo di queste soltanto nei blocchi.
Queste classi si possono utilizzare dapertutto nel nostro sito Gantry, anche nei contenuti.

Esempio pratico. {code lang:css showtitle:false} <span class="visible-desktop"><img src="/immagine-grande.png" /></span><span class="visible-phone"><img src="/immagine-piccola.png" /></span> {/code}Tradotto: L'immagine con il nome immagine-grande.png verrà visualizzata sui schermi grandi dal desktop in poi, invece sui smartphone verrà visualizzata un'altra immagine, più piccola e ottimizzata per smartphone, immagine chiamata immagine-piccola.png. L'unico limite di utilizzo di queste potenti classi e solo la nostra immaginazione.

Modifiche sui Padding e Margin

Questa serie di Classi Utili consente di regolare le impostazioni di padding e margin. Sono molto semplici, e li abbiamo scomposti nella tabella sottostante.

Variazioni Utili

Le variazioni sono un modo semplice per modificare la visualizzazione di un contenuto nel front end. Queste varioazioni sono accessibili direttamente tramite le impostazioni Block di una particella, posizione o voce di menu. Invece di aggiungere una classe CSS dall'amministratore, queste variazioni sono accessibili tramite un menu a discesa chiamato Variations.



Le variazioni fungono da semplici classi di preset, pronte per essere distribuite ovunque sia necessario. Di seguito è riportato un elenco delle variazioni disponibili di default con Gantry 5.