Wix Pro Gallery: Settings Glossary
9 min read
Customize your pro gallery settings at any time. You can adjust the layout, design and other advanced settings.
This article outlines all the options inside the Pro Gallery. The options you see depend on the Pro Gallery layout you choose.
How do I access the Pro Gallery Settings?
Learn how to customize your gallery's:
When using one of the ready-made Preset layouts, the bulk of the work is done for you, meaning the layout itself is not customizable. You can, however, customize your gallery's design from the Design tab in the Settings panel. Learn more
What is does
Items continuously slide without the visitor clicking the navigation arrows.
- Intervals: Your gallery slides to the next item after your chosen amount of time. Drag the Time Between Images slider to change the number of seconds between the items.
- Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides.
Info Bar Size
The size of the information bar below the gallery items.
Drag the slider to increase or decrease the size of the space below your gallery where the 'Heart' and 'Share' icons appear. Selecting the text checkboxes in Design also displays the title and description in the info bar.
Control if your visitors can scroll through your gallery items in a continuous loop or not.
- Enabled: Visitors can continuously scroll through images in a loop.
- Disabled: When reaching the end of your gallery items visitors must click the left navigation arrow to return to the beginning of the gallery.
Show or hide a Play button for your visitors to pause or play the slideshow.
- Enabled: A Play button is displayed. Your site visitors can pause or play your slideshow.
- Disabled: A Play button is not displayed.
Note: these options only appear if you set your items to slide automatically (Slide Automatically setting).
The direction that your visitors scroll through the gallery.
- Vertical: Visitors scroll down the page vertically to see more items.
- Horizontal: Visitors click the scroll arrows on the left and right of the gallery to see more items.
The orientation of the gallery items.
- Horizontal: Items are displayed in a horizontal orientation. This is good for wide-angle or landscape shots.
- Vertical: Items are displayed in a vertical orientation. This is good for portraits or close-ups.
The size of the gallery items.
- Crop: The gallery items are cropped to fit their content into the item size in the gallery. Select the image ratio of the items.
- Fit: The gallery items are resized to show their whole content.
The proportional relationship between the item width and height.
Select the ratio of the gallery items.
The location of the gallery thumbnails.
Select the location of the gallery thumbnails.
The size of the gallery thumbnails
Drag the slider to increase or decrease the size of the gallery thumbnails.
The space between the gallery thumbnails.
Drag the slider to increase or decrease the spacing between the gallery thumbnails.
The space between the gallery items.
Drag the slider to increase or decrease the spacing between the gallery items.
The density (number and size) of the items in the gallery. A higher density displays more items of smaller sizes. A lower density displays less items of larger sizes.
Drag the slider to increase or decrease the density.
Fit to screen/ Set items per row
The number of items on each row of your gallery.
- Fit to screen: Your items are automatically optimized to fit your visitors' screens.
- Set items per row: Choose the number of gallery items on each row, regardless of your visitors' screen size. Drag the Images per row slider to set the amount.
Load More Button
Show or hide a Load More button for your visitors to click to load more items on your gallery.
Note: This option is only available when the Scroll Direction is vertical.
- Enabled: A Load More button appears under the gallery. Choose if all images are displayed or just one more section when the Load More button is clicked.
- Disabled: Your gallery is fully displayed when the page loads and your visitors do not need to click anything to see more.
When clicking on an item
Control what happens when your site visitors click a gallery item.
- Open in Expand: The gallery item opens in expand mode. Customize the expand mode from the Design tab.
- A link opens: Your site visitors are directed to a link (a web address, page, lightbox etc.) Click Media Manager to set up the link.
- Nothing happens: Nothing happens when your site visitors click a gallery item.
- Open in Fullscreen: The gallery items open in full screen.
Show or hide a Download icon for your visitors to download your images and videos.
- Enabled: A Download icon is displayed. Your site visitors can download your images or videos (not free Wix ones).
- Disabled: A Download icon is not displayed.
Show or hide social icons so your visitors can easily share your gallery items.
- Enabled: Social share icons are displayed (Facebook, Twitter, Pinterest, Tumblr and email).
Note: For Social share icons to be visible, you must apply a hover overlay to your gallery. You can set the transparency to 0 if you don't want the overlay to be visible. If you choose a partial overlay, make sure to set its size to 40% or more.
- Disabled: Social share icons are not displayed.
Show or hide a Heart icon for your visitors to show they like a gallery item.
- Enabled: A Heart icon is displayed. Choose if you want to display the counter to show publicly how many people liked the gallery item.
Note: For the Heart icon to be visible, you must apply a hover overlay to your gallery. You can set the transparency to 0 if you don't want the overlay to be visible. If you choose a partial overlay, make sure to set its size to 40% or more.
- Disabled: A Heart icon is not displayed.
Overlay & Icons
Choose to display a color overlay and customize the gallery icons that appear when visitors hover over gallery items.
- Overlay Coverage: Choose whether to cover gallery items fully or partially with your overlay.
- Gradient: Choose if you want a blended color overlay to appear when your visitors hover over your gallery. Click the color boxes to select the gradient's colors and drag the slider to change the gradient's direction. Select the icon color box to select the Heart and Download icon colors.
- Set size in: Manage your partial overlay's size in percentages or pixels.
- Size: Drag the slider or enter a value to choose a size for your partial overlay
- Overlay starts from: Choose where your partial overlay is positioned.
- Padding: Adjust the amount of space between the gallery border and your partial overlay.
- Color Overlay: Choose if you want a single color overlay to appear when your visitors hover over your gallery. Click the color box to select the color and drag the slider to change the opacity.
- Icon Color: Click the color box to select the Heart and Download icon colors.
- Overlay Effect: Select an effect that is displayed when your visitors hover over an image.
Customize the text on your gallery.
- Info to Display: Select the relevant checkbox to display a title and/or description on your gallery items.
- Info Position: Choose to display the text above, below or directly on the gallery item.
- What happens to the info on hover: Choose to have your text appear, disappear or not change when visitors hover over an image.
Note: these options only appear if you set the info to be displayed on the image (Info Position setting).
- Title Style & Color: Select the font and color of the titles.
- Description Style & Color: Select the font and color of the titles.
- Horizontal Alignment: Select the horizontal alignment of the text.
- Vertical Alignment: Select the vertical alignment of the text
Add customizable buttons to your gallery.
- Custom Button: Click to enable a custom button.
- Button Text: Type your button's text.
- Horizontal Alignment: Select the horizontal alignment of the button.
- Vertical Alignment: Select the vertical alignment of the button.
- Font Style & Color: Select the font and color of your button's text.
- Button Color & Opacity: Select your button's color and opacity.
- Border Width & Color: Select your button's border width and color.
- Corner Radius: Drag the slider to adjust the roundness of the button's corners.
Allow your visitors to browse your gallery items at their own pace by adding navigation arrows. You can customize their positioning, size and color.
- Navigation Arrows: Click the toggle to display navigation arrows on the gallery.
- Navigation arrows size: Drag the slider to increase or decrease the size of the navigation arrows.
- Navigation arrows color: Click the color box to select the navigation arrow color. Select a color from your site colors or choose your own.
- Navigation arrows position: Select the relevant checkbox to display navigation arrows on or outside the gallery. Note: Displaying navigation arrows on your gallery may cover part of your gallery items.
- Center arrows to: Choose to center your arrows either side of the gallery itself, its images or text.
- Horizontal Padding: Drag the slider to adjust the amount of space between your arrows and the border of your gallery.
Customize the style of the your gallery items.
- Border Width & Color: Select the color and width of the border of your gallery items.
- Corner Radius: Drag the slider to increase or decrease the radius of the corners of your gallery items.
- Shadow: Choose to show or hide a shadow behind your items.
- Hover Effect: Select an effect to appear when visitors hover over your gallery items.
- Image Loading: Select if your images appears blurred, or a color is displayed, while your images load.
Add an animation to your gallery and customize its settings further.
Click an animation to add it to your gallery.
Click Customize Animations and adjust the following:
- Transition Style: Add a subtle visual effect to ensure a smooth flow from one gallery item to the next.
- Duration: Drag the slider to adjust how long your scroll animation lasts.
Control how your videos play.
- On Hover: Your videos play when your visitors hover over them in the gallery.
- Autoplay: Your videos play automatically in the gallery.
- On click: Your videos play when your visitors click them in the gallery.
Play with Sound
Your videos in your gallery are muted by default. Control if your videos play with sound.
- Enabled: Videos play with sound in the gallery view.
- Disabled: Videos are muted in the gallery view. Your videos always play with sound in expand mode.
Control the playback speed of the videos.
Select the playback speed from the options.
Control if your videos play continuously in a loop or not.
- Enabled: Your videos play continuously.
- Disabled: Your site visitors need to click the play icon to play your videos.
Show play button
Choose to enable or disable the play icon in Pro Gallery Videos.
- Enabled: A play icon will appear on your videos.
- Disabled: Your videos will not have a play icon.
Choose to display your gallery items from left-to-right or right-to-left.
Click the relevant checkbox to display your gallery items from left-to-right or right-to-left.
Select the image quality of your gallery items.
Drag the slider to increase or decrease the quality of the images in your gallery.
Note: Using higher quality might cause your images to load slower.
Sharpen your gallery images.
- Enabled: The images are sharpened. Customize the amount, radius and threshold of the sharpening.
- Disabled: The images are not sharpened
Convert images to WebP
WebP is an image format that makes images on the web smaller by 25-35%. Improves site loading time.
- Enabled:(Recommended) Images are converted to a WebP format.
- Disabled: Images display in their original file format. This may affect site loading time.
Automatically resize images
Wix automatically resizes gallery images to optimize image loading time and preserve site visitor's viewing experience.
Click the drop-down to choose when images are resized.
- Always (recommended): Gallery images are automatically resized to improve your site's loading time.
- Gallery Only: Only images in the main view of the Pro Gallery are resized. Images in the Expand Mode display in their original resolution.
- Never: Images load in their original resolution. This may affect site loading time.
See the changes on your site:
Click Preview on the top bar of your Editor at any time to see the changes you made on your gallery.
Did this help?