This article will show you how to use (P) Image List to create a stunning product image showcase.
About the (P) Image List Element
The (P) Image List element is designed to demonstrate the images of a particular product on your page.
From the GemPages Dashboard, open your preferred template to edit. You can quickly find the (P) Image list element on the left sidebar of the Editor, under the Product section
As a child element, the (P) Image List element should be located in a Product Module to work correctly. Drag & drop the Product Module, then nest the (P) Image List element inside if your page doesn’t have them.
GemPages provides an efficient tool to design your image list, including the Settings and Design tabs.
Configure the Settings Tab
Display
Style: There are two options you can select at this point – Default, and Slider.
- Default: All available images of the product will be shown at once.
More options of the Default style include:
– Image Width and Image Height: auto means the original dimensions. To alter them, please input your desired values.
– Image Spacing: Adjust the space between images using the slider or the number box.
- Slider: The product images will be demonstrated in a revolving carousel.
More options of the Slider style include:
– Columns: Adjust the number of columns with the slider or the number box.
– Dots Navigation: Turn on/off the dots under the slider.
– Next/Prev Buttons: Turn on/off the next and previous image buttons on your slider.
– Loop: Activate this option to make the slider start from the beginning after reaching the final image.
– Spacing: Adjust the space between images using the slider or the number box.
Gallery
Enable Lightbox: Turn on this feature to enable a full-size view of the product images when customers click on it.
Lightbox icon: Toggle on if you would like to show the magnifying glass icon of the Lightbox feature.
Video Inline: Enable this option to play the video in the Image List without clicking to open it.
3D Image Inline: Enable this option to play the 3D Image in the Image List without clicking to open it.
Smart Image List: Toggle on this option to hide the image list automatically if it contains less than 2 images.
Original size
You can adjust the size of the images by selecting one from the drop-down menu.
Active Border
If you would like to add a border to your image, turn on this option and enter the hex color code for the border in the Border color field.
Alignment
This parameter allows you to determine how the element is positioned on your page. There are three options left-aligned, centered, and right-aligned.
Extra class
If you wish to further customize the element with coding, please use this field to add a class name and then refer to it in the CSS file.
Configure the Design tab
To style how the element looks, please navigate to the Design tab and follow the instructions in this article.
