Elementor Wrap Text Around Featured Image Easily

In this tutorial, I will show you how you can wrap text around featured images in Elementor, and have everything still be fully dynamic. Unfortunately, there is no super simple way to do this directly. We have to jump through a few hoops.

Worry not though, the tutorial will show you exactly how you can get this done easily.

Here is a screenshot of the end result:

First, let's create a new shortcode to get the featured image along with the post content

The only way we can wrap the featured image around the post text content dynamically is to have them both be on the 'same level', DOM wise.

So we are using PHP to create a shortcode that will return first the image, then the post content.

Add this code in a new snippet in the Code Snippets plugin, or in your child theme functions.php file.

function elementhow_featured_image_shortcode() {
global $post;
$featured_image = get_the_post_thumbnail($post->ID, 'full', array('class' => 'wrapped-feature-image'));
$content = $featured_image . apply_filters('the_content', $post->post_content);
return $content;
}
add_shortcode('wrapped_featured_image', 'elementhow_featured_image_shortcode');

I named my code snippet:

[wrapped_featured_image] : feature image + post content shortcode

[wrapped_featured_image] is the name of the shortcode.

Important: click the 'Activate' button in the top right to activate your code snippet!

Then, go into the Elementor Single Post template where you want featured images to wrap around the text of the posts

In there, instead of using one of these elements (Post Content & Featured Image), as you normally would:

We will be using a text editor element. We could also use a shortcode element, but if we use the text editor element, we will still have access to all the typography styling options that comes with it.

Add the text editor, then add the [wrapped_featured_image] shortcode in it.

As soon as you will click outside of the text editor, the shortcode will render and you will see the result.

You may use the options under Style to adjust a few settings. Generally speaking though to style post content texts, you are better using global styles.

Finally, add this CSS to wrap the image around the post's text content

Add the CSS under Advanced > Custom CSS for the text editor element. Adjust the CSS as you wish to change the size of the image and its padding. The 'float; left' part is what makes the wrapping work!

.wrapped-feature-image {
    width: 400px;
    float: left;
    padding-right:20px;
}
@media (max-width:767px){
    .wrapped-feature-image {
    width: 230px;
}
}

Conclusion

I hope you have enjoyed this tutorial! You are now able to dynamically wrap featured images around text in Elementor!

Cheers!