If you're looking for a more flexible and advanced way of presenting your menu.Blocksy Pro offered Advanced Menus extensionJust the thing to fulfill this need. This article will describe how to combine Gutenberg The editor and Content Blocks, customize to build a dynamic, interactive menu system that enhances the desktop browsing experience.

Enable advanced menu extensions

First, enter the WordPress Blocksy Dashboard in the backend, turn on Advanced Menus Extension Module. When you are done, you can start building what you want to display in the menu.

Creating Content Blocks

The content of the Advanced menu comes from Content Blocks. the following is the basic procedure:

• Go to the Blocksy > Content Blocks page
• Click on the upper right corner Add New

• Select the standard Content Block type
• Name the content block (it is recommended that the name be identifying and easily distinguishable)

Each menu display item can be associated with a Content Block. although the text provides a demo of the preset content, you will need to design your own block content in your site.

Recommended Use Gutenberg Reusable Blocks to build these content blocks, or you can mix static modules to achieve a richer layout.

Once done, go to "Display Conditions" and set the content block to Entire Website(full site display). No other settings need to be adjusted, as the menu extension calls these automatically.

We are going to create content blocks for menu items like "Blog" and "About Us" as we did above.

Configuring the menu structure

go into WordPress Appearance > Menu" in the backend to start setting menu items:

1. Enabling advanced menu options

Click on the first-level menu item you want to customize, and the system will display the "Menu Item Settings" Button. Click it to set it:

• Drop-down menu layout (e.g., single column, two columns, etc.)
• Whether to remove menu labels or links
• Whether to add an icon or mark (badge)
• Customized style settings (Design)

2. Adding Custom Links

In order to display content blocks as menu content, it is recommended to use custom links as sub items:

• URL fill in #(represents no link)
• Name can be customized for easy identification

• Drag the item below the corresponding parent menu to create the hierarchy

Expand the menu item and select "Content Type". Content Block, and select the content block you just created from the list.

It is recommended to turn off both the label and link display for this item in order to show the full content block style.

Complete the insertion of the other content blocks in the same manner.

View the final result

After saving the menu, switch to the front-end to see the new advanced dynamic menu effect. These menus can display rich information, such as category overview, product recommendation, graphic display, etc., completely breaking through the limitations of traditional drop-down menus.

Review the build process

• Use Content Blocks to build all kinds ofmenuelement
• Enable advanced menu features for top level items in the menu
• Adding subitems and associating content blocks
• Save the settings and go to the front end to see the display

summarize

leverage Blocksy Pro The advanced menu functions of the Content Blocks together with Gutenberg Editor , you can build a highly interactive and beautiful menu system . The whole process without coding, operation is intuitive, suitable for sites with higher requirements for menu design.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off