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.

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

Esempio pratico

Per esempio possiamo stabilire di visualizzare un Video Youtube in iframe sulla Sinistra e Testo sulla Destra, in questo modo:

Risultato:

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).

[Torna all’indice]

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:

Ed ecco il codice Css:

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

[Torna all’indice]

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.

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

Griglia a 3 elementi

 Griglia a 4 elementi

[Torna all’indice]

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:

Risultato della Tabella:

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.

[Torna all’indice]

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;

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:

• Per Bootstrap 5.2 vai qui
• Per Bootstrap 4.1 vai qui
• Per Bootstrap 3.3 vai qui

Ti mostro ora un esempio di codice che potrai applicare da subito se il tuo Tema supporta Bootstrap:

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:

È 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.

[Torna all’indice]

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.

[Torna all’indice]

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.