Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

Come aggiungere e allineare immagini nell'editor a blocchi di WordPress (Gutenberg)

Quando siamo passati all'editor a blocchi di WordPress, anche semplici attività come l'aggiunta e l'allineamento delle immagini sembravano diverse.

Dopo aver aiutato così tanti utenti tramite WPBeginner, abbiamo notato che questo è uno degli ostacoli più comuni che le persone incontrano quando passano a Gutenberg.

La buona notizia è che lavorare con le immagini nell'editor a blocchi è diventato più intuitivo, una volta che sai dove cercare.

In questa guida, ti mostreremo esattamente come aggiungere e allineare immagini nell'editor a blocchi di WordPress. Queste sono le stesse tecniche che usiamo ogni giorno su WPBeginner, spiegate in termini semplici che chiunque può seguire.

Aggiungere e allineare correttamente le immagini in WordPress

Allineamento delle immagini nell'editor di WordPress

In precedenza, WordPress utilizzava un'area di testo con pulsanti di modifica come editor predefinito. Un problema particolare nel vecchio editor era l'allineamento delle immagini, che poteva rendere difficile allineare correttamente gli elementi sul tuo sito web WordPress.

Anche se c'erano opzioni per allineare le immagini a sinistra, a destra o al centro, non sempre avevano un bell'aspetto. A volte, le immagini non si allineavano, erano della dimensione sbagliata o semplicemente sembravano fuori posto.

WordPress 5.0 ha introdotto un nuovo editor di post di WordPress chiamato editor a blocchi Gutenberg. Ha risolto diversi problemi con il vecchio editor, inclusi i problemi di allineamento delle immagini.

Nelle sezioni seguenti, spiegheremo come aggiungere e allineare facilmente le immagini nel nuovo editor per creare splendidi layout per i post e le pagine del tuo blog WordPress.

Ecco una rapida panoramica di tutti gli argomenti che condivideremo:

Iniziamo!

Come aggiungere e allineare immagini in WordPress

L'editor è dotato di diversi blocchi che puoi utilizzare per aggiungere immagini ai tuoi post e pagine WordPress. In questa guida, ci concentreremo sui più popolari:

  • Immagine
  • Galleria
  • Media e testo
  • Copertina

Iniziamo prima con un semplice blocco immagine.

Puoi fare clic sul pulsante 'Aggiungi nuovo blocco' o digitare /immagine nell'editor del post per inserire un blocco immagine.

Aggiungere un nuovo blocco immagine nell'editor dei post di WordPress

Questo attiverà i 3 pulsanti all'interno del blocco immagine vuoto.

Ora, puoi caricare un'immagine dal tuo computer, selezionare un'immagine già caricata dalla libreria multimediale o inserire un'immagine fornendo l'URL del file immagine.

Successivamente, fai clic sul pulsante 'Carica' e quindi seleziona l'immagine che desideri caricare dal tuo computer.

Non appena selezioni l'immagine, WordPress la caricherà nella tua libreria multimediale e la inserirà nel blocco immagine.

Aggiungere un'immagine utilizzando il blocco immagine

Ora noterai una barra degli strumenti sopra la tua immagine e alcune impostazioni del blocco immagine nella colonna di destra.

Per allineare la tua immagine, utilizzerai la barra degli strumenti che appare sopra l'immagine.

Pulsanti di allineamento delle immagini nell'editor dei post di WordPress

Il blocco immagine ti offre diverse opzioni di allineamento. A seconda del tuo tema WordPress, potresti vedere tutte le seguenti opzioni:

  • Nessuno: L'allineamento predefinito, che posiziona l'immagine in linea con il tuo testo.
  • Allinea a sinistra: Spinge l'immagine a sinistra, consentendo al testo di fluire attorno al suo lato destro.
  • Allinea al centro: Centra l'immagine all'interno della colonna di contenuto principale.
  • Allinea a destra: Spinge l'immagine a destra, consentendo al testo di fluire attorno al suo lato sinistro.
  • Larghezza ampia: Rende l'immagine più larga dell'area di contenuto principale per un aspetto più dinamico.
  • Larghezza intera: Estende l'immagine per riempire l'intera larghezza del browser, da bordo a bordo.
