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.
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.
Speaking of Elementor itself, you can make use of the pre-made Elementor templates to get your job done more quickly. Also, you can use a proper Elementor hosting service for a better site performance.
