Volete affiancare le immagini in WordPress?
Spesso i principianti hanno difficoltà a capire come inserire due immagini una accanto all’altra nei loro post e pagine di WordPress.
In questo articolo mostreremo come affiancare facilmente 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 gli utenti possono voler confrontare 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.
Nota: Envira Gallery ha anche una versione gratuita che si può utilizzare. Tuttavia, per questa esercitazione utilizzeremo il piano Pro.
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.
Suggerimento: se si utilizza l’editor classico invece dell’editor a blocchi, si può comunque utilizzare Envira Gallery.
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 capire 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 il nostro elenco completo dei plugin WordPress indispensabili (scelti dagli esperti) per far crescere il vostro business.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk
These Gutenberg tutorials are seriously great. For someone like me who learned how to make websites in Elementor, these articles are priceless. I don’t have to scramble to find a way to do such a simple thing in Gutenberg because you have tutorials for it.
WPBeginner Support
Glad our guide was helpful
Admin
Kurt
I’ve used HTML tables in the past. I’ll try this feature the next time I need to use more than one image in the same location.
WPBeginner Support
We hope our recommendation makes the process easier for you
Admin
Diana
Is there a way to have “nested” galleries? Would this be an “album”? And would Envira accomplish this? Example: I need to build an artist’s website, with a dedicated page for images. I need to have a “cover” image for separate bodies of artwork (painting, sculpture, outdoor sculptures, ceramic vessels, etc.). So that when you click on it, it opens another gallery of works within a given category (paintings, small sculptures. large sculptures, etc.) And I’d like to be open those images in a slideshow format. Is there an easy way to do this? Most of the templates only allow for single image galleries (i.e. what you see is what you get, only larger, when you click on it). The only other workaround would be to link the cover image to a hidden pager each category?
It’s frustrating to know what I want, but not how to DO IT…
WPBeginner Support
For what it sounds like you’re wanting, you would want to take a look at Envira’s albums and that should be what you are looking for.
Admin
Michael Jakubowski
This looks very promising and I’ll use it in near future. I would have tried to load a 2 column table and then import pictures into it but this looks great!
Thanks.
WPBeginner Support
You’re welcome
Admin
MR MICHAEL F TULK
Always good to get a suggestion. All that is on my blog already but it takes a kick up the pants to get me to utilise things. Thanks.
WPBeginner Support
Glad our guide could be helpful
Admin
Daniel
This article help me out because I wondering if side by side to give my blog post a different look I’ll definitely using it the blog post. For sure thanks
WPBeginner Support
Glad our article was helpful
Admin