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.4.6,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-23.1,qode-theme-bridge,wpb-js-composer js-comp-ver-6.3.0,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 direttamente 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>

8 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 funziona. Devo dire però che come piano wordpress ho il premium e questo non permette di installare i plugin. 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.

    • Silvio Ferrero
      Pubblicato alle 17:48h, 09 Aprile Rispondi

      Buona sera, ho avuto problemi ad implementare il codice in una pagina preesistente, per cui ho riscritto da capo il codice della pagina a mano ed ha funzionato.

      • Fabio Gasparrini
        Pubblicato alle 18:00h, 09 Aprile Rispondi

        Molto bene Silvia,
        sono felice che abbia funzionato riscrivendolo.

        Saluti.

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

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

  • UGO ARYAMAN TENDI
    Pubblicato alle 19:22h, 13 Agosto Rispondi

    Ciao, Fabio.

    Ti segnalo il refuso ‘direttmente’, evidente nella frase:
    “Anche in questo caso si potrebbe attingere direttmente …”,
    posta all’inizio di questa pagina.

    Cordialmente
    Ugo Aryaman Tendi
    Sèi•Rìo•Sòl • Scuola di Quarta Via

    • Fabio Gasparrini
      Pubblicato alle 20:13h, 13 Agosto Rispondi

      Ciao Ugo,
      ti ringrazio per la segnalazione che ho corretto.

      Buon proseguimento

Pubblica un commento