Wix Pro Gallery: Choosing a Wix Pro Gallery Layout (Custom vs. Presets)
Wix Pro Gallery offers several stunning layouts. Choose from a Custom or Preset layout to showcase your media. Custom layouts allow full customization of aspects such as gallery spacing, direction and orientation. With a Preset layout, the bulk of the work is done for you - meaning the layout itself is not customizable, but the gallery's design is still in your hands.In this article, learn more about:
Custom layouts Preset layouts Frequently asked questions (FAQs)Custom layoutsThese gallery layouts allow you to design and customize your Pro Gallery from scratch. Each customizable layout offers a range of settings you can personalize. Choose from static or sliding gallery layouts, or select the Magic layout and let us generate a unique layout for you.To choose a Custom layout:
Go to your editor. Click the Pro Gallery element on your page.  Click Settings. Click the Layout tab. Select a layout for your gallery. Click Customize Layout to change the layout to look exactly as you want. Click a layout below to learn more about its features:CollageUse the Collage layout when you want to show images of different orientation (both vertical and horizontal) placed randomly within the gallery.
Scroll Direction: Choose a Vertical or Horizontal scroll. Gallery orientation: Choose to display photos vertically or horizontally. Slide automatically: (This option is only available if you choose Horizontal as your scroll direction). Choose to display your items in a continuous slideshow:
    
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. Note: If you want to change the transition effect, please go to the "Scroll Animation" tab in the Design settings. Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides. Pause on hover: Enable the toggle to have the slideshow pause when a visitor hovers over a gallery item.   Thumbnails size: Choose how big images in the gallery are. Spacing: Choose how much space to have between the images. Collage density: Choose how many images will be shown at a time in the gallery. How many images load: (This option is only available if you choose to enable a Load more button):
    
All images One more section (adds another section of the same size as the original gallery)  MasonryUse the Masonry layout when you want to show images of different orientation displayed in columns or rows.
Gallery orientation: Choose to display photos vertically or horizontally. Thumbnails size: Choose how big images in the gallery are. Spacing: Choose how much space to have between the images. Design Settings: Choose to fit your gallery to screen or manually set the number of items per row:
    
Fit to screen: The Pro Gallery automatically optimizes the gallery layout to fit the visitor's screen. Set items per row: You can choose how many images are shown per row on all devices.   Images per row: Increase or decrease how images are shown per row. Spacing: Choose how much space to have between the images. Load more button: Choose to show or hide the Load More button. How many images load: (This option is only available if you choose to enable a Load more button). Choose how many images load when visitors click Load More:
    
All images One more section (adds another section of the same size as the original gallery)  Grid Use this layout when you want your images to be shown within a grid.
Scroll Direction: Choose a Vertical or Horizontal scroll. Thumbnail resize:
    
Crop: You can choose the image ratio. Fit: Adapts image size to the size of the gallery.
Note: The Border width & color and Corner radius options are only available In the Item Style tab when you choose to crop your thumbnails in your layout's settings.    Image ratio: Choose from the image ratio options available e.g. (4:3, 1:1). Slide automatically: (This option is only available if you choose Horizontal as your scroll direction). Choose to display your items in a continuous slideshow:
    
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. Note: If you want to change the transition effect, please go to the "Slide Animation" tab in the Design settings. Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides. Pause on hover: Enable the toggle to have the slideshow pause when a visitor hovers over a gallery item.   Fit to screen: Shows as many images as can fit within the gallery with a fixed size Set items per row: Drag the slider to show more or less images per row.
Note: Currently, it is not possible to display more than 5 images per row in a Pro Gallery with a Grid layout. If this is something you'd like to see in the future, vote for that feature. Thumbnails size: Choose how big images in the gallery are. Image per column: Choose how many images are shown per column (only when Horizontal orientation is chosen). Spacing: Choose how much space to have between the images. Load more button: Choose to show or hide the Load more button. How many images load: (This option is only available if you choose to enable a Load more button). Choose how many images load when visitors click Load More:
    
