A Toggle Button in Elementor is a clickable element, such as a button or icon, allowing users to show or hide content dynamically. When clicked, the button can reveal a hidden webpage section, like a dropdown menu, additional text, or images. This functionality is especially useful for creating interactive elements like FAQs, collapsible sections, or dropdown menus, helping to keep your webpage clean and organized while allowing users to access more information only when they need it.
Popular Use Cases for the Toggle Button
Navigation Menus
Use the toggle button to reveal additional links or subcategories with a simple click or hover, keeping your navigation clean and organized.
Search Bar Reveal
With a toggle button, you can display a compact search bar when needed, saving space while maintaining easy search access.
Mini Cart Display
The toggle button can reveal a mini cart with items and total price, allowing users to check their cart without leaving the current page.
Filters in eCommerce
Add a toggle button to product filters like price, size, or categories, giving users a smooth, interactive shopping experience.
Mobile Menus
On mobile devices, the toggle button is ideal for displaying navigation links only when clicked, conserving valuable screen space.
Quick Login/Register
Use a toggle button to reveal login or registration forms, offering users a quick and seamless way to sign in without reloading the page.
Step #1: Install and activate Unlimited Elements
Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Toggle Dropdown widget.
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.
Now that you have the plugin installed, it’s time to start creating the Toggle Dropdown.
Step #2: Adding the Toggle Dropdown widget to your Elementor website
To create a Dropdown Button you need to install the Dropdown Button widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Dropdown Toggle"
Hover over the widget and click install
Then, in the Elementor editor, Find the Toggle Dropdown widget and drag it to the desired part of your page.
Step #3: Configure the Toggle Dropdown Content Type
Text
Simple text content.
Image
Display an image when the button is toggled.
Template
Load a pre-built template.
Element ID
Specify the ID of any element on the page that will be shown or hidden when the toggle button is clicked.
Step #4: Configure the Toggle Dropdown Dropbar
Trigger
Choose how the toggle activates: on click or hover.
Placement
Set where the revealed content appears in relation to the button, such as bottom start, top center, left start, ext...
X Offset
Adjust the horizontal distance between the button and the revealed content.
Y Offset
Control the vertical spacing between the button and the revealed content.
Z-Index
Set the stacking order to ensure the content is on top of other elements.
Hide on Body Click
Decide if the content should close when clicking outside the toggle (yes or no).
Wrapping it Up!
And that’s it! 🎉 You’ve now mastered how to create a sleek and functional toggle button in Elementor. Whether you’re using it for navigation menus, revealing hidden content, or adding interactive elements to your site, this simple yet powerful feature enhances the user experience while keeping your design clean and organized. Now go ahead, implement your toggle buttons, and elevate your Elementor website to the next level! 🚀
