Come affiancare le immagini in WordPress (facilmente)

La visualizzazione di immagini affiancate in WordPress può migliorare l’aspetto visivo di post e pagine. Se volete mostrare prodotti, creare gallerie, fare un confronto o offrire un layout più organizzato, allineare le immagini l’una accanto all’altra è un modo semplice per migliorare il vostro design.

Noi di WPBeginner utilizziamo WordPress per gestire il nostro blog da oltre 16 anni. Abbiamo anche molta esperienza nella formattazione delle immagini, poiché ci sforziamo di includerle in tutte le nostre pagine e post. In questo modo, possiamo offrire un’esperienza utente più coinvolgente.

A nostro avviso, ci sono due modi semplici per farlo. Si può usare l’editor di blocchi di WordPress o un plugin come Envira Gallery. Continuate a leggere per scoprire come affiancare le immagini in WordPress senza scrivere alcun codice.

Perché aggiungere immagini affiancate in WordPress?

L’aggiunta di immagini affiancate può migliorare l’aspetto visivo del vostro sito WordPress, creando un layout più interessante.

Le immagini affiancate possono anche contribuire a un uso efficiente dello spazio del sito web, consentendo di inserire più immagini in un’area limitata.

Ad esempio, se avete un sito web di fotografia, disporre le immagini una accanto all’altra vi aiuterà a sfruttare appieno la vostra pagina WordPress, visualizzando le immagini in modo esteticamente gradevole.

Inoltre, a volte si può desiderare che gli utenti confrontino due immagini sul proprio blog WordPress. Affiancandole, sarà più facile per gli utenti analizzare e capire le differenze tra le immagini.

Detto questo, vediamo come affiancare facilmente le immagini in WordPress.

In questa esercitazione verranno mostrati due metodi diversi; potete usare i link sottostanti per passare al metodo che preferite:

Metodo 1: Aggiungere immagini una accanto all’altra in WordPress utilizzando l’editor di blocchi

Se state cercando un modo semplice per aggiungere immagini una accanto all’altra utilizzando l’editor di blocchi di Gutenberg, questo metodo fa al caso vostro.

L’editor a blocchi offre una funzionalità di blocco Galleria che consente di visualizzare facilmente le immagini in righe e colonne.

Per prima cosa, è necessario creare un nuovo post/pagina o modificarne uno esistente per aprire l’editor dei contenuti. Una volta lì, fate clic sul pulsante “Aggiungi blocco” (+) nell’angolo in alto a sinistra dello schermo per aprire il menu dei blocchi.

Da qui, è sufficiente individuare e aggiungere il blocco Galleria alla pagina o al post.

Successivamente, è possibile aggiungere facilmente le immagini al blocco della galleria dal computer facendo clic sul pulsante “Carica”.

È anche possibile selezionare le immagini dalla libreria multimediale di WordPress facendo clic sul pulsante “Libreria multimediale”.

Come si può vedere, abbiamo aggiunto 2 immagini al nostro blocco Galleria e WordPress le ha posizionate automaticamente una accanto all’altra.

Se si decide di aggiungere una terza immagine, è necessario fare clic sul pulsante ‘Aggiungi’ dalla barra degli strumenti del blocco in alto.

Si aprirà la libreria multimediale da cui è possibile aggiungere una terza immagine al blocco Galleria. Una volta fatto questo, vedrete che WordPress ha semplicemente ridimensionato le immagini per posizionarle automaticamente una accanto all’altra.

Tuttavia, se si decide di inserire una quarta immagine nel blocco Galleria, questa verrà posizionata sotto le altre immagini.

Per risolvere questo problema, è possibile modificare il numero di immagini che WordPress deve includere affiancate in una singola colonna.

Ad esempio, se si vogliono due immagini affiancate e altre due sotto di esse, si può impostare Colonne a 2.

È anche possibile ritagliare le immagini in modo che siano allineate, regolare le dimensioni delle immagini, collegarle a pagine diverse e cambiare il colore di sfondo dal pannello di blocco.

Per istruzioni dettagliate, consultare la nostra guida per principianti su come creare una galleria di immagini in WordPress.

Una volta terminato, non dimenticate di fare clic sul pulsante “Aggiorna” o “Pubblica” per memorizzare le modifiche.

Ora basta visitare il vostro sito web per vedere le immagini affiancate.

Metodo 2: Affiancare le immagini in WordPress utilizzando un plugin (modo semplice)

Se utilizzate il vecchio editor classico di WordPress o se volete creare gallerie più complesse rispetto al blocco Galleria predefinito, questo metodo fa al caso vostro.

Consigliamo di utilizzare Envira Gallery perché è il miglior plugin per gallerie di WordPress.

Per prima cosa, è necessario installare e attivare il plugin Envira Gallery. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, accedere alla pagina Envira Gallery ” Aggiungi nuovo dalla dashboard di WordPress.

Una volta lì, dovrete dare un titolo alla vostra nuova galleria. Noi abbiamo chiamato la nostra “Galleria di esempio”.