All images One more section (adds another section of the same size as the original gallery).  ThumbnailsUse the Thumbnails layout when you want to show multiple thumbnails next to the selected image.
Gallery ratio:
    
Manual: Freely adjust the height and width of your gallery. Fixed: Maintain the same ratio on any screen size using one of the suggested ratios.    Thumbnail resize:

Crop: Adapts the image size to the size of the gallery. Fit: Shows the image in its original ratio and adapts it to the gallery size. If there is too much empty space around the image you need to increase the height of the gallery.
Note: The Border width & color and Corner radius options are only available In the Item Style tab when you choose to crop your thumbnails in your layout's settings.
   Thumbnail placement: Choose where you want thumbnails to appear on the screen (below, left, above or right of the current image on display). Thumbnails size: Drag the slider to choose how big images in the gallery are.
Note: If you have only a few images and there is an empty space under the main image, you need to increase the thumbnail size. Loop images: Choose whether you want the “Next” button deactivated on the last image or not.
Note: The “Left” button always gets deactivated when you reach the first image while scrolling backward. Slide automatically: (This option is only available if you choose Horizontal as your scroll direction). Choose to display your items in a continuous slideshow:
    
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.
Note: If you want to change the transition effect, please go to the "Slide Animation" tab in the Design settings. Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides. Pause on hover: Enable the toggle to have the slideshow pause when a visitor hovers over a gallery item.   Thumbnail Spacing: Drag the slider to choose how much space is between the images.
Note: Currently, it is not possible to adjust the alignment of your thumbnails. If this is something you'd like to see in the future, vote for that feature.SliderUser the Slider layout if you want to show multiple images with a horizontal scroll.Note: The number of images shown at a time in this layout depends on the gallery size. If some images look cut, you need to change the size of the gallery. Another solution is to choose Crop for the Thumbnail resize and Responsive for the image ratio in the Layout settings.
Gallery ratio:
    
Manual: Freely adjust the height and width of your gallery. Fixed: Maintain the same ratio on any screen size using one of the suggested ratios.   Thumbnail resize:
    
Crop: Choose whether the ratio is fixed or responsive. Fit: Shows the image in its original ratio and adapts it to the gallery size. If there is too much empty space around the image you need to increase the height of the gallery.
Note: The Border width & color and Corner radius options are only available In the Item Style tab when you choose to crop your thumbnails in your layout's settings.    Image ratio:

Responsive: The image size will adjust automatically depending on the viewer's device. Fixed: Choose from the image ratio options available e.g. (4:3, 1:1). Images will appear in this ratio across all devices.   Loop images: Choose whether you want the “Next” button deactivated on the last image or not.
Note: The “Left” button always gets deactivated when you reach the first image while scrolling backward. Slide automatically: (This option is only available if you choose Horizontal as your scroll direction). Choose to display your items in a continuous slideshow:
    
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. Note: If you want to change the transition effect, please go to the "Slide Animation" tab in the Design settings. Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides. Pause on hover: Enable the toggle to have the slideshow pause when a visitor hovers over a gallery item.   Spacing: Choose how much space to have between the images.Slide ShowUse the Slide Show layout if you want to show one image at a time with horizontal scroll.
Gallery ratio:
    
Manual: Freely adjust the height and width of your gallery. Fixed: Maintain the same ratio on any screen size using one of the suggested ratios.   Thumbnail resize:

