Elementor Wrap Text Around Featured Image Easily

Elementor Wrap Text Around Featured Image Easily

Just Released: 10 Popular Web Hosts Tested In Depth

Table of Contents

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:

Elementor Wrap Text Around Featured Image Easily 1

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.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Wrap Text Around Featured Image Easily tutorial 
 * Found at this URL https://element.how/elementor-wrap-text-around-featured-image/ 
 */ 
</script>

I named my code snippet:

[wrapped_featured_image] : feature image + post content shortcode

Elementor Wrap Text Around Featured Image Easily 2

[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:

Elementor Wrap Text Around Featured Image Easily 3

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.

Elementor Wrap Text Around Featured Image Easily 4

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!

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Wrap Text Around Featured Image Easily tutorial 
 * Found at this URL https://element.how/elementor-wrap-text-around-featured-image/ 
 */ 
</script>

Elementor Wrap Text Around Featured Image Easily 5

Conclusion

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

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2701 Elements right here:

Checkout the Elementor Addon Finder directly

Leave a Reply