Il Blocco immagine di WordPress is super helpful when inserting and showcasing a single image on your website. But if you want to display multiple photos at once, the Gallery block is the right choice.
Therefore, you must learn how to use the gallery block in WordPress. Once you master the gallery block’s features, you can use it to enhance your website’s visuals, making it more professional and appealing.
Oggi, in questo tutorial, parleremo del blocco galleria di WordPress, delle caratteristiche della barra degli strumenti, delle opzioni di personalizzazione e di come utilizzarlo correttamente. Assicuratevi di seguirci dall'inizio alla fine.
Che cos'è il blocco galleria di WordPress?
Il blocco Galleria di WordPress is a core block in the WordPress block editor. It lets you create and display a collection of images in a griglia format. It is perfect for displaying event photos, organizing images into an attractive layout, or presenting images with minimal effort.
Alcune funzioni vi avvantaggiano quando utilizzate il blocco. Scoprite queste caratteristiche qui di seguito.
- Personalizzazione: Regolare le colonne, la spaziatura e le didascalie per adattarle al proprio design. È inoltre possibile impostare risoluzioni diverse per le singole immagini della galleria.
- Design reattivo: Le immagini si adattano automaticamente alle diverse dimensioni dello schermo per un'esperienza senza soluzione di continuità su mobile, tablet e desktop.
- Integrazione integrata: Non sono necessari plugin aggiuntivi; il blocco funziona in modo nativo in WordPress.
- Compatibile con il SEO: Alt text and captions can improve your content’s accessibility and search engine ranking. You can also set ALT text for separate images within the gallery.
Caratteristiche della barra degli strumenti del blocco Galleria
Quando si inserisce il blocco galleria, nella parte superiore del blocco galleria compare una barra degli strumenti con varie funzioni per personalizzare la galleria. Tali funzioni sono riportate di seguito.
- Trasformare: È possibile trasformare questo blocco in un blocco Immagine, Colonne, Dettagli e Gruppo.
- Trascinare: Consente di trascinare e rilasciare il blocco dedicato in qualsiasi punto dell'editor.
- Maniglia di spostamento: Consente di spostare il blocco verso l'alto e verso il basso.
- Allineare: L'opzione Allinea consente di impostare l'allineamento dell'immagine su Nessuno, Larghezza ampia, Larghezza intera, Sinistra, Centro e Destra.
- Link: Questa opzione consente di aggiungere collegamenti per i contenuti selezionati all'interno del blocco.
- Didascalia: È possibile aggiungere didascalie utilizzando l'opzione editor per ogni immagine.
- Aggiungere: L'opzione Aggiungi consente di aggiungere o caricare nuove immagini nella galleria.
- Altre opzioni: Offre ulteriori opzioni relative alla sezione del blocco, come duplicare, copiare, raggruppare, ecc.
Come utilizzare il blocco Galleria in WordPress
Using the Gallery block in WordPress is simple. Just follow the below steps:
Passo 1: Aggiungere il blocco Galleria nell'editor
Aprire il post o la pagina, fare clic sull'icona "+" per aggiungere un blocco e cercare "Gallery". Selezionare il blocco Galleria per inserirlo nel post o nella pagina.
Passo 2: caricare le immagini
È possibile caricare le immagini o selezionarle dalla libreria multimediale.
Come inserire le immagini tramite l'opzione di caricamento
Per inserire file di immagine, fare clic sul pulsante di caricamento, selezionare le immagini con il cursore mentre tenendo premuto il tasto CTRL della tastiera e fare clic su Apri. Ecco fatto. Le immagini vengono visualizzate nell'editor.
Come inserire un'immagine tramite l'opzione Libreria multimediale
Fare clic sul pulsante Libreria multimediale, selezionare le immagini e fare clic sui pulsanti Crea una nuova galleria e Inserisci galleria per inserire le immagini nell'editor.
Una volta inserite tutte le immagini nella galleria, si possono vedere tutte le funzioni della barra degli strumenti del blocco immagine. È possibile controllare queste funzioni qui.
Passo 3: Personalizzazione della galleria
Per la personalizzazione della galleria, andare su Impostazioni (1) > Blocco (2) > Impostazioni (3). È possibile selezionare le colonne, la risoluzione e altre opzioni.
- Colonne: Le colonne consentono di determinare il numero di immagini da visualizzare nell'editor. Più immagini si aggiungono, più colonne verranno aggiunte alla Galleria. (4)
- Risoluzione: È possibile impostare la risoluzione dell'immagine su Miniatura e Dimensione intera. (5)
- Ritagliare le immagini per adattarle: Questa funzione mantiene il rapporto di ogni immagine e ne adatta le dimensioni.
- Ordine casuale: Questa funzione non mantiene la serie, ma visualizza le immagini a una serie casuale.
L'opzione Stili presenta le seguenti opzioni.
- Colore: L'opzione colore consente di modificare il colore di sfondo del blocco Galleria.
- Dimensioni: L'opzione Dimensioni consente di modificare la spaziatura dei blocchi (spazio tra due blocchi come le immagini), il margine e il padding.
- Bordo e raggio: Questa funzione consente di aggiungere un bordo, un colore e un raggio alla galleria.
Ecco la demo completa della galleria che ho creato.
Create an Interactive Gallery with Galleryberg
While the default Gallery block is excellent for simple grids, it lacks features such as a lightbox, hover effects, and diverse layouts.
If you want a more engaging gallery without writing code, the Galleria plugin is a free alternative that extends the block editor with extra tools. It lets you switch between tile, masonry, justified, and square layouts, and adds a built‑in lightbox for zooming and navigation.
Galleryberg also includes subtle hover effects and responsive controls so your galleries feel modern on desktop and mobile.
Now let’s see how to use the Galleryberg plugin.
Passo 1: installare il plugin Galleryberg
Go to your WordPress dashboard and navigate to Plugins → Add New and search for Galleryberg. Then install and activate the plugin.
Step 2: Insert the Galleryberg Gallery Block
Create a new post/page or edit an existing one. Click the “+” button, search for Galleryberg, and add the block.
Step 3: Add Your Images
Upload new images or select them from the Media Library and click Select.
Passo 4: scegliere un layout
By default, the block uses a Tiles layout. In the block’s sidebar, you can switch to Muratura, Giustificato, o Quadrato to better match your design.
Each layout automatically rearranges the images, and you can adjust the columns, spacing, and borders.
Step 5: Enable the lightbox
Toggle Enable Lightbox in the block settings to let visitors click an image and view it in a pop‑up with zoom and slide navigation.
The lightbox includes keyboard and touch controls, so it works smoothly on desktops and phones.
Step 5: Explore hover effects and captions
Use the Caption settings to display text below images or as an overlay that appears on hover. Galleryberg’s hover animations (zoom in/out and overlays) make the gallery feel interactive without distracting the
Fase 6: Anteprima e pubblicazione
Once satisfied, preview your gallery and publish or update the post. Your gallery will be responsive and performance‑optimised thanks to server‑side rendering.
Why Use Galleryberg Instead of the Core Block?
The core Gallery block offers basic grid layouts but lacks features such as a lightbox, hover animations, and varied layouts. Galleryberg provides four different gallery styles, a responsive lightbox with zoom and keyboard navigation, and intuitive controls for spacing, colors, and captions. It even supports responsive hover effects to add subtle animations. If you need a gallery that encourages visitors to interact with your images and fits seamlessly into the block editor, Galleryberg is a lightweight, user‑friendly solution.
Pensieri finali!
Il blocco Galleria è un potente strumento dell'editor di blocchi Gutenberg. Consente di visualizzare le collezioni di immagini senza bisogno di plugin aggiuntivi.
È una scelta eccellente per tutti per la sua flessibilità, le opzioni di personalizzazione e la perfetta integrazione con WordPress.
Provatelo e scoprite come può trasformare il modo in cui presentate le immagini sul vostro sito web.
Fatemi sapere cosa ne pensate di questo tutorial nella sezione commenti qui sotto. Inoltre, fatelo conoscere ai vostri amici attraverso i vostri social media.
Per saperne di più!
