> 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/wrap-text-around-an-image.md).

# Wrap text around an image

Page Studio now offers a great way to wrap text around an image. Follow the steps below on how to apply this for your pages.

1\. In the Page Studio editor, on the left sidebar, click the **Content Blocks** icon.

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

2\. In the Content Blocks menu, under Basic, find this **Photo block**.

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

3\. Click on the **Photo block**, and then drag and drop it onto your page.

4\. Resize the image: Click on the image, then click the black dot at the bottom right of the image (do not release the click!), and drag in to make the image smaller.

<figure><img src="/files/04lqRs0dJ4gIpgC2Tx69" alt=""><figcaption></figcaption></figure>

5\. On the image, click the **More icon**.

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

6\. Select **Settings**.

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

7\. Under the **•••** menu, choose **Position**.

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

8\. Set **Float** to **Left**.

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

If you would like the image to be on the right, set **Float** to **Right**.

9\. Click **Spacing**, and set **Right** to **20px**.

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

In the previous step, if you have set **Float** to **Right**. For this step, instead set **Left** to **20px**.

10\. Hit the **x button** to close the formatting settings.

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

11\. On the image, click the **+ icon**.

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

12\. Add a **Paragraph**.

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

13\. Click the newly added paragraph, then add another **Paragraph**.

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

You will now see that the text wraps around the image. Isn't that neat? 😎

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