A Gallery element allows you to add to your website a photo&nbsp;gallery. Learn how to use it.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add gallery to your website</h2>In order to add a&nbsp;gallery to your website, click on the&nbsp;Image icon in the toolbar on the left side of the builder, drag and drop the gallery icon to your website.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gallery1-l9fp7vgn.png" alt="" width="inherit" height="inherit">&nbsp;There will be added some default photos in the gallery&nbsp;. You can easily change them in the "Change images" section. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Gallery Settings</h2> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Animation</h3>The way one picture changes to another:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Slide&nbsp;- a&nbsp;current photo will move to the side and be replaced by a new one.</li><li value="2" class="PlaygroundEditorTheme__listItem">Fade- a current photo will fade away and a&nbsp;new one will take its place.</li><li value="3" class="PlaygroundEditorTheme__listItem">Crossfade&nbsp;- a&nbsp;current photo will smoothly change to a new one.</li><li value="4" class="PlaygroundEditorTheme__listItem">Explosion&nbsp;– a&nbsp;current photo will be divided into many pieces, change to a new one and go back to being whole.&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Windmill&nbsp;– a current photo will be divided into four pieces, which move in different directions and reveal a new photo.&nbsp;</li><li value="6" class="PlaygroundEditorTheme__listItem">Door– a&nbsp;current photo will be divided into four pieces, which move on sides and reveal a new photo.</li><li value="7" class="PlaygroundEditorTheme__listItem">Tils&nbsp;– a&nbsp;current photo will be divided into four pieces, which fall and reveal a new photo.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Animation duration time</h3>Shows&nbsp;how long it takes in seconds for one photo to change to another.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Crop type</h3>Adjust how photo fits the gallery frame:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Fit&nbsp;- a whole photo fits the gallery frame. There might be left some empty spaces in the frame.</li><li value="2" class="PlaygroundEditorTheme__listItem">Crop&nbsp;- a photo fits the whole&nbsp;gallery frame. There are no empty spaces in the frame, but some parts of the picture might get cropped.</li><li value="3" class="PlaygroundEditorTheme__listItem">Stretch&nbsp;- a photo gets&nbsp;unproporctonally streched so it fits the whole frame. There are no empty spaces in the frame and no parts of the picture get cropped.</li></ul>&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Delay</h3>Shows for how long in seconds a photo is&nbsp;displayed before it changes.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Auto play</h3>Shows whether photos should change automatically or after a user's click.&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Additional settings</h3>There are some additional settings in the Gallery settings section:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Title and description&nbsp;- should a title and description of a photo be displayed</li><li value="2" class="PlaygroundEditorTheme__listItem">Thumbnails&nbsp;- should photos thumbnails be displayed and, if so, where.</li><li value="3" class="PlaygroundEditorTheme__listItem">Width and height&nbsp;&nbsp;- set width and height of photos&nbsp;thumbnails.</li><li value="4" class="PlaygroundEditorTheme__listItem">Arrows&nbsp;- should navigation arrows&nbsp;allowing a user to move around gallery be displayed.</li><li value="5" class="PlaygroundEditorTheme__listItem">Distance from edge&nbsp;- set arrows' distance from gallery edge.</li></ul>&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gallery2-l9fp7vyf.png" alt="" width="inherit" height="inherit"> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add photos to gallery</h2>In order to add photos to gallery, click on it. Expand Gallery settings and click on "Change Images" button&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gallery3-l9fp7wnd.png" alt="" width="inherit" height="inherit">&nbsp;Photos are added to gallery through the media library. At the top of&nbsp;a new window select "Media library", choose photos which will be in your gallery and press "Add to gallery" button at the bottom of the window. <a href="https://help.sitedu.de/articles/the-site-dude-media-library-f0a2d0-824dc" rel="noreferrer" class="PlaygroundEditorTheme__link">Learn more about the media library read&nbsp;here.</a> <h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Frame the&nbsp;active image</h2>You can frame the image according to your needs<img src="https://help.webwave.me/lib/dkwr2z/gallery-add-l9fpilsp.png" alt="" width="inherit" height="inherit"> &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Remove photos from gallery</h2>In order to remove photos from gallery, click on it and select "Change Images".Choose a photo&nbsp;you want to delete and in the file details select "Remove".&nbsp;&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/WebWave---Website-edition-28-l1cd47r5.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Change photos&nbsp;order</h2>In order to change photos order in gallery, click on it and select "Change Images".Drag a photo and drop it in a place where you want it to be.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/WebWave---Website-edition-29-l1cd5t2q.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Set a photo title and description</h2><ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Click on your gallery &nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">In the side edition panel select "Gallery settings".&nbsp; &nbsp;</li><li value="3" class="PlaygroundEditorTheme__listItem">Tick the&nbsp;&nbsp;"Title and desc" box. <img src="https://help.webwave.me/lib/dkwr2z/gallery4-l9fp7xie.png" alt="" width="inherit" height="inherit"> &nbsp;</li><li value="4" class="PlaygroundEditorTheme__listItem">Double click the&nbsp;text field on the&nbsp;photo. &nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Enter any text content and edit its style just like in any other text element. <img src="https://help.webwave.me/lib/dkwr2z/gallery5-l9fp7y2v.png" alt="" width="inherit" height="inherit"> &nbsp;</li><li value="6" class="PlaygroundEditorTheme__listItem">In the Settings&nbsp;panel you can set a text alignment on the&nbsp;photo, a text background color, a text,&nbsp;element transparency and more.&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/gallery6-l9fp7ypb.png" alt="" width="inherit" height="inherit"> &nbsp;</li><li value="7" class="PlaygroundEditorTheme__listItem">To edit the next photo just click on the&nbsp;navigation arrow in gallery.&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/gallery7-l9fp7uvs.png" alt="" width="inherit" height="inherit"></li></ol>

