I contenuti visivi svolgono un ruolo cruciale nel catturare l'attenzione degli utenti online. Ciò che una singola immagine può trasmettere spesso richiede centinaia di parole. Inoltre, le immagini possono evocare emozioni e migliorare l'estetica complessiva.
Un modo efficace per mettere in mostra le immagini è affiancarle. Questa tecnica è particolarmente utile per confrontare più prodotti, presentare immagini prima e dopo e raccontare una storia.
In questo articolo vi mostreremo tre modi semplici per affiancare le immagini in WordPress.
Creare bellissimi tavoli
Con l'editor di blocchi
Metodo uno: utilizzare il blocco Galleria
WordPress viene fornito con il blocco Galleria predefinito. È possibile presentare le immagini affiancate al blocco nei seguenti modi.
Passo 01: Aggiungere il blocco Galleria a WordPress
È sufficiente aprire un post o una pagina. Trovare la voce Blocco della galleria nella libreria dei blocchi di Gutenberg premendo il tasto pulsante più (+). Aggiungerlo all'editor.
Fare clic sul pulsante Pulsante di caricamento per aggiungere nuove immagini dalla memoria locale. In alternativa, è possibile caricarle dai file esistenti facendo clic sul pulsante Biblioteca multimediale pulsante.
Per questa esercitazione, caricheremo le immagini dalla Libreria multimediale. Selezionare le immagini da aggiungere. Premete il tasto Creare una nuova galleria alla fine.
Una volta aggiunte le immagini all'editor, le vedrete apparire una accanto all'altra. Successivamente, è possibile personalizzare le impostazioni e gli stili del blocco Galleria utilizzando le rispettive opzioni nella barra laterale destra.
Nota: Se le immagini non vengono visualizzate affiancate per impostazione predefinita, selezionare l'intero blocco facendo clic sul pulsante Icona della galleria sulla barra degli strumenti. Specificare i numeri di colonna nella barra laterale destra.
Metodo due: utilizzare il blocco colonne
Il blocco Colonna consente di suddividere i contenuti in più colonne. È possibile aggiungere altri blocchi per aggiungere diversi tipi di contenuto all'interno di ogni colonna.
Passo 01: Aggiungere il blocco colonne al sito
Aggiungere il Blocco colonne all'editor seguendo lo stesso metodo descritto sopra.
Selezionare la disposizione delle colonne come si desidera. È possibile visualizzare un numero uguale di immagini affiancate, corrispondente al numero di colonne aggiunte. Abbiamo selezionato il layout a due colonne per il blocco.
Aggiungere il Blocco immagine premendo il tasto pulsante più (+) all'interno del Blocco colonne.
Caricare un'immagine nello stesso modo in cui abbiamo mostrato sopra.
Nota: Trattandosi del blocco Immagine, è possibile aggiungere solo un'immaginea differenza del blocco Galleria.
Allo stesso modo, si aggiunga l'elemento Blocco immagine di nuovo alla seconda colonna.
Si può notare che la seconda immagine è apparsa accanto alla prima. È ora possibile aggiungere testi alternativi e altre impostazioni per le immagini una per una.
Method Three: Using the Tableberg Block
Tavolo di lavoro è un plugin per la creazione di tabelle basate su blocchi. Con esso è possibile creare colonne e visualizzare immagini affiancate. Seguire i passaggi spiegati di seguito dopo installazione e attivando il plugin.
Passo 01: Aggiungere il blocco TableBerg
Il plugin viene fornito con un Blocco TableBerg. Aggiungerlo all'editor.
Se volete, potete selezionare più righe. Ma l'esercitazione di oggi sarà spiegata con una sola riga e più colonne.
TableBerg consente di aggiungere diversi tipi di blocchi alle celle della tabella. Aggiungere il Blocco immagine alle celle della tabella.
Caricare un'immagine alla cella della tabella nello stesso modo in cui abbiamo mostrato i due metodi precedenti.
Continuare ad aggiungere immagini alle altre colonne della tabella utilizzando il metodo Blocco immagine. Spero che tu possa farcela da solo.
Si veda l'immagine qui sotto. Abbiamo visualizzato tre immagini affiancate all'interno della tabella creata con il blocco TableBerg.
# Rimuovere il bordo del tavolo
È possibile notare un bordo intorno alla tabella. Per rimuoverlo, fare clic sull'icona TableBerg tre volte sulla barra degli strumenti. Andare a Scheda Stili > Bordo sulla barra laterale destra. Mettete il pulsante valore zero (0) per definire le dimensioni del bordo della tabella.
In questo modo, è possibile visualizzare le immagini fianco a fianco sui siti web WordPress.
Conclusione
Mostrare immagini affiancate è molto vantaggioso, mentre il confronto visivo tra diversi prodotti, opzioni, caratteristiche e varianti è essenziale. Spero che oggi possiate farlo da soli con questo tutorial.
Potete fare di più sul vostro sito creando diversi tipi di tabelle con il plugin TableBerg. Date un'occhiata a come creare una tabella di confronto dei prodotti Amazon in WordPress.
