Il blocco griglia è un robusto strumento di layout per l'editor di blocchi di WordPress Gutenberg che consente di creare un layout a più colonne senza codifica. Consente di organizzare i contenuti in una griglia strutturata di righe e colonne, invece di limitarsi a una sola colonna di testo o di media.
Progettare pagine in stile rivista, portfolio, gallerie o altre sezioni in cui si desidera aggiungere contenuti uno accanto all'altro è più facile utilizzando il blocco griglia di WordPress. Oggi esploreremo come utilizzare il Blocco Griglia in WordPress e darvi una panoramica.
Creare bellissimi tavoli
Con l'editor di blocchi
Come utilizzare il blocco griglia in WordPress?
Vediamo ora una guida passo passo all'aggiunta di un blocco griglia. Questi passaggi aiuteranno i principianti e gli utenti intermedi a sfruttare al meglio questo blocco.
Ma prima di seguire i passaggi, è necessario deve andare al proprio post e alle pagine in cui si desidera utilizzare il blocco. Quindi, seguite la procedura descritta di seguito.
Inserire il blocco griglia
Fare clic sull'icona Aggiungi blocco (Icona Plus) (1), tipo "Griglia" nella casella di ricerca (2), e fare clic sul blocco quando appare (3).
Inserite il vostro contenuto
Per impostazione predefinita, vedrete che sono state inserite solo due colonne per il contenuto. Inserite il vostro contenuto facendo clic sul pulsante + icona all'interno del blocco e quindi selezionare il blocco desiderato.
A questo punto, inserire altri contenuti o blocchi facendo clic sul lato inferiore destro del blocco.
È possibile inserire qualsiasi blocco di proprio gradimento. Nel mio caso, ho inserito il blocco immagine.
È possibile inserire lo spazio della colonna per ogni blocco.
Personalizzazione dei blocchi
Nella personalizzazione del blocco, si hanno le opzioni per il layout (1) e posizione (2).
Nel Layout, è possibile scegliere l'opzione Posizione dell'elemento della griglia. È possibile mantenere l'impostazione predefinita o utilizzare il manuale.
L'opzione Auto consente di regolare la larghezza minima della colonna.
L'opzione manuale consente di scegliere le colonne del blocco. È possibile regolare facilmente il numero di colonne all'interno del blocco.
Successivamente, è possibile scegliere se rendere la griglia appiccicosa o meno. Se si desidera renderla appiccicosa, scegliere l'opzione appiccicosa.
Nella scheda Stili sono presenti anche stili predefiniti per il blocco. È possibile selezionarli e vedere cosa fanno. Ecco l'anteprima qui sotto.
È possibile personalizzare il colore del testo e dello sfondo utilizzando l'opzione Colore.
L'opzione Immagine di sfondo consente di aggiungere un'immagine per lo sfondo del blocco.
Per ripristinare l'immagine, fare clic sui tre punti e selezionare ripristina tutto.
Nella tipografia, è possibile impostare il carattere, la dimensione del carattere, l'aspetto, l'altezza della linea, l'interlinea, la decorazione e le maiuscole.
Le dimensioni consentono di personalizzare il padding, il margine, l'altezza minima e la spaziatura del blocco Griglia.
Vediamo di seguito la modifica della spaziatura tra i blocchi e dell'altezza minima.
Infine, l'opzione Bordo e ombra consente di regolare il bordo e il raggio del bordo del blocco.
Ecco la demo finale di ciò che ho realizzato utilizzando il blocco. Non è il massimo, ma dà un'idea di ciò che questo blocco può fare.
Panoramica del blocco griglia di WordPress
Che cos'è il blocco griglia in WordPress?
Il blocco griglia è un blocco contenitore che contiene tutti gli altri blocchi in un layout a griglia. In altre parole, è un blocco genitore in cui si possono inserire più blocchi figli (come paragrafi, immagini, pulsanti, ecc.) e li dispone in una serie di colonne. Crea automaticamente nuove righe, se necessario.
Quali sono le caratteristiche principali del blocco griglia?
Il blocco Griglia ha diverse caratteristiche utili che lo rendono uno strumento versatile per la creazione di layout. Ecco alcune delle caratteristiche principali:
- Layout di colonna flessibile: È possibile scegliere il numero di colonne da inserire nella griglia. Il blocco griglia consente di impostare un numero specifico di colonne o di lasciare che WordPress determini automaticamente il numero di colonne in base a una larghezza minima delle colonne.
- Design reattivo: I contenuti disposti in un blocco griglia sono adatti ai dispositivi mobili.
- Disposizione e riordino dei contenuti: È facile disporre e riordinare i blocchi all'interno della griglia. È possibile trascinare e rilasciare i blocchi di contenuto in posizioni diverse o utilizzare i tasti freccia per spostarli in alto e in basso all'interno del contenitore dei blocchi della griglia.
- Opzioni di stile personalizzate: È possibile modificare il colore dello sfondo o aggiungere un'immagine di sfondo alla sezione, regolare i colori del testo per i contenuti all'interno e modificare la tipografia (dimensioni e famiglie di caratteri), tutto in un unico posto.
- Integrazione con altri blocchi di layout: Permette di trasformare in altri blocchi di layout, come un gruppo standard, una riga, una pila, un blocco di copertura o anche il vecchio blocco Colonne, se necessario.
Quali sono le caratteristiche della barra degli strumenti del blocco Griglia?
Quando si seleziona il Mattone Griglia nell'editor, viene visualizzata un'icona barra degli strumenti di blocco appare nella parte superiore del blocco. Questa barra degli strumenti fornisce controlli rapidi per le azioni più comuni e per la personalizzazione.
- Trasformare: È possibile trasformare un blocco griglia in un blocco gruppo, riga, pila, copertina o colonna, mantenendo il contenuto interno.
- Maniglia di trascinamento: L'icona dei sei puntini consente di trascinare e spostare l'intero blocco griglia in una posizione diversa della pagina.
- Muoversi verso l'alto/il basso: Le icone delle frecce verso l'alto e verso il basso consentono di spostare il Mattone griglia di una posizione verso l'alto o verso il basso nella struttura del documento.
- Allineamento (allineamento in larghezza): L'icona di allineamento consente di modificare l'impostazione della larghezza del contenitore del blocco griglia.
- Altre opzioni: I tre punti verticali aprono un menu a discesa con ulteriori opzioni di blocco.
Pensieri finali!
Il blocco griglia è un blocco fantastico che rappresenta una fantastica aggiunta al kit di strumenti di progettazione di WordPress. Offre la possibilità di creare facilmente layout flessibili e a più colonne.
Utilizzando il blocco, è possibile creare sezioni più accattivanti e coinvolgenti per il proprio sito web. In sintesi, il blocco Grid aiuta a uscire dal formato a colonna singola e a mostrare i contenuti uno accanto all'altro in una struttura a griglia pulita.
Fatemi sapere cosa ne pensate nei commenti. Inoltre, vi prego di condividerlo con i vostri amici utilizzando i vostri social media.
Per saperne di più!
