If you’re building or upgrading your Moodle LMS, choosing the right theme is a game-changer. A modern, Moodle 5-ready theme not only makes your site look more professional but also ensures full compatibility with the latest features and performance enhancements in Moodle 5.

In this post, we’re sharing three of the best Moodle 5 premium themes – all designed to help you create a sleek, responsive, and user-friendly LMS. Whether you’re running a university learning portal, a corporate training platform, or a government e-learning site, these themes come with everything you need: ready-made homepage layouts, course landing pages (standard or Udemy-style), and customizable static pages like About, Contact, and FAQs.

Let’s dive into the top 3 themes to help you future-proof your Moodle site.

1. Lumo – Built for Moodle 5 from the Ground Up

Perfect for: Universities, Government, Corporate Training Portals

Lumo Theme Main Demo Theme Details

Lumo is our latest premium Moodle theme, developed specifically for Moodle 5 using the modern Bootstrap 5 framework. Inspired by platforms like Coursera, edX, and Udemy, it delivers a clean and professional interface that enhances user engagement.

Whether you’re setting up a new LMS or refreshing an existing one, Lumo makes it easy to create a high-quality, future-ready site—no coding required.

✨ Key Features:

• Fully compatible with Moodle 5 and built on Bootstrap 5
• Clean, modern design inspired by top e-learning platforms
• Includes 4 pre-built color schemes and supports custom branding colors
• Flexible homepage layout – reorder sections and choose layout/background styles
• Two login page designs to match your brand style
• Fully responsive and mobile-optimized
• Easy-to-use admin settings – no technical skills needed

⭐️ Explore Lumo’s full features and settings in our detailed blog post

Lumo is ideal for any institution or organization looking to offer a professional online learning experience.

2. Edutor – Our Best-Selling Business and Education Theme

Perfect for: Corporate Training, Higher Education

Edutor Theme Demo Theme Details

Edutor Edutor is our best-selling Moodle theme and a proven favorite among site owners. It blends a stylish design with robust features, making it perfect for both educational institutions and corporate training programs. Built on Moodle’s Boost theme, Edutor offers long-term stability and seamless updates.

Whether you’re launching a training platform or upgrading an existing LMS, Edutor helps you get up and running fast with a look that reflects your brand.

✨ Key Features:

• Compatible with Moodle 5 and Moodle 4
• Built on the core Boost theme for compatibility and future-proofing
• Clean, intuitive interface with user-focused navigation
• Includes 6 professionally designed color schemes
• Customization options for colors, fonts, and layouts – no coding needed
• Fully responsive across desktop, tablet, and mobile
• Quick and simple setup process

⭐️ See a full breakdown of Edutor’s features and customization options

If you’re looking for a theme that balances professionalism, usability, and flexibility, Edutor is a solid choice.

3. Maker – Flexible Design Meets Powerful Customization

Perfect for: Higher Education, Training Sites, Business LMS

Maker Theme Demo Theme Details

Maker is a popular premium Moodle theme built for flexibility and style. It’s fully compatible with Moodle 5 and Moodle 4, and designed to support a wide range of use cases – from universities to private training academies to business LMS platforms.

With its modern look and built-in customization tools, Maker gives you the control you need to build a branded learning platform without writing a single line of code.

✨ Key Features:

• Compatible with Moodle 5 and Moodle 4
• Clean, modern UI with polished visual elements
• Includes 6 color presets to jump-start your design
• Intuitive settings panel for layout and branding customization
• Fully responsive – looks great on all devices
• Built on the Boost theme for reliable performance and compatibility

⭐️ Learn more about Maker’s complete feature set and settings here

Maker is ideal for anyone who wants a highly customizable Moodle theme that works out of the box and scales with your needs.

Final Thoughts

Upgrading to Moodle 5 is a smart move but only if your theme is ready to keep up. Choosing a modern, premium Moodle 5 theme like Lumo, Edutor, or Maker ensures your LMS looks sharp, works smoothly, and provides the kind of user experience today’s learners expect.

To give you peace of mind, all of our featured themes come with a 30-day 100% money-back guarantee. You’ll have time to try the theme and make sure it’s the right fit for your organization — and if it’s not, just send us an email within 30 days for a full refund, no questions asked.

Looking to customize the footer area of your Moodle site? If you’re using the Lumo Moodle Theme, you’re in luck. Lumo is a modern, premium Moodle 5 theme built on Boost, and it gives you an easy way to create custom footer menus using its built-in Footer Content Blocks.

