Il box model

La 3ª ed ultima lezione che chiude il modulo Basi è dedicata alla logica con la quale strutturiamo il sito web.

‍

La logica, con la quale sviluppiamo i siti web è definita attraverso il modello a blocchi (o box model).

‍

Ma che cos’è questo modello a box (o box model)?

‍

Per dare una definizione:

è un modo di concepire e implementare i siti web. 

‍

In poche parole è una modalità con la quale possiamo sviluppare i siti web.

‍

Se hai già iniziato ad utilizzare Webflow (lo consigliamo) ti sarai accorto che le pagine web sono formate da box all’interno di altri box (nidificazione). Per spostare un determinato elemento oppure vogliamo allineare orizzontalmente 2 elementi probabilmente dovremo ricorrere al box model.

‍

Abbiamo citato la nidificazione, ovvero un elemento all’interno di un elemento.

‍

Quando si parla di queste nidificazioni si fa l’esempio del grado di parentela.

Nell’esempio in basso, abbiamo un box genitore principale che al proprio interno contiene 2 box figli.

‍

‍

Se ancora, invece, non hai messo mani in piattaforma ti sembrerà tutto molto astratto, lo sappiamo. 

‍

Non preoccuparti.

‍

Continua a leggere l’esempio pratico, ti promettiamo che sarà più chiaro una volta terminata la lezione.

‍

Ripetiamo il concetto di fondo:

Le pagine web sono formate da box all’interno di altri box.

‍

Grazie a questo modello, gli elementi possono essere organizzati e spostati come vogliamo.

‍

Il passaggio più importante è proprio questo: il modello a blocchi (o box model) è utile per spostare e organizzare gli elementi in pagina nel modo in cui vogliamo che appaiano.

‍

Cosa dobbiamo capire da questo box model?

‍

In sintesi, possiamo organizzare i contenuti in maniera semplice ed ordinata.

‍

Ad esempio, grazie ai box possiamo organizzare gli elementi al proprio interno in orizzontale e in verticale.

‍

Nell’esempio in basso, i 2 box arancioni ci aiutano a organizzare gli elementi (titolo e paragrafo) in orizzontale e in verticale.

‍

‍

Ma come facciamo a spostare gli elementi dei box in orizzontale o verticale?

‍

Nell’immagine sopra abbiamo il 1º box arancione (chiamato box-orizzontale, vedi Navigator a SX) con questa impostazione:

• Display: Flexbox
• Direction: Horizontal

‍

Per il 2º box è la stessa cosa, ma l’impostazione Direction è Vertical.

‍

‍

⚠️ Ad ogni elemento è possibile cambiare l’impostazione Display.

Con questa impostazione stiamo dicendo all'elemento come deve stare all’interno della pagina:

• dovrà prendere l’intera riga
• deve lasciare spazio ad un altro elemento
• deve mettersi in griglia
• etc.

‍

Inoltre, gli elementi hanno la propria caratteristica. Nel caso del Div Block, la funzione Display di default su cui è impostato è Display: Block. 

Display: Block = l’elemento prenderà tutto lo spazio orizzontale che avrà a disposizione.

‍

Una volta capiti questi meccanismi, sarà più semplice muovere gli oggetti come desideriamo.

‍

Detto ciò, facciamo per un attimo, un passo indietro, e torniamo alla lezione precedente.

‍

Nella lezione 2 abbiamo parlato di HTML e CSS.

Un esempio pratico di questi due linguaggi sta proprio nell’esempio che abbiamo appena visto.

‍

Attraverso il Navigator (Box giallo) possiamo vedere quali elementi sono stati inseriti in pagina.

‍

Analizziamo insieme.

‍

Abbiamo inserito 3 elementi HTML:

• div block (box arancione)
• un titolo
• un paragrafo

‍

Abbiamo applicato il linguaggio CSS:

• impostato i bordi del Div Block
• colorato i bordi del Div Block di arancione
• applicato spessore ai bordi del Div Block

‍

Visto? Eravamo partiti con teoria astratta e ora iniziamo a concretizzare i concetti.

Continuiamo a schiarirci le idee, aiutandoci con qualche esempio.

‍

ESEMPIO PRATICO: Il box model applicato nel sito Apple

Prendiamo un esempio pratico direttamente dal sito Apple.

‍

La società di Cupertino, da anni si è sempre caratterizzata per il grande design nei suoi prodotti. Per coerenza non poteva comunicarlo anche nei suoi siti web.

‍

A differenza dell’esempio che abbiamo visto in alto è più condito ma il concetto che sta alla base dell’organizzazione degli elementi è sempre il box model.

‍

In questo momento è bene concentrarci rispetto al posizionamento degli elementi in pagina e non sull’estetica.

