Source Class of output
Through the Source Tab you can enable the ClassOutput functionality, this allows to apply the following effects:
- SVG ImageMask
- FE_filterEffects
- SVG Distortion
to any other widget on the page, you need to ascribe the class indicated in the options panel on Elementor.
NB: Source can be used with static trigger, not with animation, rollover or scroll
| |
|
|
NB: If you want to use the name of an existing class you can do it.
How to apply the Class
Write in the CSS Classes field of the Advanced Tab - the one with the gear icon - the name of the output class indicated by the SVG Source widget.
This feature guarantees nice results with the following Elementor basic widgets:
- Image
- Heading
- Icon
- Button
With all the other widgets it might work but it doesn't make sense. I mean, if you mask a form or a text with the distortion effect you cannot read it, of course. Therefore, apply it sparingly and do not forget usability.
.
This is a DEMO showing the aforementioned widgets.
Compatibility
Huston we have a problem... It isn't compatible with everything:
- Chrome: Partially
- Firefox: OK
- Safari: Partially
- Edge: Partially