Image Gallery
Image Gallery
Welcome to the “Image Gallery” documentation.
Looking to integrate a gallery into your website? Our block 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 block.
Step 1: Open the Editor
1. Go to Image Gallery template.
2. Click on "Edit" after choosing your template.
class="" alt="">Step 2: Add and customize media
1. In this panel, you can easily add, remove, or rearrange your medias as needed.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-96" alt="">Step 5: Choose Colors
1. Within this panel, you can select colors that match your website's design.
class="flex justify-center items-start h-auto w-auto" alt="">Step 6: Preview
Lastly, you can click on “Preview” to see how your gallery block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">