Wix Harmony Editor: Adding and Customizing the Wix Gallery

1. Click Explore Designs on the action bar.
2. Click a preset to apply it to your gallery.

1. Click the Display elements icon  on the action bar.

2. Select / deselect the checkbox next to the items you want to show / hide.

1. Click the All design options icon  on the action bar.

2. Click the Choose a Wix Gallery part dropdown and select the relevant part of the gallery.

3. Design the part of the gallery using the available options:

   • Fill Colors : Add a color background to complement the content of your element.

   • Border : Define the borders of your element so it stands out, choosing a color, width and style.
     Note: Depending on the part you chose to design, you may need to click the Edit individual borders icon  to design each side of the border separately.

   • Corners : Make the corners of your element more square or round by dragging the slider under Radius. Click the Edit individual corners icon  to design each corner separately.

   • Shadow : Apply inner and outer shadow to give the element an interesting 3D effect, setting the position, blurriness, color and more.

   • Spacing : Add breathing room to your content by adding padding around the element (or the selected area).

   • Layout : Customize aspects of your gallery such as the image aspect ratio, crop or fit your items within the gallery, and choose how many items to display in a row.

Note: Available design options vary based on the preset you choose and the part of the gallery you're customizing.

1. Click the Settings icon on the action bar.

2. Customize the following:

   • General:

     • When clicking on an item: Click the dropdown and choose what happens when a visitor clicks a gallery item:

       • Expand media: Items open in a popup where visitors can explore the finer details.

         • Animation Type: Click the dropdown and select an animation type: None or Smooth. Then drag the Transition Duration (milliseconds) slider to adjust how long the transition lasts.

       • Open a link: Clicking the gallery item takes the visitor to a link of your choice, e.g., an external website, a different page on your site or even a popup.

       • Do nothing: Gallery items are not clickable.

     • Prevent right-clicking on media: Enable / disable the toggle to allow / prevent right-clicking and downloading of your media.

   • Video:

     • Show play button: Enable / disable the toggle to display or hide a play button on videos.

   • Slider:

     • Loop items: Enable the toggle to have the media items loop continuously. Once the sequence reaches the last item, it automatically restarts from the beginning.

     • Slide automatically: Enable the toggle to make media items slide to the next automatically.

       • Transition style: Click the dropdown and select an option:

         • Continuous scroll: Your gallery slides continuously. Drag the Slider speed slider to adjust how fast your gallery slides.

         • Intervals: Your gallery slides to the next item after your chosen amount of time. Drag the Transition time (in seconds) slider to change the number of seconds between the items.

       • Pause on hover: Enable / disable the toggle to have the slider pause / not pause when a visitor hovers over a gallery item.

         Note: It is not possible to add Slider behaviour to a gallery preset that is not a Slider preset.

1. Click the dropdown next to Wix Gallery.

2. Select Expand Mode.

3. Choose what you want to customize:

   • Change presets: Click Explore Designs on the action bar to choose a new preset.

   • Choose what to display: Click the Display Elements icon on the action bar and select / deselect the items you want to show / hide.

   • Edit the design of expand mode elements:

     1. Click the All design options icon on the action bar.

     2. Select the relevant element from the Select a part dropdown and design it.
        

1. Click the Settings icon on the action bar.

2. Enable the Prevent right-clicking on media toggle.

Make your gallery interactive and guide visitors exactly where you want them to go by adding links to gallery items. For example, you can link to a page on your site or even an external site.

To make a gallery item open a link: 

1. Click Manage Items on the action bar.

2. Select the relevant item.

3. Enter the link in the Link field on the right and click Done.

4. Click the Settings icon on the action bar.

5. Click the When clicking on an image dropdown and select Open a link.

1. Click Explore Designs on the action bar.
2. Click a preset to apply it to your gallery.

Yes. You can display navigation buttons on a Slider gallery preset. If your gallery is not already using a Slider preset, switch it to one first.

To display navigation buttons on your gallery:

1. Click the gallery on the page.

2. Click the Display elements icon  on the action bar.

3. Select the checkbox next to the buttons you want to display: Next button and / or Previous button.

4. Click the dropdown next to Next button or Previous button to select what is displayed on the button: Text and / or Icon.

Note: It is not possible to add navigation buttons to a gallery preset that is not a Slider preset.

Yes. You can connect a gallery to a 'Media Gallery' field in your CMS (Content Management System) collection, so each item shows its own images and videos. The gallery needs to be inside a repeater or on an item page. Learn more about connecting the Wix Gallery to a Media Gallery field.