Wrapping text around images can be done in a few easy steps. Here they are:
1. Add the image above the text
Drag and drop the "Image" element above the text that you want to wrap it around. Then, either select the image you want to add from your Media Library or if it isn't there yet, first, upload it and then, insert it to the page.
2. Position the image
In order to be able to wrap the text around the image, you will have to position the image on the left or on the right.
You can do that by going to the "Layout & Position" options of the image (you can find this in the left sidebar) and then, clicking on the left or right position from the "Alignment" section:
Please keep in mind, that the text wrapping option only works, if you have chosen the left or the right alignment for your image.
3. Activate the "Float" option
The next step is to click on the "Advanced" tab (last tab, as shown in the image above) and activate the "Float" option. This will allow the text to be wrapped around the image:
Once this is done, the text will be wrapped around the image. So, this is you can wrap texts around your images in a few steps. However, doing this would not be our first recommendation, thus, we would also like to give you an alternative for it.
Although, wrapping the text around images looks good on average desktop screens, it might happen that at certain screen sizes the text will get squeezed into a narrow space.
For instance, if your visitors will view your page from a tablet or a mobile phone. You can check this with the Responsive View option from the bottom-center part of the editor.
If you click on either of the mobile device views, you will see that the image and the text around it are not displayed correctly, just like in the following example.
- This is an example of how texts wrapped around an image will be displayed on a PC:
- And this is how the same texts and image will be displayed on a tablet:
Therefore, this solution is not mobile-friendly. In order to have a page that is also optimized for mobile screens, we recommend you use column layouts instead of wrapping the text around images.
This method consists of first adding a "Columns" element to the page. Then adjusting its layout to fit your needs and finally dragging and dropping the image and the text you want in the columns.
If you need more details on how to do this, please check out the video above or this tutorial.
This way, you can make sure your page will look just as good on a tablet or on a mobile phone, as it does on a PC.
If you wish to find out more about the elements and options in Thrive Architect, please follow this link.
Hopefully, this article was useful for you. If so, please give us a smile below :)