Design Upgrade Compatibility with the Elementor for LearnDash Add-On

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

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.

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.