Adding and Setting Up a Gallery in Wix
- Feb 19, 2022
- 11 min read
Updated: Mar 20
A Wix gallery is an ideal tool for displaying a product catalog as well as showcasing your portfolio.
Contents:
How to add a Wix gallery to your site?
How to add photos and videos to a Wix gallery?
Customizing the Wix gallery layout
Custom layout format
Wix gallery layout presets
Adjusting settings in Wix Pro Gallery
Customizing the design of Wix Pro Gallery
Configuring additional settings of Wix Pro Gallery
Setting up the “Show More” button in a Wix gallery
How to add a Wix gallery to your site?
First, you need to add a gallery to your site. After adding the gallery, you can add media and customize the settings.
In the Wix Editor
Click Add on the left side of the editor.
Select Gallery.
Choose a gallery from the Wix Pro Galleries section and drag it to the desired location on your website page.
In Editor X
Click Add in the top bar of Editor X.
Click Media.
Click Pro Galleries.
Select a Pro Gallery and click it to add it to your site.
How to add photos and videos to a Wix gallery?
Now add media to your gallery. You can add photos and videos. You can upload images from your device or add several stock images from the Wix gallery.
Click the Pro Gallery in the editor.
Click Organize Media.
Click Add Media.
Choose the type of media file you want to add and follow the instructions below:
Photos
Select a photo from the Media Manager, or click Upload Files to upload images from your computer.
Click Add to Page.
Click Done.
Note: We recommend uploading images with a minimum resolution of 2560 × 1440 pixels.
Video
Choose an option:
From Computer:
Select a photo from the Media Manager, or click Upload Files to upload a video from your computer.
Click Add to Page.
From YouTube:
Enter the video URL.
Click Update Gallery.
From Vimeo:
Enter the video URL.
Click Update Gallery.
Click Done.
Note: If your Pro Gallery contains more than one video, autoplay will only apply to one video.
Text
Enter text in the text box.
Format the text using the options available in the top toolbar.
Customize the text using the following settings:
Layout: Choose a layout for the text.
Background Color & Opacity: Drag the slider to adjust the transparency and select a color.
Margins: Drag the slider to change the spacing between the text and the edges of the text box.
Vertical Alignment: Choose the alignment for the text.
Click Add to Page.
Click Done.
To remove the free Wix images that appear in the gallery by default, simply hover your cursor over the image you want to delete and click the Delete icon.
Customizing the Wix gallery layout
After you have added media to the gallery, you can focus on customizing the layout. There are many layout options to choose from:
Presets: These ready-made gallery templates help speed up the process of displaying media on your website. Preset templates include built-in layouts, design, and settings.
Customize: These gallery layouts allow you to create and customize a gallery from scratch.
Custom layout format
Layout preset
Custom layout format
These gallery layouts allow you to create and customize a gallery from scratch. You can choose from many customizable layouts to display your media files in the most convenient way for you.
To choose a custom layout format:
Click the Wix Pro Gallery in the editor.
Click Customize.
Go to the Layout tab.
Open the Custom layout tab.
Choose a layout for the gallery.
Click Customize Layout to adjust the layout the way you want.
Wix gallery layout presets
These ready-made gallery layouts help speed up the process of displaying your images on your website. The preset templates are available in both horizontal and vertical formats and include a range of built-in layout features.
To choose a layout preset:
Click the Wix Pro Gallery in the editor.
Click Customize.
Go to the Layout tab.
Open the Presets tab.
Choose a layout for the gallery.
Adjusting settings in Wix Pro Gallery
You can customize various gallery settings according to your preferences.
How to do it?
Click the Wix Pro Gallery in the editor.
Click Settings.
Go to the Settings tab.
Configure the following options:
When clicking on media: Click the dropdown menu to choose what happens when an item in the gallery is clicked.
Open in Expand Mode: The gallery item opens in a popup.
A link opens: The item opens a link.
Nothing happens: Nothing happens when the item is clicked.
Open in Fullscreen: The item fills the visitor’s screen.
Download Icon: Click the toggle to enable or disable the download icon:
On: The download icon appears on each gallery item.
Off: Visitors cannot download gallery items.
Social Sharing: Click the toggle to enable or disable social media icons:
On: Visitors can share your images on social media, and social icons are displayed in the gallery.
Off: Visitors cannot share your images, and social icons are hidden.
Heart Icon: Click the toggle to enable or disable the heart icon:
On: The heart icon appears in your gallery. You can choose whether to display the number of likes.
Off: The heart icon is not displayed in the gallery.
Customizing the design of Wix Pro Gallery
You can customize various elements of the Pro Gallery, such as overlays and icons, text, element styles, scroll effects, buttons, and the expand mode. Choose which elements you want to customize.
Note: Some of the options below depend on the layout and settings you selected earlier. For example, to customize text, you must enable the display of the title or description in the layout settings.
Overlays and icons
The overlay appears on top of the image, adding an extra effect when hovered over. You can customize this effect, as well as any icons you add.
Click the Wix Pro Gallery in the editor.
Click Settings.
Go to the Design tab.
Click Overlay and Icons.
Edit the following settings:
Overlay Color: Drag the slider to adjust the transparency, and click the color picker to choose a color.
Icon Color: Click the color picker to choose the icon color.
Overlay Effect: Choose an animation for the overlay from the available options:
None: The overlay remains static.
Fade In: The overlay gradually appears on hover.
Expand: The overlay expands on hover.
Float Up: The overlay appears from the bottom on hover.
Slide Right: The overlay slides to the right on hover.
Navigation Arrows: Click to enable navigation arrows in the gallery.
Arrow Size: Drag the slider to increase or decrease the size of the navigation arrows.
Arrow Color: Click the color field to choose the arrow color.
Arrow Position: Select the relevant checkbox to display the navigation arrows.
Text
Click the Wix Pro Gallery in the editor.
Click Settings.
Go to the Design tab.
Click Text.
Customize the text using the following options:
Display: Choose what information you want to show on the gallery images:
Title: Check the box to display the title on gallery images.
Description: Check the box to display the description on gallery images.
Where to Show Text: Choose whether to display the text above, below, or directly on the gallery item.
What happens to text on hover?: Choose what happens to the information when hovered over:
Appears: The title and description appear on hover.
Disappears: The title and description disappear on hover.
No Change: Nothing happens on hover.
Horizontal Alignment: Choose left, center, or right alignment for the text.
Vertical Alignment: Choose top, center, or bottom alignment for the text.
Vertical Padding: Drag the slider to adjust the spacing between the vertical text and the edge.
Horizontal Padding: Drag the slider to adjust the spacing between the horizontal text and the edge.
Buttons
Add custom buttons to your gallery and customize the design of the Load More button.
Click the Wix Pro Gallery in the editor.
Click Settings.
Go to the Design tab.
Click Buttons.
Customize the buttons using the following options:
Custom Buttons:
Button Text: Enter the text that will appear on the button.
Horizontal Alignment: Choose the horizontal alignment of the button.
Vertical Alignment: Choose the vertical alignment of the button.
Font Style & Color: Choose the font and color of the button text.
Button Color & Opacity: Drag the slider to adjust the color and transparency; click the color picker to choose a color.
Border Width & Color: Drag the slider to adjust the border width, and click the color field to choose a color.
Corner Radius: Drag the slider to adjust the roundness of the button corners.
Load More Button: This option appears only if you enabled the Load More button in the Layout panel.
Button Text: Enter the text that will appear on the button.
Font Style & Color: Choose the font and color of the button text.
Button Color & Opacity: Drag the slider to adjust the color and transparency; click the color picker to choose a color.
Border Width & Color: Drag the slider to adjust the border width, and click the color field to choose a color.
Corner Radius: Drag the slider to adjust the roundness of the button corners.
Item appearance
Each image or video in the gallery is a separate item. You can customize the appearance of items both in their default state and on hover.
Click the Wix Pro Gallery in the editor.
Click Settings.
Go to the Design tab.
Click Item Style.
Customize the following options:
Border Width & Color: Drag the slider to adjust the border width, and click the color picker to choose a color.
Corner Radius: Drag the slider to adjust the roundness of the corners.
Shadow: Click the toggle to enable or disable the shadow:
On: A shadow appears around the item. Customize its opacity, color, blur, direction, and size.
Off: No shadow is displayed around the item.
Hover Effect: Choose what happens when a visitor hovers over a gallery item:
None: No animation on hover.
Zoom: The image enlarges on hover.
Blur: The image becomes blurred on hover.
Black & White: The image turns black and white on hover.
Shrink: The image reduces in size on hover.
Invert: The image colors are inverted on hover.
Colorize: The image changes from black and white to color on hover.
Darken: The image becomes slightly darker on hover.
Image Loading: Choose what happens while the image is loading:
Blurred Image: A blurred version of the image appears while loading.
Color Fill: A color placeholder is shown while the image loads.
Scroll effects
Add an animated effect that appears when scrolling through the gallery. You can further customize the selected animation by adjusting the transition style and duration.
Notes:
Available animations depend on the selected gallery layout.
Animation settings are only available for layouts with horizontal scrolling.
To add a scroll animation:
Click Scroll Effects.
Choose what happens when visitors scroll through the gallery:
None: No animation on scroll.
Fade In: Images gradually appear while scrolling.
Black & White: Images turn black and white while scrolling.
Float Up: Images slide upward while scrolling.
Expand: Images grow larger while scrolling.
Compress: Images shrink while scrolling.
Scale Down: Images reduce in size while scrolling.
Monochrome: Images are tinted in a single color while scrolling.
To customize the animation:
Click Customize Animation.
Adjust the animation settings:
Transition Style: Select a motion effect from the dropdown. This effect is applied as visitors move between gallery items while scrolling.
Duration: Drag the slider to adjust the animation duration.
Expand mode
Click the Wix Pro Gallery in the editor.
Click Settings.
Go to the Design tab.
Click Customize Expand Mode.
Configure the following settings for Expand Mode:
Displayed Info: Check the relevant boxes to show the title, description, and/or link in Expand Mode.
Where to Show: Choose whether the information appears on the side or at the bottom.
When to Show: Choose whether the information is always visible or only shown when clicking the info icon.
Allow Fullscreen: Toggle to allow visitors to view gallery items in fullscreen mode.
Loop Images: Click the toggle to enable or disable:
On: Visitors can scroll through images in a loop.
Off: Scrolling stops at the last image.
Background Color: Click the color field to choose a background color for Expand Mode. Select from site colors or add a new color.
Icon Color: Click the color field to choose the color of the icons in Expand Mode.
Title Style:
Use the dropdown menu to customize the font, style, and size using the font picker.
Click the color field to change the title text color.
Description Style: Use the dropdown menu to customize the description font, and click the color picker to choose its color.
Text Alignment: Choose left, center, or right alignment for the text.
Click Done to save your settings.
Configuring additional settings of Wix Pro Gallery (Advanced)
You can customize many settings in Wix Pro Gallery, including additional options. Here you can adjust the quality of your photos and videos.
How to do it?
Go to the Advanced tab.
Configure the following settings:
Image Quality: Drag the slider to adjust image quality.
Note: Higher-quality images may take longer to load.
Sharpening: Click the toggle to enable or disable image sharpening.
Amount: Drag the slider to adjust the level of sharpening applied to images.
Radius: Drag the slider to adjust the sharpening radius.
Threshold / Levels: Drag the slider to adjust the minimum and maximum sharpening threshold.
Video Playback: Choose whether videos play on hover, autoplay, or on click.
Enable Sound: Click the toggle to turn sound on or off:
On: Videos play with sound.
Off: Videos are muted in the gallery. Note: Videos always play with sound in Expand Mode.
Playback Speed: Select the video playback speed from the dropdown menu.
Loop Video: Click the toggle to enable or disable looping:
On: Videos play continuously in a loop.
Off: Videos play once and stop at the end.
Play Button: Click the toggle to show or hide the video play button.
Gallery Direction: Select whether gallery items are displayed from left to right or right to left.
Setting up the “Show More” button in a Wix gallery
Add a “Show More” button to your gallery to minimize the amount of content visitors see when they first open the page. This allows visitors to load all images with one click or view them gradually.
You can customize the button text, font, color, and more to match the rest of your website’s design.
Note: You can add the “Show More” button only to layouts with vertical scrolling. You cannot add the “Show More” button to Thumbnails, Slider, Slideshow, or Columns layouts.
Enabling the “Show More” button
Add a “Show More” button to the gallery so visitors can load all images with a single click or view them in parts. Each section has the same size as the original gallery. This means that if the original gallery displays four images, each additional section loaded by the visitor will also display four images.
To enable the “Show More” button:
Click the Wix Pro Gallery in the editor.
Click Customize.
Go to the Layout tab.
Click Customize Layout.
Turn on the “Show More” button toggle.
Choose an option in the How many photos to show section:
All photos: all images are loaded.
One more section: the next section of the gallery is loaded.
Note: Each section has the same size as the original gallery. This means that if the original gallery shows four images, each additional section loaded by the visitor will also display four images.
Customizing the “Show More” button
Customize the text, font, color, and other settings of the “Show More” button so that it matches the design of your website.
To customize the “Show More” button:
Click the Wix Pro Gallery in the editor.
Click Customize.
Go to the Design tab.
Open the Button tab.
Customize the “Show More” button using the following options:
Button text: click the text field to change the button text.
Font style and color: click the Expand icon to adjust the font, text size, etc. Click the color field to choose a color.
Button color and transparency: drag the slider to change the button’s transparency and click the color field to select its color.
Border width and color: drag the slider to change the button border width and click the color field to change the border color.
Corner rounding: drag the slider to make the button corners more rounded.
To adjust the number of images displayed before the “Show More” button appears, simply increase or decrease the gallery size manually. If you see only one row of images, drag the bottom handle of the gallery to increase its size.