Successivamente, caricare le immagini che si desidera utilizzare dal computer facendo clic sul pulsante “Seleziona i file dal computer”.

Per caricare immagini dalla libreria multimediale, fare clic sul pulsante “Seleziona file da altre fonti”.

Una volta caricate le immagini, scorrere fino alla sezione Galleria per visualizzarle.

Da qui è possibile assegnare alle immagini un titolo e un testo alt. Il titolo appare sotto l’immagine quando l’utente vi passa sopra con il cursore del mouse.

Il titolo appare anche sotto l’immagine nella modalità lightbox popup, che vedremo tra poco.

Per modificare il titolo e il testo alt, fare clic sul pulsante “Modifica” di un’immagine nella galleria.

È quindi possibile modificare il titolo dell’immagine e inserire il testo alt, utile per la SEO del sito WordPress.

Se il titolo descrive l’immagine, è sufficiente ripeterlo per il testo alt.

Una volta terminato, assicurarsi di fare clic sul pulsante “Salva metadati” prima di chiudere la finestra.

In caso contrario, le modifiche apportate non verranno salvate nella galleria.

Infine, scorrere nuovamente fino alla parte superiore della pagina e fare clic sul pulsante “Pubblica” per salvare la galleria di immagini appena creata.

Dopodiché, andate alla pagina o al post di WordPress in cui volete aggiungerlo.

Una volta arrivati a questo punto, fare clic sul pulsante “Aggiungi blocco” (+) nell’angolo superiore sinistro dello schermo per aprire il menu dei blocchi.

Da qui, individuare e aggiungere il blocco Envira Gallery alla pagina/post.

Successivamente, dovrete selezionare la galleria che avete creato dal menu a discesa del blocco stesso.

Per visualizzare le immagini della galleria una accanto all’altra, accedere al pannello di blocco nell’angolo destro della schermata.

Da qui, scorrere fino alla sezione “Seleziona layout” e scegliere il numero di colonne dal menu a discesa. Le immagini saranno ora visualizzate una accanto all’altra nella pagina di WordPress.

È inoltre possibile modificare i margini della galleria, attivare l’isotopia e configurare le impostazioni della lightbox dal pannello di blocco.

Una volta terminato, non dimenticate di fare clic sul pulsante “Pubblica” o “Aggiorna” per memorizzare le impostazioni.

Ora è possibile visitare il sito Web per visualizzare le immagini affiancate.

L’utente può ora fare clic su qualsiasi immagine per vederne la versione a grandezza naturale in una lightbox.

Inoltre, possono scorrere le immagini utilizzando il lightbox.

Se desiderate aggiungere altre immagini alla vostra galleria, potete tornare ad essa visitando la pagina Envira Gallery ” All Galleries nella vostra dashboard di WordPress.

Una volta lì, è sufficiente fare clic sul nome della galleria per modificarla.

Qualsiasi modifica apportata alla galleria apparirà ovunque sia stata inserita nei post, nelle pagine o nelle barre laterali. Non è necessario aggiungerla di nuovo.

Sopra l’editor classico è presente il pulsante “Aggiungi galleria”, che può essere utilizzato per aggiungere una galleria esistente al post.

Una volta terminato, non dimenticate di fare clic sul pulsante “Pubblica” o “Aggiorna” per memorizzare le impostazioni.

Bonus: Allineare le immagini in WordPress

Quando si aggiungono due immagini una accanto all’altra, queste devono essere allineate per creare un aspetto coeso e visivamente accattivante.

Anche se state aggiungendo una singola immagine al vostro blog WordPress, vorrete comunque allinearla al contenuto per creare un equilibrio visivo.

È possibile allineare facilmente le immagini nell’editor di blocchi di WordPress facendo clic sul pulsante “Allinea” nella barra degli strumenti sopra il blocco.

Si apriranno alcune opzioni che consentono di spostare l’immagine a destra o a sinistra, di renderla della stessa larghezza del contenitore o di utilizzare l’opzione a tutta larghezza, in modo che la larghezza dell’immagine sia la stessa del resto della pagina.

Inoltre, è possibile utilizzare il blocco Colonna per allineare l’immagine al contenuto. A tale scopo, dovrete selezionare la variante 50/50.

Una volta fatto ciò, è possibile aggiungere un blocco di immagini perfettamente allineato con il contenuto.

Inoltre, è possibile avvolgere il testo intorno all’immagine, utilizzare il blocco gruppo, aggiungere il blocco copertina o fare molto altro per allineare le immagini insieme o separatamente.

Per ulteriori informazioni, consultare la nostra guida per principianti su come allineare le immagini nell’editor di blocchi di WordPress.

Speriamo che questo tutorial vi abbia aiutato a imparare come affiancare le immagini in WordPress. Potreste anche leggere la nostra guida su come modificare l’altezza e la larghezza dei blocchi in WordPress e la nostra guida sull’aggiunta di tabelle nei post e nelle pagine di WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.