Awesome Looking Elementor Image In Text Design

Awesome Looking Elementor Image In Text Design

No extra plug-ins required! Elementor Free Compatible.

Celebrate Life
in the Calm of Nature

Joy
Of
Life

To begin with, create a new section with these settings

Awesome Looking Elementor Image In Text Design

Then, add the background image to the section

After that, adjust these settings for the right column

Awesome Looking Elementor Image In Text Design

Now, add a white background to the right column

The background image will show up after you add the title element.

Awesome Looking Elementor Image In Text Design

Create the title element, and adjust carefully for each viewport

Important: set the color of the text to black. That is what will allow the Elementor image in text to show through.

Awesome Looking Elementor Image In Text Design

Give it the CSS Class 'backgroundtext'

Awesome Looking Elementor Image In Text Design

Finally, add this little bit of CSS

.backgroundtext > .elementor-element-populated {
mix-blend-mode: color-dodge;
}

If you also want the soft transition from the left column, simply add a gradient background to that column with a 270 degree rotation!

Below is how to achieve the same with a black background instead of white

Joy
Of
Life

Simply change the background of the right column to black, and the text to white

Then, instead of the above, use this code

.backgroundtext > .elementor-element-populated {
mix-blend-mode: darken;
}

Et voila! Thanks for reading!

3 Responses

Leave a Reply