Come visualizzare le immagini di WordPress uno accanto all’altro

Vuoi mostrare le tue immagini di WordPress fianco a fianco? A volte si consiglia di allineare le foto in una riga sul tuo sito web. In questo articolo, ti mostreremo come visualizzare le immagini di WordPress l’una accanto all’altra.

Visualizzazione di immagini WordPress uno accanto all’altro

Ci sono diversi modi per visualizzare le immagini fianco a fianco in WordPress. Diamo un’occhiata a tre semplici metodi –

Metodo 1: Allinea a sinistra

Per prima cosa, aggiungi le tue foto al tuo post o pagina WordPress. Basta fare clic sul pulsante Aggiungi media nell’angolo in alto a sinistra dell’editor per selezionare le immagini che si desidera inserire.

Una volta selezionate le immagini, fare clic sul pulsante Inserisci in post.

Ora fai clic su ogni immagine e seleziona Allinea a sinistra per allineare le immagini l’una accanto all’altra (devi essere nella scheda Visiva per farlo).

In alternativa, puoi selezionare “Sinistra” dall’opzione di allineamento (sotto “Impostazioni visualizzazione allegati”) all’interno della schermata Inserisci supporto prima di fare clic sul pulsante Inserisci in post.

Ora le immagini verranno visualizzate automaticamente fianco a fianco. Ecco il risultato:

C’è un aspetto negativo di questo metodo. Se si dispone di testo nella stessa pagina tue immagini, riempire qualsiasi spazio vuoto a destra delle immagini:

Metodo 2: Aggiungere il CSS

aggiungendo il tuo codice CSS personalizzato per le tue immagini, è possibile avere il controllo completo su esattamente come sono visualizzati sul tuo sito web.

Innanzitutto, assicurati di modificare la tua pagina o il tuo post in modalità testo (non in modalità visiva).

Nel tag <img> per le tue immagini, aggiungi il seguente codice:

style= "float: left; margin-right: 15px;"

Questo renderà le tue immagini allineate l’una accanto all’altra con uno spazio di 15px a destra di ogni immagine. Avrete bisogno di aggiungere questo codice per tutte le immagini che si desidera visualizzare una accanto all’altra, come mostrato di seguito:

Ecco come appare:

Se si desidera evitare che il testo da visualizzare a destra delle immagini, utilizzare questo codice invece:

style= "display: inline-block; margin-right: 15px;"

Ora, il tuo testo non avvolgerà le tue immagini. Invece, sarà simile a questo:

L’unico aspetto negativo di questo metodo è che richiede l’aggiunta di codice manualmente, il che può essere un po ‘ confuso e dispendioso in termini di tempo.

Metodo 3: Utilizzando Envira Gallery

Envira Gallery è il metodo più semplice per visualizzare le immagini fianco a fianco in WordPress. Inoltre, rende automaticamente le foto più grandi in miniature più piccole in modo che tutte le immagini siano perfette quando visualizzate l’una accanto all’altra.

Per iniziare, è necessario installare e attivare il plugin Galleria Envira.

Quindi, basta andare su Envira Gallery ” Aggiungi nuovo per aggiungere una nuova galleria di immagini in WordPress.

È sufficiente aggiungere un nome per la galleria di immagini, e aggiungere le foto che si desidera nella sezione Immagini in Impostazioni Galleria Envira.

Assicurati di premere il pulsante Pubblica per salvare le modifiche.

Ora vedrai una finestra di dialogo con i codici brevi e alcune altre informazioni. Basta copiare e incollare uno di questi codici brevi nella pagina o post in cui si desidera mostrare le immagini fianco a fianco.

(Per un tutorial dettagliato, controlla come creare una galleria di immagini con miniature in WordPress.)

Questo è tutto! Ecco un esempio di come le tue immagini appariranno sul tuo sito web:

È possibile utilizzare Envira per visualizzare immagini di diverse altezze l’una accanto all’altra. Per il nostro tutorial su questo, controlla come creare una galleria di immagini in muratura in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare le immagini di WordPress l’una accanto all’altra. Si consiglia inoltre di controllare la nostra guida su come creare un cursore di immagine per le gallerie WordPress.

Se ti piace questo articolo, quindi si prega di seguirci su Facebook e Twitter per ulteriori tutorial gratuiti WordPress.