Escape Creative

Dave Warfel

<p>Widget Areas for LearnDash simply gives you more places to add custom content in LearnDash. By utilizing built-in LearnDash action hooks, we assign widget areas (also known as “sidebars”) to various locations throughout your LearnDash pages.</p>
<p><iframe loading="lazy" title="Widget Areas for LearnDash - Plugin Overview" width="750" height="422" src="https://www.youtube.com/embed/WoR177xks_k?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>Available LearnDash Widget Areas</h3>
<ul>
<li>Focus Mode: Sidebar: Above Navigation</li>
<li>Focus Mode: Sidebar: Below Navigation</li>
<li>Focus Mode: Content: Start</li>
<li>Focus Mode: Below Content</li>
<li>Course Page: Content: Start</li>
<li>Course Page: Content: End</li>
<li>Group Page: Content: Start</li>
<li>Group Page: Content: End</li>
</ul>
<p>Requires the “LearnDash 3.0” Active Template. Tested with LearnDash 4.23.</p>
<h3>How to Use</h3>
<p>Upon activating the plugin, new widget areas will appear on the <strong>Appearance > Widgets</strong> screen in your WordPress admin area. You can also access them via the Customizer (<strong>Appearance > Customize > Widgets</strong>).</p>
<p>Simply add the blocks/widgets you’d like to insert into the corresponding widget areas. Be sure to click the “Save” button at the bottom.</p>
<p>Navigate to a page that contains that widget area, refresh, and your new widgets will be there.</p>
<h3>Types of Content to Add</h3>
<p>WordPress comes with a set of default widgets, several of which might be useful. If you’re using the new block editor, all blocks will also be available to you.</p>
<ul>
<li>Add a simple <strong>Paragraph</strong> block with some basic text</li>
<li>Add an <strong>Image</strong> or <strong>Video/Embed</strong> block for more visual content</li>
<li>Add a <strong>Navigation Menu</strong> widget to insert a custom menu you’ve created</li>
<li>Add your own <strong>Custom HTML</strong> widget to embed an <code><iframe></code> or write your own code</li>
</ul>
<p><strong>TIP:</strong> You can use the <strong>LearnDash Student</strong> and <strong>LearnDash Visitor</strong> blocks to display a block’s contents only to enrolled students or unenrolled visitors.</p>
<h4>LearnDash Widgets</h4>
<p>LearnDash comes prepackaged with a few widgets, but there’s probably only one that makes sense in these widget areas.</p>
<ul>
<li>Add a <strong>Course Progress Bar</strong> to the top or bottom of your Focus Mode sidebar</li>
</ul>
<p>Feel free to experiment with the other <a href="https://learndash.com/support/kb/core/design/widgets/" rel="nofollow ugc">LearnDash widgets</a>.</p>
<h4>Elementor Templates</h4>
<p><iframe loading="lazy" title="How to Add Elementor Templates to LearnDash Widget Areas" width="750" height="422" src="https://www.youtube.com/embed/5x3Uzcs2Oz4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>If you’re using Elementor Pro, you can create a custom section and embed it anywhere on your site, including in your new LearnDash widget areas. There are two ways to do this:</p>
<ol>
<li>
<p>When you go to insert a block/widget, select the <strong>Elementor Library</strong> widget. Choose a template from the dropdown menu. Click “Save.”</p>
</li>
<li>
<p>Navigate to <strong>Templates > Saved Templates</strong>. Copy the shortcode next to the template you want to insert. Now you’ll insert a <strong>Shortcode</strong> block into the widget area, and paste the shortcode.</p>
</li>
</ol>
<p>For more information, see the article in <a href="https://elementor.com/help/how-to-use-shortcodes/" rel="nofollow ugc">Elementor’s knowledge base</a>.</p>
<h3>Widget Area CSS Class Names</h3>
<p>If you need to target the widget areas to apply custom styles using CSS, you can use the following class names.</p>
<p>All widget areas have the <code>.ldx-widget-area</code> class.</p>
<ul>
<li>Focus Mode: Sidebar: Above Navigation – <code>.ldx-widget-area.fm-nav-before</code></li>
<li>Focus Mode: Sidebar: After Navigation – <code>.ldx-widget-area.fm-nav-after</code></li>
<li>Focus Mode: Content: Start – <code>.ldx-widget-area.fm-content-start</code></li>
<li>Focus Mode: Below Content – <code>.ldx-widget-area.fm-content-bottom</code></li>
<li>Course Page: Content: Start – <code>.ldx-widget-area.course-content-start</code></li>
<li>Course Page: Content: End – <code>.ldx-widget-area.course-content-end</code></li>
<li>Group Page: Content: Start – <code>.ldx-widget-area.group-content-start</code></li>
<li>Group Page: Content: End – <code>.ldx-widget-area.group-content-end</code></li>
</ul>
<p>Example Usage:</p>
<pre><code>.ldx-widget-area.fm-nav-before {
    margin: 1em;
}
</code></pre>
<p>This would add 1em of spacing around the widget area that appears above the navigation in the Focus Mode sidebar.</p>
<p>In addition, all widgets placed inside of a widget area have a class of <code>.ldx-widget</code>.</p>
<h3>Show/Hide Widgets on Certain Devices</h3>
<p><iframe loading="lazy" title="How to Conditionally Show/Hide Widgets in LearnDash" width="750" height="422" src="https://www.youtube.com/embed/X-5I_JqB3NU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>While not a direct feature of this plugin, you can show/hide widgets on different devices using another free plugin.</p>
<ol>
<li>Install & activate the <a href="https://wordpress.org/plugins/widget-options/" rel="ugc">Widget Options</a> plugin</li>
<li>Navigate to the widget that you’d like to adjust the visibility on</li>
<li>Scroll to the bottom and click on the tab with the mobile phone</li>
<li>Choose to either show or hide on the checked devices</li>
<li>Check the appropriate devices</li>
<li>Click “Save”</li>
</ol>
<h3>Show/Hide Widgets on Specific Course/Lesson/Topic Pages</h3>
<p>Another feature of the free Widget Options plugin (mentioned above) is to only show widgets on specific course, lesson, topic or quiz pages.</p>
<ol>
<li>Install & activate the <a href="https://wordpress.org/plugins/widget-options/" rel="ugc">Widget Options</a> plugin</li>
<li>Navigate to the widget that you’d like to adjust the visibility on</li>
<li>Scroll to the bottom and click on the settings cog icon</li>
<li>Click on the <strong>Logic</strong> tab</li>
<li>In the text box, you can use the <code>is_single()</code> conditional tag to only display that widget on a specific page</li>
<li>Use the ID of the course, lesson, topic or quiz</li>
</ol>
<p><a href="https://ldx.design/find-learndash-course-id/" rel="nofollow ugc">👉 How to find the ID of LearnDash content</a></p>
<p>Example:</p>
<p>This would only display the widget on the page with an ID of <code>7</code>:</p>
<pre><code>is_single( '7' )
</code></pre>
<p>If you wanted to display a widget on multiple pages (with IDs of 1, 2 and 3), your code would look like this:</p>
<pre><code>is_single( array( 1, 2, 3 ) )
</code></pre>
<p>There are many more <a href="https://codex.wordpress.org/Conditional_Tags" rel="nofollow ugc">WordPress conditional tags</a> you can use.</p>
<h3>From within WordPress</h3>
<ol>
<li>Visit “Plugins > Add New”</li>
<li>Search for “Widget Areas for LearnDash”</li>
<li>Click the “Install” button</li>
<li>Click the “Activate” button</li>
<li>Navigate to “Appearance > Widgets” or open the Customizer to start adding blocks/widgets to your new widget areas</li>
</ol>


