Wix Pro Gallery: Adding Navigation Arrows to Your Gallery

5 min read
Display navigation arrows on your Pro Gallery to encourage your visitors to view more of what your gallery has to offer, at their own pace. With certain Pro Gallery layouts, you can choose to display navigation arrows on or outside of your gallery, and further customize them.
You can change the color of these arrows to complement the rest of your site's design.
A gif showing a sliding gallery on a live site.
Note:
If you enabled the Expand Mode for your gallery, navigation arrows are automatically displayed.
In this article, learn more about:

Adding and customizing navigation arrows

You can enable navigation arrows in the Thumbnails, Slider, Slideshow and Column layouts. Customize the navigation arrows' position, color and size from the Design tab in the Settings panel.
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Click the Pro Gallery element on your page. 
  3. Click Settings.
  4. Click the Design tab on the left.
  5. Click Navigation Arrows.
  6.  Enable the Show navigation arrows toggle.
  7. Customize the arrows using the 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.
    • Arrows size: Drag the slider to increase or decrease the size of the navigation arrows.
    • Arrows color: Click the color box to select the navigation arrow color. Select a color from your site colors or choose your own.
    • 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 on either side of the gallery itself, its images or text.
      Note: To see this option, make sure you have chosen to display text underneath or above your gallery items. This option is currently unavailable in the Thumbnails and Slider layouts.
    • Horizontal Padding: Drag the slider to adjust the amount of space between your arrows and the border of your gallery.
A screenshot of the Navigation Arrows customization options.
Tip:
You can also enable navigation arrows in the Grid and Collage layouts, by setting the scroll direction to horizontal in the Layout tab.
A screenshot showing the Scroll direction options.

Customizing navigation arrows in Expand Mode

When enabling the Expand Mode for your gallery, navigation arrows are automatically displayed. Customize the color of these arrows from the Design Settings tab inside the Expand Mode.

To customize navigation arrows in Expand Mode:

Wix Editor
Studio Editor
  1. Go to your editor.
  2. Click the Pro Gallery element on your page. 
  3. Click Settings.
  4. Click the Design tab on the left.
  5. Click Expand Mode.
  6. Click Customize Expand Mode.
  7. Scroll down to Design Settings on the right of Expand Mode popup.
  8. Click the color box beside Icon color and select a color from your site colors or choose your own.
  9. Click Done.
A screenshot showing the design options for the navigation arrows in the Expand Mode.
Note:
Navigation arrows in the Expand Mode are only visible on desktop - not on mobile. Site visitors must swipe left or right to navigate through the gallery on mobile.

Did this help?

|