# Grid gallery

This Guide will help you to add **Grid Gallery**.

#### DRAG AND DROP

<div id="bkmrk-drag-and-drop%C2%A0grid-g">- **Drag and Drop** Grid Gallery from left side **Widget Panel** as shown in image below.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-drag.png)

#### SELECT IMAGES

<div id="bkmrk-select-images-from%C2%A0m">- Select images from **Media Library** as shown in below image.
- You can upload images by Clicking on **Upload Files**.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-image-select.png)

### GRID GALLERY SETTINGS

<div id="bkmrk-if-you-want-to%C2%A0chang">- If you want to **Change, Delete or Add** images you can do that from **Organize Images**.
- Now select **Column count** for Images.
- Select **Image size** from options or Select **Custom** option to add custom size for Images.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-settings1.png)

<div id="bkmrk-now-select%C2%A0link%C2%A0for-">- Now select **Link** for your Images.
- If you want open that **Link** in **New Tab** then check **Open link in new window(tab)**.
- To show image caption below image just check **Show image caption**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-settings2.png)

</div>#### GALLERY OPTION IN GRID GALLERY

This option is available in **link to** section. By selecting this option your images will pop up when you click on it. You can add following properties for Gallery image.

<div id="bkmrk-you-can-add-image-th">- You can add image thumbnail **Border Size** and **Color** as shown in image below.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail.png)

<div id="bkmrk-also-you-can-add%C2%A0spa">- Also you can add **spacing around image thumbnail**, set pop up gallery image **Border size and color** as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail1.png)

</div><div id="bkmrk-you-can-set%C2%A0max-heig">- You can set **max height** and **max width** for your pop up image frame
- Check **Show Pagination** box if you want to show pagination
- Provide the **visibility** for image title as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail2.png)


</div><div id="bkmrk-when-you-click-on-ga">- When you click on gallery image on your webpage the pop up will appear as shown in image below.  
    ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail3.png)



</div><div id="bkmrk-"></div>