Key Elements

CSS, Elementor

How To Wrap Text In Elementor

How To Wrap Text In Elementor

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.


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) {
       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. 😀

6 Responses

  1. I love many of your articles and have begun to catalogue them for future use in building websites for my clients.
    I am not a CSS or HTML expert, but can follow directions if they’re detailed enough.
    You have an article “How To Wrap Text In Elementor” that I’m very interested in using, but there’s something missing – or an assumption I can’t grasp – in your instructions.
    Rather than try to write this all out clearly enough for you to understand my quandary, I’ve simply made a video for you to watch:
    Thanks in advance for your help with this!

    1. Morning Ian,
      I tested the instructions in the article and everything works as it should is it possible to share your link we me there may be something overriding the css.

  2. Hi there!
    I sent you a message via your contact form a few days ago, asking for some clarification regarding your Elementor word-wrapping tutorial. I’d attached a video I’d recorded and I know you watched the video ( tells me!) but I haven’t had a response from you yet.

Leave a Reply