Through the Source Tab, you can enable the ClassOutput functionality, this allows you to apply the following effects:

  • SVG ImageMask;

  • SVG Filter Effects;

  • SVG Distortion;

to any other widget on the page. In order to do this, you need to ascribe the class indicated in the options panel on Elementor.

Note: source can be used with static trigger, not with animation, rollover, or scroll.

SVG Imagemask

SVG Filter Effects

SVG Distortion

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:

  1. Image;

  2. Heading;

  3. Icon;

  4. Button.

This is a DEMO showing the widgets.


Compatibility

  • Chrome: Partially

  • Firefox: OK

  • Safari: Partially

  • Edge: Partially

Did this answer your question?