Wix Pro Gallery: Designing Your Gallery
9 min read
Make your gallery stand out on your site by adding some design customizations. You can give your gallery that pro touch by customizing the layout, colors, fonts, and more.
To customize the design of your Pro Gallery:
- Go to your editor.
- Click the Wix Pro Gallery.
- Click Settings.
- Click the Design tab.
- Choose what you'd like to customize:
Overlay & Icons
An overlay sits on top of an image and adds an extra effect when you hover over an image with your mouse. You can customize this effect as well as any icons you have.
- Click Overlay & Icons.
- Choose between a Full or Partial overlay and customize using the options available:
- Full Overlay: The overlay covers the entire gallery item.
- Gradient: Click the toggle to enable a gradient overlay.
- Color & Opacity 1 and 2: Click the relevant color box to customize the gradient's colors. Then drag the slider to adjust the colors' opacity.
- Gradient Direction: Drag the slider to adjust the gradient's overlay direction.
- Icon Color: Click the color box to change the color of gallery icons that appear on hover.
- Color overlay: Click the color box to choose a color. Then drag the slider to change the transparency of the color overlay.
- Icon color: Click the color box and select a new color for your gallery icons.
- Gradient: Click the toggle to enable a gradient overlay.
- Partial Overlay: The overlay covers only a portion of the gallery item.
- Set size in: Manage your overlay's size in percentages or pixels.
- Size: Drag the slider or enter a value to choose an overlay size.
- Overlay starts from: Choose where your overlay is positioned.
- Padding: Drag the slider to adjust the amount of space between the gallery border and your overlay.
- Gradient: Click the toggle to enable a gradient overlay.
- Color & Opacity 1 and 2: Click the relevant color box to customize the gradient's colors. Then drag the slider to adjust the colors' opacity.
- Gradient Direction: Drag the slider to adjust the gradient's overlay direction.
- Icon Color: Click the color box to change the color of gallery icons that appear on hover.
- Color overlay: Click the color box to choose a color. Then drag the slider to change the transparency of the color overlay.
- Icon color: Click the color box and select a new color for your gallery icons.
- Full Overlay: The overlay covers the entire gallery item.
- Choose an overlay effect from the options available:
- No effect: The overlay does not apply any effect.
- Fade in: The overlay gradually appears on hover.
- Expand: The overlay expands on hover.
- Slide up: The overlay slides up on hover.
- Slide right: The overlay slides right on hover.
Texts
You can customize the design of the title and description text, provided that you chose to display them on the Layout tab. If you don’t see the Texts options (step 1 below), go to the Layout tab, click Customize Layout and select the checkboxes next to Title and Description to display them.
- Click Texts.
- Customize the text using the options below:
- Info to display: Select the checkbox next to the info you want to display (Title, Description, Slideshow counter).
Note: The Slideshow counter option is only available in the Slideshow layout if you have enabled slide automatically.
- Title style and color: Select the font and color of the title text.
- Description font style and color: Select the font and color of the description text.
- Horizontal alignment: Choose to align the horizontal text either on the left, in the center, or on the right.
- Vertical alignment: Choose to align the vertical text either on the left, in the center, or on the right.
- Text vertical padding: Drag the slider to change the amount of space between the vertical text and the border.
- Text horizontal padding: Drag the slider to change the amount of space between the horizontal text and the border.
- Info to display: Select the checkbox next to the info you want to display (Title, Description, Slideshow counter).
Buttons
This section will appear if you chose to show the Load More button in the Layout tab.
Here you can change the text, font, color, and border radius of the Load more button.
Here you can change the text, font, color, and border radius of the Load more button.
- Click Buttons.
- Customize the buttons using the options below:
- Button text: Enter the text that appears on the button.
- Font style & color: Select the font and color of the button.
- Button color & opacity: Drag the slider to change the button color and opacity and click the color box to select a color.
- Border width & color: Drag the slider to change the border width and click the color box to select a color.
- Corner Radius: Drag the slider to change the corner radius.
Navigation Arrows
You can enable navigation arrows in the Thumbnails, Slider, Slideshow and Column layouts. You can customize their positioning, size, and color to help your site visitors navigate your gallery with ease.
- Click Navigation Arrows.
- Click the toggle to enable arrows on your gallery.
- Customize the arrows using the following options:
- Arrow style: Click to select an arrow design, or click the Add icon
to upload your own. - Arrow background: Click the drop-down to select a Shadow, Box or no background.
- Shadow: Adds a slight shadow around the arrow.
- Box: Adds a box around the arrow. Click the color box to change the box color, and drag the relevant sliders to adjust its transparency and round its corners.
- None: No background is added to the arrow.
- Arrow size: Drag the slider to increase or decrease the size of the navigation arrows.
- Arrow color: Click the color box to select the navigation arrow color. Select a color from your site colors or choose your own.
- Arrow 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.
- Arrow style: Click to select an arrow design, or click the Add icon
Item Style
Each image or video in the gallery is an item. You can change the look of the items for both the regular and hover modes.
- Click Item Style.
- Customize the regular view of the item under Item Style:
- Border width & color: Drag the slider to change the border width and click the color box to select a color.
- Corner radius: Drag the slider to make the corners more round or square.
Note: The Border width & color and Corner radius options are only available when you choose to crop your thumbnails in your layout's settings and only apply to the main image (not the thumbnails).
- Shadow: Click the toggle to enable or disable the shadow:
- Enabled: The gallery item has a shadow around it. Customize the opacity, color, blur, shadow direction and shadow size.
- Disabled: The gallery item does not have a shadow around it.
- Choose what happens when someone hovers over the gallery item with their mouse:
- No effect: No effect is applied to the hover.
- Zoom in: Zooms in on the image on hover.
- Blur: The image is blurred on hover.
- Grayscale: The image becomes black and white on hover.
- Shrink: The image gets smaller on hover.
- Invert: The image color is inverted on hover.
- Color in: The image turns from black and white to colorful on hover.
- Darken: The image becomes slightly darker on hover.
- Choose what happens while the image is loading:
- Blurred image:A blurred version of the image appears while loading.
- Color placeholder: A colored placeholder appears while the image is loading.
Scroll / Slide Animations
Add an animated effect that appears as visitors scroll through your gallery. You can further customize your chosen animation by adding a transition style and adjusting its duration.
Notes:
- Available animations depend on the gallery layout you choose.
- Customization of animation settings is only available in layouts with a horizontal scroll.
Adding a scroll animation:
- Click Scroll Animations.
- Choose what happens when visitors scroll through your gallery:
- No effect: No effect is applied to the scroll.
- Fade in: Images gradually appear during the scroll.
- Grayscale: The image becomes black and white when scrolling.
- Slide up: The image slides up when scrolling.
- Expand: The image gets when larger scrolling.
- Shrink: The image gets smaller when scrolling.
- Zoom out: The image zooms out when scrolling.
- One color: A single color is applied to the images when scrolling.
Customizing your animation:
- Click Customize Animations
- Tailor your animation settings:
- Transition style: Click the drop-down to apply a motion effect to your gallery items. This effect is applied upon scrolling, as visitors move from one item to the next.
- Duration: Drag the slider to adjust how long your animation lasts.
Expand Mode
This section appears if you have chosen "Open in Expand Mode" in the Settings Panel of the Pro Gallery, when a user clicks a gallery item. From here you can customize the Expand Mode of your gallery to be in keeping with your site's design and brand.
- Click Expand Mode.
- Click Customize Expand Mode and personalize the expand mode of the gallery using the following options:
- What info is shown? Choose to show a title, description and/or link.
- Where does it appear? Choose where you want to position the info:
- Side: The information appears to the right of the gallery item.
- Bottom: The information appears below the gallery item.
- When does it show? Choose when the information shows:
- Always: The information is always shown.
- When clicking info icon: The information only appears when a visitor clicks the info icon in the top left corner of the Expand Mode.
- Allow full screen: Choose to allow visitors to view gallery items in full-screen mode.
- Background color: Click the color box to select a background color for the expand mode. Choose from your site colors or add a color.
- Icon color: Click the color box to select a color for the icons in the expand mode. Choose from your site colors or add a color.
- Title style:
- Click the drop-down menu to customize the font, style and size from the Font Picker.
- Click the color box to change the title's text color.
- Description style:
- Click the drop-down menu to customize the font, style and size from the Font Picker.
- Click the color box to change the description's text color.
- Text alignment: Choose the text's alignment: left, center or right.
Tip: 
You can hide the navigation arrows in your Pro Gallery with horizontal scroll.
Did this help?
|