Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.
On July 30, 2020, LearnDash released a new integration that adds support for the Elementor page builder. Compared with the Design Upgrade Pro plugin, there is definitely some overlap in the features that they each provide. But there are also a ton of differences.
This article will discuss how the pro version of Design Upgrade for LearnDash works with the new Elementor for LearnDash integration. We’ll cover the pros & cons of each, as well as how they work together if you decide to use them both.
Design Upgrade for LearnDash (free)
The free version of Design Upgrade for LearnDash can be used with the Elementor integration without any issues. The upgrades it provides will persist, and you can add Elementor styles on top of it.
NOTE
The rest of this article will focus on Design Upgrade Pro because that’s where an overlap of features exists.
General Compatibility
Generally speaking, Design Upgrade Pro & the Elementor for LearnDash integration work fine together. They can both be used at the same time. Your site won’t break and you can benefit from different features of each.
✅ If you don’t set any colors or numeric values in Elementor, Design Upgrade Pro should continue to work exactly as it always has. Essentially, don’t touch anything on Elementor’s Style tab and you won’t notice a difference.
✅ Simply using Elementor’s Theme Builder templates have no impact on Design Upgrade Pro
❌ Some Elementor styles (mostly text & background colors; some height values) will override your Design Upgrade Pro settings (see details below)
Simply Put
Use Elementor styles when you want to override Design Upgrade Pro. Leave Elementor styles blank when you want Design Upgrade Pro to handle the styling 👍.
Elementor’s Typography Options
Any typography settings you use in Elementor will work just fine. The Design Upgrade Pro plugin doesn’t provide any typography options so there won’t be any conflicts there.
WARNING
Be careful not to use more than 1 or 2 font families or font weights. The more you use, the more it could slow down your site.
Elementor’s Advanced Tab Options
Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.
Get 25% OFF Rapyd Today →
For all LearnDash widgets, no options in Elementor’s Advanced section should have any impact on Design Upgrade Pro. These styles will be applied to a parent element that is unique to Elementor. All of our styles only apply to LearnDash elements, not Elementor ones.
For example, you should be free to use the following without conflict:
- Margin & padding
- Motion effects
- Background
- Border
- Positioning
- Responsive
- Attributes
- Custom CSS
Elementor LearnDash Widget Styles
This section will cover each of Elementor’s LearnDash widgets, and explain which Design Upgrade Pro features get overridden by Elementor. We’ll also note some areas where Design Upgrade Pro provides features that Elementor does not.
LearnDash Login
This widget displays either a login button or logout button, depending on whether or not a user is currently logged in. This widget can be added to any page or template.
Design Upgrade Pro styles both of these buttons the same way, with the following styles:
- Buttons > Button Border Radius
- Buttons > Primary Button
- Buttons > Primary Button Text
- Buttons > Hover: Primary Button
- Buttons > Hover: Primary Button Text
If you choose to use Elementor styles, you will lose the ability to use hover effects.
Elementor allows you to style the login & logout buttons differently. For each, you can apply a background color & text color. These colors will override your Design Upgrade Pro settings.
Elementor | Design Upgrade Pro |
---|---|
Login > Color | Buttons > Primary Button Text |
Login > Background Color | Buttons > Primary Button |
Logout > Color | Buttons > Primary Button Text |
Logout > Background Color | Buttons > Primary Button |
Your button border radius will still apply because Elementor does not have a setting for this.
Automate your LMS site with over 150+ plugins & apps. Uncanny Automator is the perfect no-code automation tool to replace dozens of WordPress plugins.
• Supports LearnDash, Tutor LMS, LifterLMS, and most membership plugins
• Trusted by 30,000 companies
Get 10% OFF with code affiliate10-dwarfel
Profile
The Profile widget displays the LearnDash profile ([ld_profile]
), with many options for customization. This widget can be added to any page or template.
✅ Avatar Style works as expected
✅ Profile Summary: Layout and Profile Stats: Layout both work as expected
✅ Profile Summary: Background works as expected
✅ All hiding & disabling of features work as expected
These are the Elementor styles that will override Design Upgrade Pro’s styles:
Elementor | Design Upgrade Pro |
---|---|
Header > Summary > Header Color | Profile > Profile Summary: Text |
Header > Summary > Label Color | Profile > Profile Summary: Text |
Header > Expand All > Expand Color | Buttons > Standard Button Text |
Header > Expand All > Expand Background Color | Buttons > Standard Button |
Header > Avatar > Avatar Size | Profile > Avatar Size |
Row Item > Title > Title Color | General Design > Link Color |
Row Item > Expand > Expand Color | Buttons > Standard Button Text |
Row Item > Expand > Expand Background Color | Buttons > Standard Button |
Row Item Details > Progress Bar > Progress Bar Color | Progress Bar > Progress Bar |
Row Item Details > Progress Bar > Progress Bar Background | Progress Bar > Progress Bar Container |
Row Item Quizzes > Row Item > Color | General Design > Link Color |
Course List
NOTE
The information for this widget will also apply to the Lesson List widget. Topic List & Quiz List widgets don’t have any Elementor style options (🤔).
It’s important to mention that as of August 1, 2020, Elementor only has 2 style options for these widgets:
- Row Item > Title Color
- Row Item > Background Color
These styles only work if you are not using the Course Grid add-on. Design Upgrade Pro focuses on the course grid, as that’s what most users prefer. So you won’t find any conflicts here, but you’ll also probably never use these Elementor styles either 🤷♂️.
Course Grid Add-On
Interestingly, there are zero Elementor style options for those using the course grid add-on. Psst! Just stick with Design Upgrade Pro. It has over 20 😉.
Course Content Widget
This widget displays the list of sections, lessons, topics & quizzes for a particular course. It is only available when using an Elementor Theme Builder template.
All of Design Upgrade Pro’s Course Content Lists features will continue to work. However, there are some cases where Elementor’s colors will take precedence. If you’d like to continue using Design Upgrade Pro’s styling, just don’t set any Elementor styles (or only use typography options; no colors).
These are the Elementor styles that will override Design Upgrade Pro’s styles:
Elementor | Design Upgrade Pro |
---|---|
Header > Expand Color | Buttons > Standard Button Text |
Header > Expand Background Color | Buttons > Standard Button |
Header > Color | Course Content Lists > “Course Content” Header Text |
Row Item > Title > Title Color | Course Content Lists > Lesson Text |
Row Item > Title > Background Color | Course Content Lists > Lesson Background |
Row Item > Expand > Expand Color | General Design > Link Color |
Row Item > Expand > Expand Background Color | General Design > Link Color |
Row Item > Lesson Progress Header > Color | Course Content Lists > “Lesson Content” Header Text |
Row Item > Lesson Progress Header > Background Color | Course Content Lists > “Lesson Content” Header Background |
- For the Expand All button, if you use Elementor’s styles, you will lose the ability to use Design Upgrade Pro’s button hover effects
- If you use Elementor’s Row Item title & background colors, you will lose the ability to use Design Upgrade Pro’s row hover effects for lessons
- If you use Elementor’s Row Item Expand colors, you will lose the ability to use Design Upgrade Pro’s link hover colors
Course Infobar Widget
For enrolled users, this widget displays a progress bar, along with percent complete & last activity. For non-enrolled users, it displays an infobar with current status, price & a get started button (assuming you are using a default LearnDash payment method).
It is only available when using an Elementor Theme Builder template.
- For non-enrolled users, Design Upgrade Pro’s border width, radius & color will all continue to work. Elementor does not provide these options.
- For non-enrolled users, all of Design Upgrade Pro’s Hide Column options will continue to work
- For enrolled users, progress bar style, border radius, animation & hide % complete will continue to work
These are the Elementor styles that will override Design Upgrade Pro’s styles:
Elementor | Design Upgrade Pro |
---|---|
Backgrounds > Not Enrolled > Background Color | Course Page > Course Status: Background |
All text color options will override → | Course Page > Course Status: Text |
Enrolled – Progress > Progress Indicator > Color | Progress Bar > Progress Bar |
Enrolled – Progress > Progress Indicator > Background Color | Progress Bar > Progress Bar Container |
Enrolled – Progress > Progress Indicator > Height | Progress Bar > Height |
Enrolled – Progress > Percent Complete > Color | Progress Bar > Progress Bar |
Course Certificate Widget
This widget inserts a message & download certificate button to those who have earned a certificate in the course.
The Design Upgrade Pro options that affect the certificate message are found in the Alerts panel:
- Border Width
- Remove Alert Icons
- Success: Text/Icon/Button
- Success: Background
- Success: Border
Elementor provides options to override all of these styles, except for the removal of alert icons. That feature will continue to work regardless of your Elementor styles.
How to Remove Elementor Styles
If you need to remove an Elementor style and revert back to using a style you set in Design Upgrade Pro:
- For colors: click on the color to open the color picker, and then click the CLEAR button
- For number values: simply delete the number from the field so it is blank
Be sure to publish your changes with the green button at the bottom.
I realize this is a lot of information, but I hope you found it useful. I literally went through every single option of both Design Upgrade Pro & the new Elementor for LearnDash integration to find out where the conflicts were. As you’ve probably noticed by using Design Upgrade, I’m incredibly thorough & detailed-oriented.
I felt the need to comb through every single feature for my own benefit and knowledge, and I decided to share all of that with you.
If you have any questions or issues running both plugins side-by-side, feel free to post in the comments, or if you’re a current customer of Design Upgrade Pro, you can email support@escapecreative.com.
Amy
I’m sure this doesn’t belong here, but as you seem like the LearnDash pro, I wanted to see if you had an answer.
Is there a way to conditionally display quiz/test variants?
Ie….
I have a course that I’m creating. This course is for credit, however, different states have different requirements.
Student A is in state 1, they need to take a 5 question quiz and a 10 question test.
Student B is in state 2, they need to take only a 10 question test (no quiz).
Student C is in state 3, they need to take a 25 question test (no quiz).
Is there a way to accomplish this using a single course, or is the only option to re-create the same course with different quiz/tests for each version?
Dave Warfel
Unfortunately, the only option I know of is to create multiple courses. There’s no way to accomplish this with a single course. LearnDash doesn’t collect state information, nor does it provide a way to offer conditional experiences like this in the same course.
It’s possible you could hire someone to build this for you with custom code, but I suspect it would be extremely difficult, probably to the point of not being worth it even if it was possible.
Davide Volpato
Do you have a way to add the lesson feature image visible on the course content list? Thanks
Dave Warfel
Hi Davide — No, our plugin does not provide this option.
You could achieve it by editing the LearnDash template file that contains the course contents list, and using the WordPress
get_the_post_thumbnail()
function.Bit Kis
I am kind of a novice working on my learndash site, I found your tutorials are awesome and giving much confident to work harder mastering it, thank you.
What I am struggling are:
1) Is there a way to Bold or Enlarge the text size of Question line by simply CSS?
2) Is there a way to skip displaying courses and certifications which are showing below the Quiz while I am in focus mode? (thought may be I switched something on blindly)
Dave Warfel
Hi Bit Kis – For #1, yes. See the CSS below:
For #2, I don’t think that should be happening by default. I’m not sure how it’s happening at all, actually. Can you provide a screenshot please?
Aaron
Is there a way to have the “See More” button on the course list re-direct to the focus mode interface for logged-in users rather than course homepage?
Dave Warfel
Yes but it requires custom code. You could use either the LearnDash resume button or the Uncanny Toolkit resume button, and then customize the course grid template files. Patrick Kellogg made a video showing how it works, but he didn’t post the code anywhere.