Image Gallery

Image Gallery

Welcome to the “Image Gallery” documentation. Looking to integrate a gallery into your website? Our widget provides you to create stunning image showcases that captivate your audience. In this guide, we'll show you how to use the editor to customize your gallery widget.

                       Step 1 : Open The Editor
                      Step 2 : Add And Customize Media
                      Step 3 : Adjust The Layout
                      Step 4 : Configure Settings
                      Step 5 : Choose Colors
                      Step 6 : Preview




Step 1: Open the Editor
1. Go to Image Gallery template.
 2. Click on "Edit" after choosing your template.





Step 2: Add and customize media

1. In this panel, you can easily add, remove, or rearrange your medias as needed.





2. You can customize each media by uploading an image and its hover, or by inserting a video URL. Additionally, you can add a caption and specify a link for further customization.







Step 3: Adjust the Layout

1. In the Layout panel, you'll begin by selecting your preferred theme to showcase your image gallery. Choose from options such as carousel, masonry, or grids to suit your style.




2. Then, you have the option to choose whether to display a header or not. You can also determine how to present your picture captions, customize the overlay, and select the caption's position.





3. Furthermore, you can fine-tune the gap between media items and their roundness, choose to display the video icon, and write a label for the video.





Step 4: Configure settings

Here, you'll handle the settings:

1. If you choose the masonry or grids layout, you can decide whether to display images within cards, set a maximum number of items to be shown, determine the number of grids per line, write a button label, and customize its roundness.




2. In the carousel layout, you can specify the maximum number of items to be displayed, select the number of columns and rows, activate the loop option, and choose whether to show the controls and dots.






Step 5: Choose Colors

1. Within this panel, you can select colors that match your website's design.





Step 6: Preview

Lastly, you can click on “Preview” to see how your gallery widget looks on both desktop and mobile devices. After this, you can proceed to the next step.


Related Articles:
Slider Before/After Slider