In this quick step-by-step guide, we’ll show you how to set up footer menus that help users navigate your site more easily and give your Moodle site a more polished, professional look.

Whether you’re running a university site or a training platform for your company, this is a simple way to improve the user experience while keeping your site clean and well-organized.

Step 1: Open Lumo’s Footer Settings

Log into your Moodle site as an administrator and go to:
Site administration > Appearance > Themes > Lumo > Footer Area

This is where you’ll find the settings to add and manage content in the footer section of your site.

Step 2: Add HTML to Footer Content Blocks

Scroll down to the Footer Content Blocks section. Lumo supports up to four separate content blocks that are displayed side by side in the footer. These are perfect for adding footer menus.

To enter HTML code into a content block, click the “View” button in the TinyMCE text editor, then select “<> Source Code” from the dropdown menu. This will open the HTML code view, allowing you to paste or edit HTML directly.

Selecting the “Source Code” Option

HTML Code Editor Window

Text Editor View

HTML Code Snippets for Footer Menus

Below are example HTML snippets you can use to create simple footer menus. Make sure to update the menu titles and links (“#”) to match your site’s content.

Footer Content Block 1 (Example: About)

<h4 class="footer-block-title">About</h4>
<ul class="footer-links list-unstyled">
  <li class="link-item"><a href="#">Our Story</a></li>
  <li class="link-item"><a href="#">Our Mission</a></li>
  <li class="link-item"><a href="#">Meet the Team</a></li>
  <li class="link-item"><a href="#">Careers</a></li>
  <li class="link-item"><a href="#">News & Media</a></li>
</ul>

Footer Content Block 2 (Example: Categories)

<h4 class="footer-block-title">Categories</h4>
<ul class="footer-links list-unstyled">
  <li class="link-item"><a href="#">Business</a></li>
  <li class="link-item"><a href="#">Technology</a></li>
  <li class="link-item"><a href="#">Design & Creativity</a></li>
  <li class="link-item"><a href="#">Health & Wellness</a></li>
  <li class="link-item"><a href="#">Language Learning</a></li>
</ul>

Footer Content Block 3 (Example: Support)

<h4 class="footer-block-title">Support</h4>
<ul class="footer-links list-unstyled">
  <li class="link-item"><a href="#">Help Center</a></li>
  <li class="link-item"><a href="#">FAQs</a></li>
  <li class="link-item"><a href="#">Contact Us</a></li>
  <li class="link-item"><a href="#">Report a Problem</a></li>
  <li class="link-item"><a href="#">Accessibility</a></li>
</ul>

Footer Content Block 4 (Example: Community)

<h4 class="footer-block-title">Community</h4>
<ul class="footer-links list-unstyled">
  <li class="link-item"><a href="#">Learner Stories</a></li>
  <li class="link-item"><a href="#">Events & Webinars</a></li>
  <li class="link-item"><a href="#">Forums</a></li>
  <li class="link-item"><a href="#">Newsletter</a></li>
  <li class="link-item"><a href="#">Become an Instructor</a></li>
</ul>

After you’ve added your menus to the relevant blocks, save the settings. Your custom footer menus will now appear live at the bottom of your Moodle site.

Footer Menu Displayed on the Page

Bonus: Add Extra Info with the Footer Widget Area

If you want to include other types of information in your footer, such as a short description, contact details, or a newsletter signup, you can use the Footer Widget Area. This section sits below the four footer content blocks and allows you to add a title and custom HTML content for extra flexibility.

Customize the Footer Background Color Mode

Lumo also gives you control over your footer’s background color to better match your site’s branding or design style. You can choose from three built-in background modes:

• Primary mode – Uses your theme’s primary brand color
• Dark mode (default) – A sleek dark background, ideal for modern or high-contrast designs
• Light mode – A clean and minimal light background, perfect for a fresh, open look

You can select your preferred background mode in the same Footer Area settings page in the Lumo theme options.

Footer Background Mode Settings

Footer Background Mode Examples

Explore More Features of the Lumo Theme

Lumo isn’t just about looks – it’s packed with practical customization features to help you create a powerful and user-friendly learning platform. From flexible homepage layouts to branding options and footer menus, Lumo makes Moodle look modern and work smarter.

Want to see what else Lumo can do? Check out the full feature list here:
Lumo – A Modern, Premium Moodle 5 Theme Based on Boost (Top Features & Customization Options)

If you’re looking for a clean, modern, and highly customizable Moodle 5 theme, Lumo has you covered. Built on Moodle’s latest Boost theme, Lumo combines premium design with powerful layout flexibility – perfect for business, government training platforms, higher education, and everything in between..

With a user-friendly admin interface, Lumo makes it easy to tailor your Moodle site without touching any code. From color schemes and fonts to hero slideshow and category showcases, you have full control over how your site looks and feels. Whether you’re promoting online courses, showcasing testimonials, or introducing your teaching team, Lumo offers all the essential tools to build a compelling learning platform that stands out.

Lumo Theme Main Demo Lumo Theme Details

All theme settings are accessible from:
Site administration > Appearance > Themes > Lumo

Page Index

• General Settings
• Header Area
• Footer Area
• Home Hero Section
• Home Logos Section
• Home Featured Section General
• Home Featured Section Pane 1 to 10
• Home Promo Section
• Home Categories Section
• Home CTA & Highlights Section
• Home FAQ Section
• Home Teachers Section
• Home Testimonials Section
• Home Lead Section
• Home Section Order
• Course Settings
• Social Media
• Login Page
• Advanced Settings

General Settings

Define your site’s visual identity with the General Settings page. Choose from four professionally designed color schemes or set your own brand colors. You can also select Google Fonts for headings and body text to match your brand tone.

Four Color Schemes

Blue

Teal

Indigo

Burgundy

Header Area Settings

Customize your site’s header with a logo, a prominent alert banner (site-wide or homepage only), and up to six custom links that appear at the very top of the page. These features ensure your most important announcements and links are always visible.

Footer Area Settings

Design a polished footer with customizable background modes (Primary, Light, or Dark), up to four content blocks for menus or info, an additional widget area for custom HTML or text, footer branding elements such as a logo image and copyright info, and the option to display social media links. Perfect for adding navigation, contact details, or brand presence.

Footer Background: Theme Dark Color

Footer Background: Theme Light Color

Footer Background: Theme Primary Color

Home Hero Section Settings

Your homepage’s Hero section is the first thing your users will see and Lumo gives you all the tools to make a stunning first impression. Whether you’re promoting a flagship course, running a seasonal campaign, or setting the tone for your platform, this section is designed to be flexible, eye-catching, and conversion-friendly.

You can choose from three background modes – Primary, Light, or Dark. Add visual depth with one of the built-in SVG background patterns: Parallelogram (A), Circles (B), or Geometric Shapes (C), and customize the pattern color to match your brand.

Background Pattern: A (Includes All Elements)

Background Pattern: B (Without Search Box)

Background Pattern: C (Without Video Link or Search Box)

The Hero section supports up to six slides each with:

• Headline and caption
• Video link
• Primary and secondary CTA buttons
• Optional course search box

Uploaded slide images are cropped to circles by default, as shown on the theme demo. This modern layout is perfect for profile photos, icons, or visual highlights. If preferred, image cropping can be turned off to display full rectangular images instead. Whether you use one image or a full slideshow, the Hero section helps you create a high-impact introduction to your Moodle site.

Home Logos Section Settings

Showcase your partners, sponsors, or affiliations with up to 12 logos. Each logo can have an optional link. Perfect for building trust and credibility.

Featured Section General Settings

Set the tone for your featured course content. Choose from three background modes and two layout styles. Customize section titles, intros, and label colors to highlight key offerings.

Layout A (One Column): displays up to four pane blocks at once.

Layout B (Two Columns): displays up to two pane blocks at once.

Featured Section Pane 1–10 Settings

Each pane can be customized with a tab name, heading, intro, and CTA. Include up to 10 blocks per pane, each with a title, image, content, link, label, price, and footer label – perfect for showcasing courses or programs.

Home Promo Section Settings

Feature up to six items with title, content, CTA button, logo, image, and video link. Great for promotional content or case studies.

Home Categories Section Settings

Display featured course categories or subjects with two design styles and three background modes. Add up to 20 category items, each with a title, image, content, and link.

Style 1: Images on the Left

Style 2: Images Above Text

Home CTA & Highlights Section Settings

Encourage user engagement with a customizable title, content, and CTA. Add up to four data boxes for key metrics and six benefit items, each with an icon or image, title, and link.

Home FAQ Section Settings

Add a helpful FAQ with up to 10 Q&As. Customize the background mode, title, intro, and include a CTA button to guide learners further.

Home Teachers Section Settings

Introduce your team with two design styles* and up to 20 teacher profiles. Each includes a profile image, name, title, and bio in a modal popup.

Style 1 – Showcase Featured Members

Style 2 – List Multiple Team Members

Styles 1 & 2 – Show Teacher Bio in a Modal Window

Home Testimonials Section Settings

Boost credibility with up to 12 testimonials. Enable optional 5-star ratings and include profile image, quote, and source info. Customize the background and include a CTA.

Home Lead Section Settings

End the homepage with a strong CTA. Add a title, content, button, and optional image for maximum impact.

Home Section Order Settings

Rearrange your homepage sections by entering a comma-separated list of section keys. This feature gives you full control over content flow and user experience.

Course Settings

Choose your course list layout (Cards, List, or Masonry), upload a default course image, and enable a customizable course header image.

Social Media Settings

Add modern social media links including TikTok, LinkedIn, X (Twitter), YouTube, and more. Include up to three custom icons as well.

Login Page Settings

Select from two design styles (single- or two-column), upload a custom logo, and add a background image for a branded login experience.

Advanced Settings

For power users: Add custom SCSS/CSS, integrate Google Analytics, and configure iOS home screen icons to elevate the user experience.

Ready to give your Moodle site a professional, polished, and user-friendly design? Lumo is the theme that makes it easy.

Want to add a dedicated course landing page to promote your Moodle course? In this post we will show you how to do so using Moodle’s Static Pages plugin. You can download the course landing page template to try on your site as well.

We’ve also added this landing page style to the latest versions of our premium Moodle themes – Lumo, Edutor and Maker. Check out the demo landing pages below to see how it looks in action!

Lumo

Edutor

Maker

Step 1

Download the landing page HTML template file. Open the file using a HTML editor to edit the template content to suit your needs.

Our template contains all of the essential sections for a winning online course landing page. All the sections are structured in a modular way so you can easily rearrange the order of the sections or remove certain sections.

Template Section Structure:

• Course Hero Section
• Course Overview Section
• Course Content Section
• Course Reviews Section
• Course Pricing Section
• Course FAQ Section
• Course Requirements Section
• Course Tutor Section

Course Hero Section

You can use this section to give your audience a quick introduction of your course.

    <div class="course-hero-section section theme-dark-bg mb-5">
	    <div class="row">
		    <div class="col-12 col-lg-6">
			    <div class="course-badge badge badge-success mb-2">Popular Course</div>
			    <h1 class="section-title mb-3">Course Name Lorem Ipsum Dolor Sit Amet</h1>
			    <div class="course-summary mb-3">Are you ready to take your skills to the next level? Join our transformative course and embark on a journey of personal and professional growth like never before.</div>
			    
			    <div class="cta-holder mb-4"><a class="btn theme-btn-secondary" href="#">Start Learning Now</a></div>
			    <div class="meta">
				    <ul class="meta-list list-unstyled list-inline">
					    <li class="list-inline-item mb-3"><span class="badge">Intermediate</span></li>
					    <li class="list-inline-item mb-3"><span class="badge">8+ Hours</span></li>
					    <li class="list-inline-item mb-3"><span class="badge">50+ Videos</span></li>
					    <li class="list-inline-item mb-3"><span class="badge">2000+ Learners</span></li>
				    </ul><!--//meta-list-->
			    </div><!--//meta-->
		    </div><!--//col-->
		    
		    <div class="col-12 col-lg-6">
			    <img class="course-summary-image img-fluid rounded" src="https://3rdwavemedia.com/demo-images/courses/course-1.jpg" alt="image">
		    </div><!--//col-->
	    </div><!--//row-->
    </div><!--//course-hero-section-->	

Tip for Edutor and Maker theme:
If you want to have a white background instead of the dark-colored background for this section, you just need to remove the theme-dark-bg class from the section code.

Course Overview Section

You can give your audience an overview of what one can expect to learn in your course. If you have a course promo video on a platform such as Youtube you can embed the video in this section too.

    <div class="course-overview-section section bg-white mb-5">
	    <div class="container">
		    <h2 class="section-title text-center mb-4">What You'll Learn</h2>
		    <div class="text-center pt-2">
				<ul class="theme-column-list list-unstyled mx-auto d-inline-block">
				    <li><i class="icon fa fa-check mr-2"></i>Lorem ipsum dolor sit amet</li>
				    <li><i class="icon fa fa-check mr-2"></i>Etiam nec ligula bibendum faucibus elit sed</li>
				    <li><i class="icon fa fa-check mr-2"></i>Donec id nunc ac felis convallis vestibulum sit amet id erat</li>
				    <li><i class="icon fa fa-check mr-2"></i>Suspendisse rutrum est arcu vitae semper libero</li>
				    <li><i class="icon fa fa-check mr-2"></i>Donec id nunc ac felis convallis vestibulum sit amet id erat</li>
				    <li><i class="icon fa fa-check mr-2"></i>Curabitur feugiat scelerisque quam</li>
				    <li><i class="icon fa fa-check mr-2"></i>Cras pulvinar velit id lectus semper</li>
				    <li><i class="icon fa fa-check mr-2"></i>Etiam convallis vulputate arcu sollicitudin blandit</li>
				</ul>
            </div><!--//text-center-->
            
            <div class="cta-holder mb-4 text-center"><a class="btn btn-primary theme-btn-cta theme-btn-primary" href="#">Join Now</a></div>
            
            <div class="course-video-container text-center mx-auto my-5">
			    <div class="embed-responsive embed-responsive-16by9">
				   <iframe class="embed-responsive-item"  width="560" height="315" src="https://www.youtube.com/embed/XH3QQAV-04g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
				</div>
			</div><!--//video-container-->
	    </div><!--//container-->
    </div><!--//course-overview-section-->

Course Content Section

This section is great to give an overview of your course content structure.

    <div class="course-content-section section bg-white mb-5">
	    <div class="container">
		    <h2 class="section-title text-center mb-4">Course Content</h2>
		    <div class="section-intro mb-4">Course content intro goes here. You can give a preview of your course content using this section. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
		    <div class="accordion-wrapper">
		        <div class="accordion module-accordion" id="module-accordion">
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-1">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-1" data-toggle="collapse" data-target="#module-1" aria-expanded="false" aria-controls="module-1">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 1 - Course Introduction
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-1" class="module-content collapse" aria-labelledby="module-heading-1" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.1 Module Intro</div>
								    <div class="col-3 text-right extra-info">18 mins</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">5 Videos</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">7 Downloads</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.4 Module Suspendisse Porttitor</div>
								    <div class="col-3 text-right extra-info">3 Exercises</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.5 Module Related Resources</div>
								    <div class="col-3 text-right extra-info">Resources</div>
							    </div>
						    </div><!--//module-sub-item--> 
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-2">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-2" data-toggle="collapse" data-target="#module-2" aria-expanded="false" aria-controls="module-2">
						       <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 2 - Phasellus commodo consectetur eros
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-2" class="module-content collapse" aria-labelledby="module-heading-2" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">2.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">2.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">2.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->								    
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-3">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-3" data-toggle="collapse" data-target="#module-3" aria-expanded="false" aria-controls="module-3">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 3 - Nullam sed orci vel tortor 
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-3" class="module-content collapse" aria-labelledby="module-heading-3" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">3.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">3.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">3.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item--> 
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-4">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-4" data-toggle="collapse" data-target="#module-4" aria-expanded="false" aria-controls="module-4">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 4 - Integer nec ullamcorper orci 
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-4" class="module-content collapse" aria-labelledby="module-heading-4" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">4.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">4.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">4.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-5">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-5" data-toggle="collapse" data-target="#module-5" aria-expanded="false" aria-controls="module-5">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 5 - Pellentesque id nulla quis urna 
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-5" class="module-content collapse" aria-labelledby="module-heading-5" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">5.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
							    <div class="col-9">5.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">5.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-6">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-6" data-toggle="collapse" data-target="#module-6" aria-expanded="false" aria-controls="module-6">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 6 - Aliquam turpis nibh eget 
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-6" class="module-content collapse" aria-labelledby="module-heading-6" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">6.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
							    <div class="col-9">6.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">6.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->		
			</div><!--//module-accordion-->
		    </div><!--//accordion-wrapper-->		   
	    </div><!--//container-->
    </div><!--//course-content-->

Course Reviews Section

You can showcase positive course reviews to provide social proof to prospective learners.

<div class="course-reviews-section section">
        <div class="container p-0">
	        <h3 class="section-title mb-5 text-center">Course Learner Reviews</h3>
	        
	        <div class="row justify-content-center">
		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-1.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Adam Doe</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>Great course lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mi sed tortor lobortis, nec feugiat nisi venenatis.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->
		        
		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-2.png" alt=""></div>
								</div><!--col-->
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Emily Sanders</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>Highly recommend lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor id velit in ullamcorper nam eu elit nec nunc. </p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->
 
		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-3.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Luke Smith</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star-o"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>I've learnt so much lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quam magna, vulputate at sem id, gravida laoreet risus.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->

		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-4.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Luke Smith</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star-half-o"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>Great course lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mi sed tortor lobortis, nec feugiat nisi venenatis.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->

		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-5.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Lisa Evans</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>This course completely exceeded my expectations! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mi sed tortor lobortis, nec feugiat nisi venenatis.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->
		        
		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-6.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Emma Sanders</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>The instructor was knowledgeable and responsive lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mi sed tortor lobortis, nec feugiat nisi venenatis.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->
	        </div><!--//row-->
        </div><!--//container-->
    </div><!--//course-reviews-section-->

Course Pricing Section

If learners need to pay for the course before joining you can use this section to list your pricing structure.

    <div class="course-pricing-section section py-5">
        <div class="container">
	        <h3 class="section-title text-center mb-5">Join This Course</h3>
            <div class="pricing-plan">
	            <div class="row justify-content-center">
		            <div class="col-lg-4 col-12  mb-4">
			            <div class="plan-item">
				            <div class="plan-header">
					            <h4 class="plan-heading p-3 theme-bg-primary text-center">FREE</h4>
				            </div><!--//plan-header-->
				            
				            <div class="plan-details p-4">
					            <div class="plan-desc text-center mb-4">
						            <div class="plan-price">$0</div>
						            <div class="plan-price-desc">Limited Access</div>
					            </div>
					            <div class="plan-content px-3">
					                <div class="plan-content-intro">You'll get:</div>
						            <ul class="plan-content-list list-unstyled">
							            <li><i class="icon fa fa-check"></i>Access to basic modules</li>
							            <li><i class="icon fa fa-check"></i>3 bonus resources</li>
						            </ul>
					            </div><!--//plan-content-->
				            </div><!--//plan-content-->
				            <div class="plan-cta text-center px-4">
					            <a class="btn btn-primary theme-btn-primary" href="#" target="_blank">Join Free</a>
					        </div>
			            </div><!--//plan-item-->
		            </div><!--//col-->
		            <div class="col-lg-4 col-12  mb-4">
			            <div class="plan-item">
				            <div class="plan-header">
					            <h4 class="plan-heading p-3 text-center theme-bg-primary">Standard</h4>
				            </div><!--//plan-header-->
				            
				            <div class="plan-details p-4">
					            <div class="plan-desc text-center mb-4">
						            <div class="plan-price">$199</div>
						            <div class="plan-price-desc">Basic Access</div>
					            </div>
					            <div class="plan-content px-3">
					                <div class="plan-content-intro">You'll get:</div>
						            <ul class="plan-content-list list-unstyled">
							            <li><i class="icon fa fa-check"></i>Access to all modules</li>
							            <li><i class="icon fa fa-check"></i>Access to 40+ resources</li>
						            </ul>
					            </div><!--//plan-content-->
				            </div><!--//plan-content-->
				            <div class="plan-cta text-center px-4">
					            <a class="btn btn-primary theme-btn-primary" href="#" target="_blank">Enrol Now</a>
					        </div>
			            </div><!--//plan-item-->
		            </div><!--//col-->
		            <div class="col-lg-4 col-12 mb-4">
			            <div class="plan-item">
				            <div class="plan-header">
					            <h4 class="plan-heading p-3 text-center theme-bg-primary">Advanced</h4>
				            </div><!--//plan-header-->
				            <div class="plan-details p-4">
					            <div class="plan-desc text-center mb-4">
						            <div class="plan-price">$299</div>
						            <div class="plan-price-desc">Unlimited Access</div>
					            </div>
					            <div class="plan-content px-3">
					                <div class="plan-content-intro">You'll get:</div>
						            <ul class="plan-content-list list-unstyled">
							            <li><i class="icon fa fa-check"></i>Access to all modules</li>
							            <li><i class="icon fa fa-check"></i>Access to all 80+ resources</li>
							            <li><i class="icon fa fa-check"></i>Course support</li>
							            <li><i class="icon fa fa-check"></i>Free updates</li>
							            <li><i class="icon fa fa-check"></i>Digital certificate</li>
						            </ul>
					            </div><!--//plan-content-->
				            </div><!--//plan-content-->
				            <div class="plan-cta text-center px-4">
					             <a class="btn btn-primary theme-btn-primary" href="#" target="_blank">Enrol Now</a>
					        </div>
			            </div><!--//plan-item-->
		            </div><!--//col-->
	            </div><!--//row-->
            </div><!--//pricing-plan-->
        </div><!--//container-->
    </div><!--//course-pricing-section-->

Course FAQ Section

You can list your course-specific FAQ in this section. If you want to create a site-wide FAQ page you can find out more here.

    <div class="course-faq-section section bg-white mb-5">
        <div class="container">
		        <div class="row">
			        <div class="col-12 col-lg-3">
				        <h3 class="section-title text-start mb-4">FAQ</h3>
				        <div class="intro mb-3 pr-lg-3">Can't find the answer you're looking for? Feel free to <a class="theme-link" href="#">get in touch</a>.</div>
			        </div>
			        <div class="col-12 col-lg-9">
				        <div class="faq-items pl-lg-3">
					        <div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>What lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Sed venenatis porta ante, nec accumsan leo suscipit ac. Praesent ultricies tortor nisi, eu convallis ex lacinia ac. Praesent vel risus eu ligula ullamcorper condimentum eu ac leo. Praesent leo odio <a href="#">link example</a> interdum vitae mi vitae, maximus porta lectus. Maecenas venenatis, felis quis rutrum luctus, tortor turpis maximus lacus, at scelerisque nisl metus nec augue.  </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>How to lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Donec tincidunt porttitor dictum. Cras laoreet ipsum vitae massa suscipit, at pretium justo molestie. Duis gravida vitae dui vel posuere. Maecenas pharetra, odio nec interdum efficitur, eros magna bibendum tortor, at pellentesque nunc quam eu diam. </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>Does lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Maecenas felis mauris, pharetra at congue sed, semper et orci. Suspendisse maximus viverra tellus vel dictum. Cras lacinia lectus magna, facilisis congue lacus tristique non. </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>When do you lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Suspendisse gravida gravida orci ut egestas. In in libero faucibus tortor blandit iaculis a fermentum lectus. Proin dictum lacus id fringilla interdum.  </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>Can I lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Nam feugiat quam nec ex consectetur volutpat. Phasellus urna diam, finibus non enim id, placerat facilisis orci. Maecenas tristique orci sit amet sem suscipit, vitae auctor lectus pellentesque. </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>Does lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Nam feugiat quam nec ex consectetur volutpat. Phasellus urna diam, finibus non enim id, placerat facilisis orci. Maecenas tristique orci sit amet sem suscipit, vitae auctor lectus pellentesque. </p>
								</div>
							</div><!--//item-->
				        </div><!--//faq-items-->
			        </div><!--//col-->
		        </div><!--//row-->
        </div><!--//container-->
    </div><!--//course-faq-section-->

Course Requirements Section

If your course has prerequisites for learners you can list them in this section.

    <div class="course-requirements-section section bg-white mb-5">
	    <div class="container">
		    <h2 class="section-title text-center mb-5">Course Requirements</h2>
		    <div class="section-intro mb-4">
			    <p>To ensure a successful learning experience, please review the following course requirements before enrolling:</p>
		    </div>
		    <ul class="section-list mx-auto text-left">
			    <li><strong>Reliable Internet Connection:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Updated Web Browser:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Audio and Video Capability:</strong>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Time Commitment:</strong>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Required Software:</strong>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Language Proficiency:</strong>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		    </ul>
	    </div><!--//container-->
    </div><!--//course-requirements-section-->

Course Tutor Section

You can provide your course tutor or instructor’s bio information in this section.

    <div class="course-tutor-section section bg-white mb-5">
	    <div class="container">
		    <div class="row">
		        <div class="col-12 col-lg-3">
			        <div class="tutor-img-holder mb-5 mb-lg-0 text-center">
				        <img class="tutor-profile img-fluid rounded-circle" src="https://3rdwavemedia.com/demo-images/teachers/tutor-1.png" alt="">
			        </div><!--//tutor-img-holder-->
		        </div><!--//col-->
		        <div class="col-12 col-lg-9">
			        <div class="pl-lg-4">
				        <h3 class="section-title text-center text-lg-left mb-4 ">Course Tutor</h3>
				        <p>Get ready to learn from the best! Meet Sarah, your dedicated course tutor with a passion for teaching and empowering students like you.

With years of experience in [field of expertise], Sarah Doe brings a wealth of knowledge and practical insights to the table. Their expertise and real-world experience will guide you through the course material, ensuring you gain valuable skills and a deep understanding of the subject.</p>
                        
			            <p>Throughout the course, Sarah will be there to support and motivate you every step of the way.</p>	
			             <div class="text-center text-lg-left">
				         <ul class="social-list list-unstyled py-3">
						<li class="list-inline-item"><a href="#"><i class="icon fa-brands fa-linkedin-in"></i></a></li> 
						<li class="list-inline-item"><a href="#"><i class="icon fa-brands fa-x-twitter"></i></a></li>
						<li class="list-inline-item"><a href="#"><i class="icon fa-brands fa-youtube"></i></a></li>
					 </ul><!--//social-list-->	
			            </div>				        
                    </div>
		        </div><!--//col-->
	        </div><!--//row-->
	    </div><!--//container-->
    </div><!--//course-tutor-section-->

Step 2

Download and install Moodle’s Static Pages plugin. Make sure the plugin doesn’t clean your HTML code. You need to change this setting after installing as shown in the figure below.

Upload the course landing page HTML file to the plugin’s “Documents” page.

You can make multiple course landing pages using this template but the HTML file name must start with course (eg. course-1.html or course-a.html) to have the correct styling applied in our Edutor and Maker theme.

Step 3

After uploading the HTML page, you can get the page URL from the “List of static pages” page.

You can then add the page link to your Moodle site’s custom menu.

Did you know you can easily customize Moodle’s default course activity icons? If you’re using Moodle’s default theme Boost, or a Boost-based Moodle theme (e.g. Edutor or Maker), you can replace the default icons with your custom ones to better fit your site’s course design. In this tutorial, we will show you how to do so using the URL activity icon as an example.

Step 1: Create a Folder Structure for Your Custom Icons

Moodle organizes its activity icons within specific folders, so to replace an icon, you need to replicate this structure within your theme’s directory:

1) Create pix_plugins Folder:

