Come ridimensionare i blocchi in WordPress

Il Gutenberg Block Editor, introdotto ufficialmente in WordPress 5.0, offre agli utenti l'opportunità di personalizzare completamente i propri contenuti e siti WordPress. Non più vincolato dalla necessità di creare in uno strumento WYSIWYG come TinyMCE Classic Editor, Gutenberg fornisce blocchi individuali per ogni elemento del contenuto del post o della pagina. Con il controllo sulle impostazioni per ogni blocco specifico, gli utenti possono progettare i contenuti di WordPress più facilmente che mai. E uno dei modi più semplici per far risaltare i design è portarli oltre le impostazioni predefinite. Quindi vedremo come ridimensionare i blocchi in WordPress in modo che tu possa iniziare a pensare (e progettare) fuori dagli schemi.

La maggior parte del ridimensionamento nell'editor dei blocchi è ancora vincolato all'area del contenuto del sito a causa della natura reattiva dei blocchi. Se hai impostato l'area del contenuto della tua pagina su tutta la larghezza, lavorerai all'interno di quello spazio. Se hai un'area del contenuto del post impostata su 580px o 1200px, ad esempio, lavorerai lì. I metodi che stiamo usando per insegnarti come ridimensionare i blocchi in WordPress sono tutti basati sull'idea che rimarrai entro i confini di un particolare contenitore di blocco.

Come ridimensionare i blocchi nell'editor

Alcuni, ma non tutti, i blocchi hanno opzioni di ridimensionamento integrate. Questi sono i più facili da ridimensionare per ovvi motivi. A seconda del blocco, tuttavia, le opzioni di ridimensionamento saranno in posizioni diverse.

Esempio n. 1: il blocco immagine

Facendo clic sul blocco verrà visualizzato il menu di scelta rapida e le opzioni di ridimensionamento qui sono in realtà opzioni di spaziatura. Tuttavia, gli allineamenti a larghezza ampia ea larghezza intera modificheranno la dimensione del blocco immagine alla larghezza del contenitore (largo) o alla larghezza dell'intera pagina (intera).

Puoi anche ridimensionare il blocco immagine utilizzando le impostazioni del blocco nella barra laterale di destra. La sezione Dimensione immagine giustamente chiamata ha una serie di scelte con cui puoi ridimensionare il blocco.

WordPress ha un menu a discesa per il ridimensionamento rapido e puoi scegliere i preset da thumbnail , medium , large e full size. La selezione della dimensione intera varierà in base al tema, indipendentemente dal fatto che venga effettivamente visualizzato completamente o che si adatti all'area del contenuto.

Puoi anche regolare in modo specifico la larghezza e l'altezza per pixel. Al di sotto di questo è possibile regolare in percentuale. La percentuale si basa sul valore numerico nei campi larghezza e altezza . Non la dimensione dell'immagine preimpostata che hai selezionato dal menu a discesa.

Infine, puoi fare clic sull'immagine stessa per visualizzare un bordo blu con ancore circolari bianche . Puoi trascinarli per ridimensionare il blocco.

Farai semplicemente clic e trascinerai su uno qualsiasi degli ancoraggi per ridimensionare l'immagine. In questo modo regolerai le dimensioni nei campi dell'altezza e della larghezza nel menu delle impostazioni del blocco.

Esempio #2: Il Blocco Evento

Per l'Event Block, le impostazioni di ridimensionamento si trovano esclusivamente nel menu contestuale nell'editor stesso. (L'Event Block è un plug-in separato di Automattic che installerai e non fa parte dell'editor principale di Gutenberg.)

Come alcune delle opzioni del blocco immagine, le opzioni di ridimensionamento qui sono tecnicamente opzioni di spaziatura. Ma le due opzioni sono Allinea al centro e Larghezza larga. Puoi sceglierne uno da centrare nel contenitore o per l'intera larghezza dello schermo.

La regolazione dell'altezza del blocco nell'editor stesso è un po' complicata, ma funziona. Se premi semplicemente invio /ritorno nel campo del blocco vuoto, puoi espandere l'altezza inserendo blocchi di paragrafo extra vuoti.

È una soluzione tutt'altro che ideale. Ma è veloce e funziona in un pizzico, soprattutto data l'assenza di una vera opzione di regolazione dell'altezza per l'Event Block.

Esempio 3#: utilizzo delle colonne per ridimensionare i blocchi in WordPress

Se il blocco che devi ridimensionare non include opzioni di ridimensionamento nel pannello delle impostazioni o nel menu di scelta rapida, l'utilizzo delle colonne dell'editor dei blocchi è un altro modo per ridimensionare qualsiasi blocco. Cerca semplicemente il blocco Colonne premendo uno dei pulsanti + per aggiungere un nuovo blocco.

All'interno del blocco Colonna, puoi aggiungere qualsiasi altro blocco che desideri. Nelle opzioni di ricerca vengono visualizzati anche i modelli dell'editor di blocchi. Questi sono modelli che puoi inserire nel tuo post o pagina con contenuto già dimensionato e posizionato, in attesa che il tuo contenuto sostituisca il segnaposto.

