Awesome Looking Elementor Image In Text Design (2024)

Awesome Looking Elementor Image In Text Design (2024)

Element.How also offers premium tutorials! Check them here:

Table of Contents

This tutorial was fully rewritten in March 2024.

In this tutorial, I'm going to show you how you can easily have an Elementor background image show through text. We will be showing this Elementor Background Image in Text using some simple mix-blend-mode CSS, applied carefully to the right elements!

Here is what we will be creating:

Please log in to access this template. It's free! Login here

 

Visit the template page directly (the small 1px line bug that you might see in the iframe isn't there when the page is visited normally)

Features:

  • Works with Elementor Free
  • Works with fixed backgrounds
  • Works with video backgrounds
  • Works with either white or black backgrounds (doesn't work with any other color! That's a limitation of this method)

Let's get started!

First, import the Elementor template for the image in text design

It's easier to start from my template. Simply import the template on your project, get it from below the iframe of the demo above.

Then, adjust as you wish with your own content

Delete everything that you don't need.

Keep the HTML element. It's at the bottom of the template. (Or if you prefer, copy paste the CSS in the HTML element somewhere else, and then delete it.)

Then, insert your own background image or background video.

The required class names

White background

For a see-through white background, the container that has the background color set to white also needs to class name:

<script> 
/* Please login to get the code 
 * The code will be for the Awesome Looking Elementor Image In Text Design (2024) tutorial 
 * Found at this URL https://element.how/elementor-image-in-text/ 
 */ 
</script>

Black background

For a see-through black background, the container that has the background color set to black also needs to class name:

<script> 
/* Please login to get the code 
 * The code will be for the Awesome Looking Elementor Image In Text Design (2024) tutorial 
 * Found at this URL https://element.how/elementor-image-in-text/ 
 */ 
</script>

Finally, enjoy your Elementor image in text design!

I hope you found this helpful.

Cheers!

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

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

Checkout the Elementor Addon Finder directly

6 Responses

Leave a Reply