Widget Areas for LearnDash

Add unlimited blocks/widgets to several areas of LearnDash Focus Mode, plus course & group pages.

Stylemix

<p><strong>MasterStudy LMS Divi Modules</strong> is a deluxe Divi + MasterStudy integration. The harmonious combination of a quality MasterStudy LMS system and one of the best page builders will grant huge advantages in assembling exclusive e-learning material for your students.<br />
The plugin developed and designed specifically for creating entire course pages. With the list of embedded LMS modules in Divi builder’s library , you can extremely quickly and efficiently build a complete platform for online and offline learning courses and lessons.</p>
<p>You will be surprised how easy and simple, and most importantly, enjoyable building course and lesson pages of websites can be.</p>
<p>⭐ <a href="https://stylemixthemes.com/masterstudy/divi-modules/" rel="nofollow ugc">MasterStudy LMS Divi Modules Demo</a><br />
⭐ <a href="https://www.elegantthemes.com/marketplace/globalstudy-lms-education-theme/" rel="nofollow ugc">GlobalStudy – Education Divi Child Theme</a><br />
⭐ <a href="https://wordpress.org/plugins/masterstudy-lms-learning-management-system/" rel="ugc">MasterStudy LMS Free</a><br />
⭐ <a href="https://stylemixthemes.com/wordpress-lms-plugin/" rel="nofollow ugc">MasterStudy LMS PRO</a><br />
⭐ <a href="https://stylemixthemes.com/masterstudy/lms-plugin/?utm_source=wporg-lms&utm_medium=en&utm_campaign=2021/" rel="nofollow ugc">MasterStudy Plugin Demo</a><br />
⭐ <a href="https://docs.stylemixthemes.com/masterstudy-lms/divi-builder-integration/getting-started/" rel="nofollow ugc">Documentation</a><br />
⭐ <a href="https://www.facebook.com/groups/masterstudylms/" rel="nofollow ugc">Join Facebook Community</a></p>
<h3>What Exactly You Can Do With This Plugin</h3>
<p>Your course pages will look stylish, user-friendly, and modern. In addition to LMS modules, you can supplement them with standard widgets of the Divi builder itself. The powers of the plugin are extensive in general. With all this, you will not need to know even the initial level of programming and coding. From the first seconds you will be able to build elements, whole blocks, course grids, lists, individual course pages using drag-and-drop method. Just pick out our exclusive e-learning modules, configure it and see the final stunning results.</p>
<h3>Main Features</h3>
<p>MasterStudy LMS Divi Modules will greatly facilitate your task if you need to quickly, rapidly and on time build a high-quality and comprehensive e-Learning platform or website.</p>
<p>This is achieved by a set of available modules configured specifically for LMS content, as well as a number of plugin advantages:</p>
<ul>
<li>A set of ready-made LMS modules created according to the latest tendencies.</li>
<li>Full customization and management of each element.</li>
<li>Auto-progress content. You do not have to be afraid of losing progress under various circumstances. All filled content will be saved automatically without your participation, where you can go ahead building pages from the spot where you left off the last time.</li>
<li>CSS editor. At any time, you can write your own CSS code that will perfectly integrate into your general e-learning content. You are completely free to realize your preferences.</li>
</ul>
<h3>List of LMS Modules</h3>
<p>The following 10+ modules are available in MasterStudy LMS Divi Modules to help you create a variety of course pages.</p>
<ol>
<li>STM Course Carousel. Display your courses in a swipe format.</li>
<li>STM Courses Categories. Same as previous, but for the whole course categories.</li>
<li>STM Courses Grid. Deploy the courses in a stylish grid way.</li>
<li>STM Courses Searchbox. Let your students find any interested course quickly.</li>
<li>STM Featured Teacher. Show the privileged and honored teachers on your page.</li>
<li>STM Icon Box. Put the contemporary icon boxes on any spot of your pages.</li>
<li>STM Instructors Carousel. Display the slideshow for cycling through a series of number instructors.</li>
<li>STM Recent Courses. Add this module to pick the last courses.</li>
<li>STM Single Course Carousel. For demonstrating the content of a single course just use this slider element.</li>
</ol>
<p>The next three modules are available in <a href="https://stylemixthemes.com/wordpress-lms-plugin/" rel="nofollow ugc">MasterStudy LMS Pro</a> due to included tremendous addons.</p>
<ol>
<li>STM Certificate Checker. The special field will verify the obtained certificates by inserting a unique code. </li>
<li>STM Course Bundles. Merge the defined courses into one pack and sell them. This form will display the boxes with prepared courses bundles.</li>
<li>STM Google Classrooms. This module will line up imported Google classes.</li>
</ol>
<p>Take a look at collected built LMS modules in live to view and check them – <a href="https://stylemixthemes.com/masterstudy/divi-modules/" rel="nofollow ugc">MasterStudy LMS Divi Modules Demo</a>.</p>
<h3>Why MasterStudy LMS Divi Modules is the best option for you</h3>
<p>In our world of digital innovation, online learning is rapidly gaining popularity and becoming more relevant than ever.<br />
MasterStudy LMS Divi Modules is ideal for those looking to deploy an eLearning website in a short time. At the same time, this is an absolutely free option with high top quality. In other words, the plugin is suitable for absolutely everyone, from independent developers and businessmen to small and large e-learning facilities.</p>
<h3>How to start to use this plugin</h3>
<p>Make sure you have an installed and activated <a href="https://wordpress.org/plugins/masterstudy-lms-learning-management-system/" rel="ugc">MasterStudy LMS</a> and have Divi Page builder as well.</p>
<p>Important! For using MasterStudy LMS Divi Modules you need to have preliminary:</p>
<ol>
<li>MasterStudy LMS Free</li>
<li>Divi Page Builder </li>
</ol>
<p>Without these both pluigns MasterStudy LMS Divi Modules will not work.</p>
<p>After installing MasterStudy LMS Divi Modules you are able to start using LMS modules (widgets) immediately in Divi Insert Module section.</p>
<p>For more details please take a view of our <a href="https://docs.stylemixthemes.com/masterstudy-lms/divi-builder-integration/getting-started/" rel="nofollow ugc">documentation</a>.</p>
<h3>Our Alternative LMS Solution</h3>
<p>Check out <a href="https://www.elegantthemes.com/marketplace/globalstudy-lms-education-theme/" rel="nofollow ugc">GlobalStudy</a>, full-equipped WordPress education child theme designed for Divi.</p>


MasterStudy LMS Divi Modules

MasterStudy LMS Divi Modules is a deluxe Divi + MasterStudy integration. The harmonious combination of a quality MasterStudy LMS system and one of the …

Widget Areas for LearnDash vs MasterStudy LMS Divi Modules