Help Center
How to Apply Skins' Style with Different Editor Load Levels

How to Apply Skins' Style with Different Editor Load Levels

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

Before you start, check the tutorial requirements:

Several JetPlugins have the Elementor editorial load functionality that allows you to sufficiently fasten the page load speed of your website by reducing styling options. The 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.

Warning

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

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

Create a Design

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

pricing table widget

Style the widget up in the Style menu tab.

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.

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
Warning

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.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.