Want a headline that changes color with the image behind it?
The Background Based Blend Mode of the Advanced Typography widget from The Plus Addons for Elementor blends the text with whatever sits behind it, using CSS blend modes.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — The Advanced Typography widget needs The Plus Addons for Elementor Pro. In the free plugin it shows in the Elementor panel with a lock icon.
- Widget to enable: Advanced Typography, switched on under The Plus Addons > Widgets.
- A background image or color behind the text, for example on the container.
Steps
- Give the container that holds the widget a background image or color.
- Add the Advanced Typography widget, keep Select Option on Normal and type your text.
- Open Content > Background Based Blend Mode and turn on Enable/Disable.
- Pick a blend mode in Variations, for example Difference.
The text now blends with the background:
How It Behaves
- Variations sets the CSS blend mode of the text. The default, Normal, does not blend.
- With the blend mode on, the widget makes the text white by default.
- In Multiple mode, each item in the Text Listing has its own Background Based Blend Mode switch and Variations.
Troubleshooting
I don’t see any blend
Check that Variations is not left on Normal, and that there is a background image or color behind the text. On a plain white page there is nothing to blend with.
