How to Add Image into a Text in Elementor

Updated: October 8, 2022

Elementor has allowed everyone to become a web designer without needing to have advanced CSS skills. Its visual editor allows you to create a beautiful web page without writing any single line of CSS code. You can simply add the design elements (widgets) you want and style them up on the settings panel. Even so, having CSS skills would a great bonus in using Elementor. You will be able to apply unique styles to your web page using the custom CSS feature of Elementor. In this post, we will show you how to add an image into a text in Elementor using Elementor’s custom CSS.

In some design tools such as GIMP and Photoshop, you typically need to add a layer mark to add an image into a text. In Elementor, you can accomplish the same thing by adding a CSS code as the Heading widget and the Text widget of Elementor has no setting option to add an image as the background.

Adding image into a text in Elementor

Before getting started, make sure that you have upgraded your Elementor to the pro version if you haven’t done so since custom CSS is only available on Elementor Pro (read: Elementor Free vs Elementor Pro). Once you are ready, create a new page or template and edit it with Elementor. Of course, you can also edit an existing one. Add the Heading widget to the canvas area.

Go to the settings panel to replace the default text under the Content tab and.

Go to the Style tab to style up the text. You can set the text size, font style, and so on by clicking the pencil icon on the Typography option under the Title block. Since you want to use an image as the background of your text, no need to set the text color.

Next, go to the Advanced tab and open the Custom CSS block and paste the following CSS code. Replace the image URL with your own image URL.

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

Here is the example.

If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.