In the world of web design, captivating user experiences are essential for engaging visitors and keeping them immersed in your website’s content. Unlimited Elements for Elementor provides a multitude of tools and options to create visually stunning and interactive websites. One such creative feature is the Circle Menu, which offers an intuitive and engaging navigation experience for users. In this guide, we will walk you through the step-by-step process of creating a Circle Menu for Elementor, allowing you to seamlessly integrate this eye-catching feature into your website’s design.
So, let’s dive in and discover how to create a visually appealing and interactive Circle Menu that will leave a lasting impression on your website visitors.
A circle menu on a website improves navigation with its easy-to-use design. It evenly spreads links in a visually appealing way, making it simple for visitors to explore the site. The circle menu widget offers a circular layout that evenly distributes links around its radius.
The Unlimited Elements Circle Menu widget unlocks the possibilities to showcase your desired menu items in a circular style with animation. It can be used to display pages, WooCommerce categories, quick links, and social media handles with icons.
Here is an example of what you can build using the Circle Menu widget.
Step #1: Install and activate Unlimited Elements Pro for Elementor
Check if you have already the Pro Version of Unlimited Elements – if you don’t, you can just click here for updates and unlock our Pro Version with all our best features.
Then follow these steps:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
Once activated, you’ll need to enter your license key.
Step #2: Install Circle Menu Widget in Unlimited Elements
After you’ve got Unlimited Elements Pro up and running, just head over to your WordPress dashboard. Click on “Unlimited Elements” and then select “Widgets”.
Find the circle menu widget, move your cursor over it, and you’ll see an “Install” button. Just click it to set up the widget.
Step #3: Create a WordPress menu
You will need a WordPress menu to use this widget, So for that we need to create a menu in WordPress.
Open your dashboard
Go to Appearance → Menus
Click to Create a new menu
Give your menu a name than press "Create Menu"
Now on the left side, you will see a menu called pages. That’s where you can select all the pages that you created, to be added to your menu. After selecting all the pages you need, click on “Add to menu” and then on the “Save Menu” button.
That’s it. Our menu is ready. Now it’s time to create circle menu.
Step #4: Adding the Circle Menu on an Elementor page.
Drag and drop the Circle Menu widget on the page.
You can use following options as item source for circle menu.
- Items
- Posts
- WooCommerce Products
- Meta Field
- JSON or CSV
- Gallery
- Terms
- Users
- Menu
You can read our article on Multi-Source to know more about it. Here for the tutorial we will use menu as item source.
Now select the menu as item source in widget’s source settings, and then select the menu you created earlier in item menu query settings of widget. You can also set the max depth of the menu you want to display in the circle menu.
You can write title and text to show in the circle menu in widget’s general settings. You can also show or hide the different elements such as title, text, link text, link icon, tooltip etc.
Step #5: Styling the Circle Menu widget
Circle Menu widget offers a wide range of styling options to customize its appearance. You can choose the shape and size of the menu, define colors and background, adjust typography settings, incorporate icons or images, add animations and hover effects, and precisely position and align the menu. By leveraging these styling options, you can create a visually appealing and interactive Circle Menu that seamlessly integrates with your website’s design and enhances the overall user experience.
Your circle menu is now ready. By following this tutorial, you now have the knowledge and tools to create a captivating Circle Menu for Elementor. With its interactive and visually appealing nature, the Circle Menu will elevate your website’s navigation experience, engaging visitors and adding a touch of modernity to your design. Experiment with the various styling options available in Elementor to customize the menu’s shape, colors, typography, animations, and positioning, ensuring it aligns seamlessly with your website’s branding. Embrace the creative possibilities and enjoy crafting an unforgettable user experience with your very own Circle Menu in Elementor.
Example of Circle Menu
Here is an example of what you can achieve with Circle Menu widget.
Additionally, Unlimited Elements offers these menu navigation widgets to make your website more accessible and user-friendly.
