Stand with Ukraine. Fight for freedom and democracy

Back to contents

How to create a menu similar to the one shown on JetMenu live demo with JetMenu plugin for Elementor

From this tutorial, you’ll find out how to recreate a menu similar to the one represented on live demo with JetMenu plugin, one of the Jet Plugins for Elementor.

JetMenu plugin comes with the templates that allow applying the same style settings and templates as used on JetMenu live demo website.

The templates are stored in .json format in the dummy-data folder that’s located in JetMenu plugin’s directory.

Preparing a menu

Step 1 — First, let’s create a custom menu with the same items that a menu on live demo has. For this purpose, open the WordPress Dashboard and browse the Appearance > Menus tab. Here, click the Create a new menu option, provide your new menu with a title, click the Create Menu button and apply it to the needed location (e.g., Main).

Menus block

Step 2 — Proceed to the Customs Links block and add customs links or pages to a menu. Here fill in the needed URL and Link text for each of the items to add labels and links. Then click Add to Menu button to add a new item to your menu. You can add as many items as you need.

Step 3 — Afterward, click the Save Menu button to save changes.

Importing the JetMenu Styles

Step 1 — Then, navigate to the JetMenu block in WordPress Dashboard.

Step 2 — Click the Import button at the bottom of the page and browse the options.json file in your jetmenu/dummy-data directory.

General JetMenu Settings

Step 3 — Click Go button to proceed. Then, after the page is refreshed, hit Save button to save the changes.

Importing the MegaMenu Items

Step 1 — Go back to the Appearance > Menus tab. Here select the custom menu you’ve recently created and make sure you’ve enabled Enable JetMenu for current location option. After that, click the Save button to allow JetMenu to be applied to this menu you’ve created.

Enable JetMenu for current location option

Step 2 — Hover over one of the items and click JetMenu label to access JetMenu settings for this item.

Step 3 — Turn on Mega Submenu Enabled option and click Edit Mega Menu Item Content button to open Elementor editor.

Content settings

Step 4 — Click the Add Template option (it’s located on the right from all the other options), and find Import Template option. Click it and browse the needed .json file you want to use as a mega menu (e.g., content-portfolio.json file stands for the mega menu item that contains the portfolio on live demo).

Select file option

Step 5 — After the file is imported find it at the very bottom of files list and click Insert option to insert it to the page.

My templates block

Step 6 — Now you can see how the imported template of the mega menu item looks. Click the Update button to save the changes. Then hit Back arrow to return to editing the menu. Don’t forget to click the Save button to save the changes you’ve made.

Step 7 — Open your website and view the results. The menu you’ve created should have the style settings similar to the ones used on live demo.

JetMenu plugin

The process of importing dummy-data is fast and efficient and allows to head-start when you only learn the basic things about JetMenu plugin. Hoping you’ll find it useful!