Integrazione di semplici layout griglia CSS in WordPress

Ottenere un layout di griglia solido e coerente in WordPress può essere un processo indolore se si utilizzano gli strumenti giusti. In questo tutorial, imparerai passo passo come configurare rapidamente un sistema di grid in WordPress che è molto leggero e facile da modificare. Manterremo il design semplice in modo che possiamo concentrarci sull'uso degli strumenti giusti per impostare la tua griglia, ma tieni presente che puoi modellare la griglia da solo se necessario.

Userò un tema Pool predefinito in WordPress per questo tutorial solo per mostrarti un approccio "start from scratch" per ottenere le griglie giuste.

Passaggio 1: determina la larghezza della griglia

Prima di iniziare, devi determinare quanto deve essere ampia la tua rete. Per il mio sito WordPress, posso vedere che la larghezza della mia colonna principale è 450px utilizzando la funzione "Ispeziona elemento" di Google Chrome quando fai clic con il pulsante destro del mouse su un oggetto. Questo è il modo più veloce che ho trovato in grado di determinare rapidamente la larghezza e l'altezza di un oggetto su una pagina web.

Passaggio 2: Grid Designer

Invece di costruire una griglia a mano, cosa che puoi fare se vuoi, ti suggerisco di andare con uno dei tanti strumenti di generatore di griglie disponibili. Per questo tutorial, userò il generatore di griglia di MindPlay. È un generatore di griglia molto semplice e leggero.

Voglio un display a tre colonne e ho bisogno di assicurarmi che i miei pixel siano a 450. Quindi aggiustalo di conseguenza e vai alla scheda "Esporta". Non andremo oltre il *tipografia caratteristiche in questo tutorial, anche se questo vale sicuramente la pena di esplorarlo da solo.

Nella scheda Esporta, utilizza il riquadro "Foglio di stile" più in alto e scorri verso il basso fino a visualizzare il commento "Grid". Copi tutto dal commento alla fine di questo frame. Dovrebbe essere solo circa 30 righe di

Passaggio 3: aggiornamento del foglio di stile di WordPress

Accedi al tuo sito WordPress e vai su Aspetto> Editor.

Nell'angolo in basso a destra del pannello Editor, vedrai a styles.css file (o qualcosa di simile, a seconda del tema). Clicca qui per aprirlo.

Scorri fino alla fine del foglio e incolla il tuo pre da MindPlay.dk:

Passaggio 4: implementazione della griglia

Per utilizzare la griglia, è sufficiente creare un

con la classe "griglia". Ogni area della griglia è definita nel CSS. Apri una nuova pagina o post. Vai alla scheda HTML per iniziare a costruire la tua griglia.

Ecco alcuni esempi pre che puoi incollare in posizione per iniziare:

   Colonna sinistra
  Colonna centrale
  Colonna destra

Ecco come appare in WordPress:

Salva / Aggiorna la pagina e guarda i risultati. Nel mio caso, questa è la home page del sito:

Come puoi vedere dalla schermata precedente, abbiamo le nostre tre colonne e tutto è esattamente dove ci aspettiamo che sia. Puoi aggiungere tutte le righe che desideri semplicemente iniziando con quanto segue

    Colonna sinistra
  Colonna centrale
  Colonna destra
    Left Row # 2
  Middle Row # 2
  Right Row # 2

Ecco come appare finora:

Ora puoi aggiungere immagini o testo e definire ogni riga esattamente come desideri.

Suggerimenti per la messa a punto

Potresti avere problemi con alcuni browser quando hai più di una riga. Per ovviare a questo problema, dovrai rendere il margine all'estrema destra (.grid-m4, nel nostro caso) all'altezza che vuoi che ogni riga sia. Se utilizzi immagini 250 px per 250 px, imposta l'altezza della riga in .grid-m4 essere 250 px:

.grid-m4 float: left; larghezza: 20px; altezza: 250 px;

Questo assicurerà il tuo .grid-m1 sul lato sinistro della riga successiva non galleggia fino alla riga sopra di esso.

Se vuoi applicare lo sfondo all'intera griglia, devi regolare l'altezza della griglia .griglia classe. Supponiamo quindi di avere quattro righe sulla griglia, ciascuna a 250 px. Dovrai aggiungere altezza alla classe .grid a 1000px, quindi tutti gli elementi di stile che aggiungi copriranno l'intero disegno della griglia.

.grid width: 450px; altezza: 1000px; margine: auto;

A seconda della versione del generatore di griglia MindPlay.dk che si utilizza, il sito potrebbe non generare ".grid-m4" e invece sarà necessario utilizzare .grid-m1 dopo .grid-c3 per garantire che la tua rete si estenda nel posto giusto:

  Colonna sinistra
  Colonna centrale
  Colonna destra

Risultati finali

Ecco come appaiono i miei risultati finali con due righe e una grafica semplice:

Divertiti a progettare e ricorda che puoi modellare la tua griglia in qualsiasi modo desideri.

Nota dell'editore: Questo post è scritto da Tara Hornor per Hongkiat.com. Tara ha una laurea in inglese e scrive di marketing, pubblicità, branding, graphic design e desktop publishing. Oltre alla sua carriera di scrittrice, anche a Tara piace passare il tempo con suo marito e due bambini.