Fin dall'inizio, il blocco Colonne ti consente di scegliere la dimensione della colonna stessa. È suddiviso in 6 diversi orientamenti, ciascuno con una diversa percentuale della pagina utilizzata per le singole colonne.

Queste non sono le uniche configurazioni che puoi usare. Puoi usare il pulsante blu + all'interno del blocco per aggiungere una nuova colonna in qualsiasi momento. Ogni singola colonna ha il proprio pannello delle impostazioni in cui è possibile regolare solo la larghezza in base alle percentuali.

Potrebbero essere necessari alcuni esperimenti per ottenere il dimensionamento corretto per il tuo design. Tuttavia, quando è finito, puoi avere alcuni contenuti ben progettati e ben distanziati sulla tua prima pagina. Tieni presente che tutte le colonne vuote che hai nell'editor dei blocchi verranno visualizzate come vuote anche nel front-end.

Regolando la larghezza, il posizionamento e il numero di colonne diverse, i tuoi blocchi possono essere ridimensionati e posizionati in quasi tutti i modi.

Hai bisogno di più opzioni di dimensionamento? Prendi in considerazione un generatore di pagine più avanzato

Ci rendiamo conto che alcuni di questi metodi per ridimensionare i blocchi possono sembrare limitanti. Se ritieni che siano troppo limitanti per te, potrebbe essere il momento di esaminare un generatore di pagine più avanzato.

Il nostro Divi, ad esempio, ha opzioni di ridimensionamento e trasformazione per ogni modulo (blocco) che ti danno un controllo molto maggiore su forma, dimensione e spaziatura di quanto sia possibile in Gutenberg. Anche i page builder più avanzati lo fanno, quindi se ritieni che le opzioni di Gutenberg siano troppo limitanti, controllare qualcosa come Divi potrebbe essere il miglior passo successivo.

Come ridimensionare i blocchi in WordPress usando i CSS

Ogni blocco ha una sezione CSS nel pannello delle impostazioni in Impostazioni avanzate . Oltre a qualsiasi altra impostazione avanzata specifica del blocco, ognuna ha un campo per Classi CSS aggiuntive . Puoi assegnare tutti i selettori che desideri a questo singolo blocco, indipendentemente dal fatto che esistano già sul tuo sito o se lo crei appositamente per questo blocco.

Normalmente, suggeriamo di utilizzare gli ID CSS invece delle Classi per i singoli blocchi, ma questo non è supportato dall'editor dei blocchi (almeno per impostazione predefinita). Quindi vorrai semplicemente usare più classi per stare al passo con i singoli blocchi piuttosto che con gli ID. Le classi sono pensate per coprire grandi categorie di tipi di elementi, mentre gli ID sono pensati per i singoli elementi. In questo caso, suggeriamo di utilizzare una convenzione di denominazione chiara per mantenere le cose dritte nel codice.

Indipendentemente da ciò, dovrai semplicemente inserire la classe nel campo di testo. Non includere il punto/punto davanti al nome della classe in questo campo .

Ora dovresti andare su Aspetto - Personalizza e trovare la sezione CSS aggiuntivo in fondo. Scrivi o incolla il codice CSS per ridimensionare il blocco a tuo piacimento.

Suggeriamo di evitare di utilizzare le misurazioni in pixel (px) perché sono assolute. Preferibilmente, utilizzerai vw (larghezza della finestra) , vh (altezza della finestra) o % (percentuale) per regolare il blocco. Ognuno di questi scalerà in riferimento al dispositivo e/o ad altri contenuti intorno ad esso.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

Tieni presente che anche % e vw/vh sono diversi, sebbene funzionino in modo simile. Funzionano tutti su percentuali, ma quelle sono relative a diverse ancore.

La misura percentuale è in relazione al contenitore in cui è contenuto l'elemento. Quindi, se la sezione o la riga in cui si trova l'elemento non va ai bordi dello schermo, anche l'impostazione di larghezza: 100% non raggiungerà i limiti.

L'utilizzo di vh/vw , tuttavia, in quanto sono relativi al viewport del dispositivo stesso, non agli elementi del sito. Usando height:80vh , puoi sempre assicurarti che questo blocco occupi l'80% dell'altezza dello schermo, indipendentemente dal fatto che venga visualizzato su un dispositivo mobile, desktop o tablet.

Conclusione

L'editor di blocchi in WordPress offre agli utenti un numero enorme di opzioni di personalizzazione che in precedenza non erano disponibili (all'interno dell'editor stesso, cioè). Sapere come ridimensionare i blocchi in WordPress è essenziale per poter utilizzare l'editor di blocchi nella sua massima estensione. E con l'editing del sito completo ora nel suo repertorio, questa è un'abilità che sarà solo più utile con il passare del tempo.

Quali sono alcuni suggerimenti e trucchi che puoi condividere sul ridimensionamento dei blocchi in WordPress?

Immagine in primo piano dell'articolo di 3rieart / shutterstock.com