The image grid functions similarly to a <a href="https://help.sitedu.de/articles/the-gallery-element-f0a2d0-2a22d" rel="noreferrer" class="PlaygroundEditorTheme__link">image gallery</a>, but with a slightly different presentation of the photos. This tutorial will guide you through creating a website with an impactful image grid.&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add an image grid to your website</h2>In order to add image grid to your website, select Image icon from the&nbsp;toolbar on the left side of the builder and choose the last icon.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/image-grid-1-l9fmwr8t.png" alt="" width="inherit" height="inherit">&nbsp;Next click right mouse button on image grid then choose option&nbsp;"Change images". From&nbsp;"My images and files"&nbsp;select pictures that you want to show up on image grid by clicking on them and clicking Add to images grid.&nbsp;If they are not in&nbsp;"My images and files"&nbsp;yet, add them from your hard drive by clicking&nbsp;"Select files"&nbsp;on right top corner of images menager.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Change image grid size</h3>Change image grid size the way you want to and photos will proportionally and symmetrically&nbsp;follow.&nbsp;Image grid minimum size is only limited by its thumbnails. By setting the&nbsp;smallest image grid size&nbsp;all the thumbnails become visible but there is no space between them. If you want your&nbsp;image grid to be even smaller, change thumbnails size.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Change image grid thumbnails size</h3>After clicking on your image grid you will able to set in pixels image grid's&nbsp;thumbnails width and height through the&nbsp;"Image grid size"&nbsp;section in the&nbsp;"Settings&nbsp;panel → Element".&nbsp;You can also choose the way thumbnails will be displayed in the image grid. Choose crop type. "Crop"&nbsp;means that an image will fully fit the image grid and will get cropped. "Fit" means that the&nbsp;&nbsp;whole thumbnail will be displayed but it might not fill out&nbsp; the whole space.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image grid settings</h2>After clicking on Image grid you will see "Image grid settings" in the <a href="https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Settings panel</a>.&nbsp;You can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Images in a row&nbsp;- shows how many images displayed are displayed&nbsp;in a row.&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">Image spacing&nbsp;-&nbsp; shows the vertical and horizontal distance from&nbsp;one image to another image</li><li value="3" class="PlaygroundEditorTheme__listItem">Show titles&nbsp;- indicates whether the titles should be displayed under the photos.</li><li value="4" class="PlaygroundEditorTheme__listItem">Thumbnails animation&nbsp;- after ticking that box image grid thumbnails will slightly enlarge when a&nbsp;user hovers over them.</li><li value="5" class="PlaygroundEditorTheme__listItem">No image compression&nbsp;- after ticking that option the image grid photos will not be compressed when published.&nbsp;</li></ul>&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Layout</h3>You can also change the layout of your&nbsp;Image grid in the item settings. You can choose between:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Fluid - you can change the distance between elements and the height of the images</li></ul> <img src="https://help.webwave.me/lib/dkwr2z/siatka-kiixeih8.png" alt="" width="inherit" height="inherit"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Masonry vertical&nbsp;- you can change the space between the images and the appearance by changing the order of the images&nbsp;</li></ul> <img src="https://help.webwave.me/lib/dkwr2z/mansonry-kiixegec.png" alt="" width="inherit" height="inherit"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Classic layout <img src="https://help.webwave.me/lib/dkwr2z/2024-03-19_14-25-ltyer8qz.png" alt="" width="inherit" height="inherit"></li></ul>&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add photos to Image grid</h2>In order to add photos to image grid, click on it and select&nbsp;"Edit content"&nbsp;from image grid settings in Settings panel. <img src="https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png" alt="" width="inherit" height="inherit">&nbsp;On the top of a new window select&nbsp;"<a href="https://help.sitedu.de/articles/the-site-dude-media-library-f0a2d0-824dc" rel="noreferrer" class="PlaygroundEditorTheme__link">Media library</a>", choose photos and press&nbsp;"Add image grid"&nbsp;at the bottom of the window. &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Removing photos from image grid</h2>In order to remove photos from image grid, click on it and select&nbsp;"Edit content". <img src="https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png" alt="" width="inherit" height="inherit"> Select&nbsp;a picture which needs to be removed and in&nbsp;"File details"&nbsp;choose&nbsp;"Remove". <img src="https://help.webwave.me/lib/dkwr2z/image-grid-3-l9fmwsmp.png" alt="" width="inherit" height="inherit"> <h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Change the photos order in image grid</h2>Click on image grid and select&nbsp;"Edit content". <img src="https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png" alt="" width="inherit" height="inherit">In this window select a photo,&nbsp; drag and drop it in a place where you want it to be.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Click action on single image</h2>Select the image grid, and then in the&nbsp;"Edit" section, select "image".&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/image-grid-4-l9fo0gy9.png" alt="" width="inherit" height="inherit">&nbsp;Click on the specific image&nbsp;which you want to set the click action, then in the settings panel go to the&nbsp;"Click action (link)"&nbsp;section and select the action you are interested in.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/image-grid-5-l9fmwtwx.png" alt="" width="inherit" height="inherit">

