The Toggle Dropdown widget for Elementor is a versatile widget that allows users to control the visibility of dropdown text, image, template or elements with a simple click. This button or icon makes it easy to show or hide information, providing a streamlined and intuitive user experience. Whether it’s used for navigation or content display, the Toggle Dropdown adds a layer of interactivity to your website.
Let’s look at each of the options in the Toggle Dropdown widget for Elementor below.
Elementor Toggle Dropdown Video Tutorial
Add Toggle Dropdown Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Toggle Dropdown”
- Hover over the widget in the search results and click install
- Add your “Toggle Dropdown” widget to any Elementor Page
General Settings
Content Type
Select the content type:
- Text
- Image
- Template
- Element ID
Dropbar Settings
Trigger
Select the trigger for toggle.
- Click
- Hover
Placement
Set the placement of dropdown element:
- Auto
- Auto Start
- Auto End
- Top Start
- Top Center
- Top End
- Bottom Start
- Bottom Center
- Bottom End
- Right Start
- Right Center
- Right End
- Left Start
- Left Center
- Left End
X Offset
Set the horizontal offset.
Y Offset
Set the vertical offset.
Dropbar z-index
Set the z-index of dropbar.
Hide on Body Click
Dropbar will hide when user clicks on the body of page.
Hide Dropbar if Button is Hidden
By turning this on, dropbar will be hidden if button is hidden.
Button Settings
Button Title
Type title of the button.
Show Icon
Show icon before/after the title.
Icon
Choose an icon to display in the button.
Different Active Icon
Choose a different icon to display on active state.
Button Transition Duration
Set the duration of button transition.
Animation Settings
Button Hover Animation
Select the hover animation for button.
Entrance Animation
Select the entrance animation for dropbar.
- In-Out Left
- In-Out Right
- In-Out Top
- In-Out Bottom
Entrance Animation Duration
Set the duration for entrance animation.
Toggle Dropdown Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Dropbar Styling
In this section, set the dropbar width, background, border, padding, box shadow, and overflow.
Button Styling
You can set the button alignment, width, typography, padding, text color, background color, border radius and border.
Button Icon Styling
Set the button icon size, gap, color and shadow.
Content Styling
Here, you can set the typography, color, and shadow of the content.
Toggle Dropdown Design Examples For Elementor
Here are some live use cases for the Toggle Dropdown Widget.
Reveal hidden contact details and location map by clicking on contact icons.
Open a compact search bar for quick, space-saving searches.
Thank you for choosing the Toggle Dropdown Widget by Unlimited Elements for your Elementor project! We hope this widget helps you create engaging and functional dropdowns that enhance your website’s user experience. With its flexible customization options, the widget is designed to integrate smoothly with your layout and content goals. For any additional questions or assistance, the support team is available to help.
