Greetings All.

This brief tutorial will touch on a subject I was asked about this week concerning a simple way of wrapping text around an image.

So after some experimenting and trying multiple methods this is the solution I found works the best.

Let’s begin

First we need to drag a text editor widget onto the page and fill it with some dummy text.

Next we need to add an image. Just incase you haven’t noticed there is no way to add an image in the visual tab but if you switch over to the text tab there a option to add it.

Click the image tab and you should a box pop up.

Open up your media library in another tab and get the url for the image and paste it in.

Click ok and don’t forget to add a description.

The image may not show up a first so click the visual tab and then click back to the text tab your image should show up stacked on top of your text.

Don’t worry we are to fix it.

Wrapping the text

To get the text to wrap the image we need to add a class and some css to the image because depending on the size image you used we may need to resize it.

Go back to the text tab and add this class with in the image tag.

.wrp-img

Your image tag should look similar to this.

<img class="wrp-img" src="YOUR IMAGE URL" />

Next we need to add the CSS.

.wrp-img {
   width: 40%;
   margin: 30px;
   float: right;
}

@media (max-width:600px) {
    .wrp-img{
       display: block;
       margin-left: auto;
       margin-right: auto;
       width: 100%;
    }
}

What the css above does in float the image to the right on large screens and on small screen it centers and stacks it on top of the text. It also changes the size of the image ( width: 40%; ) feel free to adjust it as you see me.

If you have done everything correctly you should have some thing like the image below.

I hope you found this useful if you need any help let me know in the comments. 😀