‍

Prima di migliorare il lato design dei nostri siti dobbiamo essere in grado di saper posizionare i nostri elementi dove e come vogliamo.

‍

Iniziamo a spacchettare insieme il sito web e analizziamolo.

‍

Nell’esempio in basso, abbiamo suddiviso gli elementi che compongono la pagina, in box, e li abbiamo evidenziati con colori diversi.

Quello che faremo è commentare ogni singolo box così da capire come ognuno di loro aiuta ad avere un layout preciso e ordinato.

‍

‍

‍

Gli elementi utilizzati in questo caso sono (1)+7:

• (Body)
• Div
• Titolo (h2)
• Immagine
• Titolo (h3)
• Sottotitolo (1º e 2º prodotto)
• Bottone
• Text link

‍

BOX NERO

Partiamo dal box più grande, quello nero.

Con questo box facciamo riferimento al Body. Non è un elemento che inseriamo noi ma è un elemento che troviamo di default. Ogni pagina contiene l’elemento Body.

In Webflow sarà indicato proprio con il nome Body.

Solitamente, in questo elemento, vengono modificati gli stili che impattano maggiormente le pagine e non vengono più effettuate modifiche su di esso.

Ad esempio nel Body applichiamo gli stili che dovranno impattare l’intera pagina, ad esempio come il colore di sfondo pagina, il colore del font, la grandezza del font, etc.

‍

Perché le impostazioni generali vengono impostate proprio in questo elemento?

⚠️ Perché gli elementi più grandi danno in eredità i propri stili ai figli.

Ricordate il grado di parentela di cui parlavamo? Ecco lui è il parente più grande di tutti.

‍

Esempio: al Body applichiamo il colore del font rosso. Se all’interno del body c’è un titolo, quel titolo di default sarà impostato con il colore rosso.

‍

Questo concetto è molto importante, segnalo.

‍

Proseguiamo con i nostri box.

‍

BOX ROSSO

Proseguiamo con il box rosso. 

‍

Al suo interno troviamo 2 box: uno giallo e uno arancione

La funzione del box rosso è quella di allineare il box giallo e arancione in verticale: il box giallo deve stare in alto e box arancione in basso.

‍

BOX GIALLO

Questo box è molto semplice. Contiene l’elemento titolo, senza ulteriori impostazioni.

Non c’è altro da aggiungere.

‍

BOX ARANCIONE

All’interno del box arancione troviamo i 4 box verdi.

La funzione del box arancione è quella di allineare, i 4 box verdi, in orizzontale.

‍

‍

⚠️ Come già detto nell’introduzione della lezione, il box model (o modello a blocchi) serve a organizzare e spostare gli elementi nella pagina web.

Il box arancione quindi, ci sta permettendo attraverso l’impostazione di allineamento orizzontale di spostare i 4 box verdi, allineandoli tra loro.

Anche qui abbiamo utilizzato:

• Display: Flexbox

• Direction: Horizontal

‍

BOX VERDE

L’ultimo box che analizziamo è quello verde. Ne abbiamo 4.

Questo box ha la funzione di allineare le informazioni dei prodotti Apple.

‍

‍

‍

Gli elementi all’interno del box verde sono 5 (6 nel primo e secondo prodotto perchè abbiamo un sottotitolo aggiuntivo):

• Immagine
• Titolo
• Prezzo
• Bottone
• Text link

‍

La funzione del box verde è quella di allineare tutti gli elementi che trova al suo interno in verticale (box viola dell’immagine). A differenza, ad esempio, del box arancione che allinea in orizzontale.

In questo caso l’impostazione da utilizzare è:

• Display: Flexbox

• Direction: Vertical

‍

CONCLUSIONI

In conclusione, il box model, lo dovrai applicare per poter spostare e posizionare gli elementi come desideri. Il nostro consiglio è sempre quello di sporcarsi le mani. Apri Webflow e inizia a smanettare e a commettere errori a più non posso, facendo delle prove.

Prova a ricreare dei siti web, semplici, che trovi navigando sul web.

Il punto più importante non è tanto l’estetica (colore del font, dimensioni, etc) ma riuscire a collocare gli elementi nella corretta posizione in pagina.

Inizia a prendere confidenza spostando gli elementi. Con il passare del tempo acquisirai dimestichezza e darai un senso a tutto ciò che stai studiando.

Arriverai ad un punto in cui sposterai gli elementi dove vorrai.

Nella lezione successiva entriamo in piattaforma. Inizieremo proprio dalla Dashboard di Webflow, la pagina da dove tutto inizia, in cui possiamo vedere tutti i progetti.

Per andare alla lezione successiva clicca nel bottone in basso.