Allineare un'immagine al centro in WordPress

Fai clic sul pulsante 'Allinea al centro' per centrare la tua immagine nel tuo post.

Come allineare perfettamente un'immagine accanto al testo

Spesso, potresti aver bisogno di allineare perfettamente un'immagine accanto al testo. L'editor a blocchi di WordPress lo rende facile con il blocco Media & Testo.

Questo blocco aggiunge fondamentalmente un'area a due colonne: una colonna per le immagini (media) e la seconda colonna per il contenuto testuale.

Blocco media e testo nell'editor dei post di WordPress

Carica semplicemente la tua immagine facendo clic sul pulsante 'Carica'.

Quindi, puoi aggiungere il testo che desideri visualizzare accanto ad essa.

Aggiungere media e testo al blocco

Se hai bisogno di una descrizione più lunga, continua e digitala.

L'allineamento dell'immagine si adeguerà automaticamente all'altezza del testo nella colonna successiva.

La dimensione dell'immagine si adatta per allinearsi verticalmente

L'editor a blocchi di WordPress include anche un blocco per aggiungere gallerie di immagini. Questo ti permette di visualizzare facilmente le immagini in una griglia di righe e colonne.

Il blocco Galleria è dotato di opzioni di allineamento simili nella barra degli strumenti. Per impostazione predefinita, il blocco visualizzerà le immagini in un layout a 3 colonne.

Quindi, la tua galleria di immagini potrebbe apparire così:

Una galleria a 3 colonne

Puoi regolare il layout della galleria spostando il cursore a sinistra o a destra. In alternativa, puoi semplicemente digitare il numero di colonne desiderato nella casella.

Qui, abbiamo provato il layout a 4 colonne:

Una galleria a 4 colonne

Se la tua galleria non appare bene a causa delle differenze nelle dimensioni delle immagini, dovrai regolarne l'allineamento.

Nell'editor del post, puoi fare clic sulla galleria. Quindi, puoi fare clic sull'icona 'Seleziona blocco padre: Galleria' per aprire il pannello di personalizzazione.

L'icona Seleziona blocco padre: Galleria

Da qui, assicuriamoci di abilitare l'opzione 'Ritaglia immagini per adattarle'.

Non appena lo fai, WordPress adeguerà la galleria al centro.

Ritaglia le immagini per adattarle e rendere ordinata la tua galleria

La funzionalità galleria predefinita in WordPress è piuttosto buona. Tuttavia, se aggiungi regolarmente gallerie fotografiche ai tuoi post e pagine di WordPress, considera l'utilizzo di un plugin per gallerie fotografiche come Envira Gallery.

Questi plugin ti daranno più opzioni per allineare le immagini nelle tue gallerie fotografiche, visualizzarle nel popup e stilizzarle in modo diverso.

Per maggiori dettagli, consulta il nostro tutorial su come aggiungere una galleria di immagini in WordPress.

Come aggiungere due immagini una accanto all'altra in WordPress

Il modo più semplice per visualizzare 2 immagini una accanto all'altra in un post di WordPress è aggiungere entrambe le immagini a un blocco Galleria.

Visualizzare due immagini una accanto all'altra nei post e nelle pagine di WordPress

Per aprire l'opzione di personalizzazione del blocco Galleria, puoi fare clic sulla galleria e poi ancora sull'icona ‘Seleziona blocco genitore: Galleria’.

Questo aprirà il pannello di personalizzazione sul lato destro.

Icona del blocco Galleria per aprire le opzioni di personalizzazione

Da qui, seleziona semplicemente un layout a 2 colonne per il blocco galleria per visualizzare entrambe le immagini una accanto all'altra.

