Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come affiancare le immagini in WordPress (facilmente)

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).

Putting images side by side in WordPress

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.

Upload images for the gallery

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.

Two images added to the block

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.

Add three images to the block

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.

Change column number to display images side by side

È 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.

Images side by side preview

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”.

Give your new gallery a name

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.

Images uploaded to Envira Gallery

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.

Click the Edit button to edit an image in your gallery

È 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.

Setting the title and the alt text for the image

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.

Click the Save Metadata button to save your changes

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.

Click the Publish button to publish your gallery, so you can use it on your site

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.

Add Envira Gallery block

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.

Change columns number from the Select Layout dropdown menu

È 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.

Images side by side in WordPress

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.

Viewing an image from the Envira gallery in a 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.

Editing a gallery you've already created in Envira Gallery

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.

Adding an Envira gallery in the classic editor

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.

Use alignment settings to resize an image

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.

Add Block using column

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

12 commentiLascia una risposta

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.