Categories
How To Themes

Avada theme: How to use icons and a call to action button on the main menu

I recently bought Avada theme for WordPress. No doubt it is one of the hottest WordPress themes on the planet at the moment. According to their website, it boasts a total of 575,000+ premium customers as per the writing of this post.

Anyway, let’s forget about Avada’s accolades and their impressive success for now. Let’s look at why I chose Avada, and how you can use it to create stunning header and menu design.

I chose Avada because of its unrivalled flexibility, extensive feature elements, multilingual language support, bbpress forums and its large collection of demo inspirations. The price is also friendly at $60. Though I felt limited by their policy of one domain installation per license.

Lets now dive in and see how we can build a beautiful icon menu using Avada.

Step by step how to create a custom icon menu with a call to action

Create your menu

To begin, head to your WordPress backend and click on Appearance >> Menu

Creating WordPress menu

Once it has opened, click on create menu and add the pages you would like to display then save.

Naming WordPress menu
WordPress Main menu with added items

2. Set created the menu as main menu

To set the created menu as the main menu, simply click on manage locations.

WordPress manage menu locations

Under manage locations, set your created menu as the main menu and save changes.

WordPress setting main navigation menu

Refresh your website and your menu should display as below. A plain text normal menu.

Text based website menu

3. Setting menu icons

This is the exciting part where Avada plays boss! To set icons on the menu items simply click the edit menu.

edit menus in WordPress

Under the main menu, we will set the home link with the home icon

To achieve this, click on the drop-down on the home menu element to open the dropdown context. Then click on Avada Menu options button.

Avada Menu options WordPress

The Avada menu options will display as below

Avada menu options pop-up

We will now go through the settings. The Menu first level style setting requires you to choose how you want to display your menu icon. The default style displays the icon as the menu. The button options are available for us to choose from, we will use those later in the call to action section.

Avada menu first level style - default

Next, we will locate the home icon using the icon select setting. In case you don’t like the home icon available, you can always add a custom icon by uploading using the plus button on the right-hand side. Click on the home icon to select.

Avada menu options - icon select

To avoid the menu text from displaying, we will set the Icon/thumb only setting to be ON.

Avada menu options - icon / thumb only menu display

Should you want to set the highlight text and colours feel free, in our case it is not necessary. Extra settings are available for example modal and mega menu which you may use it to your liking.

To conclude, save the Avada menu options changes then save the menu main menu settings. Refresh your website and alas! Your menu on the homepage link will now be replaced with a home icon.

Avada home menu with home icon

We will repeat the same steps above for My Account menu link and the Checkout menu link. The final icon menu will display as below.

4. Adding a call to action – CTA

We have come a long way but there is one more thing. Making the contact Menu link to be a call to action button. This should be easy as the process is similar to the above. The difference is that under the Menu First Level Style, we will choose the Button medium option instead.

Avada menu options - menu first level style - Button medium

Ensure the icon thumbnail only is OFF then click save the Avada Menu Options followed by saving the main menu. Your final menu should appear as below.

It is a wrap! I hope you have enjoyed the article and have learnt something. If you have purchased Avada theme, go ahead and experiment with the icon menu for your website today. Also, consider making your menu call to action stand out by using buttons.

By WP Array

Ex Dreamweaver...yeah! Ex Modx, Ex Joomla. 2 years of web design experience, 3 years UX/UI designer and 8 years of web experience. Wordpress convert and enthusiast! Let's do this for the love of the web.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.