In this guide, we’ll show you how to add a Remote Dropdown widget to your Elementor website. The Remote Dropdown widget lets you control and switch content dynamically using a flexible dropdown-based interface. It’s a powerful way to create advanced interactive layouts by linking the dropdown to sections, tabs, templates, or widgets across your page. Whether you’re building feature selectors, content filters, or multi-section layouts, this widget helps keep your pages clean, interactive, and user-friendly.
Let’s explore the customization options available in the Remote Dropdown widget for Elementor below.
Add a Remote Dropdown Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add a Remote Dropdown Widget to a Container in Elementor
Elementor Remote Dropdown Widget General Settings
Remote Parent Name
A dropdown menu used to select the specific parent container for the connection.
Show Debug
A toggle switch to enable or disable debugging information.
Select Title
A text field to define the label or title for the dropdown selection.
Hover Animation
A dropdown menu to choose an animation effect that triggers when a user hovers over the widget.
Set Url Hash
A toggle switch that allows the active tab to be accessible or returnable via a specific URL hash.
Dropdown Opening Duration (ms)
A field to set the speed at which the dropdown menu opens, measured in milliseconds.
Transition Duration (ms)
A field to set the time it takes for transitions to complete within the widget.
Item Image Size
A dropdown menu to select the specific dimensions or resolution for images used within the dropdown items.
Graphic Element
A dropdown menu used to select a visual element (such as an icon or image) to display within the widget.
Show Title
A toggle switch to enable or disable the visibility of the widget's title.
Show Text
A toggle switch used to control whether additional descriptive text is displayed.
Show Label
A toggle switch to show or hide the label associated with the dropdown.
Title
A text input field to define the primary name or label for the dropdown item.
Icon
A selection area used to choose or upload a specific icon for the item.
Text
A text area field for adding a description or secondary information, including an "AI Writing Tool" for content generation.
Label
A text field to add a specific label or tag to the item.
Image
A media upload area to set a primary image for the dropdown entry.
Background Color
A color picker to set the standard background for the item.
Background Color Active
A color picker to define the background color when the item is currently selected or active.
Icon Color
A setting to customize the color of the chosen icon.
Label BG Color
A color picker to set a background color specifically for the label text.
Select Number
A field to manually assign a numerical value to the item for ordering or navigation.
Friendly Hash Name
A field to define a specific name for URL hashing, used in conjunction with the "Set Url Hash" option.
Duplicate
An icon button used to clone an existing item and all its internal configurations.
Delete
An "X" icon button used to remove an item from the list.
Add Item
A button used to create a new blank entry at the bottom of the list.
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 Remote Dropdown Widget Style Settings.
Select Width Type
A dropdown menu to choose how the width of the select element is defined.
Select Width
A slider and numerical input to set the specific width of the select element in pixels.
Select Align
A dropdown menu to set the horizontal alignment of the select element.
Text Align
A dropdown menu to set the alignment of the text within the select element.
Typography
A tool to configure font properties such as family, size, weight, and line height.
Padding
Controls the internal spacing of the select element for the top, right, bottom, and left sides.
Margin
Adjusts the external spacing around the select element.
Normal / Hover / Active Tabs
Switches between styling states for the standard appearance, hover state, and when the item is active.
Background
Sets the background type and color for the select element.
Text Color
Defines the color of the text within the select element.
Border Radius
Adjusts the roundness of the corners for the select element.
Border Type
A dropdown menu to choose the style of the border.
Border Width
Sets the thickness of the border for all sides.
Border Color
Defines the color of the applied border.
Box Shadow
An editor to add and configure a shadow effect around the select element.
Text Shadow
An editor to apply a shadow effect specifically to the text.
Outline Color
Sets the color of the outline that appears when the select element is in focus.
Dropdown Gap
A slider and numerical input to adjust the vertical distance between the select element and the opening dropdown.
Border Radius
Controls the roundness of the dropdown container's corners for all sides.
Border Type
A dropdown menu to select the style of the border around the dropdown.
Box Shadow
An editor to apply and configure a shadow effect for the dropdown container.
Dropdown Background
A toggle to choose between classic (solid/image) or gradient background types.
Dropdown Background Color
A color picker to set the primary background color for the dropdown menu.
Dropdown Background Image
A media upload area to set an image as the background for the dropdown.
Background Blur
A slider to adjust the level of blur applied to the dropdown background.
Dropdown Width Type
A dropdown menu to define how the width of the open menu is calculated.
Overflow
A dropdown menu to control how content that exceeds the dropdown boundaries is handled.
Item Text Align
A dropdown menu to set the horizontal alignment of text within each individual dropdown item.
Item Direction
A dropdown menu to define the flow direction of content within the item (e.g., Column or Row).
Item Justify
A dropdown menu to control the alignment of content along the main axis.
Item Align Items
A dropdown menu to control the alignment of content along the cross axis.
Item Min Width
A slider and numerical input to define the minimum horizontal size of the item.
Item Padding
Controls the internal spacing for the top, right, bottom, and left sides of the item.
Normal / Active / Hover Tabs
Switches between styling states for the standard appearance, the selected/active state, and the hover state.
Item Border Type
A dropdown menu to select a specific border style for the item.
Item Shadow
An editor to apply and configure a shadow effect for the individual item.
Item Radius
Adjusts the roundness of the corners for each dropdown item.
Item Opacity
A slider to control the transparency level of the item.
Normal / Hover / Active Tabs
Switches between styling the background for the item's standard appearance, hover state, and selected/active state.
Item Background
A toggle to choose between classic (solid/image) or gradient background types.
Item Background Color
A color picker to define the specific background color for the item.
Item Background Image
A media upload area to set an image as the background for the dropdown item.
Normal / Hover / Active Tabs
Switches between styling the item title for its standard appearance, hover state, and selected/active state.
Title Typography
Opens the text styling controls to configure font properties such as family, size, and weight.
Color
A color picker tool used to define the specific color of the item title text.
Title Shadow
Provides an editor to add and configure a shadow effect specifically for the item title.
Dropdown Size
A slider and numerical input to adjust the overall scale of the indicator icon.
Icon Gap
A slider and numerical input to control the spacing between the indicator icon and the adjacent text or elements.
Icon Indent
A slider and numerical input to adjust the horizontal offset or positioning of the icon within its container.
State Tabs (Normal / Hover / Active)
Switches the configuration between the standard appearance, the hover state, and the selected/active state of the indicator.
Color
A color picker tool is used to define the specific color of the dropdown indicator icon.
Remote Dropdown Widget Design Examples For Elementor
Here are some live use cases for the Remote Dropdown Widget.
Football Club Tournament Bracket Maker.
Remote Dropdown with a Remote.
Thank you for using the Remote Dropdown widget for Elementor! This free widget adds powerful, interactive dropdown controls to your pages, allowing you to dynamically show, hide, or switch content with ease. It’s a simple yet effective way to create advanced layouts, improve navigation, and enhance user interaction without cluttering your design. Need help or layout ideas? Visit our demo page for examples and inspiration.