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

SVG Imagemask


SVG Distortion

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:

  1. Image
  2. Heading
  3. Icon
  4. 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.


Huston we have a problem... It isn't compatible with everything:

  • 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