Back to contents

How to use JetStyleManager

useful information

From this tutorial you will discover all the main features of JetStyleManager plugin and learn how to use it according to your needs on Elementor-based websites.

Developers, web designers and webmasters often face the issue of slow loading of a website because of many enabled options and elements on it.

JetStyleManager plugin is an irreplaceable implement for making loading of the website’s pages faster and boosting your site. Moreover, you will reduce the time for customizing style settings of Jet widgets by using the saved skins. We’re going to present to you the opportunities, which you will be able to use with JetStyleManager plugin in Elementor editor.

Styles Manager depends on the settings of the Editor Load Level option. You need to set the Editor Load Level option for those Jet plugin, widgets of which you are going to use.

useful informationNOTE!
The Editor Load Level option is available for JetElements, JetBlocks, JetBlog, JetTabs and JetTricks plugins.

Creating and using skins for Jet widgets

1 Step — Downloading the plugin

Go to your personal account and download JetStyleManager plugin.

2 Step — Installing the plugin

Install and activate the plugin in the WP Dashboard > Plugins section.

install the plugin

3 Step — Setting Full Editor Load Level

We are going to show the example based on using JetElements Pricing Table widget. We open the Elementor > JetElements Settings > General settings section in the WP Dashboard and pick the Full Editor Load Level.

Full Editor Load Level

4 Step — Adding the widget to the page in Elementor

We open the page in Elementor editor and enrich it with the Pricing Table widget.

Pricing Table widget

5 Step — Styling the widget

Style up the widget in the Style tab of the widget’s settings panel.

style settings of Pricing Table widget

6 Step — Save as Skin option

Then, we hover over the widget and click the right mouse button. In the appeared window we select the Save as Skin option.

Save as Skin option

7 Step — Saving the skin

In the opened box we name the skin and click the Save button.

saving the skin

We saved the skin with certain style settings of the Pricing Table widget. Now we can use it with lower level of the Editor Load Level option.

8 Step — Setting None Editor Load Level

Now we can pick the None Editor Load Level in the WP Dashboard for quicker loading of the pages.

None Editor Load Level

9 Step — Apply Skin option

We come back in Elementor editor and insert a new Pricing Table widget into a certain place or duplicate the used one. Then, click the right mouse button on the Pricing Table widget and choose the Apply Skin option.

apply skin

10 Step — Applying the skin

In the window we click the Apply button next to the certain saved skin.

applying the skin

11 Step — Viewing the result

We get the same design of the widget as we set before, in spite of the Style settings aren’t available. Now you just should change the content.

apply the saved skin
NOTE!
If the editor load level is the same as it was when we styled the widget or higher, the skin will not be applied. For example, we set the Medium editor load level and saved the skin. If we select Low or None editor load levels the skin will be applied, but not by Medium and higher levels.

12 Step — Reset Skin option

If you want to adjust the widget to its default appearance, click the right mouse button on the widget and pick the Reset Skin option.

resetting the skin

Save different skins of Jet widgets and apply it on pages of your website. Make the page loading 20-30% faster by disabling Style settings of the widgets using JetStyleManager plugin.