Ensuring that users find your website engaging is fundamental to web design. It’s what keeps them interested in your website’s content. With Unlimited Elements for Elementor, you can access a wide range of tools and options to help you create visually appealing and captivating websites. One of these innovative elements is the Accordion Menu, specifically designed to offer users a straightforward yet exciting navigation experience. In this comprehensive guide, we’ll take you through each step of creating an Accordion Menu for Elementor, making it easy for you to integrate this attention-grabbing component into your website’s layout seamlessly.
So, let’s start crafting an interactive and visually pleasing Accordion Menu that’s bound to impact your website’s visitors significantly.
When it comes to website design, an accordion menu is a game-changer for enhancing navigation. Its user-friendly layout neatly organizes links, offering visitors a seamless browsing experience. This widget’s vertical, collapsible style is especially effective at presenting and arranging your menu items.
The Unlimited Elements Accordion Menu widget adds a touch of elegance to your website. With its vertical, collapsible design and smooth animations, it allows you to showcase menu items with finesse. Whether you want to display pages, WooCommerce categories, quick links, or your social media profiles complete with icons, this versatile tool has got you covered.
To give you a clearer picture, here’s an example of what you can achieve with the Accordion 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 Accordion 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 Accordion 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 accordion menu.
Step #4: Adding the Accordion Menu on an Elementor page.
Drag and drop the Accordion Menu widget on the page.
Now select the menu you created earlier in select menu query settings of widget. You can also set the max depth of the menu you want to display in the accordion menu.
You have the power to decide what the menu title looks like at the top of the accordion menu. You can also choose where the menu itme dropdown icon position and what it looks like when the menu is closed or open. Plus, you can make it so that when one menu dropdown is open, the others automatically close.
Step #5: Styling the Accordion Menu widget
The Accordion Menu widget provides a wide range of customization options so you may personalise how it looks. Your options are as follows:
Background Styles: Modify the menu’s background with gradient background, background image, or solid background color.
Submenu Icon Configuration: Adjust the size of the menu icon and set the margins.
Menu Title Customization: Fine-tune the typography, color, border, and background of the menu title.
Typography for Menu Items: Customize the typography for both menu items and sub-items. You can specify padding and set distinct background colors for normal and hover states.
Active Menu Icon: You also have the flexibility to change the color and background color of the active menu icon, ensuring it stands out when menu item is active.
And there you have it, your Accordion Menu is all set up and ready to go! This guide has shown you how to create an engaging Accordion Menu using Unlimited Elements, the plugin that enhances Elementor, the popular WordPress page builder. With creative control over styling options like shapes, colors, typography, animations, and positioning, make sure your menu perfectly matches your site’s unique style. Now, enjoy crafting an exceptional user experience with your very own Accordion Menu, powered by Unlimited Elements for Elementor.
Example of Accordion Menu
Here is an example of what you can achieve with Accordion Menu widget.
Additionally, Unlimited Elements offers these menu navigation widgets to make your website more accessible and user-friendly.
