Griglia di layout

La griglia di layout di Sitely è uno strumento eccellente per creare layout accattivanti per pagine o sezioni. Sebbene sia comunemente utilizzata per creare griglie di immagini per gallerie, può essere impiegata anche per altri contenuti come testo, pulsanti e riquadri. Infatti, Sitely offre un'opzione di griglia di layout separata specificamente per contenuti di immagini e video, chiamata Griglia Immagini/Video. Questo elemento può popolare automaticamente una griglia con contenuti attraverso un pannello di selezione dei contenuti dedicato. La griglia standard, di cui stiamo parlando qui, è un'opzione più flessibile per chi desidera aggiungere contenuti personalizzati alle celle della griglia. A parte queste differenze, entrambe le opzioni di griglia sono configurate in modo molto simile.

Inizi aggiungendo l'elemento alla tua area di lavoro. Quando viene aggiunto per la prima volta, conterrà la struttura predefinita di una riga e tre colonne - appare così:

Una volta che è sulla tua area di lavoro, puoi iniziare a stilizzarlo e ad aggiungere qualsiasi contenuto desideri. La configurazione della tua griglia avviene tramite il pannello Stile sulla destra dello schermo. Qui puoi vedere le impostazioni predefinite. La griglia ha tre elementi (chiamati celle). Ogni elemento è impostato a 300 x 300 pixel con uno spazio orizzontale e verticale impostato a 20 px. Modificando il numero della griglia, puoi aggiungere più celle alla griglia che appariranno sotto la prima riga di celle. Ad esempio, cambiando il numero di elementi da tre a sei, avrai due righe di celle che appariranno sullo schermo.

Tuttavia, puoi stilizzare ulteriormente la tua griglia selezionando ciascuna cella e dicendo a Sitely di cambiare la sua dimensione e forma. Ancora una volta, nel pannello di stile, vedrai un'opzione che indica a Sitely quante colonne e/o righe desideri che ciascuna cella occupi nella griglia. L'opzione appare così.

Ad esempio, se imposti la prima cella della tua griglia per estendersi su 2 colonne e 2 righe, la tua griglia apparirà così.

Se non vedi l'opzione Cella Griglia nel pannello di stile, è perché non hai selezionato una cella. Clicca su una cella per evidenziarla e l'opzione apparirà. Sai che la cella è selezionata nell'area di lavoro perché avrà delle maniglie perimetrali che sembrano piccole X.

Continua a lavorare su ciascuna cella a turno per regolare la loro estensione fino a ottenere la griglia come desideri. Ecco un esempio di una griglia semplice che potresti ottenere. Abbiamo aggiunto le estensioni delle colonne e delle righe così puoi vedere come è stata creata la griglia.

Ora la tua griglia può essere stilizzata utilizzando tutte le varie opzioni disponibili nel pannello di stile. Puoi applicare colore di riempimento, bordi e arrotondamenti. Una cosa da notare è che la Griglia di Layout stessa, così come le celle della griglia, sono riempite con colori standard a wireframe quando vengono aggiunte per la prima volta all'area di lavoro. Questi colori possono essere cambiati a tuo piacimento nel pannello di stile.

Adesso è il momento di aggiungere contenuti. Essenzialmente, puoi posizionare quasi qualsiasi elemento all'interno di una cella. Crea e stilizza semplicemente l'elemento sulla tua area di lavoro, e poi trascinalo sopra una delle celle per posizionarlo. Mentre trascini gli elementi sulla griglia, le celle si evidenzieranno per segnalare che sei in una zona di rilascio per quella cella. Basta rilasciare il pulsante del mouse e l'elemento si posizionerà nelle celle. Ecco come apparirà l'evidenziazione.

Se il tuo contenuto è più grande della cella, quando rilasci l'elemento verrà ritagliato in modo che si adatti ai confini della cella. Potrebbe essere necessario ridimensionare il contenuto per adattarlo meglio alla dimensione e alla forma della cella una volta che il contenuto è posizionato. Puoi farlo trascinando la maniglia di ridimensionamento degli elementi o, nel caso del testo, cambiando la dimensione del carattere nel pannello di stile.