Puoi anche abilitare l'opzione ‘Ritaglia immagini per adattarle’ per assicurarti che entrambe le immagini siano della stessa dimensione e centrate.

Ritaglia le immagini per adattarle abilitato

Altri modi per aggiungere e allineare immagini in WordPress

Oltre ai blocchi che abbiamo già trattato, puoi anche utilizzare il blocco Copertina.

Il suo scopo principale è permetterti di posizionare testo direttamente sopra un'immagine, il che è perfetto per creare intestazioni di sezione accattivanti e call to action.

Il blocco Copertina ha le stesse opzioni di allineamento di una normale immagine.

Puoi anche aggiungere una sovrapposizione di colore per rendere il tuo testo più facile da leggere e persino selezionare l'opzione 'Sfondo fisso', che crea un fantastico effetto di scorrimento parallax.

Immagine di copertina in WordPress

Per saperne di più sull'uso delle immagini di copertina, consulta il nostro articolo sulla differenza tra immagini in primo piano e immagini di copertina nell'editor a blocchi di WordPress.

Finora, abbiamo parlato di aggiungere immagini direttamente ai tuoi post e pagine. Che dire delle immagini da siti di terze parti?

L'editor a blocchi rende anche questo facile. Puoi aggiungere immagini da siti di condivisione social popolari, tra cui Instagram, Facebook, Flickr, Imgur, Photobucket e altro ancora.

Ad esempio, se vuoi aggiungere una foto di Instagram, aggiungi semplicemente il blocco Instagram all'editor del post e inserisci l'URL del post che desideri condividere.

Embed di Instagram in WordPress

Quindi, puoi semplicemente fare clic sull'allineamento desiderato nella barra degli strumenti. I blocchi di incorporamento ti consentono anche di incorporare facilmente video in WordPress.

Per maggiori dettagli, consulta la nostra guida su come incorporare Instagram in WordPress.

Suggerimento bonus: Come centrare un video in WordPress

Proprio come con le immagini, potresti voler cambiare l'allineamento dei tuoi video. Fortunatamente, i blocchi video in WordPress utilizzano gli stessi identici strumenti di allineamento.

Sia che tu stia incorporando un video di YouTube o caricando il tuo, fai semplicemente clic sul blocco video. Vedrai apparire la familiare barra degli strumenti di allineamento in alto.

Allineare il video al centro

Fai semplicemente clic sul pulsante 'Allinea al centro' per centrare l'intero lettore video nell'area del tuo contenuto. Questo crea un layout molto più pulito e rifinito per la tua pagina.

Per saperne di più, puoi leggere la nostra guida su come allineare al centro un video in WordPress.

Domande frequenti sull'allineamento delle immagini in WordPress

Ecco alcune domande che i nostri lettori pongono frequentemente sull'allineamento delle immagini in WordPress:

Qual è il miglior tipo di file immagine per WordPress?

Per le fotografie, il JPEG è solitamente la scelta migliore perché bilancia qualità e dimensioni ridotte del file. Se la tua immagine necessita di uno sfondo trasparente, come un logo, dovresti usare il formato PNG.

Come rendo le mie immagini responsive sui dispositivi mobili?

L'editor a blocchi di WordPress se ne occupa automaticamente. Qualsiasi immagine che aggiungi sarà responsive, il che significa che si adatterà per adattarsi alle dimensioni dello schermo di qualsiasi dispositivo.

Posso far scorrere il testo attorno a un'immagine?

Assolutamente. Basta aggiungere un blocco Immagine e utilizzare l'opzione 'Allinea a sinistra' o 'Allinea a destra' nella barra degli strumenti. Il testo del paragrafo che segue si adatterà automaticamente attorno all'immagine.

Come aggiungo una didascalia alla mia immagine?

Una volta inserita un'immagine, vedrai un campo "Aggiungi didascalia" direttamente sotto di essa. Fai semplicemente clic su quest'area e digita il testo che desideri utilizzare per la tua didascalia.

