Elementor Widgets
5 min read
Updated Jun 16, 2026
Overview
The Elementor add-on brings WordPress Download Manager widgets to the Elementor page builder. Create stunning download pages with drag-and-drop, live preview, and Elementor’s powerful styling controls no shortcodes required.
Prerequisites
- WordPress Download Manager installed
- Elementor (Free or Pro) installed and activated
- Elementor Widgets add-on installed
Available Widgets
| Widget | Description |
|---|---|
| WPDM Package | Display single package |
| WPDM Packages | Package grid/list |
| WPDM Categories | Category display |
| WPDM Search | Download search form |
| WPDM Dashboard | User downloads dashboard |
| WPDM Author Dashboard | Dedicated dashboard for Authors |
| WPDM Login Form | User login form |
| WPDM Registration Form | User Registration form |
| WP Pro Membership Plans | Plans for WP Pro Membership add-on |
Adding Widgets
Finding Widgets
- Edit page with Elementor
- Open widget panel (⊕ icon or drag from left)
- Search WPDM or Download
- Or browse WordPress Download Manager category
Widget Panel: ┌─────────────────────────────────────┐ │ Search widgets... [WPDM] │ ├─────────────────────────────────────┤ │ WORDPRESS DOWNLOAD MANAGER │ │ ┌─────────────────────────────────┐ │ │ │ WPDM Package │ │ │ │ WPDM Packages │ │ │ │ WPDM Categories │ │ │ │ WPDM Search │ │ │ │ WPDM Dashboard │ │ │ │ WPDM Cart │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘
Drag and Drop
- Locate widget in panel
- Drag to page canvas
- Drop in desired section
- Configure in sidebar
WPDM Package Widget
Display a single download package.
Content Tab
┌──────────────────────────────────────────────────────────────┐ │ Content │ ├──────────────────────────────────────────────────────────────┤ │ Package: │ │ [Search by title... ▼] │ │ │ │ Template: │ │ [Link Template Default ▼] │ │ │ │ Display Elements: │ │ ☑ Show Title │ │ ☑ Show Description │ │ ☑ Show Thumbnail │ │ ☑ Show Download Button │ │ ☐ Show File List │ │ │ └──────────────────────────────────────────────────────────────┘
Style Tab
┌──────────────────────────────────────────────────────────────┐ │ Style │ ├──────────────────────────────────────────────────────────────┤ │ Card: │ │ Background Color: [■ #ffffff ] │ │ Border Radius: [8] px │ │ Box Shadow: [0] [4] [16] [0] rgba(0,0,0,0.1) │ │ Padding: [24] px │ │ │ │ Title: │ │ Typography: [Default ▼] │ │ Color: [■ #1e293b ] │ │ │ │ Button: │ │ Background: [■ #4f46e5 ] │ │ Text Color: [■ #ffffff ] │ │ Border Radius: [6] px │ │ Padding: [12] [24] px │ │ │ └──────────────────────────────────────────────────────────────┘
Advanced Tab
- Margin & Padding
- Motion Effects
- Custom CSS (Pro)
- Responsive visibility
WPDM Packages Widget
Display multiple packages in grid or list.
Query Settings
┌──────────────────────────────────────────────────────────────┐ │ Query │ ├──────────────────────────────────────────────────────────────┤ │ Source: │ │ ○ All Packages │ │ ● By Category │ │ ○ By Tag │ │ ○ Manual Selection │ │ │ │ Categories: │ │ [Software ✕] [Documents ✕] [Add] │ │ │ │ Number of Packages: [9 ] │ │ │ │ Order By: │ │ [Date ▼] │ │ ○ Title ○ Downloads ○ Date ○ Random │ │ │ │ Order: │ │ ○ Ascending ● Descending │ │ │ │ Offset: [0 ] (skip first N packages) │ │ │ └──────────────────────────────────────────────────────────────┘
Layout Settings
┌─────────────────────────────────────────────────────┐ │ Layout │ ├─────────────────────────────────────────────────────┤ │ Template: │ │ [Link Template Card ▼] │ │ │ │ Layout Style: │ │ [Grid ] [List ] │ │ │ │ Columns: │ │ Desktop: [3 ▼] │ │ Tablet: [2 ▼] │ │ Mobile: [1 ▼] │ │ │ │ Column Gap: [24] px │ │ Row Gap: [24] px │ │ │ │ Pagination: │ │ ○ None │ │ ● Numbers │ │ ○ Load More Button │ │ ○ Infinite Scroll │ │ │ └─────────────────────────────────────────────────────┘
Responsive Columns
Preview Modes: ┌──────────────────────────────────────────────────┐ │ [🖥 Desktop] [📱 Tablet] [📱 Mobile] │ ├──────────────────────────────────────────────────┤ │ │ │ Desktop (3 columns): │ │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ Pkg 1│ │ Pkg 2│ │ Pkg 3│ │ │ └──────┘ └──────┘ └──────┘ │ │ │ │ Tablet (2 columns): │ │ ┌─────────┐ ┌─────────┐ │ │ │ Pkg 1 │ │ Pkg 2 │ │ │ └─────────┘ └─────────┘ │ │ │ │ Mobile (1 column): │ │ ┌─────────────────────┐ │ │ │ Package 1 │ │ │ └─────────────────────┘ │ │ │ └──────────────────────────────────────────────────┘
WPDM Categories Widget
Display category listing or grid.
Content Settings
┌──────────────────────────────────────────────────────────────┐ │ Content │ ├──────────────────────────────────────────────────────────────┤ │ Display: │ │ ○ All Categories │ │ ● Selected Categories │ │ │ │ Categories: │ │ [Software ✕] [Documents ✕] [Add] │ │ │ │ Parent Category: (show children of) │ │ [None - Show Top Level ▼] │ │ │ │ Show Count: ☑ Yes │ │ Show Empty: ☐ No │ │ Show Icon: ☑ Yes │ │ Hierarchical: ☐ No │ │ │ │ Order By: │ │ [Name ▼] │ │ ○ Name ○ Count ○ ID ○ Custom Order │ │ │ └──────────────────────────────────────────────────────────────┘
Layout Options
┌──────────────────────────────────────────────────────────────┐ │ Layout │ ├──────────────────────────────────────────────────────────────┤ │ Style: │ │ [Cards ] [List ] [Icons ] │ │ │ │ Columns: [4 ▼] │ │ Gap: [20] px │ │ │ │ Card Style: │ │ Background: [■ #f8fafc ] │ │ Border: [1] px solid [■ #e2e8f0 ] │ │ Radius: [8] px │ │ Hover Effect: ☑ Lift on hover │ │ │ └──────────────────────────────────────────────────────────────┘
WPDM Search Widget
Add download search functionality.
Search Settings
┌──────────────────────────────────────────────────────────────┐ │ Search Form │ ├──────────────────────────────────────────────────────────────┤ │ Placeholder Text: │ │ [Search downloads... ] │ │ │ │ Button Text: │ │ [Search ] │ │ │ │ Results Page: │ │ [Search Results ▼] │ │ │ │ Show Advanced: │ │ ☑ Category Filter │ │ ☐ Tag Filter │ │ ☐ Date Range │ │ │ │ Layout: │ │ ○ Inline (horizontal) │ │ ● Stacked (vertical) │ │ │ └──────────────────────────────────────────────────────────────┘
Styling Options
┌──────────────────────────────────────────────────────────────┐ │ Style │ ├──────────────────────────────────────────────────────────────┤ │ Form Container: │ │ Background: [■ #ffffff ] │ │ Padding: [16] px │ │ Border: [1] px solid [■ #e2e8f0 ] │ │ Radius: [8] px │ │ │ │ Input Field: │ │ Typography: [Default ▼] │ │ Background: [■ #f8fafc ] │ │ Border: [1] px solid [■ #e2e8f0 ] │ │ Focus Color: [■ #4f46e5 ] │ │ │ │ Button: │ │ Typography: [Default ▼] │ │ Background: [■ #4f46e5 ] │ │ Hover: [■ #4338ca ] │ │ Text Color: [■ #ffffff ] │ │ Icon: ☑ Show search icon │ │ │ └──────────────────────────────────────────────────────────────┘
WPDM Dashboard Widget
User download dashboard display.
Dashboard Settings
┌──────────────────────────────────────────────────────────────┐ │ Dashboard │ ├──────────────────────────────────────────────────────────────┤ │ Sections to Show: │ │ ☑ Download History │ │ ☑ Purchased Products │ │ ☑ Favorites │ │ ☐ Uploaded Files │ │ │ │ Guest Behavior: │ │ ○ Show Login Form │ │ ● Show Login Button │ │ ○ Redirect to Login Page │ │ │ │ Items Per Page: [10 ▼] │ │ │ └──────────────────────────────────────────────────────────────┘
Design Patterns
Using with Theme Builder (Pro)
Create download archive template:
- Go to Templates > Theme Builder
- Add Archive template
- Set condition: Post Type is “wpdmpro”
- Add WPDM Packages widget
- Publish
Single Download Template
- Add Single template
- Set condition: Post Type is “wpdmpro”
- Use WPDM Package widget or template parts
- Style with Elementor
Global Widgets
Save WPDM widgets for reuse:
- Right-click widget
- Select Save as Global
- Name the widget
- Reuse across pages
- Edit once, update everywhere
Dynamic Tags
Use Elementor’s dynamic tags with WPDM:
Available Tags: ├─ WPDM Package Title ├─ WPDM Package Description ├─ WPDM Download Count ├─ WPDM Package Size ├─ WPDM Package Version ├─ WPDM Featured Image └─ WPDM Download Link
Using Dynamic Tags
- Click dynamic tag icon (⚡) on field
- Select WPDM tag category
- Choose specific tag
- Configure options if available
Popup Downloads
Create download popup with Elementor Pro:
- Create popup template
- Add WPDM Package widget
- Set trigger (button click)
- Publish popup
Example trigger:
┌──────────────────────────────────────────────────────────────┐ │ Button Settings │ ├──────────────────────────────────────────────────────────────┤ │ Link: │ │ ● Dynamic │ │ [Popup] → [Download Popup ▼] │ │ │ │ Open in: │ │ ● Popup │ └──────────────────────────────────────────────────────────────┘
Performance Tips
Lazy Load Images
Widget Advanced Settings: ├─ Loading: Lazy ├─ Placeholder: Low-quality image └─ Fade-in animation: 300ms
Minimize DOM
- Use appropriate template (simpler = faster)
- Limit packages per page
- Enable pagination for large lists
Caching
- Works with Elementor’s built-in caching
- Compatible with page cache plugins
- Dynamic content handled via AJAX
Troubleshooting
Widget Not Appearing
Causes:
- Add-on not activated
- Elementor cache needs clearing
- JavaScript conflict
Solutions:
- Verify add-on is active
- Regenerate Elementor CSS
- Clear Elementor cache
- Test with default theme
Styling Not Applied
Causes:
- CSS specificity conflict
- Caching issue
- Template override
Solutions:
- Use Elementor’s style controls (higher specificity)
- Add custom CSS in Advanced tab
- Clear all caches
- Check template styling
Preview Not Matching Frontend
Cause: Dynamic content loads differently
Solution:
- Save and preview on frontend
- Check visibility conditions
- Test logged in vs logged out
Custom CSS Examples
Card Hover Effect
.wpdm-package-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
Custom Button Style
.wpdm-download-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
padding: 14px 28px;
font-weight: 600;
letter-spacing: 0.5px;
}
Grid Animation
.wpdm-packages-grid .wpdm-package-card {
opacity: 0;
animation: fadeInUp 0.5s ease forwards;
}
.wpdm-packages-grid .wpdm-package-card:nth-child(1) { animation-delay: 0.1s; }
.wpdm-packages-grid .wpdm-package-card:nth-child(2) { animation-delay: 0.2s; }
.wpdm-packages-grid .wpdm-package-card:nth-child(3) { animation-delay: 0.3s; }
Related Documentation
Applies to: WordPress Download Manager 7.x + Elementor Widgets Add-on