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
Then, add the background image to the section
After that, adjust these settings for the right column
Now, add a white background to the right column
The background image will show up after you add the title element.
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.
Give it the CSS Class 'backgroundtext'
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!
Elementor See Background Image Through Text Templates
This download gets you the following template :
Elementor Image In Text Design White Background Template
Elementor Image In Text Design Black Background Template
Related tutorial : Elementor See Background Image Through Text
This feature looks awesome! I am obviously doing something wrong though, as it's not working for me. Any ideas what I've missed? https://staging.rapidwebsites.com.au/qode/image/
Regards
Melanie
Hey Melanie!
The "backgroundtext" class name goes to the column, not the heading element!
Cheers
Maxime
Looks very nice!
However, it does not seem to work with the new Containers in Elementor... Any advice, please?
Cheers
Steffen