Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.
Using Gallery Blocks

Use Gallery Blocks to add galleries of images and videos to pages and blog posts in a variety of layouts. You can upload images, embed videos, license stock images, or display content from an existing Gallery Page.

To learn how to set up Gallery Blocks on your site, follow the steps in this guide. For common questions, visit Gallery Blocks FAQ.

Guarda un video

Add a Gallery Block

To add a Gallery Block:

  1. Click Edit on a page or post.
  2. Click an insert point or the icon. For more details on these first steps, visit Adding blocks.
  3. Under Gallery, select SlideshowCarouselGrid, or Stack.

Gallery Block options in the block menu.

  1. Use the Content tab to add images and videos.
  2. Use the Design tab to change the layout and edit design settings.
  3. Click Apply to save your changes.

Add images and video

In the Content tab of the Gallery Block editor, you can upload images, add stock images, embed videos, or display content from an existing Gallery Page.

To learn more about our best practices for image uploads, visit Formatting your images for display on the web or view our All About Images video series.

Limitazioni

  • You can add up to 250 images and videos.
  • The more content you add, the slower the page will load. This is especially true in mobile devices with limited processing power. To decrease page size, you can always create multiple galleries on multiple pages.

Opzione 1 - Aggiungi le tue immagini

In the Gallery Block editor, drag multiple images into the image uploader. You can also click the image uploader to open a file selection menu.

The image uploader in the Content tab of a Gallery Block.

Opzione 2 - Cercare immagini di archivio

Clicca sull'icona + nell'angolo inferiore destro e poi clicca su Cerca immagini.

Per maggiori informazioni, visita Cercare e aggiungere immagini di archivio.

Nota: In base alla dimensione del browser, potrebbe essere necessario scorrere verso il basso per visualizzare l'icona +.

Click Search Images to add stock images.

Option 3 - Add videos

You can embed videos from hosting services. Videos can't be uploaded directly. We currently support direct URLs from YouTube, Vimeo, Wistia, and Animoto. For other services, use embed codes.

Incolla l'URL o il codice di incorporamento

To add a video, click the + icon in the bottom-right corner, then click Video.

Click Add Video to embed videos.

In the Edit Video window, paste the video's URL in the Enter an embeddable URL here box. You can also click the </> icon and paste the video's embed code in the Embed Data window that appears.

The URL is usually the URL in your browser's address bar. You may need to click a share button to get the video's URL or embed code.

Enter the URL in the Edit Video window, or click the code icon to use an embed code.

Aggiungi un'immagine di anteprima (opzionale)

Una volta che il video viene localizzato correttamente, puoi aggiungere un'immagine di anteprima personalizzata da visualizzare prima che il visitatore riproduca il video. Alcuni video prevedono un'immagine che viene caricata dal Blocco Galleria, ma puoi sempre rimuoverla e caricarne una nuova.

To use the custom thumbnail, check Use Thumbnail.

Click Upload an Image in the Edit Video window to add a custom thumbnail image.

Al termine, clicca su Save (Salva).

Option 4 - Use existing gallery

Gallery Blocks can display images and videos you've added to an existing Gallery Page.

To display content from a Gallery Page, click Use Existing Gallery, then select the Gallery Page to use.

Click Use Existing Gallery to select an existing Gallery Page on your site.

Gallery Block layouts

There are four Gallery Blocks, and their behavior is consistent across all templates. You can change the layout in the Design tab of the Gallery Block. As you select a layout, you'll see a preview of it on the page. Here are examples of each layout.

SlideshowCarouselGridStack

Slideshow Gallery Blocks display items in a slideshow format. Visitors can click through items, or the slideshow can play automatically. One item displays at a time.

Slideshow Gallery Block example.

Slideshow height

The height of Slideshow Gallery Blocks is set by the height of the widest image. The block considers the widest image to be the one with the widest aspect ratio.

Here's an example of two images you might upload to the Gallery Block. One has a greater width-to-height ratio, and the other is wider in pixels:

Comparison of images with different width-to-height ratios.

The image with the greater width-to-height ratio sets the height of the block:

The image with the greater width-to-height ration setting the height of the Slideshow Gallery Block.

