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

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

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 a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping to your Elementor site with just CSS. Here is a preview how it should function. For this to work you don’t need any kind of…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

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

    • Strange things didn’t stick once you closed the editor. Give me a few to recreate this.

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

  • 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 (loom.com tells me!) but I haven’t had a response from you yet.
    Cheers!
    Ian

    Reply
    • Please read my comment in your previous post.

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.