This article shares one Elementor extension for Elementskit PRO.

When building an independent website earlier, we learned that the elementor plug-in is a page builder that we often use. It has two versions: a free version and a PRO version.

About the Eelementor PRO version, we at Xuejianzhan.com have provided you with the latest version of a plugin; you can use it directly. Then, through these two versions of elementor, when we create independent pages, there will be a lot more structured modules, and we can design our independent station pages according to our needs.

Introducing the Elementskit PRO plugin:

Often, in making independent website pages, in addition to the free version of elementor and some modules of the PRO version that we have seen, we may have some other needs, so at this time, we can use the extension of elementor. Plug-in, a plug-in called Elementskit PRO.

1 ElementsKit PRO Feature Module e1713879524734

This plug-in is a very powerful elementor extension plug-in. It provides more modules based on the elementor plug-in. There are more than 90 modules, but they are not original. Some of them are based on Some functions that are added based on the original modules of elementor, which means that some modules are repeated, but their editing and interface have been redesigned.

Elementskit PRO header and footer area:

In addition to adding some modules, it also separately designed page builders for the header and footer, as well as super menus and even our customized tab labels. There are also some parallax effects and social sharing, so The plug-in is very simple. As long as you know how to use elementor, it expands your elementor module.

We have prepared this plug-in below. On our computer desktop, we can see that a Chinese version is also available for everyone. If you want to build a Chinese site, you can also use this Chinese version. Since we are building an independent site here, we will use the original version to explain it to you. Its latest version is 3.4, so we return to our backend, find the plug-in, click add new, and then upload the Elementskit we prepared. Then select this file and click Install.

Elementskit PRO plugin installation:

After the plug-in is installed successfully, we click to activate the plug-in. After the installation is successful, it prompts us to install a lite version, and then we click to install.

2 ElementsKit lite version installation e1713879637947

Now, there is an Elementskit in the function button on our left. Then we click to open it, and it will enter a wizard interface. There will be 4 steps in front of it. Because I have installed this site before, you follow the 4-step points, the next step, and then save changes.

Elementskit PRO plugin activation:

In this case, we enter an elementor dashboard page. We see that it has some functions on the left. We have just told you about this plug-in. It can help us customize a header and bottom area. Here, you can add some areas and then take over your previous independent station’s header and footer areas.

3 ElementsKit PRO Settings Interface e1713879728209

Then, let’s take a look at its activation. The current PRO version provides you with an activated version so we can use it directly. There are also some official documents. You can click to enter and see its official documents. Some clarification.

Next, this plug-in also comes with a form system, so you can create a form and then replace the one we installed before. WPForms Pro, or contact form 7, Such a plug-in. Then the last one is also its documentation center. You can take a look at its official documentation. Here, we will directly enter its dashboard. The first dashboard, of course, contains some of its instructions, including some tutorials. Here, we stopped watching.

Elementskit PRO module settings:

The second one is the module, which is actually its core function. You can open the modules here according to your own needs.

4 ElementsKit PRO Design Module Activation

Elementskit PRO module use:

For example, if we see an accordion effect in the previous picture, we all know about the accordion before. We can also find the accordion effect in elementor. For example, here we can see an accordion effect. Then you can drag this module onto your page, and then you can add some FAQs or official instructions. We call this an accordion.

5 Elementor Accordion Effect

You can also turn on the image-type accordion in this plug-in. Before, we used elementor to add text type. You can add text here. Of course, you can add images to the content in the text, such as the content in the accordion. However, the title above can only be in text, and this plug-in can make some improvements. That is, it can directly use your picture as the effect of your accordion, and some other effects, such as our Buttons, as well as some header labels, have some special settings.

In addition, some plug-ins are not available in elementor, which can be found in it, which is very rich.

The next one is the elementor we are using now. What kind of pages can it be used in? It is the same as when we set up the elementor plug-in. You can also set it to display in different content, including the header. Modules, the modules at the bottom, and some form modules, such as social sharing modules, including the woocommerce module of our store, can all be set according to your own needs. Of course, you can also turn them all on, but here we do not. It is recommended that you do this because if you capture more modules and some modules you cannot use, it will slow down your site, so under normal circumstances, we only load what we need; for example, now, Let’s save these by default.

After saving, we go back to the page we just had. We refresh the builder page and then reload it. Then we go back to the bottom and find the elementor. There is an extra image and then an accordion effect. We Drag this module in again, and we can see that its style differs from the effect we used elementor before.
6 ElementsKit PRO Picture Accordion Effect

Elementskit PRO module settings:


Here, you can add a background to this title, and first, after activating it, you can add a picture. Let’s find a picture at random. We see that it has now become a picture. For the effect of the background image tab, you can add a title again and a button to read more. Then, its effect will differ from the one we created using text. For example, if we see that this is the first and then click on the second one, it will have a switching effect, which will be more gorgeous than what we added directly using text and content.

Of course, in addition to such modules, there are other modules. For example, if we click to enter, for example, if we see a title here, we put this title in.

7 ElementsKit PRO Title Module Styles

This title is also different from the title we created using elementor before. For example, in addition to adding text, this title adds two curly brackets. There are also instructions below. If you add curly brackets, It focuses on the text and highlights it, just like we added an h tag. Then, we can also add some links. In addition, we can add a border, including the position of the border. This effect will be richer than the heading tag we added separately using elementor.

In addition, you can float it to the left or float it to the right. Of course, the subtitle and its description information are below. You can also add a shadow to it. Of course, elementor can also do it, but it will To make it more rich, below is one of its separators. We see that it has a separator effect. You can also modify this separator with a star or other styles. It’s very rich.

It is used in the same way as the elementor module. It is also divided into three modules. The first is to fill in its content, the second is to edit its style, and the third is to customize its settings.

8 ElementsKit PRO Function Module Settings

The following content is the same as the elementor module, so its use is simple.

Then, later on, you can target the modules in it. Whichever one you want to use, just turn it on. If you don’t use it, just turn it off. In this way, it can complete everything we need to do to build an independent station. The module requested it.

In addition to this widget and adding some small modules to our elementor, we see that this plug-in also provides some other module areas. Normally, this should be called a module, but this is called a widget. So this enables some more advanced functions. For example, the first one customized a set of icons and font icons. You can add some font icon libraries provided by this plug-in.

9 ElementsKit PRO Module Layout e1713880161122

The second is to open a header page builder. Here, we can see that you can create exclusive headers and footers and then apply them to different pages. Of course, you can also open the super menu elementor. Although it is possible to create a super menu, this plug-in provides a very rich set of super menus. You can also try it, including the design of other gadgets, some page scrolling effects, and content. Floating, we can even add a Facebook online chat tool directly. For example, we can turn it on, then save it after turning it on, and then the last one is its user settings.

This setting is very simple. It is an integrated effect. For example, it can add a Google map. In our module, if we need to use Google Maps or other modules, you can find the key to fill it in at this location.

The same goes for other things. For example, if we just turn on Facebook’s message, we need to fill in the Facebook ID and the content of its key. In this way, you can enable this module in the foreground. If you don’t fill it out, you just enable this module, which will not be displayed. Well, this is about the function of the Elementskit plug-in. Its main function is to extend the module of our Elements plugin and then provide richer functions and some effects for our independent page design.