Perché le immagini della mia galleria non si allineano correttamente?

Questo accade spesso quando le immagini nella tua galleria hanno altezze o larghezze diverse. Per risolvere questo problema, seleziona il blocco Galleria e abilita l'opzione 'Ritaglia immagini per adattarle' nel pannello delle impostazioni a destra. Questo renderà tutte le immagini della galleria di dimensioni uniformi.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere e allineare facilmente le immagini nell'editor a blocchi di WordPress. Potresti anche voler consultare la nostra guida su come cambiare altezza e larghezza dei blocchi in WordPress e domande comuni su Gutenberg a cui è stata data risposta.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

63 CommentsLeave a Reply

  1. Gutenberg è ancora un grande mistero per me. Ammetto di aver iniziato a scoprirlo solo dopo l'arrivo di WordPress 6.4 e la lettura di queste pagine. Per molto tempo, ad esempio, non riuscivo a capire come posizionare un'immagine e del testo uno accanto all'altro (in Elementor era una cosa completamente semplice). Dopo aver letto questo articolo, riesco a fare un po' di più con Gutenberg. Grazie per questo.

  2. funzionerà con gli Iframes? Modifico un blocco HTML personalizzato e aggiungo un iframe e il salvataggio e l'aggiunta si allineano completamente a sinistra dove tutti gli altri blocchi sono centrati?

    • Dipenderebbe dall'iframe, ma normalmente gli iframe non avranno opzioni di allineamento automatiche.

      Amministratore

  3. Come si allineano le Immagini in Evidenza che appaiono nella pagina del Blog generata automaticamente e nella pagina Categoria? Cliccando sull'immagine si apre il post, e non sembra esserci un'impostazione di allineamento per l'immagine in evidenza quando si compilano le impostazioni del post.

    • Per l'immagine in evidenza, questa verrebbe determinata dal tuo tema. Se contatti il supporto del tuo tema specifico, dovrebbero essere in grado di assisterti con l'allineamento della tua immagine in evidenza.

      Amministratore

  4. Vorrei che tutte le didascalie sul mio sito avessero la stessa dimensione e lo stesso font.
    Come si ottiene questo?

    • A meno che il tuo tema non abbia un'impostazione specifica per questo, la maggior parte dei temi dovrebbe avere il testo uniforme se si tratta solo della didascalia dell'immagine e non di un blocco di testo diverso.

      Amministratore

  5. Vorrei cambiare l'impostazione predefinita per il caricamento di un'immagine in modo che sia sempre centrata. Cambiare ogni immagine che carico per centrarla ogni volta che aggiungo un'immagine è così dispendioso in termini di tempo. Posso cambiare l'impostazione predefinita in centrato?

    • Al momento non esiste un metodo semplice che raccomanderemmo ai principianti, ma terremo d'occhio qualcosa che potremmo raccomandare.

      Amministratore

  6. Sto cercando di usare l'Editor a blocchi per visualizzare due immagini una accanto all'altra. Ho usato la funzione a due colonne, quindi blocchi immagine in ogni colonna. Durante la progettazione, viene visualizzato correttamente, ma quando faccio "anteprima in una nuova scheda", le colonne affiancate scompaiono e le immagini sono impilate. Cosa sto sbagliando? È un problema comune? Come posso risolverlo?

    • Potresti voler assicurarti che le immagini non siano troppo grandi per stare una accanto all'altra nel tuo tema specifico, che è il motivo più comune per questo problema.

      Amministratore

  7. Sto cercando di imparare a usare il nuovo editor a blocchi. Quando faccio clic sul pulsante Aggiungi blocco e scelgo immagine per aggiungere una foto, ottengo solo l'opzione "inserisci da URL" e non riesco a trovare un modo per aggiungere foto dalla mia Libreria multimediale. Puoi aiutarmi?

    • Dovresti controllare attentamente per trovare il testo accanto al pulsante di caricamento per selezionare l'immagine dalla tua libreria multimediale

      Amministratore

  8. Pubblico un blog da molti anni. Ho imparato a temere l'introduzione di un nuovo sistema. Fare una cosa semplice come aggiungere fotografie ora è molto difficile.

    • Hopefully, once you are comfortable with the new system it becomes easier for you :)

      Amministratore

  9. Ottime informazioni, il problema è che nel backend funziona ma nel frontend si allinea sempre a sinistra. Sarebbe possibile che ciò abbia a che fare con il mio template Elementor?

    • Se stai utilizzando un page builder, è possibile che il tuo page builder stia sovrascrivendo lo stile e puoi contattare il supporto del tuo builder per assistenza.

      Amministratore

  10. Ho appena iniziato con WordPress ieri. Sono totalmente una principiante e sono così felice che wpbeginner mi abbia fornito le “rotelle di addestramento” per iniziare. L'educazione su questo sito web è così preziosa. Non posso ringraziarvi abbastanza.

  11. Thank you for this little gold nugget – really struggling getting in to the “new” way of handling my blog and almost giving up and searching for other alternatives…. :)

  12. Menzioni “Immagine in linea”, ma non vedo alcun blocco del genere. Il tuo articolo è stato scritto un po' di tempo fa ma presumibilmente aggiornato a gennaio 2020 – quel blocco è scomparso e ti sei dimenticato di rimuoverlo da questo articolo? O una domanda migliore: come posso aggiungere un'immagine in linea all'interno di un altro blocco come Paragrafo o Titolo?

    • Il blocco immagine in linea non è attualmente disponibile, ma normalmente puoi ricreare la formattazione con il testo e l'immagine o il blocco immagine standard

      Amministratore

  13. Quando aggiungo un'immagine dal mio media, la barra degli strumenti dell'immagine non appare per allinearla a sinistra o a destra. Posso cambiare le dimensioni dell'immagine.

    • Dovresti assicurarti di non averla impostata in cima alla pagina invece che come l'abbiamo al momento.

      Amministratore

  14. Ciao, ho allineato tutte le immagini usando l'editor a blocchi e tutto sembra a posto finché non faccio l'anteprima?

    Poi alcune immagini sono diventate molto più grandi delle altre, ho una galleria di due immagini che improvvisamente si trovano sopra un'unica immagine. Tutto si è spostato casualmente!

    Anche quando l'ho pubblicato, era ancora tutto sbagliato. Mi piacerebbe il tuo aiuto, grazie!

    • Dovresti contattare il supporto del tuo tema per assicurarti che non ci sia un conflitto di stile, altrimenti, potresti provare a disabilitare i tuoi plugin per vedere se si tratta anche di un conflitto di plugin.

      Amministratore

  15. Ciao, sto cercando di allineare gli shortcode uno accanto all'altro come descrivi con le immagini, è possibile? Molte grazie

  16. Ciao,
    Come si organizza il posizionamento del titolo per i blocchi di copertina?

    Hai quell'opzione nella tua barra, ma per qualche motivo, quando clicco sul blocco di copertina, non c'è l'opzione di allineamento del testo.

    Qualche idea a riguardo?

    Grazie per il fantastico articolo.

    • Dovresti controllare la parte superiore della tua pagina, poiché quella sarebbe l'altra posizione in cui si troverebbero le opzioni di allineamento, piuttosto che fluttuare sull'elemento

      Amministratore

  17. Come si rende un'immagine cliccabile con un link cliccabile? Ho cercato tutorial e sembravano tutti basati su un blocco Gutenberg precedente che da allora è cambiato e i tutorial non corrispondono più al blocco.

    • Dovresti controllare la barra degli strumenti in alto per la posizione attuale in cui aggiungere un link a un'immagine

      Amministratore

  18. Salve, è possibile scrivere una didascalia per un'immagine subito sotto l'immagine quando si utilizza il "Blocco Media e testo"?

    • Dipenderebbe dal tuo tema specifico per lo stile, ma dovresti essere in grado di farlo

      Amministratore

  19. Esiste un problema di incompatibilità tra Gutenberg e i temi. Avete un elenco di temi compatibili con Gutenberg (e che consentono la piena funzionalità di Gutenberg)?
    Grazie e cordiali saluti,
    Pete.

  20. Uso WordPress da anni ma ultimamente sono stato un po' assente. Gutenberg è un rompicapo. Seguo queste istruzioni ma semplicemente non riesco ad allineare le immagini in un blocco immagine/testo. Quando vado in anteprima, l'immagine è allineata all'estrema sinistra della pagina senza alcun margine. Ci sono soluzioni in offerta?
    Grazie!!

  21. Ma non puoi collegare le immagini in una galleria? Questo rende la funzione galleria meno attraente

    • If each image needs its own link then setting up columns would likely be what you’re looking to do :)

      Amministratore

  22. What is the best way to add multiple images at once, I can’t seem to add more than one at the time :(

    • Se vuoi aggiungere più immagini nella stessa area, dovresti dare un'occhiata al blocco galleria per aggiungere più immagini in una sezione

      Amministratore

  23. Come aggiungere un'immagine direttamente nell'“Editor di codice”, senza passare dall'“Editor visuale”?

    • Potresti disabilitare l'editor visuale in Utenti > Il tuo profilo, ma ciò ti impedirebbe di utilizzare l'editor visuale per altre sezioni.

      Amministratore

  24. Sto centrando tutte le mie immagini correttamente nell'editor, ma appaiono tutte allineate a sinistra nell'anteprima e nei post live, non importa cosa. Sai cosa potrebbe causare questo? Mi sta facendo impazzire!

    • Il tuo tema potrebbe sovrascrivere lo stile che stai impostando. Se contatti il supporto del tuo tema, dovrebbero essere in grado di aiutarti.

      Amministratore

  25. Vorrei avere un'immagine accanto a un file (pdf) – tutto sulla stessa riga. Posso farlo in un unico blocco o dovrei crearne due? Grazie!

    • Dovresti aggiungere il blocco colonna per dividere il contenuto e permetterti di visualizzare il contenuto in quel modo.

      Amministratore

  26. Sto avendo problemi a creare didascalie per immagini e download che appaiono nei miei file. Non so dove andare una volta che ho l'immagine nei miei file.

    • Se stai cercando di aggiungere l'immagine a un post o a una pagina, normalmente aggiungeresti un blocco immagine e poi selezioneresti il file che vuoi usare nel blocco.

      Amministratore

  27. Quindi, come si fa ora il "nessun allineamento", dove l'immagine è a sinistra e non ha testo che la circonda? Questo era facile con l'opzione di nessun allineamento, che ora è scomparsa. Per favore, riportala indietro! Sto impazzendo cercando di capire come mettere la mia immagine a sinistra (non centrata) e senza testo accanto, ma il testo continua a girarle intorno automaticamente!

    • Per quello che sembra, se non imposti specificamente l'allineamento per un'immagine, l'immagine dovrebbe impostarsi in quel modo.

      Amministratore

      • Solo un rapido follow-up su questo, dato che anche a me dava fastidio. C'è una risposta semplice ma non è così ovvia, dato che stavo cercando un'impostazione: premi di nuovo il pulsante di allineamento selezionato per disattivare l'allineamento e tornare all'impostazione predefinita senza allineamento.

  28. Ottimo post molto utile. Ho aggiornato a WordPress 5.1 ma ora ho problemi a collegare l'immagine all'URL. Puoi aiutarmi?

    • Se stai usando l'editor a blocchi, nelle impostazioni del blocco immagine dovrebbe esserci una sezione Impostazioni collegamento per impostare dove un'immagine rimanda.

      Amministratore

Lascia un commento

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.