> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Add an Image Gallery # Getting Started You can add an image gallery to your website to display multiple images at once to suit your needs. This article will cover how you can add an Image Gallery element to your website, follow all the instructions accordingly. --- # Adding the Image Gallery element Follow the steps below to add an Image Gallery to your site. * Click on **Add Element** in an empty row and section * From the **General Elements** section, select **Image Gallery** **Refer to the GIF below:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-25_1ybjoi7.png) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-26_epztnd.png) | *Image Gallery element after it is added* --- # Editing the Image Gallery element Follow the steps and instructions below to add and edit an **Image Gallery** on your site. The **Image Gallery** element editor has the following options: * Images * Set Category * Gallery Settings * Filters * Caption Style * Tab Setting and Style * Background The **Image Gallery** element editor: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-27_wrqvpw.png) --- # Images Inside this option, you can add new images to your gallery, delete existing ones and change some necessary settings of the images. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-28_1klz3qj.png) __The **GIFs** below show the settings you will be able to change for each image ⬇️__ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-01at43846p_k8q96x.gif) **Image Caption:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-01at44600p_s7l32a.gif) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-29_1e360zg.png) ⬆️ **Set category:** You will be able to put every individual image under one or more categories. ⬆️ **Image Action:** You can also set the image as a LightBox or add a custom URL to it. **LightBox image** ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-01at43444p_jq7ye.gif) **Add a new image:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-01at45703p_1e87p9n.gif) --- # Set Category In this option, you can create or delete the categories for your image gallery. Refer to the **GIF** below to see the demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-01at45858p_1hta4on.gif) --- # Gallery Settings In this setting, you can make necessary changes to your gallery, like adjusting the gap between the images, setting the number you want to display, and the number of columns for the gallery. Refer to the **GIF** below to see the demonstration: ![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/hi22222-f0D8h6.gif) --- # Filters Filters let you change how your images look in your gallery with various effects like blur, invert, adjust the brightness and contrast, etc. Refer to the **GIF** below to see the demonstration: ![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/bossgif-B7tmHB.gif) --- # Caption Style You can change your image caption with this setting, from changing the text size to adding colors, background, and more. Refer to the **GIF** below to see the demonstration: ![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/giff2-siDLzt.gif) **Different Caption Styles:** **Overlay on Hover:** The overlay on the hover caption makes the caption appear when a visitor hovers over the image. **Default:** The caption will appear under the image. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/screenshot2022-09-01at51856pm_55os3c.png) --- # Tab Setting and Style You can add a tab to your image gallery so visitors can view the specific images they want that fall under the created categories. Here is how you can use this option: 1. Enable the tab visibility ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-30_11f2d4v.png) 2. After enabling it, you will see a tab appear like the one shown in the picture below. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-31_1n1p55u.png) __The **GIFs** below demonstrate what each setting does:__ ![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/gif333-yj8xTb.gif) ![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/gif44-35QiWr.gif) --- # Background You can add a background color or gradient to your image gallery. Refer to the **GIF** below to see the demonstration: ![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/gif66-DI8XOQ.gif)