How to Create Menu Icon Buttons | Elementor Resources 1350185022971453123

How to Create Menu Icon Buttons

Icons can be a powerful way to display information in the most efficient manner possible, as not only it conserves valuable space on the user’s eyes, it also makes visually pleasing cues that might as well benefit the user. However, we often get contact emails on how to create such icon buttons. So, here’s a tutorial on how to do it in a few simple templates mainly through Elementor.

But before anything else, we’d like to show you a preview of what we’ll be doing here:

Elementor Navigation Menu Icons Only11

Now, let’s begin!

Step 1:  First, let’s add a section where you will place the Widget. Almost all of our tutorial begins here.

Elementor Navigation Menu Icons Only2

Step 2: Then, you would like to choose a Column Structure that you want to place on the section.

Elementor Navigation Menu Icons Only9

Step 3: Fortunately, in order to have a navigation menu with icons only, we will use an Icon List Widget. The Elementor team sure had these in mind to have this feature built-in on the builder.

Elementor Navigation Menu Icons Only4

Step 4: Let’s then drag the Widget to the Column and start to make a custom navigation menu using this widget. Please note that this would be the initial look of the widget’s output.

Elementor Navigation Menu Icons Only10

Step 5:  On the Content Tab Choose the horizontal layout to display the icon inline.

Elementor Navigation Menu Icons Only7

Doing this should result to this:

Elementor Navigation Menu Icons Only8

Step 6: Replace the Icon that you wanted by choosing on the Icon Library of Elementor

Elementor Navigation Menu Icons Only6

Step 7: Lastly to make our menu Icon alone just clear the text in the text area.

Elementor Navigation Menu Icons Only1

Removing the text should result to this:

Elementor Navigation Menu Icons Only12

Step 8: To make these icons acts like a menu, just put any link of your page on it.

Elementor Navigation Menu Icons Only3

Step 9: To make this Navigation Menu show globally just right click on the widget and save it as global, put the global widget name and you can find it on the global widgets so you can put it anywhere in your website’s page.

Elementor Navigation Menu Icons Only5

Tadaaa and here’s the result of our Navigation Icon Menu

Elementor Navigation Menu Icons Only11

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×
×

Cart