In your theme directory, create a new folder called pix_plugins.

2) Create mod Folder:

Inside the newly created pix_plugins folder, create another folder named mod.

3) Create url Folder:

Finally, within the mod folder, create a folder named url. This folder name must match the folder name used for holding Moodle’s default icons. You can find all the default activity folder names under moodle/mod/

Your directory structure should now look like this:

For Boost Theme:

moodle/theme/boost/pix_plugins/mod/url

For Edutor Theme:

moodle/theme/edutor/pix_plugins/mod/url/

For Maker Theme:

moodle/theme/maker/pix_plugins/mod/url/

Step 2: Upload Your Custom SVG Icon for the URL Activity

With the folder structure in place on your server, you’re ready to upload your custom icon:

1) Ensure Your Icon is Named Correctly:

Your custom SVG icon should be named monologo.svg.

2) Upload the Icon:

Upload monologo.svg to the url folder you just created.

The full path to your new icon should be:

moodle/theme/your-theme-name/pix_plugins/mod/url/monologo.svg

Step 3: Purge Moodle’s Caches

Log into your Moodle site as an administrator and navigate to: Site administration > Development > Purge caches

Click the “Purge all caches” button to purge all caches. This forces Moodle to refresh its cached files, including icons.

Go back to your course, and you should see the URL activity icon changed to your custom one.

Moodle’s Contact Form Plugin provides a simple way to add a contact form to a Moodle course or a Moodle page. After successfully submitting the contact form, you will see a default success message saying “Thank you for contacting us. If required, we will be in touch with you very soon.” If this default success message doesn’t suit your organisation you can follow the steps in this tutorial to change it to something different.

You can try the forms on our Moodle demo site below:

1) Moodle Page Contact Form (Live Demo)

2) Moodle Course Tutor Contact Form (Live Demo)

Step 1

Log into your Moodle site as an admin user, and navigate to the Language customisation page by going to Site administration > Language > Language customisation

Select “English(en)” from the drop down menu:

Click the “Open language pack for editing” button then click “Continue”.

Step 2

Select the php file related to the Moodle Contact Form plugin: local > local_contact.php

Enter the default form success message into the “Only string containing” input field and click the “Show strings” button to proceed.

Step 3

Enter your desired form success message in the “confirmationmessage” input field as shown in the figure below. Save your changes.