Introduzione
Impara i concetti base, per iniziare a sviluppare con Webflow.
Un elemento importante il Div Block
L’ultima lezione di questo percorso è dedicata all’elemento Div Block (o Div per semplicità).
Ma perchè soffermarci proprio su questo elemento?
Perché l’elemento Div Block è utilizzato in molti casi e permette di:
- Spostare contenuti (elementi)
- Organizzare la struttura della pagina web (Header, Sezioni e Footer)
- Separare gli elementi tra loro
- Centrare contenuti all’interno della pagina web (container)
- Migliorare graficamente il tuo sito web
Che cos’è un Div Block?
Il Div Block è un elemento neutro. È neutro perché se non apportiamo nessuna modifica (se non aggiungiamo CSS) l’elemento non sarà visualizzato in pagina.
Partiamo.
Innanzitutto capiamo come possiamo utilizzare l’elemento Div Block.
Inserire un Div Block in pagina
Innanzitutto per poter utilizzare i nostri Div dobbiamo selezionarli e utilizzarli nella nostra pagina.
Per far ciò dobbiamo inserire un Div attraverso la sidebar di SX e premere il bottone Elements.
Bottone elements - Designer Webflow
Bottone elements (menù a tendina) - Designer Webflow
⚠️ TIPS: per velocizzare l’aggiunta di elementi possiamo utilizzare la barra di ricerca CMD+E (Mac) e CTRL+E (Windows) e cercare l’elemento da inserire.
Shortcut barra di ricerca - Designer Webflow
Una volta selezionato il nostro elemento Div, possiamo trascinarlo all’interno del nostro canva.
Div Block all’interno canva - Designer Webflow
Un’altra possibilità che abbiamo, per aggiungere elementi, è quella di trascinarli direttamente nel Navigator (che comparirà in automatico nel lato SX una volta trascinato l’elemento).
Div Block all’interno navigator - Designer Webflow
Quando i siti web iniziano ad avere molti elementi al proprio interno il navigator aiuta ad essere più precisi e sicuri della posizione del nuovo sito web.
Il navigator è un pannello a disposizione alla nostra sx (se selezionato) che permette di avere la visione di tutti gli elementi inseriti all’interno della pagina web.
Grazie al pannello navigator possiamo:
- vedere quali elementi abbiamo inserito in pagina web
- Vedere con precisione dove li abbiamo collocati (nidificazione)
Spostare gli elementi con i Div Block
Proviamo a posizionare 2 elementi uno di fianco l’altro.
Prendiamo come esempio un titolo e un paragrafo.
Questo è il risultato che vogliamo ottenere:
C’è un problema.
Inserendoli nella nostra pagina avremo questa situazione:
Prima domanda da porsi: perché i 2 elementi sono uno sotto l’altro?
L’abbiamo accennato nella lezione 3 del box model:
Gli elementi hanno tutti una propria caratteristica di default.
Nel caso del Div Block, possiede di default la funzione Display: Block.
Display: Block = l’elemento prenderà tutto lo spazio orizzontale (tutta la riga) che avrà a disposizione.
Ce lo fa presente anche Webflow attraverso questo avviso:
Quando un elemento ha la funzione Display: Block prenderà lo spazio dell’intera riga quindi non potremo posizionare altri elementi al suo fianco.
Ora, quindi, sappiamo che il titolo essendo un elemento Block non dà spazio al paragrafo di inserirsi alla sua dx.
SOLUZIONE
L’elemento Div Block!
Attraverso un Div Block possiamo posizionare gli elementi uno di fianco l’altro. Vediamo come:
Innanzitutto inseriamo un nuovo Div Block con al proprio interno l’elemento titolo e paragrafo. In questo modo:
Dopo aver inserito i 2 elementi all'interno del Div dovremo inserire alcune impostazioni di stile (CSS):
- Impostare al Div appena inserito la funzione Display: Flex
- Aggiungiamo l’impostazione Direction: Vertical (la troviamo poco più in basso)
Parlando potabile…
Attraverso queste impostazioni abbiamo detto al Div: sposta gli elementi presenti al tuo interno in modo verticale!
Usare i Div Block per migliorare l’estetica del sito web
Creare un bottone con un Div Block
Quale la differenza tra i bottoni che vediamo nello screenshot?
Esteticamente nessuna ma in realtà se guardate il navigator vi accorgete che uno è un elemento Button e l’altro è un Div.
L’elemento Button è un elemento unico in cui è possibile modificare il testo.
Mentre il secondo Button creato con il Div Block presenta al suo interno l’elemento Text Block.
In questo caso quindi il Div può essere utilizzato per creare elementi come il caso del bottone.
⚠️ Per far si che il Div sia cliccabile bisogna trasformarlo in un Link Block.
Un Link Block è un elemento uguale al Div ma è linkabile.
Div Block = Link Block (quest’ultimo però è linkabile)
Andando sopra il Div, tasto dx si aprirà il menù a tendina in cui possiamo selezionare:
Convert to Link Block
MAGGIOR LIBERTÁ CON IL DIV BLOCK
Abbiamo riportato l’esempio del Div Block perchè in questo caso ci dà maggiore flessibilità rispetto all’uso bottone standard predisposto in Webflow.
Vediamo perchè.
Nel caso volessimo inserire un’icona con il bottone di Webflow non potremmo inserirlo.
Utilizzando invece un Link Block (sarebbe un Div Block ma linkabile) possiamo inserire l’elemento icona di fianco al testo già presente.
La struttura sarà questa:
E questo sarà il risultato finale.
Abbiamo inserito l’icona a fianco al testo, cosa che nell’elemento Button non avremmo potuto fare.
Vediamo un altro esempio di come utilizzare i Div Block.
Creare linee con un Div Block
Ci potrà capitare di voler inserire una linea divisoria.
Ad esempio vogliamo separare una sezione dall’altro oppure inserire una linea verticale tra 2 elementi.
Attraverso il Div Block saremo in grado di creare le linee.
Ci sono diverse modalità per creare delle linee, noi ne riportiamo due:
- Attraverso il padding:
In questo primo esempio abbiamo utilizzato 50px (in alto e in basso per dare lunghezza alla linea verticale) e 5px per dargli un pò di spessore.
- Attraverso le Size (misure):
In questo secondo esempio, invece, abbiamo impostato la lunghezza e larghezza dell'elemento senza utilizzare il padding.
Larghezza 100px e altezza 50px.
Questi che abbiamo visto sono solo alcune delle molteplici possibilità che offre la piattaforma Webflow.
Il passaggio più importante da compiere è quello di iniziare e sporcarsi le mani provando e riprovando.
Ti ringraziamo per essere arrivato fin qui. Se vuoi proporre un tema in particolare o qualche passaggio non è del tutto chiaro faccelo sapere nei nostri canali social.
Saremo lieti di risponderti.
LEZIONE PRECEDENTE
LEZIONE SUCCESSIVA