A Gallery element allows you to add to your website a photo gallery. Learn how to use it.

## Add gallery to your website

In order to add a gallery to your website, click on the Image icon in the toolbar on the left side of the builder, drag and drop the gallery icon to your website.

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

There will be added some default photos in the gallery . You can easily change them in the "Change images" section.

## Gallery Settings

### Animation

The way one picture changes to another:

* ****Slide**** - a current photo will move to the side and be replaced by a new one.
* ****Fade****\- a current photo will fade away and a new one will take its place.
* ****Crossfade**** - a current photo will smoothly change to a new one.
* ****Explosion**** – a current photo will be divided into many pieces, change to a new one and go back to being whole.
* ****Windmill**** – a current photo will be divided into four pieces, which move in different directions and reveal a new photo.
* ****Door****– a current photo will be divided into four pieces, which move on sides and reveal a new photo.
* ****Tils****– a current photo will be divided into four pieces, which fall and reveal a new photo.

### Animation duration time

Shows how long it takes in seconds for one photo to change to another.

### Crop type

Adjust how photo fits the gallery frame:

* ****Fit**** - a whole photo fits the gallery frame. There might be left some empty spaces in the frame.
* ****Crop**** - a photo fits the whole gallery frame. There are no empty spaces in the frame, but some parts of the picture might get cropped.
* ****Stretch**** - a photo gets unproporctonally streched so it fits the whole frame. There are no empty spaces in the frame and no parts of the picture get cropped.

### Delay

Shows for how long in seconds a photo is displayed before it changes.

### Auto play

Shows whether photos should change automatically or after a user's click.

### Additional settings

There are some additional settings in the Gallery settings section:

* ****Title and description**** - should a title and description of a photo be displayed
* ****Thumbnails**** - should photos thumbnails be displayed and, if so, where.
* ****Width and height**** - set width and height of photos thumbnails.
* ****Arrows****\- should navigation arrows allowing a user to move around gallery be displayed.
* ****Distance from edge**** - set arrows' distance from gallery edge.

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