Learn about the image grid in your SiteDu.de builder 

The image grid functions similarly to a[image gallery](https://help.sitedu.de/articles/the-gallery-element-f0a2d0-2a22d), but with a slightly different presentation of the photos. This tutorial will guide you through creating a website with an impactful image grid.

## Add an image grid to your website

In order to add image grid to your website, select Image icon from the toolbar on the left side of the builder and choose the last icon.

![](https://help.webwave.me/lib/dkwr2z/image-grid-1-l9fmwr8t.png)

Next click right mouse button on image grid then choose option****"Change images"****. From****"My images and files"**** select pictures that you want to show up on image grid by clicking on them and clicking Add to images grid. If they are not in****"My images and files"**** yet, add them from your hard drive by clicking****"Select files"**** on right top corner of images menager.

### Change image grid size

Change image grid size the way you want to and photos will proportionally and symmetrically follow.

Image grid minimum size is only limited by its thumbnails. By setting the smallest image grid size all the thumbnails become visible but there is no space between them. If you want your image grid to be even smaller, change thumbnails size.

### Change image grid thumbnails size

After clicking on your image grid you will able to set in pixels image grid's thumbnails width and height through the****"Image grid size"**** section in the****"Settings panel → Element"****.

You can also choose the way thumbnails will be displayed in the image grid. Choose crop type. "Crop" means that an image will fully fit the image grid and will get cropped. "Fit" means that the whole thumbnail will be displayed but it might not fill out the whole space.

## Image grid settings

After clicking on Image grid you will see "Image grid settings" in the[Settings panel](https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c).

You can set:

* ****Images in a row****\- shows how many images displayed are displayed in a row.
* ****Image spacing**** - shows the vertical and horizontal distance from one image to another image
* ****Show titles****\- indicates whether the titles should be displayed under the photos.
* ****Thumbnails animation****\- after ticking that box image grid thumbnails will slightly enlarge when a user hovers over them.
* ****No image compression**** - after ticking that option the image grid photos will not be compressed when published.

### Layout

You can also change the layout of your Image grid in the item settings. You can choose between:

* Fluid - you can change the distance between elements and the height of the images

![](https://help.webwave.me/lib/dkwr2z/siatka-kiixeih8.png)

* Masonry vertical - you can change the space between the images and the appearance by changing the order of the images

![](https://help.webwave.me/lib/dkwr2z/mansonry-kiixegec.png)

* Classic layout  
  
![](https://help.webwave.me/lib/dkwr2z/2024-03-19_14-25-ltyer8qz.png)

## Add photos to Image grid

In order to add photos to image grid, click on it and select****"Edit content"**** from image grid settings in Settings panel.

![](https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png)

On the top of a new window select****"****[****Media library****](https://help.sitedu.de/articles/the-site-dude-media-library-f0a2d0-824dc)****"****, choose photos and press****"Add image grid"**** at the bottom of the window.

## Removing photos from image grid

In order to remove photos from image grid, click on it and select****"Edit content"****.

![](https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png)

Select a picture which needs to be removed and in****"File details"**** choose****"Remove"****.

![](https://help.webwave.me/lib/dkwr2z/image-grid-3-l9fmwsmp.png)

## Change the photos order in image grid

Click on image grid and select****"Edit content"****.

![](https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png)

In this window select a photo, drag and drop it in a place where you want it to be.

## Click action on single image

Select the image grid, and then in the****"Edit" section, select "image"****.

![](https://help.webwave.me/lib/dkwr2z/image-grid-4-l9fo0gy9.png)

Click on the specific image which you want to set the click action, then in the settings panel go to the****"Click action (link)"**** section and select the action you are interested in.

![](https://help.webwave.me/lib/dkwr2z/image-grid-5-l9fmwtwx.png)

The image grid functions similarly to a <a href="https://help.sitedu.de/articles/the-gallery-element-f0a2d0-2a22d" rel="noreferrer" class="PlaygroundEditorTheme__link">image gallery</a>, but with a slightly different presentation of the photos. This tutorial will guide you through creating a website with an impactful image grid.&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add an image grid to your website</h2>In order to add image grid to your website, select Image icon from the&nbsp;toolbar on the left side of the builder and choose the last icon.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/image-grid-1-l9fmwr8t.png" alt="" width="inherit" height="inherit">&nbsp;Next click right mouse button on image grid then choose option&nbsp;"Change images". From&nbsp;"My images and files"&nbsp;select pictures that you want to show up on image grid by clicking on them and clicking Add to images grid.&nbsp;If they are not in&nbsp;"My images and files"&nbsp;yet, add them from your hard drive by clicking&nbsp;"Select files"&nbsp;on right top corner of images menager.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Change image grid size</h3>Change image grid size the way you want to and photos will proportionally and symmetrically&nbsp;follow.&nbsp;Image grid minimum size is only limited by its thumbnails. By setting the&nbsp;smallest image grid size&nbsp;all the thumbnails become visible but there is no space between them. If you want your&nbsp;image grid to be even smaller, change thumbnails size.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Change image grid thumbnails size</h3>After clicking on your image grid you will able to set in pixels image grid's&nbsp;thumbnails width and height through the&nbsp;"Image grid size"&nbsp;section in the&nbsp;"Settings&nbsp;panel → Element".&nbsp;You can also choose the way thumbnails will be displayed in the image grid. Choose crop type. "Crop"&nbsp;means that an image will fully fit the image grid and will get cropped. "Fit" means that the&nbsp;&nbsp;whole thumbnail will be displayed but it might not fill out&nbsp; the whole space.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image grid settings</h2>After clicking on Image grid you will see "Image grid settings" in the <a href="https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Settings panel</a>.&nbsp;You can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Images in a row&nbsp;- shows how many images displayed are displayed&nbsp;in a row.&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">Image spacing&nbsp;-&nbsp; shows the vertical and horizontal distance from&nbsp;one image to another image</li><li value="3" class="PlaygroundEditorTheme__listItem">Show titles&nbsp;- indicates whether the titles should be displayed under the photos.</li><li value="4" class="PlaygroundEditorTheme__listItem">Thumbnails animation&nbsp;- after ticking that box image grid thumbnails will slightly enlarge when a&nbsp;user hovers over them.</li><li value="5" class="PlaygroundEditorTheme__listItem">No image compression&nbsp;- after ticking that option the image grid photos will not be compressed when published.&nbsp;</li></ul>&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Layout</h3>You can also change the layout of your&nbsp;Image grid in the item settings. You can choose between:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Fluid - you can change the distance between elements and the height of the images</li></ul> <img src="https://help.webwave.me/lib/dkwr2z/siatka-kiixeih8.png" alt="" width="inherit" height="inherit"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Masonry vertical&nbsp;- you can change the space between the images and the appearance by changing the order of the images&nbsp;</li></ul> <img src="https://help.webwave.me/lib/dkwr2z/mansonry-kiixegec.png" alt="" width="inherit" height="inherit"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Classic layout <img src="https://help.webwave.me/lib/dkwr2z/2024-03-19_14-25-ltyer8qz.png" alt="" width="inherit" height="inherit"></li></ul>&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add photos to Image grid</h2>In order to add photos to image grid, click on it and select&nbsp;"Edit content"&nbsp;from image grid settings in Settings panel. <img src="https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png" alt="" width="inherit" height="inherit">&nbsp;On the top of a new window select&nbsp;"<a href="https://help.sitedu.de/articles/the-site-dude-media-library-f0a2d0-824dc" rel="noreferrer" class="PlaygroundEditorTheme__link">Media library</a>", choose photos and press&nbsp;"Add image grid"&nbsp;at the bottom of the window. &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Removing photos from image grid</h2>In order to remove photos from image grid, click on it and select&nbsp;"Edit content". <img src="https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png" alt="" width="inherit" height="inherit"> Select&nbsp;a picture which needs to be removed and in&nbsp;"File details"&nbsp;choose&nbsp;"Remove". <img src="https://help.webwave.me/lib/dkwr2z/image-grid-3-l9fmwsmp.png" alt="" width="inherit" height="inherit"> <h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Change the photos order in image grid</h2>Click on image grid and select&nbsp;"Edit content". <img src="https://help.webwave.me/lib/dkwr2z/image-grid-2-l9fmwrqu.png" alt="" width="inherit" height="inherit">In this window select a photo,&nbsp; drag and drop it in a place where you want it to be.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Click action on single image</h2>Select the image grid, and then in the&nbsp;"Edit" section, select "image".&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/image-grid-4-l9fo0gy9.png" alt="" width="inherit" height="inherit">&nbsp;Click on the specific image&nbsp;which you want to set the click action, then in the settings panel go to the&nbsp;"Click action (link)"&nbsp;section and select the action you are interested in.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/image-grid-5-l9fmwtwx.png" alt="" width="inherit" height="inherit">

The Image Grid element

The Image Grid element with Lightboxes

Got a builder package? Learn how to use it and how to edit your content

Was this article helpful?