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.
NOTE!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.
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.
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.
5 Step — Styling the widget
Style up the widget in the Style tab of the widget’s settings panel.
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.
7 Step — Saving the skin
In the opened box we name the skin and click the Save button.
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.
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.
10 Step — Applying the skin
In the window we click the Apply button next to the certain saved 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.
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.
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.