Menu Builder
Last updated
Last updated
Menu Builder allows you to create multiple custom menus through a drag and drop operation. The Menu Builder provides an easier and faster way to manage menus, and the menus can be displayed anywhere in the storefront, such as in the header or inside a page.
Introduction to Theme Design
Learning How to Use Theme Design.
Adminstrators can easily manage menus in Admin panel.
Customers can interact with 2 types of menus in the frontstore.
Horizontal Menu
Vertical Menu
Login to your backend page, then go to BLUESKYTECHCO > MenuBuilder
In this option, you can show, create, edit, delete menus.
1.1 Create a Menu
Click to the Add New Menu button to direct to create page.
Menu Name: Setting name of the menu. *
Menu Type: Setting type of the menu. There are two types of menu: Veritcal and Horizontal.*
After menu created. We need to add Cms Page, Categories or Custom Links to Menu structure.
Add menu items
There are three types of menu items you can add: Cms Page, Categories or Custom Links
Select items you want to add then click to Add to Menu button. All the items you have just selected will be called to layout Menu Structure in the right.
Menu structure
All the items you just selected will appear here as tags. You can drag and drop those item tags to move the position, determine parent menus, submenus and setting more options for each menus.
Setting menu item
In the Title field: You can rename the title of the menu.
In the Add Class field: You can add your custom class to each menu.
In the Add Label field: There are three types of label: New, Sale and Hot
In the Icon Image field: You can upload Icon Image to each menu.
In the Icon Font Class field: you can add the font class of the third-party icon provider
In the Submenu Type field: you can select type of submenu dropdown animation when hover.
In the seciton Add Block Content Html: You can add your custom block content html to each menu
1.2 Customize Menu in Page
If you want to add a vertical menu in your content of page as the following picture, MenuBuilder module provides you an easy way to do that.
Login to your backend page, then go to CONTENT > Pages
Select the page you want to add menu, then click Edit, or click Add New Page if you want to create a new page.
Select Content > Edit with Page Builder, the Page Builder section will appear.
Drag Row then drag a Text inside it. Click to the Text then choose Insert Widget.
In the Insert Widget section, choose Menus Page Builder widget then fill all the field as you need.
After completing these steps, click Save to save your configuration. Then go to ROKANTHEMES > MenuBuilder > Menus Setting > Config Vertical Menu to make sure that you disable the Vertical menu.
Go to your frontstore and you can see the result.
In this option, you can configure more about the menu.
2.1 Config Horizontal Menu
In the Enabled field: Select Yes if you want to enable Horizontal Menu
In the Horizontal Menu field: Select the menus which created in Menu Builder
In the Dropdowms Animation field: Select animation for Dropdown submenu.
2.2 Config Vertical Menu
In the Enabled field: Select Yes if you want to enable Vertical Menu
In the Title field: Set the title for your Vertical Menu
In the Veritcal Menu field: Select the menus which created in Menu Builder
In the Limit show items field: Set number of submenu items will be shown in Veritcal Menu. Excess items will be included in Hide Menus
In the Limit show items by screen field: Select Yes and set number of submenu items in small desktop if you want customize limit show items by screen
In the Dropdowms Animation field: Select animation for Dropdown submenu.
2.3 Config Label Menu
You can customize color of menu, submenu items and label as you need.
3.1 Select the menu you want to Translates -> Export content menu
3.2 Import the menu content just exported in 3.1 to create a new menu content
3.3 When you have a new menu, go to edit the menu content according to the language and then save it
3.4 When you have completed changing the content menu, go to the Menu Setting -> select the store view which you want to display for the menu => Select the menu just translated.
Go to the frontend to check.
One or more of the Cache Types are invalidated: Configuration. Please go to Cache Management and refresh cache types.
