5/5

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.

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

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn...

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping...

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile...

How to Create A CSS Arrow

Greetings All, For this brief tutorial I will show you how to create a css...

2 Comments

  • 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: https://www.loom.com/share/df4ec4681ad74bcda476e996d32dc109
    Thanks in advance for your help with this!
    Cheers!
    Ian

    Reply
    • Evening Ian,
      Thanks for stopping by I will watch the video and post a reply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.