How to Add Image into a Text in Elementor

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.

Subscribe to our newsletter

Leave a Reply

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

Pin It on Pinterest

Share This