ISTRUZIONI SISTEMA COLONNE

E’ stato introdotto un sistema molto pratico per incolonnare il contenuto, con spaziatura definita dall’utente. Questa cosa è riutilizzata decine (se non centinaia) di volte in tutto il sito. Per accedervi e utilizzarle basta cliccare sul pulsante “[]” accanto a quello per le slideshow in alto, nella pagina di modifica/creazione dei post. Dopo aver cliccato comparirà una schermata molto intuitiva, questa con la visualizzazione delle possibili colonne da utilizzare sulla sinistra, basterà cliccarne una e verrà inserita immediatamente! Ora, prendiamo una pagina non troppo semplice come esempio (perchè avere un esempio semplice sarebbe inutile) – LINK nella parte “Modello/Sistema/Strumenti”, i tre cubi colorati! Una roba difficile! Nota: sono stati rimossi parecchi div spazio dal testo per accorciare l’esempio. Aggiungere spazi a piacimento. Nota 2: è completamente impossibile mostrare il codice corretto senza fare in modo che WordPress non lo renderizzi… Per cui ogni codice ha uno spazio extra che non dovrebbe esserci, messo di proposito per romperlo e costringere WordPress a mostrarlo, cioè [one_ third] ha visivamente uno spazio extra, prima del “third”, e tutti gli altri codici di questo tipo in questa pagina presentano la stessa caratteristica.
Cominciamo con il primo div, è semplicemente un container per specificare che tutto il testo debba essere giustificato al centro, ed è la stessa proprietà che usa l’editor di WordPress sui paragrafi, cioè: Ora abbiamo la prima colonna Questa è inserita dal menu che ho specificato prima (o scritta a mano, stessa cosa), e tutto ciò che è compreso fra questo tag e quello di chiusura, anche quello sempre aggiunto dal programma, che troveremo fra poche righe sarà un terzo della grandezza disponibile della pagina (la traduzione in italiano di one_third è abbastanza semplice ed è “un terzo”). Questo mi serve per specificare il colore di sfondo e sì, avrei potuto utilizzare il sistema spiegato al punto 3) di questa guida, ma in questo caso avevo bisogno dei bordi arrotondati (border-radius: 5px;) e sarebbe stato (molto) più complicato ottenerli con quel sistema. La classe è spiegata al punto 9) questa guida, la parte style=”color: #fff;” è aggiunta tramite l’editor standard di WordPress e specifica che questo testo sarà di colore bianco (sì, avrei potuto utilizzare la classe testobianco, scrivendo “ombratestonera testobianco”, non fa differenza). Qui viene chiuso il div dello sfondo e chiuso anche il container che racchiude la colonna, tramite il codice Nota molto importante: NON andare a capo quando si inizia una nuova colonna, per qualche motivo viene interpretato come spazio e WordPress salterà una riga nella nuova colonna, creando un disallineamento del contenuto (la prima riga della seconda colonna sarebbe una riga più in basso della prima colonna). La parte comincia la colonna successiva e così via! Per motivi di design (che non mi dilungo a spiegare, davvero) questo sistema ha bisogno che sia specificata l’ultima colonna in uso, indipendentemente dalla sua grandezza (le immagini del menu di selezione sono molto chiare e dovrebbero aiutare con questo). Per cui siccome questa è l’ultima delle 3 colonne che vogliamo ottenere, utilizzeremo invece di
E’ possibile combinare colonne di diversa grandezza, purchè il risultato sia sempre 100%. Se io sommo 1/4 con 1/2 e 1/4, il totale è 1, quindi potrei avere una colonna da un quarto di grandezza, una centrale più grossa e un’altra finale grande come la prima. Le combinazioni sono pressocchè infinite a patto che, ancora una volta, il risultato sia 100% di grandezza, altrimenti la visualizzazione sarà errata (tendenzialmente spostata a sinistra o peggio).