Riprendiamo il progetto del tutorial precedente e cominciamo a perfezionarlo.
In quest’occasione aggiungiamo ai 3 box a fondo pagina alcune icone che ci permettono di dare più risalto e immediatezza al testo che inseriremo.
Io trovo che in alcune occasioni un’icona possa essere più utile di un’intero paragrafo: chi arriva su una “landing page” e desidera avere immediatamente un’idea sul dove cliccare per arrivare al servizio o all’articolo che gli interessa approfondire o visualizzare.
Il web è anche velocità e la semantica è fondamentale.
Le icone che inseriremo si chiamano “Glyphicons” e sono già comprese in Bootstrap 3, per inserirle basta aggiungere una riga di codice, più semplice di così 🙂
Questo è il “before” and “after” del nostro progetto landing page.
La landing page senza Glyphicons
La landing page dopo aver inserito le icone di Glyphicons
E questo è il video esplicativo, buon divertimento.
Link utili:
- Bootstrap – il sito ufficiale
- Start Bootstrap – Templates e temi gratuiti da scaricare
- Bootstrapzero – Collezione di templates gratuiti e a pagamento
- Bootstrap Hero – Inesauribile risorsa Bootstrap in cui troverete componenti, templates, link e riferimenti a tutto il materiale disponibile su questo framework
Oltre al video, potevi scriverle due righe di testo… Sarebbe stato più user friendly: non voglio vedere un video per piazzare due icone!
Hai ragione Cesare, potevo aggiungere anche del testo, qualsiasi critica è ben accetta 🙂