This tutorial uncovers the way of creating a scrollable product images layout with the Gallery Anchor Navigation widget from JetProductGallery plugin.
With the Gallery Anchor Navigation widget, you can display images of the product in an attractive way. You can showcase images in the form of a slider with vertical or horizontal pagination and change their appearance with the help of different style settings.
Note, that you will need JetWooBuilder plugin or Elementor Pro to create galleries with JetProductGallery.
Reading this tutorial will help you to create a scrollable product images layout using the Gallery Anchor Navigation widget. So, let’s get started!
Creating a Gallery Anchor Navigation
1 Step — Add a Gallery Anchor Navigation widgett
Firstly, open the page to which you want to add a Gallery Anchor Navigation widget and click on the Edit with Elementor button to proceed. Then, drag-n-drop the widget to the needed section.
2 Step — Customize General settings
After that, navigate to the General settings block. Here you can choose one of three sources such as Post Types, Manual Select, and WooCommerce Products. Check the General Settings Overview tutorial to find out more.
If you want to specify the product, then you can paste the ID of the product in the Product ID field.
Also, you can Enable Gallery and Zoom options.
There’s also an opportunity to change the Image size according to your preferences.
In the Gallery block, you can choose the Button Icon, Show Caption, and enable Controls.
Moreover, if you’ve added a video to your product, you can change its settings in the Video settings block.
3 Step — Discover Style settings
The last thing here is the Style settings block. You can change the appearance of your layout using a lot of different style settings to make your website really stylish.
4 Step — Preview the result
Step 4 — When you’ve done customization, click on the Publish button and preview the result.
That’s all you need to do to create the scrollable product images layout with the help of the Gallery Anchor Navigation widget.