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. In order to do this, 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.

SVG Imagemask


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.


  • Chrome: Partially
  • Firefox: OK
  • Safari: Partially
  • Edge: Partially
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us