> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/pagestudio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/pagestudio/customize-the-app/add-and-adjust-images-on-your-page.md).

# Add and adjust images on your page

Follow the steps below on how to add and adjust images on your page. Topics discussed in this article are:

* [Add images on your page](https://github.com/shoppad/docs-blogstudio/blob/master/customize-the-app/customize-the-app/add-and-adjust-images-on-your-page.md#add-images)
* [Add GIF images on your page](https://github.com/shoppad/docs-blogstudio/blob/master/customize-the-app/customize-the-app/add-and-adjust-images-on-your-page.md#add-gif-images)
* [Adjust images on your page](https://github.com/shoppad/docs-blogstudio/blob/master/customize-the-app/customize-the-app/add-and-adjust-images-on-your-page.md#adjust-images)
* [Adjust a section's background image](https://github.com/shoppad/docs-blogstudio/blob/master/customize-the-app/customize-the-app/add-and-adjust-images-on-your-page.md#adjust-section)

### Add images on your page <a href="#add-images" id="add-images"></a>

To add images to your page, you can click on the **Content Block icon**, under the **+ icon**. You can select the drop-down menu on top and select Photos or other different content blocks.

<figure><img src="/files/ecNAwsCDamDyAKdhLBLf" alt=""><figcaption></figcaption></figure>

Once you have found the perfect content block, you can drag and drop it into your page until you see a gray box. Once you do, release your cursor and you can see the added content block on your page.

<figure><img src="/files/EGpdRgteN4UI5zkEtLnS" alt=""><figcaption></figcaption></figure>

### Add GIF images on your page <a href="#add-gif-images" id="add-gif-images"></a>

In order to add a GIF image to your page, click onto the image, then select the **Link icon**.

<figure><img src="/files/TEKiivt9vk3kCKaFCbYh" alt=""><figcaption></figcaption></figure>

Upload the GIF image with the **Image icon** and wait until the image link is refreshed. Click **Ok** and see the image displaying on your page.

<figure><img src="/files/l2ve1tHLPwpgFvusEhKl" alt=""><figcaption></figcaption></figure>

### Adjust images on your page <a href="#adjust-images" id="adjust-images"></a>

When you click on an image, you will see three icons:

* **Image icon:** Upload a different image from your device
* **Link icon:** Contains the image's url, title, link, and Open New Window settings
* **Pencil icon:** Resize the image

<figure><img src="/files/WQz9dVbfPwR2eD6waQQn" alt=""><figcaption></figcaption></figure>

On the bottom of the selected image, you will see three icons:

* **+ icon**: Add more content blocks
* **... icon**: More settings - Move Up, Move Down, Duplicate, Settings
* **x icon**: Remove the image

<figure><img src="/files/6SoKry0Vn3XxrW0F10Yv" alt=""><figcaption></figcaption></figure>

From the image above, the Settings button will contain a variety of formatting settings that you can play with.

<figure><img src="/files/gQVxqnu5fAMvQ3OLUZQV" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/PChZGKMu30iPxyh3ADEF" alt=""><figcaption></figcaption></figure>

### Adjust a section's background image <a href="#adjust-section" id="adjust-section"></a>

When clicking on the section, you will see a green image icon on the bottom of the section. Clicking on it will allow you to change the section's background.

<figure><img src="/files/PyeTZeBPXY7Hyd530eDv" alt=""><figcaption></figcaption></figure>