Dividere una pagina di WordPress in colonne
siti web, e-commerce, seo, web agency, responsive, san benedetto del tronto, ascoli piceno, fermo, teramo, marche, abruzzo
3276
post-template-default,single,single-post,postid-3276,single-format-standard,bridge-core-2.1.7,ajax_fade,page_not_loaded,,qode_grid_1300,qode_popup_menu_push_text_top,qode-content-sidebar-responsive,qode-child-theme-ver-1.0.0,qode-theme-ver-20.4,qode-theme-bridge,wpb-js-composer js-comp-ver-6.1,vc_responsive

Dividere una pagina di WordPress in colonne

Dividere una pagina di WordPress in colonne - Fabio Gasparrini siti web e grafica a San Benedetto del Tronto e Ascoli Piceno

Dividere una pagina di WordPress in colonne

Un altro piccolo trucchetto che mi è venuto in aiuto diverse volte nello sviluppo dei siti è quello di suddividere una pagina di WordPress in più colonne. Anche in questo caso si potrebbe attingere direttmente al repository di WordPress per trovare un plugin che faccia ciò, soprattutto se il tema che state usando non integra una tale funzione, ma con questo metodo si fa prima e non servono grosse competenze.

Inoltre, la suddivisione in colonne offre anche un’impaginazione del testo e delle immagini molto “giornalistico” e sicuramente gradevole all’occhio umano. Per fare ciò adopereremo la scheda Testo nell’editor di WordPress che trovate nelle pagine e negli articoli, in modo da poter incollare il semplice codice HTML che trovate di seguito.
In questo caso si tratta di una suddivisione a due colonne, dove la percentuale del 48% che vedete può essere variata a vostra scelta per aumentare o diminuire lo spazio fra le colonne.

<div style=”float: left; text-align: justify; width: 48%;”>
Contenuto della prima colonna</div>
<div style=”float: right; text-align: justify; width: 48%;”>
Contenuto della seconda colonna</div>
<div style=”clear: both;”>
</div>

Il caso che segue invece è una suddivisione a tre colonne, diventa pertanto intuitivo il fatto che il numero di colonne va diviso nel 100% della larghezza della pagina, tenendo sempre conto di un minimo di spazio fra le colonne stesse.

<div style=”float: left; text-align: justify; width: 32%;”>
Contenuto della prima colonna</div>
<div style=”float: right; text-align: justify; width: 32%;”>
Contenuto della seconda colonna</div>
<div style=”float: right; text-align: justify; width: 32%;”>
Contenuto della terza colonna</div>
<div style=”clear: both;”>
</div>

4 Commenti
  • Andrea
    Pubblicato alle 15:45h, 28 Giugno Rispondi

    Ciao Fabio, grazie per rendere disponibili questi codici, ma ahimè ho provato ad utilizzarli, ma niente, non funziono. Devo dire però che come piano wordpress ho il premium e questo non permette di installare i plug in. Forse è per questo motivo?

    • Fabio Gasparrini
      Pubblicato alle 19:44h, 28 Giugno Rispondi

      Ciao Andrea,
      di solito funzionano senza problemi, tuttavia un plugin che ti consente di fare la stessa cosa è questo: .
      Da quello che so, su WordPress.com i piani Gratuito, Personale e Premium non permettono di installare plugin di terze parti, altre eventuali motivazioni possono essere il superamento del limite di memoria o delle restrizioni del ruolo utente.

  • valentina
    Pubblicato alle 14:26h, 14 Marzo Rispondi

    ciao, qual è il plugin che hai suggerito? non compare sulla tua pagina.

Pubblica un commento