티스토리 수익 글 보기
Need Help?
Here are some good places you cant start.
Whats New?
Get updated about all the good stuff!
Dropdown Button for Elementor
In this guide, we will show you how to add a “Dropdown Button widget” to your Elementor website. The Dropdown Button widget lets you create custom buttons with drop-down menus, enhancing your site’s navigation and functionality. Perfect for displaying hidden content or providing additional links without cluttering your page, this versatile widget helps keep your layout clean and user-friendly. With customizable options for styles, links, and menu items, the Dropdown Button widget brings flexible, streamlined navigation to any Elementor design.
Let’s explore the customization options available in the “Dropdown Button widget” for Elementor below.
Add a Dropdown Button to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add a Dropdown Button Widget to an Elementor Page
Elementor Dropdown Button Widget General Settings
Items Source
Determine where the content for the dropdown button’s items will be sourced from. Options include:
Items: Manually add individual items to the dropdown.
Posts: Dynamically populate dropdown items from your website’s posts.
WooCommerce Products: Dynamically populate items from your WooCommerce products.
ACF Custom Field: Use data from an Advanced Custom Fields (ACF) custom field to populate items.
JSON or CSV: Import dropdown items from a JSON or CSV file.
Gallery: Populate items from a media gallery.
Terms: Use taxonomy terms (such as categories or tags) to populate items.
Users: Populate items based on registered users on your site.
Menu: Use an existing WordPress menu to populate dropdown items.
RSS: Pull items from an RSS feed.
Instagram: Integrate with Instagram to display content as dropdown items.
API Integrations: Use data from various API integrations to populate items.
Debug — Show Input Data
Toggle to display debug information or input data.
Button Text
Change the text displayed on the dropdown button.
Width
Control the width of the button. Options include:
Inline Auto: The button’s width adjusts automatically based on its content.
Full Width: The button spans the entire width of its container.
Button Align
Control the horizontal alignment of the button. Options include:
Left: Aligns the button to the left.
Center: Centers the button.
Right: Aligns the button to the right.
Show Button Icon
Toggle the visibility of an icon next to the button text.
Button Icon
Select and set the icon displayed on the button.
Keep Dropdown Active
Keep the dropdown open even when the mouse leaves, useful for styling or debugging.
Transition Duration (ms)
Set the time (in milliseconds) for the dropdown to fully open or close.
Transition Delay (ms)
Set the time (in milliseconds) before the dropdown starts opening or closing after the trigger event.
Label
Set the visible text for a specific dropdown item.
Link
Specify the URL or destination for the dropdown item.
Icon
Select and assign an icon to appear next to the label.
Custom Colors
Enable to set custom text and background colors for this item, overriding default styles.
Add Item
Add a new entry to the dropdown menu.
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Dropdown Button Widget Style Settings
Typography
Control the font, size, weight, line height, letter spacing, and other text properties of the button text.
Padding
Set the internal spacing between the button’s content and its border (Top, Right, Bottom, Left), with the option to link values.
Active / Hover Tabs
Define styles for the button’s normal (active) state and its hover state for interactive visual feedback.
Text Color
Set the color of the button’s text.
Background
Set the background color or image of the button.
Border Radius
Control the roundness of the button’s corners (Top, Right, Bottom, Left), with the option to link values
Border Type
Choose the style of the button’s border (e.g., Solid, Dashed, Dotted, Double, None).
Border Width
Set the thickness of the button’s border (Top, Right, Bottom, Left), with the option to link values
Border Color
Set the color of the button’s border.
Box Shadow
Add and customize a shadow effect around the button.
Icon Position
Determine whether the icon appears before or after the button text.
Icon Size
Control the size of the icon with a slider or numeric value.
Icon Color
Set the icon’s color in its normal state.
Icon Color Hover
Set the icon’s color on hover for interactive feedback.
Icon Gap
Adjust the space between the icon and the button text.
Dropdown Gap
Control the vertical spacing between the dropdown button and the dropdown menu.
Box Shadow
Add and customize a shadow effect around the dropdown wrapper, including color, blur, spread, and position.
Border Radius
Adjust the roundness of the dropdown wrapper’s corners with a slider or numeric value.
Dropdown Border Type
Select the border style for the dropdown wrapper. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Item Gap
Adjusts vertical space between dropdown items.
Typography
Controls font family, size, weight, and spacing of item text.
Padding
Sets space inside each item around text and icons.
Normal/Hover Tabs
Set different styles for normal and hover states.
Text Color
Changes the color of the item text.
Background Color
Sets the background color of each item.
Border Radius
Controls how rounded the item corners are.
Align
Aligns content (text and icons) left, center, or right.
Item Border Height
Adjusts the thickness of the item borders.
Item Border Color
Sets the color of the item borders.
Dropdown Icon Position
Determine where the icon appears relative to each dropdown item’s text. Options include:
Before Text: The icon appears before the item text.
After Text: The icon appears after the item text.
Icon Size
Controls the size of the dropdown item icon.
Icon Gap
Sets the space between the icon and the text.
Icon Color
Sets the icon color in the normal state.
Icon Color Hover
Sets the icon color when hovered by the user.
Dropdown Button Widget Design Examples For Elementor
Here are some live use cases for the Dropdown Button widget.
Dropdown Button with Product Category.
Dropdown Button with Contact Section.
Thank you for using the Dropdown Button widget for Elementor! This versatile tool lets you create custom buttons with drop-down menus to enhance navigation and functionality without cluttering your layout. With fully customizable styles and links, it fits seamlessly into your site’s design. If you have questions or need help, feel free to reach out or explore our demo examples online.
Download is just a click away
Get instant access to tons of Elementor goodies, completely FREE!