Crop: Adapts the image size to the size of the gallery. Fit: Shows the image in its original ratio and adapts it to the gallery size. If there is too much empty space around the image you need to increase the height of the gallery.
Note: The Border width & color and Corner radius options are only available when you choose to crop your thumbnails in your layout's settings.    Loop images: Choose whether you want the “Next” button deactivated on the last image or not.
Note: The “Left” button always gets deactivated when you reach the first image while scrolling backward. Slide automatically: (This option is only available if you choose Horizontal as your scroll direction). Choose to display your items in a continuous slideshow:
    
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. Note: If you want to change the transition effect, please go to the "Slide Animation" tab in the Design settings. Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides. Play Button: Add a button to allow visitors to pause or play the slideshow. (This option is only available when you choose to enable Slide Automatically). Pause on hover: Enable the toggle to have the slideshow pause when a visitor hovers over a gallery item.
Tip: When you set your Slideshow to slide automatically, you have the option to display a Slideshow counter on your gallery from the Text tab in the Design Section.
   Info bar size: Adds space for icons, title and description under the gallery.StripUse the Strip layout if you want to show multiple images in one column.
Spacing: Choose how much space to have between the items in your gallery. Load more button: Choose to show or hide the Load more button. How many images load: (This option is only available if you choose to enable a Load more button). Choose how many images load when visitors click Load More:
    
All images One more section (adds another section of the same size as the original gallery).  ColumnUse the Column layout if you want to show multiple images at a time in one row.
Gallery ratio:
    
Manual: Freely adjust the height and width of your gallery. Fixed: Maintain the same ratio on any screen size using one of the suggested ratios.   Loop images: Choose to allow visitors to scroll through your images in a continuous loop. Slide automatically: (This option is only available if you choose Horizontal as your scroll direction). Choose to display your items in a continuous slideshow:
    
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. Note: If you want to change the transition effect, please go to the "Slide Animation" tab in the Design settings. Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides. Pause on hover: Enable the toggle to have the slideshow pause when a visitor hovers over a gallery item.   Spacing: Choose how much space to have between the images.Bricks, Mix and Alternate Use these layouts to display gallery items of different sizes and orientation side by side.
Spacing: Choose how much space to have between the images. Load more button: Choose to show or hide the Load more button. How many images load: (This option is only available if you choose to enable a Load more button). Choose how many images load when visitors click Load More:
    
All images One more section (adds another section of the same size as the original gallery).  Magic This layout allows you to change the layout to another one in one click. Simply click Create Magic Layout to randomize your gallery layout.Preset layoutsThese ready-made gallery layouts allow you to speed up the process of showcasing your images on your site. Preset templates come in horizontal and vertical displays, and include a range of built-in layout features.To choose a Preset layout:
Go to your editor. Click the Pro Gallery element on your page.  Click Settings. Click the Layout tab. Click the Presets tab. Select a layout for your gallery.FAQsClick a question below to learn more about layouts in the Pro Gallery:Is the Wix Pro Gallery responsive?If you build your Pro Gallery in the Wix Editor, it behaves responsively when you choose certain layouts and set it to Full Width. This means that the position of your gallery items and their size may change when the browser window is resized across all devices. Learn more about responsiveness in the Wix Pro Gallery in the Wix Editor.If you build your Pro Gallery in the Studio Editor, there are many different ways to ensure your gallery is responsive across all screen sizes. Learn more about responsiveness in the Wix Pro Gallery in the Studio Editor.Why are some of my images cropped when added to the Wix Pro Gallery?You may notice that your gallery images appear cropped, depending on the Custom layout you choose. This can happen when the orientation of the thumbnails in a layout is different from those of the images you upload.
For example, you select a Slider layout, which displays all images in portrait (vertical) orientation, but upload images with a landscape (horizontal) orientation. This means part of your image may be cropped to ensure it fits within the thumbnail's boundaries.
To prevent your images from being cropped:

Click the Wix Pro Gallery in your editor. Click Settings. Click the Layout tab. Click the Layout tab. Select Fit below Thumbnail resize.Note: The Strip, Column, Bricks, Mix, Alternate, and Magic layouts have locked image proportions. This means images will automatically crop in order to fit within the thumbnail's boundaries.

Additional options when keeping your images cropped:

Adjust the focal point of your images to better control the parts of your images that may be cropped.  Adjust the image ratio (16:9, 4:3, 1:1, 3:4 or 9:16) applied to your gallery to best match the ratio and orientation of your uploaded images.