Elementor Extended Canvas Effects Documentation

Contents

– Particle Effects

– Wavify Effects

Particle Effects

Particle Settings

Append to [Section|Column]

Select to apply this effect to an entire section or an individual column.

If you are using more than 1 column structure, use the column.

If you are having this on a single column full-width, you will need to choose Section instead.

No. of Particles

Enter the number of particles.

Show Line Linked [Yes|No]    

Select Yes if you want to particles to be linked.

Line Linked Style Option will be available in Style tab.

Shape Type [Circle|Edge|Triangle|Polygon|Star|Image]

Select the shape of the particle.

Select Image and browse for your custom particle image.

Additional Style option is available for Polygon to select the number of sides for Polygon shape. 

Direction [None|Top|Top Right|Bottom Right|Bottom|Bottom Right|Left|Top Left]

Select the direction which you want the particles to move.

Select none for the particles to move in random directions. 

Interactive Mode [Canvas|Window]

Canvas mode will react to your mouse move action within the division or a section itself whereas Window mode will react on your browser’s window. Window is suitable when only one particle effects is being used in a page.

ON HOVER Particle Reaction

Enable on Hover [Yes|No]      

Select Yes for on-hover particle reaction. 

Mode [Grab|Bubble|Repulse]

Try out the different particle reactions when you do a mouse hover. 

ON CLICK Particle Reaction 

Enable on Click [Yes|No]        

Select Yes for on-click particle reaction. 

Mode [Grab|Bubble|Repulse]

Try out the different particle reactions when you do a click.

Shape Style

Size

Set the largest size of particle

Color Mode [Random Color|Set Custom Color]

Select set custom color if you want all particles to be the same color.

Color

This option is available if Color Mode is Set Custom Color.

Select the color of the particles using the color picker.

Stroke Color

Select the color of the outer boundary of the particles using the color picker.

Stroke Width

Set the thickness of the particle outer boundary. 

Opacity

Define the opacity value of the shape. Min is 0.1 and Max opacity is 1        

Line Linked Style

Line Linked Style settings are available if Show Line Linked is Yes 

Line Color         

Select the color of the linked line using the color picker.      

Line Width

Set the thickness of the linked line.

Opacity

Define the opacity value of the linked line. Min is 0.1 and Max opacity is 1.

---

Wavify Effects

When stacking more than 1 wave, the top widget shown in Editor is the lowest wave layer. Set a min-height to section or column if wave cannot be seen.

Wave effect takes z-index 1 and 2. All other widgets within the same section automatically be increased to z-index 4. Where required, use a custom CSS script to z-index !important.

Wavify Settings

Append to [Section|Column]

Select to apply this effect to an entire section or an individual column.

If you are using more than 1 column structure, use the column.

If you are having this on a single column full-width, you will need to choose Section instead.

Wave Height

If your Section height is using min-height, you will have to divide by 2 to match the height. For instance, your section height is 400, your Wave Height should be 200. However you can adjust it to your liking. 

Bones       

Enter the number of wave bones. 

Amplitude

Enter the number for wave amplitude. Min is 1 and Max is 100.

Color                  

Select the color of the wave using the color picker.

Speed       

Enter the speed of the wave. Min is 0.1 and Max is 1.