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:
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.
Step 2: Then, you would like to choose a Column Structure that you want to place on the section.
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.
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.
Step 5: On the Content Tab Choose the horizontal layout to display the icon inline.
Doing this should result to this:
Step 6: Replace the Icon that you wanted by choosing on the Icon Library of Elementor
Step 7: Lastly to make our menu Icon alone just clear the text in the text area.
Removing the text should result to this:
Step 8: To make these icons acts like a menu, just put any link of your page on it.
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.
Tadaaa and here’s the result of our Navigation Icon Menu
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!
If you have more concerns or have encountered other issues, let us know in the comments section!