Studio Editor: Pro Gallery Best Practices
Pro Gallery lets you display videos, images and text, all in one beautiful multimedia gallery. Read the guidelines in this article to make the most out of Pro Gallery in the Editor – discover the different ways you can customize your gallery and make it look great in any screen size.
Finding the settings you need
There are two main areas where you can adjust different gallery settings:
The Wix Pro Gallery settings panel
The Inspector panel
The Settings panel
The Settings panel lets you adjust your gallery's design and functionality. You can choose a layout that suits your images, decide what happens when clicking on an item, or enable a variety of social sharing settings.
The Inspector panel
From the Inspector panel, you can adjust your gallery's size, position and behavior across breakpoints. These settings can help to ensure your gallery is responsive and looks great in every screen size.
The Design tab opens first by default. Click the Interactions tab
to create engaging animations.
Making your gallery responsive
There are many different ways to ensure your gallery is responsive to all screen sizes. Read below to choose the best method for your design needs.
Check the gallery's responsive behavior
In the Inspector panel, you can see the gallery's size and the current responsive behavior. Make sure the gallery is set to either Relative width or Stretch to ensure it resizes automatically and in relation to each visitor's screen.
Tip:
It is not possible to adjust your gallery's height in the Inspector when:
Your gallery is set to scroll vertically.
Your gallery is horizontal with a fixed ratio.
You can change these settings from the Layout tab in the gallery's Settings panel.
Use different layouts per breakpoint
Pro Gallery offers different layout options. You can choose a layout for each of your breakpoints so the gallery always fits the screen. You can also save time by choosing a preset layout that is fixed where you only change the color, text and animations in the Design tab.
Troubleshooting gap and spacing issues
If you find that there is too much space above, below or between gallery images, try the steps below.
Reduce the spacing between images
Check the spacing you've set between images in your gallery's Settings panel.
Click the Pro Gallery.
Click Settings.
Click the Layout tab.
Click Customize Layout.
Scroll down to Design Settings.
Drag the Spacing slider to reduce the gaps between images.
Check the text box size
When your gallery text appears above or below images, make sure the text box isn't too big. If the text box is too big, it can affect the spacing and create unwanted gaps.
You can check the text box size and make it smaller from your gallery's Settings panel.
Click the Pro Gallery.
Click Settings.
Click the Design tab.
Click Texts.
Select Manually under Adjust text box size.
Drag the slider under Text box size to make it smaller.
(Slide show layout) Check the info bar size
The Slide Show layout includes an info bar that shows your image's information. If the info bar is too big, with a small amount of text that doesn't fill up the entire space, it can create gaps below the images.
Click the Pro Gallery.
Click Settings.
Click the Layout tab.
Click Customize Layout.
Set the Info Bar Size to a lower number or to 0 to remove the empty space.
