{"id":3167,"date":"2019-09-25T23:48:37","date_gmt":"2019-09-26T03:48:37","guid":{"rendered":"https:\/\/learndash.com\/support\/docs\/guides\/page-builders\/"},"modified":"2025-01-21T18:52:22","modified_gmt":"2025-01-21T23:52:22","password":"","slug":"page-builders-2","status":"publish","type":"docs","link":"https:\/\/learndash.com\/support\/kb\/resources\/faqs\/page-builders-2\/","title":{"rendered":"Page Builders + LearnDash"},"content":{"rendered":"\n<p>One of the most common set of questions our support team gets asked is how LearnDash works with page builders.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Which page builder plugins are compatible with LearnDash?<\/li>\n\n\n\n<li>What&#8217;s the best page builder to use?<\/li>\n\n\n\n<li>How do I customize the layout of my LearnDash courses, lessons and topics with a page builder?<\/li>\n\n\n\n<li>Can I use a free page builder or do I need the pro version?<\/li>\n<\/ul>\n\n\n\n<p>In this comprehensive guide, we&#8217;ll answer all of those questions, as well as walk you through exactly <em>how<\/em> to use specific page builders to best design your LearnDash courses. We&#8217;ll focus on three of the most popular WordPress page builders:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learndash.com\/elementor\">Elementor Pro<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.wpbeaverbuilder.com\/\">Beaver Builder<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.learndash.com\/divi\">Divi<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"note has-theme-palette-3-color has-theme-palette-7-background-color has-text-color has-background has-link-color wp-elements-e8b499bdf5f1442e45f4ab1b83d671a6\"><strong>NOTE<\/strong>: While we can work with the limited features of the free version of these page builders, especially Elementor, there will be certain limitations to the functionality. If you&#8217;re experiencing problems or are not seeing any functionality that you need from the below documentation, it&#8217;s likely that you need to upgrade to the Pro version. Elementor Pro is recommended if you plan to integrate fully with LearnDash, along with the other pro versions of the other page builders.<\/p>\n\n\n\n<p>&nbsp;Before we dive into the specifics of each, it&#8217;s important to understand what a page builder can and cannot do. We&#8217;ll also cover some basics that apply to how all page builders interface with LearnDash, no matter which one you choose to use.<\/p>\n\n\n\n<p class=\"note has-theme-palette-3-color has-theme-palette-7-background-color has-text-color has-background has-link-color wp-elements-83221966906431775847bb7489525d3d\"><strong>NOTE<\/strong> This guide assumes you are using the <a href=\"https:\/\/learndash.com\/support\/docs\/core\/settings\/general-settings\/#active_template\">LearnDash 3.0 active template<\/a>. With the exception of Elementor (which requires LearnDash 3.0), most of the concepts also apply to the Legacy template, but there could be some inconsistencies. We&#8217;ll also be using the new WordPress editor (aka: Gutenberg). Screenshots will look different if you&#8217;re using the Classic Editor plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-page-builders-work\">How Page Builders Work<\/h2>\n\n\n\n<p>An entire book could be written on this topic, but that&#8217;s obviously not the focus of this article. However, there are a few basic things you should understand about how page builders work.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Almost all page builders let you design the main content of a page, post, course, lesson or other custom post type. Essentially, the same content that you would add via the default WordPress editor.This does not include your site&#8217;s header, sidebars or footer.<\/li>\n\n\n\n<li>Most pro versions or premium page builders do let you design your site&#8217;s header, sidebars and footer. (Elementor Pro&#8217;s Theme Builder, Beaver Themer, etc.)<\/li>\n\n\n\n<li>All page builders come with their own set of elements that you can use to design and lay out your content (columns, headings, lists, tables, icons, photo galleries, etc.).\n<ul class=\"wp-block-list\">\n<li>These differ depending on the page builder you&#8217;re using, as well as the free vs pro version of that particular builder.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Keeping in mind the type of content a page builder has control over, let&#8217;s talk about how LearnDash content is added to your site&#8217;s pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-learndash-adds-content-to-the-page\">How LearnDash Adds Content to the Page<\/h2>\n\n\n\n<p>There are several ways LearnDash content gets added to a page. The differences are important to understand, as they directly apply to whether or not they can be controlled or modified via a page builder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dynamic-content\">Dynamic Content<\/h3>\n\n\n\n<p>Dynamic content refers to content that you, the site owner, does not directly add in the WordPress editor. Based on the type of page that a user is viewing (course vs. lesson vs. topic), as well as how that course is configured, LearnDash automatically adds content to the page.<\/p>\n\n\n\n<p>Examples of dynamically added LearnDash content include, but are not limited to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>On a course page:<\/strong> For non-enrolled users, the current status, price and get started sections at the top. For enrolled users, the date of last activity, progress bar and status indicator.<\/li>\n\n\n\n<li><strong>On a course page:<\/strong> The course content list at the bottom, which contains all lessons, topics and quizzes assigned to that course<\/li>\n\n\n\n<li><strong>On a lesson page:<\/strong> The list of topics assigned to that lesson<\/li>\n\n\n\n<li><strong>On lesson\/topic pages:<\/strong> The assignments area, which provides a way for the user to upload assignments, and lists all uploaded assignments<\/li>\n\n\n\n<li><strong>In Focus Mode:<\/strong> The header, which includes a logo (optional), course progress, navigation buttons, and an avatar with dropdown menu<\/li>\n\n\n\n<li><strong>In Focus Mode:<\/strong> The sidebar, which contains the course title and navigation links<\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items3167_05d7ed-ec:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items3167_05d7ed-ec ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:var(--global-kb-spacing-lg, 3rem);margin-right:0px;margin-bottom:var(--global-kb-spacing-lg, 3rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items3167_05d7ed-ec ul.kt-svg-icon-list{grid-row-gap:18px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items3167_05d7ed-ec .kb-svg-icon-wrap{font-size:27px;color:var(--global-palette1, #3182CE);}.wp-block-kadence-iconlist.kt-svg-icon-list-items3167_05d7ed-ec ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:18px;}.kt-svg-icon-list-items3167_05d7ed-ec ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items3167_05d7ed-ec kt-svg-icon-list-columns-1 alignnone kt-list-icon-aligntop\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-3167_9b19fd-ef .kt-svg-icon-list-single{color:#38ac39 !important;}.kt-svg-icon-list-item-3167_9b19fd-ef .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-3167_9b19fd-ef\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_check kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>You CAN <\/strong>edit LearnDash dynamic content with Elementor (using our <a href=\"https:\/\/learndash.com\/support\/docs\/add-ons\/compatibility\/#elementor_integration\">compatibility integration<\/a>)<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-3167_96afcc-4f .kt-svg-icon-list-single{color:#ee1556 !important;}.kt-svg-icon-list-item-3167_96afcc-4f .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-3167_96afcc-4f\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_x kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>You cannot <\/strong>edit LearnDash dynamic content with Divi<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-3167_5369db-98 .kt-svg-icon-list-single{color:#ee1556 !important;}.kt-svg-icon-list-item-3167_5369db-98 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-3167_5369db-98\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_x kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>You cannot<\/strong> edit LearnDash dynamic content with BeaverBuilder<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<p class=\"note has-theme-palette-8-color has-theme-palette-1-background-color has-text-color has-background has-link-color wp-elements-6eca25b6d7c942d0894f9fc4c400faf5\"><strong>DEVELOPERS<\/strong> If you&#8217;re comfortable with HTML and PHP, you can override LearnDash template files. This allows you to customize the dynamic content, as well as change where on the page it gets inserted. <em>Technical experience required.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-your-own-course-lesson-topic-amp-quiz-content\">Your Own Course, Lesson, Topic &amp; Quiz Content<\/h3>\n\n\n\n<p>This refers to the content which you, the site owner, have direct control over. For all course, lesson, topic and quiz pages, you can freely add and edit whatever content you&#8217;d like.<\/p>\n\n\n\n<p>If you&#8217;re using a page builder, you can design this content with your page builder of choice.<\/p>\n\n\n\n<p>However, LearnDash determines <em>where on the page<\/em> it will go.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2240\" height=\"1740\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-page-builders-your-own-content-2.jpg\" alt=\"Your custom content in LearnDash focus mode\" class=\"wp-image-3176\" style=\"width:853px;height:auto\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-page-builders-your-own-content-2.jpg 2240w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-page-builders-your-own-content-2-400x311.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-page-builders-your-own-content-2-768x597.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-page-builders-your-own-content-2-800x621.jpg 800w\" sizes=\"auto, (max-width: 2240px) 100vw, 2240px\" \/><\/figure><\/div>\n\n\n<p>For example, on a lesson page (using <a href=\"https:\/\/learndash.com\/support\/docs\/guides\/focus-mode\/\">Focus Mode<\/a>), your own content will always be placed after the breadcrumbs and before the next and previous lesson buttons. If you&#8217;ve added materials to the lesson, two tabs will be inserted dynamically:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lesson<\/li>\n\n\n\n<li>Materials<\/li>\n<\/ul>\n\n\n\n<p>Your own lesson content will be added directly below the &#8220;Lesson&#8221; tab.<\/p>\n\n\n\n<p>Keep in mind, only your own content, added in this specific area, can be edited with a page builder. All other page elements in Focus Mode are controlled solely by LearnDash (or by using one of two popular third-party LearnDash design plugins, <a href=\"https:\/\/escapecreative.com\/products\/design-upgrade-learndash\/\">Design Upgrade Pro<\/a> or <a href=\"https:\/\/www.learndash.com\/customizer\">Visual Customizer<\/a>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-learndash-blocks\">LearnDash Blocks<\/h3>\n\n\n\n<p>LearnDash blocks provide a way for you to add specific LearnDash information to the main content area of a page, but only if you&#8217;re using the latest version of the WordPress editor (aka: Gutenberg). <strong>Blocks only work within Gutenberg.<\/strong><\/p>\n\n\n\n<p>A few examples of LearnDash blocks include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>LearnDash Profile: displays a user&#8217;s profile and registered courses<\/li>\n\n\n\n<li>LearnDash Course List: displays a list of courses, or a grid if using the Course Grid add-on<\/li>\n\n\n\n<li>LearnDash Course Progress: displays a progress bar showing the user&#8217;s progress in that course<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"968\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2018\/09\/learndash-blocks-list-in-editor.jpg\" alt=\"List of LearnDash blocks in editor\" class=\"wp-image-1985\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2018\/09\/learndash-blocks-list-in-editor.jpg 902w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2018\/09\/learndash-blocks-list-in-editor-373x400.jpg 373w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2018\/09\/learndash-blocks-list-in-editor-768x824.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2018\/09\/learndash-blocks-list-in-editor-745x800.jpg 745w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure><\/div>\n\n\n<p>When using a page builder, there is no way to add a LearnDash block to your page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-learndash-shortcodes\">LearnDash Shortcodes<\/h3>\n\n\n\n<p>Every LearnDash block has an accompanying shortcode. A shortcode is a simple piece of text that outputs specific LearnDash information. Many shortcodes come with parameters (or options) that let you customize which information is displayed. See our <a href=\"https:\/\/learndash.com\/support\/docs\/core\/shortcodes-blocks\/\">complete guide on LearnDash shortcodes<\/a>.<\/p>\n\n\n\n<p>A shortcode looks like this:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"[ld_profile]\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">ld_profile<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This example outputs a user profile, complete with their profile image, name, some basic stats, and a list of courses they&#8217;re enrolled in, along with their progress in each.<\/p>\n\n\n\n<p>The big advantage of shortcodes over blocks is that they can be used with all page builders.<\/p>\n\n\n\n<p>Exactly how to use LearnDash shortcodes depends on which page builder you are using, which we&#8217;ll go into more detail below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-learndash-widgets\">LearnDash Widgets<\/h3>\n\n\n\n<p>Widgets are a core part of WordPress. They are pieces of functionality that can easily be added to any WordPress sidebar area. LearnDash provides a handful of widgets as well. LearnDash widgets provide the ability to add course navigation, course lists, and other various course elements. We have a <a href=\"https:\/\/learndash.com\/support\/docs\/core\/widgets\/\">complete guide on widgets here<\/a>.<\/p>\n\n\n\n<p>The following page builders allow the use of LearnDash widgets:<\/p>\n\n\n\n<p><strong> Elementor:<\/strong> Free and Pro<br><strong> Beaver Builder:<\/strong> Free and Pro<br><strong>Divi:<\/strong> No (you can add entire sidebar areas but not individual widgets)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-an-exception-focus-mode\">An Exception: Focus Mode<\/h3>\n\n\n\n<p>Focus Mode works a bit differently than the rest of the pages on your site. The same ideas for how content is added still apply, but when Focus Mode is enabled, your site&#8217;s normal header, sidebar and footer are removed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The header is dynamic content, not editable with a page builder<\/li>\n\n\n\n<li>The sidebar course navigation is dynamic content, not editable with a page builder<\/li>\n\n\n\n<li>The page title, progress meter and breadcrumbs are dynamic content, not editable with a page builder<\/li>\n\n\n\n<li>The lesson, topic and quiz content (below the breadcrumbs) is your own content, and this <strong>is<\/strong> editable by a page builder<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-summary\">Summary<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dynamically added by LearnDash is <b>only <\/b>editable with Elementor (using our <a href=\"https:\/\/learndash.com\/support\/docs\/add-ons\/compatibility\/#elementor_integration\">compatibility add-on<\/a>)<\/li>\n\n\n\n<li>Focus Mode design elements cannot be edited with page builders<\/li>\n\n\n\n<li>All content added by you, via the WordPress editor, is editable with page builders<\/li>\n\n\n\n<li>When designing with a page builder, use LearnDash shortcodes and widgets (not blocks)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-choosing-a-theme\">Choosing a Theme<\/h2>\n\n\n\n<p>If you want to use a page builder with LearnDash, the theme you choose will have some impact on how you can design your content. Just about all WordPress themes work with page builders (and with LearnDash), but some work <em>better<\/em>.<\/p>\n\n\n\n<p>In general, themes that explicitly provide page builder support will give you more control over the design of your courses. A few popular themes that have been specifically designed for use with page builders are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/support.learndash.com\/astra-theme\">Astra<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/bit.ly\/1RPT586\">GeneratePress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/oceanwp.org\/\">OceanWP<\/a><\/li>\n<\/ul>\n\n\n\n<p>You don&#8217;t have to use one of these themes. All WordPress themes (built to the proper standards) work with LearnDash. We just wanted to highlight the ones that give you the most flexibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-general-page-layout\">General Page Layout<\/h3>\n\n\n\n<p>Using one of the aforementioned themes provides you with some advantages over other themes, particularly when it comes to using a page builder.<\/p>\n\n\n\n<p class=\"note has-theme-palette-3-color has-theme-palette-7-background-color has-text-color has-background has-link-color wp-elements-c5eb479df54de175a5d2c52e48d3e704\"><strong>NOTE<\/strong>: These settings vary from theme to theme. Not all themes will have these options, but the themes mentioned above have some variation of them.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content width:<\/strong> Multiple options are typically available for narrow, wide, full-width and\/or 100% stretched<\/li>\n\n\n\n<li><strong>Sidebars:<\/strong> You can choose to enable\/disable the sidebar on individual pages, or choose which side it should appear (right or left)<\/li>\n\n\n\n<li><strong>Disable page title:<\/strong> This allows you to hide the default page title that is included at the top of the page, and add your own using a page builder<\/li>\n\n\n\n<li><strong>Disable featured image:<\/strong> This allows you to hide the featured image that is usually displayed at the top of your course page<\/li>\n<\/ul>\n\n\n\n<p>Here are a few examples:<\/p>\n\n\n<div class=\"wp-block-image alignnone size-medium wp-image-3177\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a82021&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"658\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/astra-page-settings-gutenberg.jpg\" alt=\"Astra page settings\" class=\"wp-image-3177\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/astra-page-settings-gutenberg.jpg 620w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/astra-page-settings-gutenberg-377x400.jpg 377w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n<div class=\"wp-block-image alignnone wp-image-3178 size-full\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a8261b&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1532\" height=\"480\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/generatepress-page-settings-gutenberg.jpg\" alt=\"GeneratePress page settings\" class=\"wp-image-3178\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/generatepress-page-settings-gutenberg.jpg 1532w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/generatepress-page-settings-gutenberg-400x125.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/generatepress-page-settings-gutenberg-768x241.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/generatepress-page-settings-gutenberg-800x251.jpg 800w\" sizes=\"auto, (max-width: 1532px) 100vw, 1532px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n<div class=\"wp-block-image alignnone wp-image-3179 size-full\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a82b54&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1524\" height=\"918\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/oceanwp-page-settings-gutenberg.jpg\" alt=\"OceanWP page settings\" class=\"wp-image-3179\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/oceanwp-page-settings-gutenberg.jpg 1524w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/oceanwp-page-settings-gutenberg-400x241.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/oceanwp-page-settings-gutenberg-768x463.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/oceanwp-page-settings-gutenberg-800x482.jpg 800w\" sizes=\"auto, (max-width: 1524px) 100vw, 1524px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p class=\"note has-theme-palette-3-color has-theme-palette-7-background-color has-text-color has-background has-link-color wp-elements-8243f8f1c167cb9c501cea4ded42eefa\"><strong>NOTE<\/strong>: If you want to control your layout &amp; spacing completely with a page builder, you probably want to set your page settings to use no sidebar, and a content width of &#8220;full&#8221; or &#8220;stretched.&#8221;<\/p>\n\n\n\n<p>Before we get into specific examples with each page builder, let&#8217;s make sure your builder is enabled for use with LearnDash.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-enable-page-builder-for-learndash-post-types\">Enable Page Builder for LearnDash Post Types<\/h2>\n\n\n\n<p>Before you can use a page builder with LearnDash, you need to ensure that you&#8217;ve enabled the page builder to work with LearnDash custom post types. If you can&#8217;t find a way to edit a piece of LearnDash content using your page builder, try following these steps to enable it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elementor\">Elementor<\/h3>\n\n\n\n<p>See <a href=\"https:\/\/learndash.com\/support\/docs\/add-ons\/learndash-elementor-addon\/\">https:\/\/learndash.com\/support\/docs\/add-ons\/learndash-elementor-addon\/<\/a> for more information regarding our LearnDash Elementor integration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-beaver-builder\">Beaver Builder<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to Settings &gt; Beaver Builder<\/li>\n\n\n\n<li>Click on  Post Types <\/li>\n\n\n\n<li>Check the boxes for Courses, Lesson, Topics and Quizzes (or just select the ones you need)<\/li>\n\n\n\n<li>Click  Save Post Types <\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a83b56&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1802\" height=\"1284\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-enable-learndash-post-types.jpg\" alt=\"Enable LearnDash post types in Beaver Builder\" class=\"wp-image-3192\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-enable-learndash-post-types.jpg 1802w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-enable-learndash-post-types-400x285.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-enable-learndash-post-types-768x547.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-enable-learndash-post-types-800x570.jpg 800w\" sizes=\"auto, (max-width: 1802px) 100vw, 1802px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-divi\">Divi<\/h3>\n\n\n\n<p>By default, Divi should be enabled for courses &amp; lessons, but if you want to use it with topics and\/or quizzes, you&#8217;ll need to enable it.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to DIVI &gt; Plugin Options<\/li>\n\n\n\n<li>Click on the  Post Types Integration  tab<\/li>\n\n\n\n<li>Click the post types for Topics and Quizzes (or just select the ones you need)<\/li>\n\n\n\n<li>Click  Save Settings <\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a84a88&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2514\" height=\"1252\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-enable-learndash-post-types.jpg\" alt=\"Enable LearnDash post types in Divi\" class=\"wp-image-3202\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-enable-learndash-post-types.jpg 2514w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-enable-learndash-post-types-400x199.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-enable-learndash-post-types-768x382.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-enable-learndash-post-types-800x398.jpg 800w\" sizes=\"auto, (max-width: 2514px) 100vw, 2514px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p>If using Divi as a theme, please follow the below steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to <strong>Divi > Theme Options<\/strong><\/li>\n\n\n\n<li>Click on the \u201cBuilder\u201d Tab, then go to the \u201cPost Types Integration\u201d tab<\/li>\n\n\n\n<li>Click to enable the post types for Topics &amp; Quizzes (or just select the ones you need)<\/li>\n\n\n\n<li>Click \u201cSave Changes\u201d<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcENtza38ePZSpHeU_4HHmoovZXGzwPqWuXGgo_xaiOs237rPCLQhuwGcGoniIGFamx1ofFtBEleEmdMYFmErglNv9mAC5i-zO8c7ollFN69FNMikQw7eSeC1XsKWE1E-ZcHfD3?key=V5tONnbYKhxQNIssE1mLTg\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-using-shortcodes-with-page-builders\">Using Shortcodes with Page Builders<\/h2>\n\n\n\n<p>Shortcodes are one of two ways you can add LearnDash-specific content using a page builder. Let&#8217;s go through exactly how to add use shortcodes in each page builder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elementor-0\">Elementor<\/h3>\n\n\n\n<p>See <a href=\"https:\/\/learndash.com\/support\/docs\/add-ons\/learndash-elementor-addon\/\">https:\/\/learndash.com\/support\/docs\/add-ons\/learndash-elementor-addon\/<\/a> for more information regarding our LearnDash Elementor integration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-beaver-builder-0\">Beaver Builder<\/h3>\n\n\n\n<p>When you go to edit a piece of LearnDash content, you&#8217;ll have a  Launch Beaver Builder  button where your content would normally appear. Click this button to open your content with Beaver Builder.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a858cc&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2066\" height=\"1246\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-beaver-builder-button.jpg\" alt=\"Edit LearnDash content with Beaver Builder button\" class=\"wp-image-3194\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-beaver-builder-button.jpg 2066w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-beaver-builder-button-400x241.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-beaver-builder-button-768x463.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-beaver-builder-button-800x482.jpg 800w\" sizes=\"auto, (max-width: 2066px) 100vw, 2066px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>You won&#8217;t see any dynamically added LearnDash content in your preview until you publish the course. The content you add will be placed in-between LearnDash&#8217;s dynamic content.<\/p>\n\n\n\n<p>To add a shortcode to your page with Beaver Builder:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Locate the  HTML  module in the left panel<\/li>\n\n\n\n<li>Click, hold and drag the module somewhere on the page<\/li>\n\n\n\n<li>In the left panel, type any <a href=\"https:\/\/learndash.com\/support\/docs\/core\/shortcodes-blocks\/\">LearnDash shortcode<\/a><\/li>\n\n\n\n<li>Click the  Save  button at the bottom to preview it<\/li>\n\n\n\n<li>When you&#8217;re finished editing, be sure to click the  Done  button in the top-right corner, and then either  Publish  or  Update  to save your changes<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a86288&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"914\" height=\"682\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-add-learndash-shortcode-animation-min.gif\" alt=\"Add LearnDash shortcode with Beaver Builder\" class=\"wp-image-3195\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-divi-0\">Divi<\/h3>\n\n\n\n<p>When you go to edit a piece of LearnDash content (course, lesson, topic or quiz), you&#8217;ll see a  Use The Divi Builder  button at the top. Click this button to open your content with Divi.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a869a8&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1774\" height=\"978\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-divi-button.jpg\" alt=\"Launch Divi builder on LearnDash content\" class=\"wp-image-3204\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-divi-button.jpg 1774w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-divi-button-400x221.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-divi-button-768x423.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/learndash-launch-divi-button-800x441.jpg 800w\" sizes=\"auto, (max-width: 1774px) 100vw, 1774px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>When you first launch Divi, you might be prompted with a few options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Build from Scratch<\/li>\n\n\n\n<li>Choose a Premade Layout<\/li>\n\n\n\n<li>Clone Existing Page<\/li>\n<\/ul>\n\n\n\n<p>Choose the option that best meets your needs. You will then be sent to Divi&#8217;s visual builder screen.<\/p>\n\n\n\n<p>To add a shortcode to your page with Divi:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the green <strong>+<\/strong> icon to add a new row<\/li>\n\n\n\n<li>Choose the the layout of your row<\/li>\n\n\n\n<li>Then choose the  Code  module <em>(the Text module will also work)<\/em><\/li>\n\n\n\n<li>Type in any LearnDash shortcode<\/li>\n\n\n\n<li>Click the green checkmark icon<\/li>\n\n\n\n<li>When you&#8217;re finished editing, be sure to click the three dots at the bottom of the screen, and then the  Save  button<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a87657&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"568\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-add-learndash-shortcode-animation-min.gif\" alt=\"Add LearnDash shortcode using Divi\" class=\"wp-image-3205\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-using-widgets-with-page-builders\">Using Widgets with Page Builders<\/h2>\n\n\n\n<p>In addition to shortcodes, widgets are another method of adding LearnDash content via a page builder. Let&#8217;s cover the specifics of each page builder that allows for the use of LearnDash widgets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elementor-1\">Elementor<\/h3>\n\n\n\n<p>See <a href=\"https:\/\/learndash.com\/support\/docs\/add-ons\/learndash-elementor-addon\/\">https:\/\/learndash.com\/support\/docs\/add-ons\/learndash-elementor-addon\/<\/a> for more information regarding our LearnDash Elementor integration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-beaver-builder-1\">Beaver Builder<\/h3>\n\n\n\n<p>The same widgets mentioned above (for Elementor) are also available for Beaver Builder.<\/p>\n\n\n\n<p>To add a LearnDash widget to your page with Beaver Builder:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click, hold and drag the widget somewhere on the page<\/li>\n\n\n\n<li>In the left panel, either switch your module group to &#8220;WordPress Widgets&#8221; or use the search feature<br><figure><a href=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-locate-learndash-widgets-animation-min.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"304\" height=\"348\" class=\"alignnone size-full wp-image-3196\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-locate-learndash-widgets-animation-min.gif\" alt=\"Locate LearnDash widgets in Beaver Builder\"><\/a><\/figure><\/li>\n\n\n\n<li><em>(optional)<\/em> In the left panel, give your widget a title and adjust the available settings<\/li>\n\n\n\n<li>When you&#8217;re finished editing, be sure to click the Done  button in the top-right corner, and then either  Publish  or  Update&#8221;  to save your changes.<\/li>\n\n\n\n<li>Locate the widget you want to add<\/li>\n<\/ol>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a883d2&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"586\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-add-learndash-widget-animation-min.gif\" alt=\"Add LearnDash widget using Beaver Builder\" class=\"wp-image-3197\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-basic-content-editing-with-page-builders\">Basic Content Editing with Page Builders<\/h2>\n\n\n\n<p>Now that you know how to add LearnDash shortcodes and widgets to your favorite page builder, let&#8217;s talk about a few basic editing rules that apply to all page builders when you&#8217;re working with LearnDash.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conditionally-show-hide-content\">Conditionally Show\/Hide Content<\/h3>\n\n\n\n<p>LearnDash provides a few shortcodes you can use to show content to a specific type of user:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"[student] and [\/student]\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">student<\/span><span style=\"color: #D8DEE9FF\">] <\/span><span style=\"color: #D8DEE9\">and<\/span><span style=\"color: #D8DEE9FF\"> [<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #D8DEE9\">student<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<p>&#8211; Only visible to someone who <strong class=\"text-positive\">is<\/strong> registered for the course<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"[visitor] and [\/visitor]\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">visitor<\/span><span style=\"color: #D8DEE9FF\">] <\/span><span style=\"color: #D8DEE9\">and<\/span><span style=\"color: #D8DEE9FF\"> [<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #D8DEE9\">visitor<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>&#8211; Only visible to someone who <strong class=\"text-negative\">is not<\/strong> registered for the course<\/p>\n\n\n\n<p>These can be especially useful for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>providing registered students with student-only content on the course page<\/li>\n\n\n\n<li>displaying a sign-up\/purchase message to non-registered users when they&#8217;re viewing <a href=\"https:\/\/learndash.com\/support\/docs\/guides\/sample-lessons\/\">sample lessons<\/a><\/li>\n\n\n\n<li>&#8230;or any number of other creative applications<\/li>\n<\/ul>\n\n\n\n<p>Unlike other LearnDash shortcodes, these cannot be used within a shortcode widget. <strong>They must be used within a text editor or HTML widget.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Elementor:<\/strong> Use the  Text Editor  or  HTML  widget<\/li>\n\n\n\n<li><strong>Beaver Builder:<\/strong> Use the  Text Editor  or  HTML  widget<\/li>\n\n\n\n<li><strong>Divi:<\/strong> Use the  Text  or  Code  widget<\/li>\n<\/ul>\n\n\n\n<p>You can place any content you&#8217;d like between the shortcodes, just make sure it is all contained within the same element. You <strong>cannot<\/strong> have an opening <code>[student]<\/code> shortcode in one element, add some content in subsequent elements, and then place your closing <code>[\/student]<\/code> shortcode in another element.<\/p>\n\n\n\n<p class=\"note has-theme-palette-3-color has-theme-palette-7-background-color has-text-color has-background has-link-color wp-elements-fb5ea872e288602f47e4492d71b7ce22\"><strong>NOTE<\/strong>:  If you&#8217;re using the free Uncanny LearnDash Toolkit, you can also use the <a href=\"https:\/\/www.uncannyowl.com\/knowledge-base\/show-hide-content\/\">[uo_show] shortcode<\/a> to show content to logged in vs. logged out users (regardless of course enrollment status).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-elementor-example\">Elementor Example<\/h4>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a89a5d&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image alignnone wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2378\" height=\"1376\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/elementor-student-visitor-shortcodes-example.jpg\" alt=\"Elementor student\/visitor shortcodes example\" class=\"wp-image-3190\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/elementor-student-visitor-shortcodes-example.jpg 2378w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/elementor-student-visitor-shortcodes-example-400x231.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/elementor-student-visitor-shortcodes-example-768x444.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/elementor-student-visitor-shortcodes-example-800x463.jpg 800w\" sizes=\"auto, (max-width: 2378px) 100vw, 2378px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-beaver-builder-example\">Beaver Builder Example<\/h4>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a8a00a&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image alignnone wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1982\" height=\"1402\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-student-visitor-shortcodes-example.jpg\" alt=\"Beaver Builder student\/visitor shortcode example\" class=\"wp-image-3200\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-student-visitor-shortcodes-example.jpg 1982w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-student-visitor-shortcodes-example-400x283.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-student-visitor-shortcodes-example-768x543.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/beaver-builder-student-visitor-shortcodes-example-800x566.jpg 800w\" sizes=\"auto, (max-width: 1982px) 100vw, 1982px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">We recommend using the &#8220;Text Editor&#8221; module in Beaver Builder<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-divi-example\">Divi Example<\/h4>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9144a8a5a2&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image alignnone wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1568\" height=\"1404\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-learndash-student-visitor-shortcode-example.jpg\" alt=\"Example student\/visitor shortcode in Divi\" class=\"wp-image-3206\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-learndash-student-visitor-shortcode-example.jpg 1568w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-learndash-student-visitor-shortcode-example-400x358.jpg 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-learndash-student-visitor-shortcode-example-768x688.jpg 768w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2019\/09\/divi-learndash-student-visitor-shortcode-example-800x716.jpg 800w\" sizes=\"auto, (max-width: 1568px) 100vw, 1568px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">We recommend using the &#8220;Text&#8221; module in Divi<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-faq\">FAQ<\/h2>\n\n\n\n<p><strong>I&#8217;m using a page builder not mentioned in this article. Can I still use it with my LearnDash-powered site?<\/strong><br>Yes. The same principles mentioned in this article apply to all WordPress page builders. The widgets and modules you use might be named differently, but the concepts are the same.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most common set of questions our support team gets asked is how LearnDash works with page builders. In this comprehensive guide, we&#8217;ll answer all of those questions, as well as walk you through exactly how to use specific page builders to best design your LearnDash courses. We&#8217;ll focus on three of the&#8230;<\/p>\n","protected":false},"author":59,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_helpful_status":1,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[165],"doc_tag":[],"knowledge_base":[157],"class_list":["post-3167","docs","type-docs","status-publish","hentry","doc_category-faqs","knowledge_base-resources"],"year_month":"2026-04","word_count":2730,"total_views":"8240","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Matt Cromwell","author_link":"https:\/\/learndash.com\/support\/author\/mattc\/"},"doc_category_info":[{"term_name":"FAQs","term_url":"https:\/\/learndash.com\/support\/kb\/resources\/faqs\/"}],"doc_tag_info":[],"taxonomy_info":{"doc_category":[{"value":165,"label":"FAQs"}],"knowledge_base":[{"value":157,"label":"Resources"}]},"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[{"term_name":"Resources","term_url":"https:\/\/learndash.com\/support\/kb\/resources\/","term_slug":"resources"}],"knowledge_base_slug":["resources"],"_links":{"self":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/3167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/comments?post=3167"}],"version-history":[{"count":33,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/3167\/revisions"}],"predecessor-version":[{"id":9658,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/3167\/revisions\/9658"}],"wp:attachment":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/media?parent=3167"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_category?post=3167"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_tag?post=3167"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/knowledge_base?post=3167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}