Home 5 How to 5 How to Place an Image Inside a Text in Elementor

How to Place an Image Inside a Text in Elementor

Updated:
Jun 4, 2020

Although CSS knowledge is not required to use Elementor, it would be a great bonus to have CSS skills in using Elementor. If you want to accomplish a certain design style and Elementor offers no styling option to accomplish it, you can use your CSS skills.

Elementor offers no option to use an image as the background of a text. The only way can do to accomplish it is by adding custom CSS. In order to be able to add a custom CSS, you need to use the pro version of Elementor since the custom CSS feature is only available on the pro version (read: Elementor Free vs Elementor Pro)

First off, create a new page or a new template and edit it with Elementor. Or, you can also edit an existing page or template. Add the Heading widget to the canvas area.

Go to the settings panel and replace the default text on the Title block under the Content tab. Next, go to the Style tab to style up the text. You can set the text size and style by clicking the pencil icon on the Typography option on the Title block. You don’t need to set the text color as you want to use an image as the background.

Once you are done setting the text size, style, and font style, go to the Advanced tab and open the Custom CSS block. Paste the following CSS code. Make sure to 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.

You can use a thick font to apply the tip above.

Tags: elementor

This page may contain affiliate links, which help support UtilizeWP.

1 Comment

  1. Ian Bowden

    Thanks for the tutorial and code! It works perfectly but in one way — it seems to cut off the desceners of lower-case characters! See my screenshot: https://i.imgur.com/glMb0PO.png

    Can I change the code to prevent this from happening? Different fonts get the same results. Changing the padding and/or margins of the Elementor widget also do nothing.

    Reply

Submit a Comment

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

Share This