Icon Nav For WPBakery Page Builder

Introduction to Icon Nav For WPBakery Page Builder

Icon Nav is a powerful plugin designed specifically for WPBakery Page Builder, a popular page builder for WordPress. With Icon Nav, you can create stunning navigation menus with icons, enabling you to enhance the visual appeal and usability of your website. In this tutorial, we will guide you through the process of setting up and customizing Icon Nav for WPBakery Page Builder, allowing you to create professional-looking navigation menus with ease.

Step 1: Installing and Activating Icon Nav

To get started with Icon Nav, you need to install and activate the plugin. Follow these steps:

1. Log in to your WordPress dashboard and navigate to the Plugins section.
2. Click on the "Add New" button at the top of the page.
3. Search for "Icon Nav" in the search bar.
4. Click on the "Install Now" button to install the plugin.
5. Once the plugin is installed, click on the "Activate" button to activate it.

Step 2: Creating a New Icon Nav Menu

Now that you have installed and activated Icon Nav, let's create a new icon nav menu. Follow these steps:

1. Log in to your WordPress dashboard and navigate to the WPBakery Page Builder section.
2. Click on the "Icon Nav" tab in the WPBakery Page Builder toolbar.
3. Click on the "Add Icon Nav" button to create a new icon nav menu.
4. Enter a name for your icon nav menu in the "Menu Name" field.
5. Choose a layout from the "Layout" dropdown menu. Icon Nav offers several pre-designed layouts, including horizontal, vertical, and toggle layouts.
6. Click on the "Save" button to save your icon nav menu.

Step 3: Adding Icons and Menu Items

Now that you have created a new icon nav menu, let's add icons and menu items. Follow these steps:

1. Click on the "Add Item" button to add a new menu item.
2. Enter the text for your menu item in the "Text" field.
3. Choose an icon from the "Icon" dropdown menu. Icon Nav offers a wide range of icons from popular icon sets, including Font Awesome, Material Design Icons, and more.
4. You can also customize the icon size, color, and font size using the "Icon Settings" dropdown menu.
5. Repeat steps 1-4 to add more menu items.
6. Click on the "Save" button to save your icon nav menu.

Step 4: Customizing Icon Nav Settings

Icon Nav offers a range of settings that you can customize to enhance the appearance and functionality of your icon nav menu. Follow these steps:

1. Click on the "Settings" tab in the Icon Nav settings panel.
2. Choose a layout from the "Layout" dropdown menu to customize the layout of your icon nav menu.
3. Set the "Icon Nav Position" to determine where you want to display your icon nav menu (e.g., top, bottom, or right).
4. Set the "Icon Nav Width" to determine the width of your icon nav menu.
5. You can also customize the "Icon Nav Margin" and "Icon Nav Padding" to adjust the spacing around your icon nav menu.
6. Click on the "Save" button to save your icon nav menu settings.

Step 5: Using Icon Nav in Your Page

Now that you have created and customized your icon nav menu, let's use it in your page. Follow these steps:

1. Create a new page or edit an existing page in WPBakery Page Builder.
2. Click on the "Icon Nav" tab in the WPBakery Page Builder toolbar.
3. Click on the "Insert Icon Nav" button to insert your icon nav menu into your page.
4. You can also customize the alignment and spacing of your icon nav menu using the "Icon Nav Alignment" and "Icon Nav Spacing" settings.
5. Click on the "Save" button to save your page.

Conclusion

In this tutorial, we have covered the basics of using Icon Nav for WPBakery Page Builder, including installing and activating the plugin, creating a new icon nav menu, adding icons and menu items, customizing icon nav settings, and using icon nav in your page. With Icon Nav, you can create professional-looking navigation menus with ease, enhancing the visual appeal and usability of your website.