Guida Layout: visualizzare il contenuto in colonne

Guida Layout Visualizza 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:

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…

Purtroppo un simile risultato è più apprezzabile da Pc desktop, mentre da mobile o Tablet, invece, avrà un layout un po’ differente, poiché non sono stati inseriti parametri css che possano mettere in ordine il contenuto in “griglie” o “colonne”. Rimane comunque una soluzione facile da realizzare.

 

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

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:

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.

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:

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

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 Column Shortcodes, un Plugin essenziale, di facile utilizzo.

Per visualizzare il contenuto in colonne sarà sufficiente inserire gli shortcodes attraverso il bottone sull’editor:

bottone shortcode - visualizzare il contenuto in colonne - layout pagina

Ecco l’esempio pratico di come implementare gli shortcodes nell’articolo:

Risultato:

Colonna a sinistra 50%

Lorem ipsum dolor sit amet

Colonna a destra 50%

Nunmquam adipiscere velit

È 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 creare fino a 6 colonne, come appare in questa foto:

Terza via: Page Builder

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.

Se sei interessato ad approfondire la conoscenza sulla strutturazione del layout via css, ti consiglio di dare un’occhiata alla Guida Flexbox di www.html.it.

Se ti è piaciuto, ti invito a condividere questo post (mi accontento anche di un bel Mi piace 😉 ). Bye

Potrebbe interessarti anche...



Go WordPress

Questo Blog nasce dalla passione per WordPress. Nel tempo libero cerco di arricchirlo di nuove Guide. Se ti abboni alla Newsletter sarai sempre aggiornato sui nuovi contenuti (in regalo un Ebook fantastico!). Se ti va, puoi offrirmi un caffè seguendo il link sulla barra laterale. Buona lettura da Lino Tumminieri. Go WordPress!