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.

UserElements

<p>Course Layouts – Elementor Addon for TutorLMS is a comprehensive extension that transforms your TutorLMS course display with advanced grid layouts, intelligent filtering, real-time search, and SEO-optimized schema markup through powerful Elementor widgets.</p>
<h4>Core Features</h4>
<ul>
<li><strong>Course Directory Grid Widget</strong>: Display TutorLMS courses in beautiful, customizable grid layouts with extensive styling options</li>
<li><strong>Course Categories Grid Widget</strong>: Show course categories in responsive grid layouts with customizable appearance</li>
<li><strong>Advanced Filtering System</strong>: Filter courses by category, level, instructor, tags, price range, rating, and duration</li>
<li><strong>Real-time AJAX Search</strong>: Instant search functionality with debounced input for optimal performance</li>
<li><strong>Multiple Pagination Options</strong>: Numbered pagination, load more buttons, and infinite scroll capabilities</li>
<li><strong>Responsive Design</strong>: Fully responsive layouts that adapt perfectly to desktop, tablet, and mobile devices</li>
<li><strong>SEO Schema Markup</strong>: Automatic generation of structured data for better search engine visibility</li>
<li><strong>Keyboard Navigation</strong>: Full keyboard accessibility support for enhanced user experience</li>
<li><strong>URL Parameter Support</strong>: Filter state preserved in URL for bookmarking and sharing</li>
</ul>
<h4>Widget Features</h4>
<p><strong>Course Directory Grid Widget:</strong><br />
* Multiple layout types (grid, list, masonry)<br />
* Customizable columns (1-6 columns with responsive breakpoints)<br />
* Course image display with hover effects<br />
* Course title, excerpt, and meta information display<br />
* Price, rating, duration, and lesson count display<br />
* Instructor information and enrollment count<br />
* Course categories, level, and tags display<br />
* Course benefits and progress indicators<br />
* Extensive styling controls for all elements</p>
<p><strong>Course Categories Grid Widget:</strong><br />
* Responsive category grid layouts<br />
* Category image, title, and description display<br />
* Course count per category<br />
* Customizable styling and hover effects<br />
* Sorting options (name, count, date)</p>
<h3>Tutorials & Guides</h3>
<ul>
<li><a href="https://www.userelements.com/list/tutor-lms-website-examples/" rel="nofollow ugc">17 Awesome Websites Made with Tutor LMS</a></li>
<li><a href="https://www.userelements.com/tutor-lms-shortcodes/" rel="nofollow ugc">The Complete List of Tutor LMS Shortcodes and How to Use Them – Tutor LMS</a></li>
<li><a href="https://www.userelements.com/sending-reminder-emails-to-inactive-students-tutor-lms/" rel="nofollow ugc">Sending Reminder Emails to Inactive Students – Tutor LMS</a></li>
<li><a href="https://www.userelements.com/tutor-lms-get-student-information-in-php/" rel="nofollow ugc">Tutor LMS – Get Student Information in PHP</a></li>
<li><a href="https://www.userelements.com/remove-tutor-reviews/" rel="nofollow ugc">How to Hide, Remove or Disable Reviews or Star Rating in Tutor LMS</a></li>
<li><a href="https://userelements.com/create-user-directory-elementor/" rel="nofollow ugc">Create a User Directory with Elementor</a></li>
<li><a href="https://www.userelements.com/list/best-wordpress-lms-plugins/" rel="nofollow ugc">Best WordPress LMS Plugins to Create and Sell Courses Online</a></li>
</ul>
<h3>More Plugins by UserElements</h3>
<ul>
<li><a href="https://www.userelements.com/mightymenu-tutorlms/" rel="nofollow ugc">Personalized User Menu for TutorLMS</a></li>
<li><a href="https://www.userelements.com/wp-user-data/" rel="nofollow ugc">WP User Data</a></li>
<li><a href="https://www.userelements.com/user-broadcast-email/" rel="nofollow ugc">User Broadcast Email</a></li>
<li><a href="https://wordpress.org/plugins/product-table-for-elementor" rel="ugc">Elementor Product Table for WooCommerce</a></li>
</ul>
<h3>Support</h3>
<p>For technical support, feature requests, or general questions, please visit userelements.com or create a support ticket in the WordPress.org plugin forum.</p>


Course Layouts – Elementor Addon for TutorLMS

Advanced course grid layouts, filtering, and search functionality for TutorLMS courses using Elementor widgets with SEO schema markup support.

Widget Areas for LearnDash vs Course Layouts – Elementor Addon for TutorLMS