## Add photos to gallery

In order to add photos to gallery, click on it. Expand Gallery settings and click on "Change Images" button

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

Photos are added to gallery through the media library. At the top of a new window select "Media library", choose photos which will be in your gallery and press "Add to gallery" button at the bottom of the window.

[****Learn more about the media library read here.****](https://help.sitedu.de/articles/the-site-dude-media-library-f0a2d0-824dc)

## Frame the active image

You can frame the image according to your needs

![](https://help.webwave.me/lib/dkwr2z/gallery-add-l9fpilsp.png)

## Remove photos from gallery

In order to remove photos from gallery, click on it and select "Change Images".

Choose a photo you want to delete and in the file details select "Remove".

![](https://help.webwave.me/lib/dkwr2z/WebWave---Website-edition-28-l1cd47r5.png)

## Change photos order

In order to change photos order in gallery, click on it and select "Change Images".

Drag a photo and drop it in a place where you want it to be.

![](https://help.webwave.me/lib/dkwr2z/WebWave---Website-edition-29-l1cd5t2q.png)

## Set a photo title and description

1. Click on your gallery
2. In the side edition panel select "Gallery settings".
3. Tick the "Title and desc" box.  
  
![](https://help.webwave.me/lib/dkwr2z/gallery4-l9fp7xie.png)
4. Double click the text field on the photo.
5. Enter any text content and edit its style just like in any other text element.  
  
![](https://help.webwave.me/lib/dkwr2z/gallery5-l9fp7y2v.png)
6. In the Settings panel you can set a text alignment on the photo, a text background color, a text, element transparency and more.  
  
![](https://help.webwave.me/lib/dkwr2z/gallery6-l9fp7ypb.png)
7. To edit the next photo just click on the navigation arrow in gallery.  
![](https://help.webwave.me/lib/dkwr2z/gallery7-l9fp7uvs.png)

A Gallery element allows you to add to your website a photo&nbsp;gallery. Learn how to use it.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add gallery to your website</h2>In order to add a&nbsp;gallery to your website, click on the&nbsp;Image icon in the toolbar on the left side of the builder, drag and drop the gallery icon to your website.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gallery1-l9fp7vgn.png" alt="" width="inherit" height="inherit">&nbsp;There will be added some default photos in the gallery&nbsp;. You can easily change them in the "Change images" section. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Gallery Settings</h2> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Animation</h3>The way one picture changes to another:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Slide&nbsp;- a&nbsp;current photo will move to the side and be replaced by a new one.</li><li value="2" class="PlaygroundEditorTheme__listItem">Fade- a current photo will fade away and a&nbsp;new one will take its place.</li><li value="3" class="PlaygroundEditorTheme__listItem">Crossfade&nbsp;- a&nbsp;current photo will smoothly change to a new one.</li><li value="4" class="PlaygroundEditorTheme__listItem">Explosion&nbsp;– a&nbsp;current photo will be divided into many pieces, change to a new one and go back to being whole.&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Windmill&nbsp;– a current photo will be divided into four pieces, which move in different directions and reveal a new photo.&nbsp;</li><li value="6" class="PlaygroundEditorTheme__listItem">Door– a&nbsp;current photo will be divided into four pieces, which move on sides and reveal a new photo.</li><li value="7" class="PlaygroundEditorTheme__listItem">Tils&nbsp;– a&nbsp;current photo will be divided into four pieces, which fall and reveal a new photo.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Animation duration time</h3>Shows&nbsp;how long it takes in seconds for one photo to change to another.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Crop type</h3>Adjust how photo fits the gallery frame:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Fit&nbsp;- a whole photo fits the gallery frame. There might be left some empty spaces in the frame.</li><li value="2" class="PlaygroundEditorTheme__listItem">Crop&nbsp;- a photo fits the whole&nbsp;gallery frame. There are no empty spaces in the frame, but some parts of the picture might get cropped.</li><li value="3" class="PlaygroundEditorTheme__listItem">Stretch&nbsp;- a photo gets&nbsp;unproporctonally streched so it fits the whole frame. There are no empty spaces in the frame and no parts of the picture get cropped.</li></ul>&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Delay</h3>Shows for how long in seconds a photo is&nbsp;displayed before it changes.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Auto play</h3>Shows whether photos should change automatically or after a user's click.&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Additional settings</h3>There are some additional settings in the Gallery settings section:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Title and description&nbsp;- should a title and description of a photo be displayed</li><li value="2" class="PlaygroundEditorTheme__listItem">Thumbnails&nbsp;- should photos thumbnails be displayed and, if so, where.</li><li value="3" class="PlaygroundEditorTheme__listItem">Width and height&nbsp;&nbsp;- set width and height of photos&nbsp;thumbnails.</li><li value="4" class="PlaygroundEditorTheme__listItem">Arrows&nbsp;- should navigation arrows&nbsp;allowing a user to move around gallery be displayed.</li><li value="5" class="PlaygroundEditorTheme__listItem">Distance from edge&nbsp;- set arrows' distance from gallery edge.</li></ul>&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gallery2-l9fp7vyf.png" alt="" width="inherit" height="inherit"> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add photos to gallery</h2>In order to add photos to gallery, click on it. Expand Gallery settings and click on "Change Images" button&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gallery3-l9fp7wnd.png" alt="" width="inherit" height="inherit">&nbsp;Photos are added to gallery through the media library. At the top of&nbsp;a new window select "Media library", choose photos which will be in your gallery and press "Add to gallery" button at the bottom of the window. Learn more about the media library read&nbsp;<a href="https://help.webwave.me/media-library" class="PlaygroundEditorTheme__link">here</a>. <h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Frame the&nbsp;active image</h2>You can frame the image according to your needs<img src="https://help.webwave.me/lib/dkwr2z/gallery-add-l9fpilsp.png" alt="" width="inherit" height="inherit"> &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Remove photos from gallery</h2>In order to remove photos from gallery, click on it and select "Change Images".Choose a photo&nbsp;you want to delete and in the file details select "Remove".&nbsp;&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/WebWave---Website-edition-28-l1cd47r5.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Change photos&nbsp;order</h2>In order to change photos order in gallery, click on it and select "Change Images".Drag a photo and drop it in a place where you want it to be.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/WebWave---Website-edition-29-l1cd5t2q.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Set a photo title and description</h2><ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Click on your gallery &nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">In the side edition panel select "Gallery settings".&nbsp; &nbsp;</li><li value="3" class="PlaygroundEditorTheme__listItem">Tick the&nbsp;&nbsp;"Title and desc" box. <img src="https://help.webwave.me/lib/dkwr2z/gallery4-l9fp7xie.png" alt="" width="inherit" height="inherit"> &nbsp;</li><li value="4" class="PlaygroundEditorTheme__listItem">Double click the&nbsp;text field on the&nbsp;photo. &nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Enter any text content and edit its style just like in any other text element. <img src="https://help.webwave.me/lib/dkwr2z/gallery5-l9fp7y2v.png" alt="" width="inherit" height="inherit"> &nbsp;</li><li value="6" class="PlaygroundEditorTheme__listItem">In the Settings&nbsp;panel you can set a text alignment on the&nbsp;photo, a text background color, a text,&nbsp;element transparency and more.&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/gallery6-l9fp7ypb.png" alt="" width="inherit" height="inherit"> &nbsp;</li><li value="7" class="PlaygroundEditorTheme__listItem">To edit the next photo just click on the&nbsp;navigation arrow in gallery.&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/gallery7-l9fp7uvs.png" alt="" width="inherit" height="inherit"></li></ol>

The Gallery Element

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

Was this article helpful?