Naturalmente, non sei limitato ad avere un singolo elemento in una cella. Se la tua cella è abbastanza grande, puoi posizionare un'immagine, del testo e possibilmente un pulsante tutti nella stessa cella, sta a te decidere, quindi sii creativo quanto vuoi.

Una cosa da notare riguardo le celle della griglia è che sono tutte stilizzate allo stesso modo. Ad esempio, se selezioni una cella e cambi il suo colore di sfondo, tutte le celle della griglia assumeranno quel colore. Questo è per garantire coerenza e simmetria nei tuoi design della griglia. Tuttavia, puoi dare alle tue celle sfondi di colori diversi includendo un riquadro come parte del contenuto. Ad esempio, se volessi che il riquadro di testo illustrato sopra avesse uno sfondo blu, verrebbe creato come parte del contenuto, poi raggruppato con il testo prima di essere posizionato in una cella - proprio così.

Una volta che il tuo contenuto è all'interno della cella, puoi regolare la dimensione dello sfondo e del testo in modo indipendente affinché si adatti meglio allo spazio disponibile.

Essere Creativi

Potresti chiederti come questa funzionalità di Sitely possa essere utilizzata al meglio nel moderno mondo delle comunicazioni visive - in particolare nel design web. Per rispondere a questa domanda, tutto ciò che dobbiamo fare è guardare alcune delle più recenti tendenze nel design delle pagine web - in particolare, i Design a Griglia Bento. Queste sono pagine web ispirate alla scatola per il pranzo giapponese Bento. Se non sei familiare con esse, appaiono così:

Il concetto è abbastanza semplice da afferrare. Ogni elemento del pasto è contenuto all'interno del proprio contenitore. Quando si tratta di design web, concetti simili entrano in gioco. Invece di articoli alimentari, una pagina web progettata in stile Bento ha una serie di celle, ognuna contenente un'idea o un messaggio singolo. È uno stile che è stato favorito principalmente da aziende tecnologiche, come Apple. Essenzialmente, l'intera pagina può essere rapidamente scansionata da un utente per avere un'idea di cosa tratta un prodotto o un servizio. Ogni idea è ben compartimentata. Passando il mouse sopra, o cliccando su un compartimento, spesso si ottiene più informazioni su quel particolare aspetto del prodotto o servizio. Questo concetto di "scansione rapida" è diventato essenziale nel mondo dei media digitali di oggi, in rapido movimento e, per lo più, impaziente. E così, è nata la tendenza del design a scatola Bento.

Ma da dove iniziare quando si tratta di progettare una pagina web per questo tipo di design? Bene, la prima cosa da ricordare è che hai bisogno di molta flessibilità nel design della tua griglia per massimizzare il potenziale del concetto di design. Quindi, invece di guardare griglie a 3 colonne, come illustrato sopra, dovresti invece creare una griglia che ti offre molte più opzioni di posizionamento. Un buon punto di partenza è cercare di abbinare la tua griglia di layout alla griglia di colonne sottostante della tua area di lavoro Sitely.

Se consideriamo la struttura a 12 colonne di Sitely per una normale pagina desktop, possiamo impostare una griglia di layout che segue lo stesso formato. La griglia sarebbe impostata in questo modo:

E apparirebbe in questo modo sulla tua area di lavoro.

Chiaramente, una griglia di layout come questa ti offre molte scelte di estensione per righe e colonne per le tue celle individuali. Di seguito è riportato un esempio di come questo concetto può essere utilizzato per trasmettere efficacemente un messaggio visivo a quegli utenti web impazienti che non amano cercare la navigazione o altre pagine informative. Invece, ottengono un'idea visiva del messaggio della pagina. Passando il mouse o cliccando/toccando sui vari elementi, possono vedere ulteriori informazioni o immagini più grandi del prodotto. Potrebbero persino essere indirizzati ad altre pagine del sito web per una spiegazione più dettagliata su un particolare aspetto dell'offerta della pagina.

Gestione delle pagine

Mappe