> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.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).

# Adding and setting a gallery

Add a gallery to your website to create your portfolio, showcase your company's services, or share photos of recent events. Five different gallery types allow you to choose the best way to display your images.

Follow the instructions below to add and customize a gallery on your website. 

**Contents:**
* [Step 1. Adding a Gallery element](#1-step-1-adding-a-gallery-element)
* [Step 2. Adding images to the Gallery element](#1-step-2-adding-images-to-the-gallery-element)
* [Step 3. Customizing images in the Gallery element](#1-step-3-configuring-images-in-the-gallery-element)
* [Step 4. Customizing the Gallery element](#1-step-4-configuring-the-gallery-element)

# Step 1. Adding a Gallery element

There are several ways to add this element to your website page:

* You can add a ready-made block with this element. See the **Galleries** section when adding a new block.

|| ${color}[#ffa800](Note:) Not all blocks in this section use the Gallery element; there are also collection blocks. Such blocks can help you create a similar look to a gallery, but with videos or other elements. You can learn more about working with this type of block [in our article](/en-us/article/collection-items-settings-b2rb1y/).
​​
| ${color}[#1aa900](Tip:) refer to the article [about adding blocks](/en-us/article/adding-blocks-178s0sh/).

* You can also add this element to an existing filled or empty column in one of your blocks. To do this, click on the **add new element icon** and select the **Gallery** or **Slider** element from the list of available elements:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-i-nalashtuvannya-ga_dkmkfm.png)
| ${color}[#1aa900](Tip:) You can find these elements in the Media tab when adding an element.

|| ${color}[#ffa800](Note:) Both of the above elements are the same “Gallery” element; in the second case, slider mode is enabled by default.

||| ${color}[#f97700](Important:) These elements are currently unavailable for the Flex block.

# Step 2. Adding images to the Gallery element

1. To add images, click on the gallery element if it is empty, or click on the settings gear in the upper left corner of the element if some images have already been added: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-i-nalashtuvannya-ga_1evcsqf.png)
2. In the **Content** tab, you can **upload** the desired images from your device or **select photos from the Media Gallery** of your site: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-i-nalashtuvannya-ga_gtjlm2.png)
|| ${color}[#ffa800](Note:) Currently supported formats are .png, .jpg, .svg, .webp, .avif, and .gif.

| ${color}[#1aa900](Tip:) The Gallery element supports uploading/selecting multiple files at once: hold down the Cmd key (on Mac) or Shift key (on Windows) to select multiple photos.

| ${color}[#1aa900](Tip:) You can learn more about the Media Gallery [in our article](/en-us/article/media-gallery-of-your-website-1f87k7g/).

# Step 3. Configuring images in the Gallery element

1. To change the order of images, hover over one of them in the **Content** tab and, while holding, drag it to the desired position.

2. In the same menu, you can go to the individual settings for each image by clicking on it and delete unnecessary images:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-i-nalashtuvannya-ga_j68ydk.png)
| ${color}[#1aa900](Tip:) The article [Editing images](/en-us/article/editing-images-17ad7gj/) will familiarize you with the available settings.

||| ${color}[#f97700](Important:) Corner rounding and outlines are set globally in the Gallery element settings; it is not yet possible to configure these parameters for each photo separately. 

|| ${color}[#ffa800](Note:) Currently, it is not possible to add an action when clicking on an image in the gallery. Also, the image container cannot be converted into a video container.

| ${color}[#1aa900](Tip:) If you need to create a gallery from videos or other elements, use the [collection block](/en-us/article/collection-items-settings-b2rb1y/).

3. Similar to individual **Image** elements, you can drag the bottom of the photo to change the height of the container.

|| ${color}[#ffa800](Note:) This is a global setting; changing the height of one container will affect all image containers in the element.

# Step 4. Configuring the Gallery element

After adding images to your gallery, configure its appearance — select the gallery type, activate the desired mode, change the margins, etc.

1. Similarly to step two of this article, open the Gallery element settings.

2. In the **Style** tab, you can activate rounded corners for each photo in the element and add a border:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-i-nalashtuvannya-ga_16daws0.png)
| ${color}[#1aa900](Tip:) You can also customize the rounding of each corner separately by clicking on the icon next to the rounding degree field.

||| ${color}[#f97700](Important:) These settings are global for the entire element; you cannot customize these parameters individually for each photo.

3. In the **Layout** tab, you can select the type of gallery you want:

![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-i-nalashtuvannya-ga_8dwsnu.png)
 Each of them has its own settings. For example, if you select **Slider** mode, you can customize the color and appearance of the controls, animation, and enable auto-scrolling. 

Certain settings, such as **Spacing** and **Number of images per row**, can be configured separately for each device.

3. [Publish your site](/en-us/article/publishing-a-site-tgxmch/) after you are done working on the gallery.