How to wrap text around an image in Elementor

At the time of writing this article, Elementor does not provide an easy way to wrap text around an image. Let’s look at the old-fashioned way of achieving this using the Text Editor widget. The Text Editor widget is similar to the old TinyMCE editor of WordPress.

Add your text to the Text Editor widget. Then place the cursor where you want your image to appear. Place the image inside the Text Widget by choosing the Add Media option from the top of the widget.

Select the image and insert as usual. This would insert the image inside the text, but there would not be any text-wrapping yet.

The image looks like a block element right now. This is because the Text Editor widget inserts it inside a paragraph tag. To wrap text, click on the image inside the Text Editor widget and choose either align-left or align-right.

Here is the result.

Disable wrapping on smaller devices

The wrapped text might appear too narrow on smaller devices. To fix this issue you will have to disable wrapping on smaller devices. Unfortunately, this requires the use of some custom CSS. Use the developer tools in your browser to figure out at which width the text starts to appear too narrow.

Solution 1: Add a class to the image

Click on the Text tab next to the Visual tab to view the raw HTML. Add a class to the image element. Elementor would have already added some classes to the element. Make sure there is a space between your class and the classes already there.

In my example, this is how the image element looked before and after the change.

Before:

1<img class="size-medium wp-image-21 alignleft" src="http://192.168.1.205/wp-content/uploads/2022/07/pexels-yana-moroz-12906894-240x300.jpg" alt="" width="240" height="300" />

After:

1<img class="size-medium wp-image-21 alignleft floated-left-inline-image" src="http://192.168.1.205/wp-content/uploads/2022/07/pexels-yana-moroz-12906894-240x300.jpg" alt="" width="240" height="300" />

I have added the class floated-left-inline-image to the image element. I used a long name to avoid any potential conflict with any existing class. You could prefix the class name with the name of your site, just to be sure.

Go to the advanced tab in the Text Editor widget, scroll down to custom CSS and paste the following CSS into the text box.

1@media screen and (max-width: 600px) {
2    .floated-left-inline-image{
3        float:none !important;
4        display:block;
5        margin: 1em auto;
6    }
7}

I used 600px as the max-width because it was below that width that the text on the right of the image started to look too narrow for me. You will have to adjust the width as per your requirement.

Solution 2: Add a class to the whole text block

This is the easier solution that I promised in the previous section. Here we add a class to the whole text block and then apply the CSS rules to all the images inside the text block. Elementor UI has an option to add a class to Widgets. The drawback of this method is that if you have multiple images inside the text block then you won’t be able to style each one differently.

Go to the Advanced tab ➾ Layout Section ➾ CSS Classes. Add a class name in the text box. For example, text-block-with-inline-images. Add the following CSS to the custom CSS section.

1@media screen and (max-width: 600px) {
2    .text-block-with-inline-images img{
3        float:none !important;
4        display:block;
5        margin: 1em auto;
6    }
7}

As mentioned in the previous section you have to figure out the max-width you need to use.

I don’t have Elementor Pro, where should I put the CSS?

Your task is somewhat difficult if your theme does not support adding custom CSS. You might not consider it worthwhile just for your text-wrapping requirement. But remember that the ability to add custom CSS is a very handy tool to have at your disposal. Here are your options.

Create a child theme

This is my preferred option. Once you created the child theme, you can add your custom CSS to the CSS file of your child theme. Here is the somewhat dry, official WordPress documentation for creating a child theme https://developer.wordpress.org/themes/advanced-topics/child-themes/.

Here is an easier explanation from Elementor: https://elementor.com/blog/wordpress-child-theme/. They talk about the manual method of creating a child theme as well as automatically generating a child theme using a plugin. The plugin also makes it easy to manage the child theme. Use the manual method only if you are reasonably comfortable coding or you have a local test installation or a staging area where you can try out things.

Use a plugin

There are WordPress plugins that allow you to add custom CSS to your site. Here is HubSpot’s selection: https://blog.hubspot.com/website/best-wordpress-plugins-to-add-custom-code.

I don’t personally like the plugin option, since the styles of some of your pages then become dependent on the plugin. Please note that the child theme generating plugin recommended by Elementor does not have this problem. Once the child theme is generated, you can do without the plugin.

Anyway, that is just my personal preference, a large number of users use the plugin route to add CSS to their WordPress site.