Ottenere che i blocchi di WordPress abbiano esattamente le dimensioni giuste richiedeva in passato CSS personalizzato o soluzioni alternative complesse.
Lo sappiamo perché abbiamo trascorso innumerevoli ore ad aiutare gli utenti con questo esatto problema. Ma grazie ai recenti aggiornamenti di WordPress, il controllo delle dimensioni dei blocchi è diventato molto più semplice.
Ciò che sorprende molte persone è che ci sono in realtà diversi modi integrati per regolare le dimensioni dei blocchi in WordPress. Attraverso molti esperimenti, abbiamo identificato i metodi più affidabili che funzionano in diverse situazioni e temi.
In questa guida, condivideremo i modi più semplici per modificare l'altezza e la larghezza dei blocchi in WordPress.
Perché modificare l'altezza e la larghezza dei blocchi in WordPress?
Mentre l'editor a blocchi di WordPress rende facile aggiungere contenuti, le dimensioni predefinite dei blocchi potrebbero non adattarsi sempre al design che hai in mente. Regolare l'altezza e la larghezza di un blocco è un modo semplice per avere un maggiore controllo sull'aspetto della tua pagina.
Ecco alcuni motivi chiave per cui potresti voler cambiare le dimensioni di un blocco:
- Migliora il layout visivo: Puoi creare design più equilibrati e dall'aspetto professionale controllando le dimensioni esatte dei tuoi elementi.
- Migliora la leggibilità: Regolare la larghezza dei blocchi di testo può rendere il tuo contenuto più facile da leggere, specialmente su schermi larghi.
- Garantisci la reattività: Dimensionare correttamente i blocchi aiuta il tuo contenuto ad apparire al meglio su tutti i dispositivi, dai desktop ai telefoni cellulari.
- Crea enfasi: Rendere un blocco più grande o più piccolo può attirare l'attenzione su chiamate all'azione importanti o informazioni chiave.
Detto questo, vediamo come puoi facilmente cambiare l'altezza e la larghezza dei blocchi in WordPress.
Tratteremo alcuni metodi diversi e puoi utilizzare i collegamenti rapidi qui sotto per passare a quello che desideri utilizzare:
- Metodo 1: Cambiare l'altezza e la larghezza del blocco utilizzando le impostazioni del blocco
- Metodo 2: Cambia la larghezza del blocco usando il blocco Colonne
- Metodo 3: Cambiare l'altezza e la larghezza del blocco utilizzando il blocco Gruppo
- Metodo 4: Cambiare l'altezza del blocco utilizzando il blocco Copertina
- Bonus: Crea pagine bellissime usando blocchi avanzati in SeedProd
Metodo 1: Cambiare l'altezza e la larghezza del blocco utilizzando le impostazioni del blocco
In questo metodo, ti mostreremo come cambiare l'altezza e la larghezza di un blocco utilizzando le impostazioni predefinite di WordPress.
Attualmente, WordPress non offre le stesse opzioni di ridimensionamento per tutti i blocchi. Tuttavia, l'editor di blocchi fornisce molti modi per ridimensionare l'altezza e la larghezza di diversi blocchi.
Iniziamo con il blocco Immagine in WordPress.
Innanzitutto, puoi cambiare l'allineamento del blocco Immagine facendo clic sul pulsante 'Allinea' nella barra degli strumenti sopra il blocco.
Qui, la scelta dell'opzione 'Larghezza estesa' renderà il blocco della stessa larghezza del contenitore. Oppure, l'opzione di allineamento 'Larghezza intera' renderà il blocco dell'intera larghezza della pagina.
Puoi anche ridimensionare un blocco andando al pannello 'Impostazioni blocco' a destra e scorrendo fino alla sezione 'Impostazioni'. Da qui, puoi ridimensionare un blocco dal menu a discesa 'Dimensione immagine'.
Puoi anche regolare la larghezza e l'altezza del blocco digitando la dimensione in pixel preferita nelle caselle 'Larghezza' e 'Altezza' nella sezione 'Dimensioni immagine'.
Sotto questo, puoi anche regolare la dimensione del blocco in percentuale.
Un altro modo per ridimensionare un blocco Immagine è fare clic sull'immagine stessa, che fa apparire un bordo blu con ancore circolari.
Quindi, trascina semplicemente queste ancore per cambiare l'altezza e la larghezza del blocco immagine.
Una volta terminato, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per salvare le tue impostazioni.
Metodo 2: Cambia la larghezza del blocco usando il blocco Colonne
Se il blocco che vuoi ridimensionare non ha controlli di dimensione integrati, come il blocco Paragrafo, allora questo metodo è per te. Agisce come una soluzione alternativa posizionando il tuo blocco all'interno di un contenitore che puoi controllare.
Per questo metodo, posizioneremo il nostro blocco all'interno del blocco Colonne. È un contenitore in cui puoi aggiungere blocchi diversi in ogni colonna. Quindi, puoi ridimensionare questi blocchi regolando l'altezza e la larghezza delle colonne.
Innanzitutto, fai clic sul pulsante ‘Aggiungi blocco’ (+) nell'angolo in alto a sinistra dello schermo.
Da qui, individua e aggiungi il blocco Colonne all'editor di Gutenberg. Quindi, ti verrà chiesto di scegliere una variante.
Dopodiché, il layout della colonna verrà visualizzato sullo schermo e ora puoi aggiungere il blocco desiderato facendo clic sul pulsante ‘Aggiungi blocco (+)’ all'interno di una colonna.
Una volta aggiunto il blocco, puoi controllarne la larghezza regolando la colonna in cui si trova.
Seleziona semplicemente la colonna e, nel pannello delle impostazioni del blocco sulla destra, puoi modificare la larghezza della colonna nella sezione 'Impostazioni'. Questo a sua volta ridimensionerà il blocco al suo interno.
Una volta terminato, fai semplicemente clic sul pulsante ‘Pubblica’ per salvare le modifiche.
Ecco come apparivano i contenuti sul nostro sito demo dopo aver ridimensionato e allineato due blocchi di paragrafo all'interno di un blocco a due colonne.
Metodo 3: Cambiare l'altezza e la larghezza del blocco utilizzando il blocco Gruppo
Puoi anche regolare la larghezza e l'altezza dei blocchi utilizzando il blocco Gruppo. Ti consente di raggruppare i blocchi desiderati e stilizzarli insieme.
Innanzitutto, devi fare clic sul pulsante ‘Aggiungi blocco’ (+) in alto. Successivamente, individua e aggiungi il blocco Gruppo all'editor di contenuti.
Una volta fatto ciò, il blocco Gruppo visualizzerà tre diverse opzioni di layout. Per questo tutorial, utilizzeremo il layout ‘Gruppo’.
Dopodiché, il pulsante ‘Aggiungi blocco’ verrà visualizzato sullo schermo. Ora puoi aggiungere qualsiasi blocco desideri.
In questo tutorial, aggiungeremo e ridimensioneremo un blocco Titolo, un blocco Paragrafo e un blocco Immagine.
Per aggiungere più blocchi al Gruppo, fai clic sul pulsante ‘Seleziona Gruppo’ dalla barra degli strumenti del blocco.
Una volta selezionato il Gruppo, fai semplicemente clic sul pulsante ‘Aggiungi blocco’ (+) in basso.
Una volta fatto ciò, si aprirà la barra laterale delle impostazioni del blocco sulla destra. Da qui, puoi facilmente regolare il layout, la giustificazione e l'orientamento di tutti i blocchi.
La modifica del layout cambierà anche le diverse dimensioni dei blocchi. Puoi configurare queste impostazioni finché non sarai soddisfatto del risultato.
Una volta terminato, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per salvare le tue impostazioni.
Ecco come appariva il blocco Gruppo sul nostro sito demo.
Metodo 4: Cambiare l'altezza del blocco utilizzando il blocco Copertina
Questo metodo di ridimensionamento è per te se vuoi usare il blocco Copertina e impostare un'altezza minima specifica per una sezione. È ideale per creare banner a larghezza intera o immagini hero con testo e altri contenuti sopra.
Per prima cosa, fai clic sul pulsante ‘Aggiungi blocco’ (+) in alto e trova il blocco Copertina.
Una volta fatto ciò, ti verrà chiesto di scegliere un colore o caricare un'immagine dalla libreria multimediale di WordPress. Questa immagine o colore verrà utilizzata come sfondo per il blocco Copertina.
Successivamente, trascina e rilascia semplicemente qualsiasi blocco desideri nel blocco Copertina.
Dopodiché, devi fare clic sul blocco Copertina per aprire le sue impostazioni del blocco nella colonna di destra.
Da qui, scorri verso il basso fino al pannello ‘Dimensioni’, dove puoi regolare l'altezza del blocco Copertina utilizzando i pixel.
Infine, non dimenticare di fare clic sul pulsante ‘Salva modifiche’ per memorizzare le tue impostazioni.
Per istruzioni più dettagliate su come utilizzare il blocco Copertina, potresti voler consultare la nostra guida per principianti su Immagine di copertina vs. Immagine in evidenza nell'editor a blocchi di WordPress.
Bonus: Crea pagine bellissime usando blocchi avanzati in SeedProd
Puoi creare facilmente pagine belle ed esteticamente gradevoli utilizzando il plugin SeedProd .
È il miglior costruttore di pagine WordPress sul mercato che ti permette di creare landing page utilizzando blocchi, che sono super facili da personalizzare e ridimensionare in base alle tue esigenze.
Diversi dei nostri marchi partner hanno utilizzato questo strumento per progettare l'intero sito web e i loro utenti hanno apprezzato l'aspetto fresco e moderno. Per saperne di più, consulta la nostra recensione di SeedProd.
Innanzitutto, dovrai installare e attivare il plugin SeedProd. Per maggiori dettagli, puoi leggere la nostra guida su come installare un plugin WordPress.
Nota: SeedProd offre anche una versione gratuita, ma utilizzeremo il piano premium per questo tutorial.
Dopo l'attivazione, devi andare alla pagina SeedProd » Impostazioni dal tuo pannello di controllo di WordPress e inserire la chiave di licenza nella casella ‘Chiave di licenza’.
Puoi trovare la chiave di licenza nella tua pagina account sul sito web di SeedProd.
Successivamente, visita la schermata SeedProd » Pagine di destinazione dalla barra laterale dell'amministratore per iniziare a creare una pagina di destinazione.
Da qui, fai semplicemente clic sul pulsante ‘Aggiungi nuova pagina di destinazione’.
Ora verrai portato alla schermata ‘Scegli un nuovo modello di pagina’. SeedProd offre molti modelli predefiniti tra cui puoi scegliere.
Dopo aver selezionato un modello, ti verrà chiesto di fornire un nome e un URL per la tua pagina di destinazione.
Dopo aver aggiunto questi dettagli, fai semplicemente clic sul pulsante ‘Salva e inizia a modificare la pagina’ per continuare.
Questo avvierà il page builder drag-and-drop di SeedProd, dove ora puoi iniziare a modificare la tua pagina. Per istruzioni dettagliate, consulta la nostra guida su come creare una pagina di destinazione con WordPress.
Per questo tutorial, aggiungeremo e ridimensioneremo un blocco Immagine e un blocco Pulsante.
Per prima cosa, dovrai trascinare il blocco Immagine dal pannello dei blocchi a sinistra e rilasciarlo ovunque desideri sulla pagina.
Successivamente, fai clic sul blocco Immagine per aprire le sue impostazioni di blocco nella colonna di sinistra. Da qui, puoi caricare un'immagine dalla tua libreria multimediale.
Successivamente, puoi modificare l'altezza e la larghezza del blocco utilizzando pixel o percentuali.
Puoi anche regolare le dimensioni e la posizione dell'immagine passando alla scheda 'Avanzate' nella parte superiore del pannello delle impostazioni.
Quindi, fai clic sul pannello Spaziatura per espandere le sue impostazioni.
Qui, aggiungi semplicemente valori per regolare il margine e il padding del blocco in base alle tue esigenze.
Puoi regolare il margine e il padding per le aree superiore, inferiore, sinistra e destra del blocco.
Con Seedprod, puoi anche aggiungere un blocco Spacer tra due blocchi diversi per creare spazio tra di loro.
Innanzitutto, dovrai individuare e aggiungere il blocco 'Spacer' dalla colonna di sinistra. Quindi, fai clic su di esso per aprire le sue impostazioni.
Ora, puoi controllare l'altezza dello spacer usando il cursore 'Altezza'.
Il blocco spacer può aiutarti a creare un sito web ordinato.
Puoi anche cambiare la larghezza e l'altezza di altri blocchi nello stesso modo, inclusi i blocchi Video, Intestazione e Pulsante.
Trova semplicemente il blocco Pulsante nella colonna di sinistra e trascinalo sulla tua pagina.
Successivamente, dovrai fare clic sul Pulsante per aprire le impostazioni del suo blocco.
Da qui, passa alla scheda 'Avanzate' dall'alto. Puoi cambiare l'altezza del blocco trascinando il cursore 'Padding Verticale'.
Per cambiare la larghezza, trascina il cursore 'Padding Orizzontale' nella colonna di sinistra.
Una volta terminato, non dimenticare di fare clic sul pulsante 'Salva'.
Speriamo che questo articolo ti abbia aiutato a imparare come cambiare la larghezza e l'altezza dei blocchi in WordPress. Potresti anche voler consultare il nostro articolo su come aggiungere e allineare immagini nell'editor a blocchi di WordPress e le nostre migliori scelte per i migliori temi WordPress compatibili con Gutenberg.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Suman Sourabh
Consigli fantastici!! Finora ho usato solo il primo metodo. D'ora in poi proverò gli altri metodi. Grazie mille!
Supporto WPBeginner
Prego!
Amministratore