To set the height of the gallery, ensure the image with the widest aspect ratio has the height you want. For example, to reduce the height of the whole gallery, you could crop the image with the widest aspect ratio to shorten it.

Here are some more tips for adjusting the height:

  • To help predict your gallery's height and keep your image sizes consistent, consider using a third-party image editor to crop images to the same aspect ratio before uploading.
  • For stock images or images you've already uploaded, crop them using the built-in Image Editor.
  • Choose whether all images in the slideshow display at the same aspect ratio by checking Automatically Crop Images in the Design tab. 
  • To learn more about aspect ratios, visit Understanding aspect ratios.

Carousel Gallery Blocks display items in a horizontal strip. Visitors can click through items, or the carousel can scroll automatically. The number of items that display at a time depends on the size of the block.

Carousel Gallery Block example.

Grid Gallery Blocks display items in an even grid. Items with uneven lengths have space between them.

Grid Gallery Block example.

Stack Gallery Blocks display items in a single column with one pixel of space between items. Items span the full width of the block. Unlike other layouts, Stack Gallery Blocks don't have options to customize aspect ratios or add navigation controls, so it has more of a fixed layout.

Stack Gallery Block example.

Customize the design

In the Design tab of the Gallery Block, you can customize the design and behavior of the block. As you adjust settings, you'll see a preview of your changes on the page. Your options depend on the layout.

SlideshowCarouselGridStack

Here are the design options for Slideshow Gallery Blocks:

Design option Use this to
Automatically Transition Between Slides

Make the slideshow automatically switch to the next image or video after a set period of time. When checked, a slider appears for setting the transition time between one and 10 seconds.

Playing a video overrides this setting. If a visitor plays a video, they'll need to click the next arrow to see the next item in the gallery.

Show Next and Previous Controls

Add arrows for navigation. The controls appear as overlays to the left and right of the main image or video.

If your gallery contains videos and Automatically Transition Between Slides is checked, we recommend checking this setting.

Automatically Crop Images

Crop or resize the images for the best design.

When unchecked:

  • The widest image or video spans the full width of the block. Its height is resized to preserve its aspect ratio.
  • All other images and videos are resized to have the same height as the widest image or video.
  • Aspect ratios are preserved.
When checked:
  • The widest image or video spans the full width of the block. Its aspect ratio is preserved with its height.
  • All the other images and videos are resized to have the same width and height as the widest image or video.
Show Thumbnails

Add a strip with thumbnails of all images and videos in the gallery below the main image.

When checked, sliders appear to set the thumbnail strip height and the distance between the thumbnail strip and the main image.

Show Title and Description

Display image titles and descriptions as set in each image's settings.

When checked, more options appear to set the location and to only display them on hover.

Transparent Background Remove the gray color behind images that aren't cropped. This option only appears when Automatically Crop Images is unchecked.
Open Links in New Window Open clickthrough URLs in new tabs when clicked.

Here are the design options for Carousel Gallery Blocks:

Design option Use this to
Automatically Transition Between Slides

Make the carousel automatically switch to the next image or video after a set period of time. When checked, a slider appears for setting the transition time between one and 10 seconds.

Playing a video overrides this setting. If a visitor plays a video, they will need to click the next arrow to see the next item in the gallery.

Show Next and Previous Controls

Add arrows for navigation. The controls appear in overlays to the left and right of the main image or video.

If your gallery contains videos and Automatically Transition Between Slides is checked, we recommend checking this setting.

Open Links in New Window Open clickthrough URLs in new tabs when clicked.

Here are the design options for Grid Gallery Blocks:

Design option Use this to
Aspect Ratio Change the shape of the images and videos. By default, 1:1 Square is selected.
Crop Images

Remove padding and display images and videos in the selected aspect ratio.

When unchecked, the height of each row is standardized based on the tallest image or video. Depending on the aspect ratio selected, you may see inconsistent spacing, especially if the grid is set to one thumbnail per row.

Show Title Display titles below images.
Thumbnails Per Row Set the number of thumbnails in a row. Increasing the number decreases the size of each thumbnail.
Padding Adjust the padding/margins between each image or video. Moving the slider to 0 removes the padding.
Lightbox

When checked, clicking an image or video will display in a slideshow lightbox with a black or white background. Clickthrough URLs will be disabled.

