Guida Layout: visualizzare il contenuto in colonne
Ci si trova spesso di fronte all’esigenza di modificare il layout di una pagina e di visualizzare il contenuto in colonne. Purtroppo, nella maggioranza dei casi, questa opzione non è presente nativamente nel Tema WordPress in uso, e si ha quindi l’esigenza di ricorrere a differenti soluzioni.
Una di queste è quella di utilizzare un comando div che organizzi il contenuto in un certo modo, tramite l’attributo float e i due valori right o left. Vediamo come impostare il codice html con un esempio pratico.
Indice Argomenti
- Esempi di soluzioni via html
- Uniamo Html e Css, ovvero Flexbox
- Creare un sistema di Griglie Flexbox
- Creare una Tabella via html
- Rendere le Tabelle Responsive
- Visualizzare il contenuto in colonne via Bootstrap
- Visualizzare il contenuto in colonne via Plugin
- Terza via: Page Builder Pro
- Page Builder Free
- Conclusioni
Esempi di soluzioni via html
Questo metodo può andare bene se non si hanno molti contenuti da strutturare all’interno di un articolo o pagina; viceversa consiglio l’uso di un plugin ad hoc, che ci assiste in questo tipo di esigenze.
Ecco lo schema html da utilizzare
1 2 3 |
<div style="float: right;"> ... </div> |
Esempio pratico
Per esempio possiamo stabilire di visualizzare un Video Youtube in iframe sulla Sinistra e Testo sulla Destra, in questo modo:
1 2 3 4 5 6 |
<div style="float: left;"> <iframe width="300" height="180" src="https://www.youtube.com/embed/ILtWDIajqO8?rel=0&showinfo=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> <p style="text-align: center;">Contenuto a Destra</p> <p>Lorem ipsum dolor...</p> <p>...</p> |
Risultato:
Contenuto a Destra
Lorem ipsum dolor sit amet…
numquam adipiscere velit…
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…
N.b. Se deciderai di usare questo sistema di alignment, ti suggerisco di iniziare il successivo paragrafo con un altro comando div (anziché p), il quale “spezzerà” i due paragrafi in due “blocchi” distinti del documento, migliorandone il layout e la leggibilità (soprattutto da mobile).
Uniamo Html e Css, ovvero Flexbox
Di tutte le soluzioni suggerite, trovo che questa sia la più elegante e funzionale. Potendo sfruttare, infatti, sia il linguaggio Html sia il Css, daremo luogo a un contenuto perfettamente stilizzato e curato nei suoi dettagli. E in tutto questo ci viene incontro Flexbox.
“Che cos’è Flexbox?“, ti starai chiedendo. Si tratta di un Modello di Layout Flessibile per Css3 che consente di disporre, allineare e distribuire lo spazio tra gli elementi presenti all’interno di un contenitore a cui daremo, via css, il seguente valore: display: flex;
Così facendo tutti gli elementi “figli” presenti al suo interno potranno essere gestiti più facilmente, per un più corretto layout responsive.
Nell’esempio che segue darò al contenitore e ai sotto-elementi un po’ di padding (imbottitura) e un bordo, così da renderli facilmente distinguibili.
Ecco il codice Html:
1 2 3 4 5 6 7 8 9 |
<div id="contenitore"> <div>Elemento a sinistra</div> <div>Elemento al centro</div> <div>Elemento a destra</div> </div> |
Ed ecco il codice Css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
div#contenitore { display: flex; justify-content: space-around; flex-wrap: wrap; /* elementi in automatico a capo in mobile */ padding: 10px; border: 3px solid red; } div#contenitore > div { margin: 5px; padding: 5px; border: 2px solid black; } |
Aggiungendo al contenitore flex-wrap: wrap; gli elementi che superino la larghezza massima del device mobile andranno automaticamente a capo. Se invece vuoi mantenere la disposizione degli elementi su un’unica riga scrivi flex-wrap: nowrap; (valore di default in flexbox, funziona anche eliminando dal codice css flex-wrap: wrap;).
E infine ecco il risultato:
Se vuoi approfondire Flexbox, ti segnalo questo tutorial di Gianluca Scocozza su YouTube o la Guida Flexbox di html.it
Creare un sistema di Griglie Flexbox
Probabilmente il Tema Grafico su cui si basa il tuo sito web fa già uso di un sistema di griglie flexbox. Lo stesso framework Bootstrap ha basato il suo Grid System su Layout Flexbox. Qui di seguito ti mostro come ho creato la mia personale Griglia Flexbox che poi ho implementato nel sito (ti basta guardare il codice sorgente dell’home page), evitando plugin di sorta che molto spesso altro non fanno che appesantire il sito di risorse css e javascript, inficiando le prestazioni.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* Griglia Flexbox */ .griglia { display: flex; max-width: 1380px; margin: 0 auto; justify-content: center; } .col-50 {width: 50%; padding: 2%;} /* 1/2 spazio */ .col-33 {width: 33.33%; padding: 2%;} /* 1/3 di spazio */ .col-25 {width: 25%; padding: 2%;} /* 1/4 di spazio */ .col-20 {width: 20%; padding: 2%;} /* 1/5 di spazio */ @media screen and (max-width: 768px) { .griglia {flex-wrap: wrap;} .col-50, .col-33, .col-25, .col-20 {width: 100%;} } |
Come vedi sono pochissime righe di codice css, che ora andremo ad analizzare. Intanto ho scelto il nome “griglia” invece dell’inglese “grid” perché il mio tema (e forse anche il tuo) fa già uso della classe “.grid” e ovviamente non volevo creare problemi di override (sovrascrittura). La larghezza massima (max-width) l’ho impostata a 1380 pixel perché così è impostata di default nel mio Tema Hueman. Ovviamente puoi impostarla a seconda delle tua necessità.
Ma il vero sistema di griglia è dato dalle classi “col”, secondo questo schema:
- col-50 = 50% di spazio disponibile, 2 elementi affiancabili
- col-33 = 33% di spazio disponibile, 3 elementi affiancabili
- col-25 = 25% di spazio disponibile, 4 elementi affiancabili
- col-20 = 20% di spazio disponibile, 5 elementi affiancabili
Nel Layout Desktop manterranno questo schema, mentre in versione mobile, grazie alla media query (@media screen) andranno ad allinearsi verticalmente, occupando il 100% dello spazio disponibile. Ed ecco l’esempio pratico nel codice html:
Griglia a 2 elementi
1 2 3 4 5 6 7 8 9 10 11 |
<section class="griglia"> <div class="col-50"> Lorem ispum dolor sit amet... </div> <div class="col-50"> Lorem ispum dolor sit amet... </div> </section> |
Griglia a 3 elementi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<section class="griglia"> <div class="col-33"> Lorem ispum dolor sit amet... </div> <div class="col-33"> Lorem ispum dolor sit amet... </div> <div class="col-33"> Lorem ispum dolor sit amet... </div> </section> |
Griglia a 4 elementi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<section class="griglia"> <div class="col-25"> Lorem ispum dolor sit amet... </div> <div class="col-25"> Lorem ispum dolor sit amet... </div> <div class="col-25"> Lorem ispum dolor sit amet... </div> <div class="col-25"> Lorem ispum dolor sit amet... </div> </section> |
Creare una Tabella via html
Soluzione antiquata e pertanto deprecata. La riporto solo a titolo informativo. Come dicevo è deprecata in quanto le tabelle non si adattano bene agli attuali small device (smartphone), che solitamente hanno una larghezza che va dai 320 ai 375 pixel.
Anche impostando una larghezza variabile alla tabella, per es. width: 100%, le colonne al suo interno non possono “dividersi” in blocchi separati (come avviene per le griglie di Bootstrap, che più avanti spiego) e quindi, restando “incollate”, le colonne richiedono pur sempre un certo spazio in larghezza, spazio che dipende dalla somma del contenuto di ogni singola colonna.
Ecco il codice di esempio:
1 2 3 4 5 6 7 8 9 10 11 |
<table style="width: 100%; text-align: center; border: solid 1px #000;"> <tbody> <tr> <td>Lorem ipsum dolor sit amet, numquam adipiscere velit…</td> <td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…</td> <td>Quo usque tandem, Catilina, abutere patientia nostra? Quam diu etiam furor iste tuus nos eludet?</td> </tr> </tbody> </table> |
Risultato della Tabella:
Lorem ipsum dolor sit amet, numquam adipiscere velit… | Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit… | Quo usque tandem, Catilina, abutere patientia nostra? Quam diu etiam furor iste tuus nos eludet? |
Trattandosi di semplice testo, le colonne si adattano facilmente alla larghezza massima concessa e restano leggibili da smartphone. Ma si tratta solo di 3 colonne e con contenuto (ovvero il testo) adattabile. Immagina quale sarebbe il risultato, sempre da smartphone, con 6 o più colonne e immagini al loro interno. Un obbrobrio. Illeggibile.
Tuttavia rimane una soluzione pratica, se usata con criterio. Sempre meglio di appoggiarsi a plugin esterni, che col tempo “appesantiscono” il tuo sito.
Rendere le Tabelle Responsive
Se proprio non vuoi far a meno delle tabelle, c’è una piccola chicca per te: basta un piccolo trick css e la tabella diverrà responsive, ovvero sarà perfettamente leggibile – o meglio dire scrollabile orizzontalmente – anche da dispositivi mobili. E’ sufficiente aggiungere un contenitore (div) con l’attributo style con questo valore: overflow-x: auto;
1 2 3 4 5 |
<div style="overflow-x:auto;"> <table> ... </table> </div> |
Visualizzare il contenuto in colonne via Bootstrap
Bootstrap è un framework creato da Twitter. In altre parole si tratta di una serie di risorse html, css, js e jquery messe gratuitamente a disposizione di chiunque abbia una certa dimestichezza coi suddetti codici di markup/scripting.
Se hai la fortuna di avere un Tema basato su Bootstrap, devi sapere che per visualizzare il contenuto in colonne con Bootstrap ti basterà sfruttare il suo “sistema di griglie”: all’interno di un “contenitore” (container) metterai le “righe” (row) e le “colonne” (col), con poche semplici righe di codice. Scopri il Grid System in base alla versione del tuo Bootstrap:
Ti mostro ora un esempio di codice che potrai applicare da subito se il tuo Tema supporta Bootstrap:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <div class="row"> <!-- 1° Colonna 50% in desktop e 100% mobile e tablet --> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <p>Lorem ipsum dolor</p> </div> <!-- 2° Colonna 50% in desktop e 100% mobile e tablet --> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <p>Nunmquam adipiscere velit</p> </div> </div> </div> |
Se in desktop il contenuto va ad “occupare” la sidebar, prova a impostare una larghezza di 4 parti, in entrambe le colonne, in questo modo:
col-lg-4 col-md-4
oppure prova a utilizzare solo la class row, visto che la class container è al 90% compresa nel layout del corpo principale del tuo tema.
Visualizzare il contenuto in colonne via Plugin
Una soluzione più comoda è senz’altro quella di affidarsi ad un plugin, che promette di ottenere ugualmente dei buoni risultati, se non migliori. Ho avuto modo di testare Grid Shortcodes, un Plugin essenziale, di facile utilizzo.
Per visualizzare il contenuto in colonne sarà sufficiente inserire gli shortcodes nella parte hmtl dell’editor (classic o gutenberg).
Ecco l’esempio pratico di come implementare gli shortcodes nell’articolo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[GDC_row] [GDC_column size="half"] <p>Colonna a sinistra 50%</p> [/GDC_column] [GDC_column size="half"] <p>Colonna a destra 50%</p> [/GDC_column] [/GDC_row] |
È ovvio che in versione desktop l’effetto desiderato è più evidente, da mobile invece le colonne andranno a sistemarsi in verticale, in modo perfettamente responsive.
Potrai inserire gli shortcodes direttamente dal bottone:
Terza via: Page Builder Pro
Alcuni plugin sono molto rinomati per la loro funzione di page-builder (generatore di pagine), grazie alla quale si possono letteralmente strutturare le pagine in ogni singolo aspetto.
Il loro successo risiede nel fatto che non sono richieste conoscenze di codice html, in quanto gli elementi vengono inseriti tramite drag and drop. Uno di questi, forse addirittura il più famoso, è Visual Composer, un plugin professionale che può essere acquistato a 59 $ (spesso viene rilasciato all’interno di “pacchetti” di Temi Premium).
Scopri la versione free di Visual Composer
Guarda questo Video Youtube di Salvino Lattanzio per avere un’idea.
Page Builder Free
Con più di 100.000 installazioni attive, nella panoramica dei Page Builder è considerato il miglior generatore di design, secondo solo (forse) a Visual Composer. Stiamo parlando del Plugin Elementor.
Ecco il loro Video Introduttivo:
Nel loro Canale Youtube troverai tante guide, in inglese.
Conclusioni
Curare il Layout di una Pagina Web è probabilmente tanto importante quanto lo è il suo stesso contenuto e spero che questi consigli ti siano o ti saranno utili per migliorare il design del tuo Sito Web.
Ovviamente l’editor “ormai” nativo Gutenberg (introdotto dalla versione WP 5.0) merita una menzione speciale. Inizialmente nei vari forum ho incontrato una certa resistenza, specie se si intavolavano discussioni di confronto tra l’editor a blocchi e l’editor classico, di tipo wysiwyg (what you see is what you get).
Ma negli ultimi tempi, grazie anche ai vari aggiornamenti tra cui i pattern preformattati che facilitano la stilizzazione dei contenuti, pare che Gutenberg inizi a riscuotere il favore di tanti utenti.