Gallery Block

To help you display galleries of images in unique and creative compositions, we created the Gallery of the Stars block.

With it, you can customize the gallery layout by twisting and turning a set of parametric variables until you find the desired solution. It’s like an adventure game where each choice can help you find hidden gems.

To add a Gallery of the Stars block on your website’s pages or blog post, all you have to do is click the inserter button inside the WordPress editor and search for “Gallery of the stars.” Alternatively, you can just type /gallery and choose the Gallery of the Stars option.

Adding the Gallery of the Stars block in the editor

Now that you have the block on your website, you can start customizing it by adding your own images and changing the display settings.

Add and reorder images

By default, the block loads a few sample images to give you a preview of how the gallery is looking. To add your own content, use the Change Media button that shows up when you hover over the existing images or by clicking the button from the top toolbar.

In the window that loads, click the Add to gallery button from the left sidebar. Now you can either choose from the images in your Media Library or upload new ones.

💡

It’s best to use images with a resolution between 800 and 1600 pixels wide. If you want to learn more about how to optimize the images on your website for better performance, read this article.

Once you have selected the images, click the Add to gallery button from the bottom right corner.

To reorder the images, while you are in the Edit Gallery section, drag and drop each of them to create the sequence you please.

Adding images to a gallery and reorder them

The gallery block does support auto-play videos to enhance the presentation of your content. Adding videos is just as easy as adding an image, and the best part is that you can alternate between images and videos within the same gallery.

To create a gallery with videos and images, all you have to do is click the Change Media button in the toolbar and select Add a video from the dropdown. To add multiple videos and images, hold down the ⌘ Cmd (if you’re on a Mac) or ^ Ctrl (on Windows) on your keyboard and click on the desired files.

Creating a gallery with both images and videos

Customize the design

There are two ways in which you can customize the look and feel of the gallery:

  1. Customize the layout and how the images are arranged in your gallery;
  2. Customize the image shapes.

Customize the layout

With this option, you can customize the way your images are arranged within your gallery. To get started, navigate to the Media Composition section from the right settings panel.

The gallery presets are a fun way to get started. After settling on an arrangement, you can fine-tune your images by going into the Settings tab. Once you’re there, tweak and turn the parametric variables until you land on something that works for you.

Using the advanced parametric variables to customize the gallery layout

Customize the image shapes

This tool helps you generate shapes and combine them with your images to create unique designs that speak to your brand identity and personality.

To access these settings, select your gallery and click on the Shape Modelling option in the right settings panel. Once you’re there, you can choose between a handful of shape presets available in the General tab.

You can also create your own shapes by going a level deeper in the Settings area—that’s also where you can enable blob decorations and customize their look and feel.

Customizing the image shapes
🔔

The same gallery system is available via the Media Card Constellation block. This means you can use the same advanced settings with the benefit of adding text and buttons alongside an awesome gallery.

That’s it. Now you have all the right information to start creating your own galleries to showcase whatever feels right for you or your business.

Updated on March 5, 2021

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.