Documentazione Gantry 5 per Joomla!

Concetti fondamentali per iniziare con un template framework di nuova generazione.

Il Layout Manager fornisce diverse opzioni per l'impostazione dell'aspetto di un specifico Outline.
Layout Presets consente di passare rapidamente tra i vari layout preconfigurati. Questi layout sono presenti nel template Hydrogen e ognuno contiene un insieme specifico e diverso di sezioni.

Carica PresetCome impostazione predefinita ogni Outline è assegnato a un Layout Preset. Questa assegnazione può essere cambiata in ogni momento cliccando sul pulsante Load. Una volta cliccato, compare una finestra popup con 2 tab: Presets e Outlines.
Se si seleziona un Preset, il layout sarà sostituito con un un preset che viene fornito con il template Hydrogen. Pensate a un Preset come punto di partenza per il design, preset che contiene delle sezioni, posizioni e magari delle particelle già predisposte.
Questi preset possono essere semplici o complessi o possono contenere delle sidebar o no.
Carica Outlines
Selezionando un opzione presente nel tab Outlines, si realizza la copia delle impostazioni del outline selezionato caricandole nel outline in cui si sta lavorando. Questa è un modo veloce di avere un layout basato su un'altro Outline senza dover duplicarlo.
L'opzione Keep the current Particles while changing Outline ti dà la possibilità di mantenere le particelle attualmente configurate e caricare il nuovo preset con queste particelle mantenendo le loro impostazioni. Al contrario, se si desidera caricare il nuovo Outline con le sue particelle preconfigurate, allora si deve deselezionare quella casella.

Particles (Le Particelle)

Particelle Gantry
La sezione Particles che trova sulla parte sinistra nel Layout Manager, è il posto dove si trovano le posizioni, le particelle e i atom. La casella di ricerca è molto utile quando l'elenco diventa molto lungo e così vi permette di trovare più veloce quello che serve. Tutte queste particelle si possono posizionare nel posto desiderato sul layout semplicemente con drag and drop.
Tenete presente che le particelle inserite manteranno le impostazioni preconfigurate in panello Settings del outline attivo. Se si desidera però modificare qualcosa, si può fare un override modificado le impostazioni di ogni singola particella una volta trascinata sul layout.

Layout

Il layout è composto da diverse sezioni, ciascuna con le proprie impostazioni che consentono di personalizzare il comportamento e l'aspetto del sito.

Sections (Sezioni)

Layout Sezione
Gli elementi di base del layout sono le sezioni. Queste divisioni della pagina danno la possibilità di creare delle sezioni di contenuti, ciascuna contenente una o più griglie orizzontali su cui è possibile inserire dei blocchi, comprese le particelle, posizioni, e gli atomi.
Una sezione inizia con un titolo (es. Header) sul lato sinistro e 2 iconcine sul lato destro, un segno + (più) e una rotella.
Cliccando sul segno + (più) si aggiunge una griglia orizzontale nella sezione.
L'iconcina con l'immagine della rotellina significa Impostazioni, e cliccandoci sopra permette di modificare le impostazioni della sezione stessa.
Impostazioni Sezione
Il campo Layout permette di cambiare il layout soltanto della sezione in questione. I valori sono: Inherit (valore predefinito), Fullwidth (Boxed Content), Fullwidth (Flushed Content), Boxed, Remove Container. (Vedi le differenze nell'articolo Page Settings)
Il campo CSS Classes permette di assegnare una o più classe CSS personalizzate.
Il campo Tag Attributes permette di aggiungere dei attributi HTML.

Grids (Griglie)

Griglia
Le Griglie sono in pratica delle righe orizzontali dove si inseriscono dei blocchi. Su queste griglie si possono trascinare e inserire posizioni (o istanze delle posizioni esistenti) o particelle. Non si possono inserire i atom qui, questi sono spostati nella scheda Page Settings.
Spostamento griglia
Spostando il mouse sopra una griglia compaionio 2 iconcine. Sul lato sinistro compare un iconcina con delle righe orizzontali, funzione che permette di trascinare la griglia in una posizione superiore o inferiore nel caso in cui la sezione in questione contiene più di una griglia.
Sul lato destro invece compare un iconcina con 2 colonne. Cliccandoci sopra permette di impostare la stessa larghezza dei blocchi che sono presenti su quella riga.

Blocchi

Blocco
I blocchi sono assomigliati ai mattoni LEGO del Layout Manager.
Ad esempio, il logo può essere una particella Logo trascinata in un blocco su una griglia di una sezione specifica nel Layout Manager.
Dopo averlo inserito in una griglia, un blocco può essere ridimensionato (in larghezza) praticamente spostando il mouse tra 2 blocchi vicini, cliccando e trascinando verso sinistra o destra in base alla dimensione che si desidera. In questo modo si ridimensiona tutti e due blocchi vicini.

Impostazioni Blocchi

Impostazioni Particella
Per accedere alle impostazioni individuali di ogni blocco si deve cliccare sulla rotellina presente sulla destra di ogni particella. Effettuando delle modifiche in questa finestra si realizza override delle impostazioni della particella presenti nella scheda Settings.
Queste sono le impostazioni a livello di particella, impostazioni che esistono in ogni blocco. In questo modo si possono anche rinominare le particelle così come appaiono in Layout Manager e si possono configurare in base ai campi definiti nel file YAML della particella stessa.
Impostazioni Blocco
 Impostazione Descrizione
 CSS ID  Assegnare un attributo ID.
 CSS Classes  Inserire una o più classi CSS per dargli un aspetto unico.
 Variations  Cliccando su questo campo si apre una casella a discesa con delle variazioni da scegliere.
 Tag Attributes  Qui si possono inserire vari attributi HTML
 Fixed Size  Impostare la larghezza fissa del blocco prendendo il valore dal campo successivo Block Size
 Block Size  Larghezza del blocco in percentale

Undo vs. Redo

Un'altra funzionalità interesante e trascurata, che potrebbe fare comodo in certi casi, e quella di annulare (Undo) o ripristinare (Redo) le modifiche effettuate.
Annulla o Ripristina
Come si vede nell'immagine qui sopra, in Layout Manager compaiono due pulsanti Undo e Redo posizionati subito sotto il pulsante Save Layout. Questi hanno le funzionalità di Annulare e Ripristinare le modifiche affettuate sul Layout anche se queste modifiche sono state salvate più volte. Se non vengono fatte delle modifiche sul layout, i due pulsanti rimangono di colore grigio chiaro.