The fundamentals of using Slider Revolution.

How To Use Custom SVGs in the Particle Effects Addon

Learn how to make particle effects unique with your own custom particle graphics.

Introducing Custom SVG

The Particle Effects addon [?] Addons extend the functionality of Slider Revolution, adding new controls to the module editor and allowing you to do extra things with your design.

For example, using the particle addon you can create effects such as falling snow, and using the distortion addon you can create shimmering effects such as simulating being underwater.

There are dozens of addons available, all included with the full version of Slider Revolution.
for Slider Revolution uses the SVG format for all its particle graphics. SVG stands for “scalable vector graphic”, and this format is particularly suitable for particles because it can scale to any size without quality loss.

The Particle Effects addon already has several built-in icons in the SVG library. Now, the Particle Effects addon will also work with custom SVGs, so you can create particle effects out of any images you like.

Please read more to learn how to upload your SVG.

How to Create a Custom SVG?

You can create an SVG file using the popular applications Adobe Illustrator or Inkscape

Alternatively, if you are familiar with HTML and XML markup languages, you can develop SVGs with primary HTML/XML languages. A tutorial to create an SVG using HTML/XML is available on w3shools

If you want to use pre-made SVGs, there are plenty of free or premium graphics to be found through Google searches.

For the sake of this guide, we are going to download an SVG file from the website Free SVG Designs.

Note: SVG files from the website are free for PERSONAL USE ONLY. But you can purchase a commercial license from here.

Download SVG From

Go to the website:

Browse from the available SVGs:

Select an SVG of your choice:

Scroll down to the Download button:

Click on the Download button:

Upload the SVG File

Go to your WordPress website dashboard:

Go to the Slider Revolution plugin dashboard:

Select a module [?] A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.

A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.

A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.

Multiple modules can be combined to form rich content such as complete sites and landing pages.
you’re working on and open it for editing:

Go to the Slide Options tab from the Sidebar on the right:

Click on the Particle Eff. sub-section:

Scroll down to the Particle Settings panel:

Click on the SVG Library button:

Select the My SVG Library category on the left:

Click on the Import SVG Files button:

Select the SVG file you downloaded earlier:

Either click on the Create New Category button or + Add To all button for the uploaded SVG:

Click on the (+) icon appearing on the uploaded SVG:

Please ensure you select the newly added custom SVG from the Particle Settings panel:

Click the SAVE button:

To see your new SVG in action in the particle effect, preview your module:

Custom SVG Original Color

SVGs come with their own colors baked in, however it’s up to you whether you want to use the original colors or your own custom colors instead.

Go to the Style tab under Particle Settings panel:

If you toggle the Custom SVG Original Color option to ON, this will show the SVG in its original color:

If you wish to change the color of the SVG, toggle the Custom SVG Original Color option to OFF:

Click on the Particle Colors option:

Select a color:

Click on the check icon:

Click on the Save button:

How To Use Custom SVGs in the Particle Effects Addon


Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.