Quick Stack

Il Quick Stack è un elemento innovativo che fornisce una struttura per design semplici o complessi, sfruttando la proprietà di visualizzazione della griglia e l’elemento la funzione Flexbox in un unico elemento.. Questo strumento facilita l'organizzazione e la presentazione dei contenuti in modo dinamico e responsive.

‍

Cos'è il Quick Stack di Webflow?

Il Quick Stack utilizza la proprietà di visualizzazione della griglia e include celle fatte di Div Block, preimpostate per il flexbox.

Come aggiungere un Quick Stack in Webflow?

Puoi inserire un Quick Stack tramite il pannello Aggiungi, nella sezione Struttura. Una volta trascinato all’interno del Canvas o selezionato attraverso la barra di ricerca, apparirà un menu con i presets disponibili.

‍

‍

Presets disponibili

La prima schermata che appare una volta inserito l’elemento Quick Stack è un menù a tendina con 8 presets differenti.

Questi presets permettono di posizionare i contenuti in diverse configurazioni, offrendo una grande flessibilità nel design. 

‍

Come modificare e personalizzare i Quick Stack?

Selezionare i presets o impostare il numero di righe e colonne

La prima cosa che dobbiamo fare è selezionare il presets che vogliamo utilizzare (1x1, 2x2, etc). 

‍

‍

TIPS

Una volta selezionato il presets, il menù a tendina non scomparirà automaticamente ma dovremo toglierla noi (attraverso la X in alto a destra).

In alternativa, Webflow ci permette di selezionare manualmente il numero di righe (rows) o colonne (columns) che vogliamo all’interno dell’elemento Quick Stack.

‍

‍

Se abbiamo già tolto il menù a tendina che ci permette di modificare il Quick Stack, potremo comunque modificare in un secondo momento le colonne e righe, dal pannello Style che troviamo sulla destra. Vedi esempio in basso.

‍

Inserire gli elementi all’interno delle celle (Cell) di Quick Stack

Come secondo passaggio, inseririamo gli elementi all’interno delle celle che abbiamo appena impostato.

‍

Le celle, o Cell come le chiama Webflow, altro non sono che semplici elementi Div Block impostati come Flexbox.

‍

Nell’esempio in basso noi abbiamo inserito Titolo, Paragrafo e Bottone nelle varie celle.

‍

‍

Modifichiamo lo stile delle celle

Di default, il Quick Stack ha un gap di 20px tra le celle. Questo può essere facilmente modificato attraverso il pannello Stile.

‍

Un’altra modifica che possiamo fare in corsa è quella di aggiungere o togliere colonne o righe.

Oppure decidere di modificare l’allineamento dei nostri elementi a seconda della nostra esigenza specifica.

‍

Continuiamo con il nostro esempio.

‍

Nella cella di sx, dove abbiamo il titolo + bottone abbiamo selezionato la nostra cella e poi sotto l’impostazione Layout, abbiamo utilizzato allinea centralmente (funzione: Align Center). Questo ha fatto in modo di avere titolo e bottone allineato al centro della cella.

‍

‍

Nella cella di dx, invece, abbiamo impostato sempre sotto l’impostazione Layout allinea alla fine (Align End) e sotto l’impostazione Typography abbiamo allineato a destra (align Right), così facendo sia gli elementi che il testo è allineato alla parte destra dello schermo.

‍

‍

Responsive e breakpoints in Quick Stack

Adattabilità

Quando si cambia breakpoint, Webflow adatta automaticamente il layout del Quick Stack per garantire una visualizzazione ottimale.

Personalizzazione nei breakpoint

Puoi personalizzare l'aspetto del Quick Stack per diversi dispositivi, garantendo una presentazione coerente su tutti i dispositivi.

‍

Facciamo un esempio pratico

Nel nostro esempio, fino al breakpoint Smartphone landscape sembra funzionare.

Il problema arriva al breakpoint Smartphone portrait. Come possiamo risolvere?

‍

‍

Possiamo modificare le impostazioni Layout (che troviamo nel menù destra) e diminuire le colonne così da lasciarne solo 1.

‍