Back to contents

JetStyleManager: Skins Functionality Usage

useful information

From this tutorial you will discover how to create and use skins of the element’s design with the help of JetStyleManager plugin.

Several JetPlugins have the Elementor editorial load functionality that allows you to sufficiently fasten the page load speed of your website by reducing the styling options. JetStyleManager plugin gives you an opportunity to save the astounding look and reduce the loading speed at the same time by using the saved skins.

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

1 Step— Set Full editor load level

For this example, let’s use the JetElements plugin’s Pricing Table widget. Open the Crocoblock > JetPlugins Settings > JetElements > General Settings section in the WP Dashboard and pick the “Full” option in the Editor Load Level drop-down menu.

picking the editorial level

2 Step— Create the design

Open the page in Elementor editor and drop the Pricing Table widget to the necessary section.

pricing table widget

Style the widget up in the Style menu tab.

styling the pricing table

3 Step— Create a skin

Click the right mouse button on the widget’s surface and in the appeared window select the Save as Skin option.

save as skin option

In the opened box name the skin and click the “Save” button.

savinfg the skin

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

4 Step— Apply the skin at the lower loading level

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

Go back to the 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 widget and choose the Apply Skin option.

applying the skin

In the window, click the “Apply” button next to the skin you’ve created.

applying the skin

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.

skin applied
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 Full levels.

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 JetPlugin widgets and apply them on pages of your website. Make the page loading 20-30% faster by disabling the Style settings of the widgets using the JetStyleManager plugin.