How to use Navigation block by Zoloblocks

This documentation provides comprehensive insights into the Navigation Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Flipbox block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Flipbox block.
3. After on the right side, Click on the Block. Then the Flipbox block details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Set Navigation

Only Items

Start with any menu items, please select the with it.

1. Click on the ” Start Blank ” button to select the menu and it will appear new items.

2. Select the ” + Only Items ” to set the single navigation.

Edit the Navigation Items

After selecting the only items,

1. All the single navigation item will appear.

2. Select the items what to edit ( e.g.: Home ).

3. After edit the navigation items ( e.g.: Home New ).

Add New Navigation Item

1. Select the ” Navigation ” parent item.
2. Now click on the ” + ” icon to get new navigation the list.

3. New item will appear on the navigation item ( Child Item ).
4. Search for the page link.
5. Select the page item for navigation.

6. Newly added item will appear on the navigation item.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

1. Alignment: Set the alignment for the navigation.

Mobile Menu Settings

Go to Basic > Mobile Menu Settings

1. Breakpoint: Set the break point for the Desktop.
2. Logo: Select the logo form library.
3. Resolution: Set the resolution for the image.
4. HUMBERGER ICON: Select the humberger icon for the.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Wrapper Section

Go to Style > Wrapper

1. Background: Set the background for the wrapper.
2. Border: Set the border for the wrapper item.
3. Box Shadow: Set the box shadow.
4. Border Radius: Set the border radius for the wrapper.

Menu Items Section

Go to Style > Menu Items

Normal state for Menu Items

1. Color: Set the color for the menu items.
2. Typography: Set the typography for item.
3. Background: Set the background for the items.
4. Padding: Set the padding.

5. Border: Set the border for the gap.
6. Box Shadow: Set the box shadow.
7. Border Radius: Make the border radius for the menu items.
8. Gap: Set the Gap for the items.

Hover State for Menu Items

1. Color: Set the color for the items.
2. Background : Set the background for the itmes.
3. Border Color: Set the border color.

Active State for Menu Items

1. Color: Set the color for the items.
2. Background : Set the background for the itmes.
3. Border Color: Set the border color.

Mobile Menu Section

WRAPPER

Set customization for the wrapper section,

1. Width: Set the width for mobile menu wrapper.
2. Background: Set the background for it.
3. Padding: Make inner space for padding.

4. Border: Set the border for the wrapper menu.
5. Box Shadow: Make a shadow for the wrapper item.
6. Border Radius: Make the border radius.

Logo

Set stylish for the logo,

1. Width: Set the width for the logo.
2. Padding: Set the padding for the logo area.
3. Margin: Set the margin for logo item.

Humburger

Make stylish for the Humburger menu,

1. Color: Set the color for the humburger menu.
2. Size: Set the size for it.
3. Background: Set the background for it.
4. Padding: Make inner space by adding the padding.
5. Margin: Set the outer space for the margin.

6. Border: Set the border for the humburger menu.
7. Box Shadow: Make the shadow for the box.
8. Border Radius: Make the border radius.

Hover State

The changes will appear on mouse hover,

9. Color: Set the color for the humburger.
10. Background: Set the background for it.
11. Border Color: Set the border color.

Close

1. Color: Set the color for the close icon.
2. Size: Set the size for it.
3. Background: Set the background for the close icon.
4. Padding: Make inner space by setting the padding.
5. Margin: Set the margin for the close icon.

6. Border: Set the border for the close icon.
7. Box Shadow: Make the box shadow for this.
8. Border Radius: Make the border radius.

Hover State

The changes will appear on mouse hover,

9. Color: Set the color for the close icon.
10. Background: Set the background for it.
11. Border Color: Set the border color of it.

Add Sub Menu of Single Item

Sub Menu can be added on any single menu items by following the instrcution.

Add Sub Menu

1. Select the Menu for the single menu item navigation.
2. The Navigation Item appear from the List View section.

After Selecting the Menu Item, Enable the switcher to add as Sub menu item.

1. Add Submenu: Enable the switcher for the sub menu.
2. Submenu Type: Set the submenu type Dropdown the single item ( Dropdown and Mega menu ).
3. Click on the ” + ” icon to add new items under the menu item.

Adding new sub menu item

1. Select the Navigation item to for adding sub menu item.
2. Click on the ” + ” icon to add new items.

3. Now click on the ” Add Menu Item ” for selecting the sub item.
4. It will appear ” Submenu ” under the navigation item.

5. After adding new item it will appear on there.
6. The navigation item appear on there.

7. After selecting the adding new items.
8. The Sub menu appear on there.

Customize the Sub Menu Item

1. Select the ” Submenu ” item from the list view section,
2. Select the control tabs to customize it ( Basic, Style, Extra ).

General Section

Go to Basic > General

1. Width: Select the width for the container item.

Wrapper Section

Go to Style > Wrapper

1. Background: Set the background for the submenu item.
2. Padding: Set the background for it.
3. Margin: Set the margin for the wrapper.

4. Border: Set the border for the wrapper item.
5. Box Shadow: Set the box shadow for the it.
6. Border Radius: Make the border corner edges radius by following the border radius.

Menu Section

Go to Style > Menu

Normal State

1. Color: Set the color for the menu item.
2. Typography: Set the typography for the menu.
3. Background: Set the background for the menu items.
4. Padding: Set the padding for the inner space.
5. Margin: Set the margin for the menu.

6. Border: Set the border for the menu items.
7. Box Shadow: Make shadow for box items.
8. Border Radius: Make the border radius.

Hover State

Changes will appear on mouse hover,

1. Color: Set the color for the hover item.
2. Background: Set the background color for it.
3. Border Color: Set the border color.

Active State

1. Color: Set the text color nav items.
2. Background: Set the background for the background.
3. Border Color: Set the border color.

Items with a Dropdown

Select the items that will appear for the dropdown,

1. Select the ” Start Blank ” button to select the desire items.

2. Select the ” Items with a Dropdown ” for selecting dropdown menu items.

3. The Navigation item will appear on the submenu section.
4. Then navigation item and submenu item will appear here.

Items with a Mega Menu

Start with any menu items, please select the with it.

1. Click on the ” Start Blank ” button to select the menu and it will appear new items.

2. Select the ” Items with a Mega menu ” for the mega menu items.

3. After adding the Mega Menu item, it will appear on there.
4. On the list view the mega menu will appear.

5. Hover over the Mega menu item, adding new items will appear.
6. Click on the ” + ” icon to add new items for the mega menu.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Check the Demo. The Video Tutorial Will be coming Soon!

Thanks for being with us!