Use the Lightbox Theme drop-down to choose whether the lightbox background is black or white.

Open Links in New Window Open clickthrough URLs in new tabs when clicked.

Here are the design options for Stack Gallery Blocks:

Design option Use this to
Show Title and Description

Display titles and descriptions below each image or video.

Open Links in New Window Open clickthrough URLs in new tabs when clicked.

Add image titles and descriptions

Titles and descriptions display in Slideshow, Grid, and Stack Gallery Blocks only. Each image title acts as alt text, which can help your site's SEO and accessibility.

To add a title and description to an image or video:

  1. Hover over an image or video in the Gallery Block editor or in the existing Gallery Page.
  2. Click the gear icon.
  3. Inserisci un titolo e una descrizione. Ti consigliamo di utilizzare termini brevi per descrivere l'immagine.
Tip: If the images in the Gallery Block are from an existing Gallery Page, the image titles and descriptions from the Gallery Page automatically appear in the Gallery Block.

The behavior and appearance of text depends on the Gallery Block layout:

SlideshowCarouselGridStack

Titles and descriptions can display constantly or on hover. Set the position in the block's Design tab.

In smaller browsers and on mobile devices, titles and descriptions may not display.

Titles and descriptions don't display in Carousel Gallery Blocks.

Titles display below images. Titles and descriptions display on hover when images are opened in a lightbox, but don't display for videos opened in a lightbox.

Titles and descriptions display below images.

Tip: The caption style depends on the Gallery Block design and your template. To learn more, visit Styling image captions.

Add clickthrough URLs

Use clickthrough URLs to link images to external pages, internal content, or files. This is a great way to encourage clicks to other content, like client projects, products, or blog posts. Clickthrough URLs work with images, but they don’t work with videos.

Per aggiungere un Collegamento URL:

  1. Hover over an image or video in the Gallery Block editor or in the existing Gallery Page.
  2. Click the gear icon.
  3. Set up the link in the Click to add URL... box. For detailed steps visit Using clickthrough URLs.
  4. Check or uncheck Open Links in New Window in the Design tab to control how your links appear.
Nota: I Blocchi Galleria prevedono limitazioni per i Collegamenti URL:
  • In Slideshow Gallery Blocks, clickthrough URLs override navigation. If you use clickthrough URLs and the Slideshow design, we recommend checking Show Next and Previous Controls in the Design tab of the block editor.
  • In Grid Gallery Blocks, clickthrough URLs aren't supported when Lightbox is checked.

Crop or resize images

You can resize or crop Gallery Blocks in a variety of ways. Your options depend on the layout.

SlideshowCarouselGridStack
  • To automatically crop images to the same aspect ratio, check Crop images in the Design tab.
  • To change the size of all images, adjust the number of thumbnails per row in the Design tab.
  • To crop individual images, use the built-in Image Editor.
  • To recenter images, adjust image focal points.
  • To shrink the whole Gallery Block, add blocks on either side.

Gallery Blocks on mobile

Gallery Blocks on mobile may display or behave different than on a computer, depending on the layout.

SlideshowCarouselGridStack

Slideshow Gallery Blocks retain their slideshow layout on mobile:

  • The automatic transition and navigation settings you choose in the Design tab still apply. Clickthrough URLs work when tapped.
  • Titles and descriptions won't appear on displays fewer than 480 pixels wide. This includes most smartphones held in portrait mode.
  • Titles and descriptions (including on-hover captions) may display in landscape mode and on larger devices, such as tablets. This depends on the device.

Carousel Gallery Blocks retain their carousel layout on mobile:

  • Depending on your images, only one image may display at a time.
  • The automatic transition and navigation settings you choose in the Design tab still apply. Clickthrough URLs work when tapped.

Grid Gallery Blocks display as grids two columns wide on mobile:

  • The aspect ratio you choose in the Design tab still applies.
  • Lightboxes display when enabled.
  • When lightboxes are disabled, clickthrough URLs work when tapped.
  • While in a lightbox, tap the circle in the bottom-right corner to display an image's title and description.

Tapping the circle to display text of an image in a lightbox on mobile.

Stack Gallery Blocks display and behave the same on mobile.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 110 su 289
Using Gallery Blocks