In this tutorial, we’ll show you how we built a simple interactive Moodle micro-course using the Interactive Video plugin. The goal isn’t to recreate Udemy feature-for-feature. Instead, this demo shows how a few lightweight interactions can create a more engaging learning experience inside Moodle without creating a complicated course setup.

We kept this tutorial beginner-friendly so you can easily experiment with it yourself.

Download the Demo Course

If you’d like to explore the finished setup yourself, you can download the Moodle course backup used in this tutorial and import it into your own Moodle site.

Required plugins

Before restoring the course, make sure the following plugin and interaction types are installed and enabled:

• Interactive Video activity plugin
• PDF interaction type
• Paused Annotation interaction type

The demo course was created on a Moodle 5 site, but it should also work on Moodle 4.5 as long as the Interactive Video plugin and required interaction types are installed.

Page Index

• What you’ll build in this tutorial
• Why simple interactions improve engagement
• What you need before you start
• Step 1 – Set up your Moodle course
• Step 2 – Add your interactive video lesson
• Step 3 – Add interactive learning elements
• Final thoughts
• Troubleshooting

What You’ll Build in This Tutorial

We created a short demo course called:

Focus Better With the Pomodoro Technique

The course includes:

• A YouTube-based interactive video lesson
• Reflection prompts using paused annotations
• Downloadable PDF resources
• Chapter navigation
• A simple multiple choice knowledge check
• A clean Moodle 5 course layout

We kept the course short and focused so the setup stays easy to follow.

Why Simple Interactions Improve Engagement

A standard video lesson is passive. Learners click play, watch the video, then move on.

Interactive video adds small moments of interaction that help learners stay engaged without turning the lesson into a giant quiz. Simple interactions can encourage reflection, break up long videos, make videos easier to navigate, help learners access resources at the right moment, and reinforce key ideas without adding formal assessments.

In many cases, a few lightweight interactions create a better experience than adding lots of activities and complexity.

What You Need Before You Start

Before creating your course, make sure you have the Interactive Video plugin, the required interaction types installed, and either a YouTube video or uploaded video file.

For this demo, we used a short YouTube video about the Pomodoro Technique from The Open University.

Installing additional interaction types

Some interaction types are included directly inside the Interactive Video plugin, while others need to be installed separately.

After installing additional interaction types, make sure to go to the Interactive Video plugin’s general settings page and enable the interaction types there as well.

Built-in interaction types

• Chapter – Break videos into navigable sections
• Content bank item – Add quiz or interactive content from the Moodle content bank
• External content – Embed external content using OEmbed
• Rich text – Add formatted text overlays inside the video
• Skip segment – Automatically skip selected parts of the video

Downloadable interaction types used in this demo

• PDF document
• Paused Annotation

Additional interaction types and plugin resources can also be found on the official Interactive Video plugin page.

Step 1 – Set Up Your Moodle Course

Create a new Moodle course and keep the layout simple. For this demo course, we used four sections:

• About This Course
• What You Will Learn
• Interactive Lesson
• Downloadable Resources

A clean course structure makes the learning experience much easier to follow, especially on mobile devices.

Step 2 – Add Your Interactive Video Lesson

Next, add a new Interactive Video activity inside your course.

For this demo, we used a YouTube video source.

We’d recommend uploading a custom poster image for the activity card instead of relying on the default YouTube thumbnail. A good poster image makes the course page feel much more polished and visually consistent.

We’d also recommend setting the activity card appearance to: Full-width poster image

This creates a cleaner and more modern-looking course layout.

Step 3 – Add Interactive Learning Elements

Add chapter navigation

Chapter navigation makes videos easier to scan and revisit later. Even short videos benefit from chapters because learners can quickly jump back to important sections.

For this one-minute lesson, we only used two chapters.

The plugin author also has a dedicated YouTube tutorial covering chapter navigation setup.

Add a reflection pause

Next, we added a Paused Annotation interaction with a short reflection prompt.

This works well because it encourages reflection without disrupting the flow of the lesson too aggressively. For short courses, simple prompts often work better than adding too many quiz questions.

Add downloadable PDF resources

Next, we added downloadable PDF resources directly inside the video.

</p>

For this demo course, we kept the default auto-launch setting enabled so the interactions are easier to demonstrate. For real courses, we’d usually leave PDF auto-launch disabled. Otherwise learners can end up with too many popups during longer lessons.

Add a quick knowledge check

Finally, we added a simple multiple choice question near the end of the video using the built-in Content Bank integration.

A lightweight knowledge check is often enough to reinforce the main learning points without interrupting the overall learning flow too much.

Final Thoughts

The main takeaway from this demo is that you don’t need a huge course or complicated setup to make Moodle feel more interactive.

In many cases, a clean layout and a few well-placed interactions are enough to create a much better learning experience.

The Interactive Video plugin is also far more flexible than what we covered here. This tutorial only scratches the surface of what’s possible. Once you understand the basics, you can start experimenting with more advanced interaction types and course designs.

If you’re looking for upgrade-safe, Boost-based Moodle themes built for stable, long-term LMS platforms, you can also check out our premium Moodle themes

You can explore the live demo course on our Moodle theme demo sites:

Interactive Video Demo on Lumo

Interactive Video Demo on Edutor

Interactive Video Demo on Maker

Troubleshooting

How do I import the demo course to my Moodle site?

Create a new course on your Moodle site and open the More dropdown menu inside the course page.

Next, click Course reuse → Restore and upload the downloaded course backup file (*.mbz).

Moodle will then guide you through the course restore process step-by-step.

Why are the installed interaction types not showing up?

After installing additional interaction types, make sure they are enabled in the Interactive Video plugin’s general settings page.

The post How to Create Udemy-Style Interactive Video Courses in Moodle (Step-by-Step Guide) appeared first on eLearning Themes.

With Moodle 5.3 LTS expected in October, it’s a fair question. The short answer is: it depends on how you’re using Moodle. Some sites should move to 5.2 straight away, while others are better off waiting. If you’re not sure which option applies to you, this guide will help you think it through.

Page Index

• Quick answer
• What actually changed in Moodle 5.2?
• The login page finally feels more modern
• Course pages are easier to understand
• Less confusion around restricted content
• Navigation is a bit less clunky
• Small workflow improvements
• Some smaller UI changes that actually make a difference
• Upgrade now or wait?
• Things to check before upgrading
• Themes and upgrade safety
• Theme licensing and upgrade timing
• Final recommendation

Quick answer

If you’re launching a new Moodle site, Moodle 5.2 is usually the practical choice. If your site is large, business-critical, or tied to lots of plugins and integrations, waiting for Moodle 5.3 LTS may be the safer option.

Upgrade to Moodle 5.2 now if:

• You’re starting a new Moodle site
• You want the latest improvements
• Your plugins and theme are already compatible

Wait for Moodle 5.3 LTS if:

• Your site is large or business-critical
• You rely on lots of plugins or integrations
• You typically upgrade every 1 to 3 years

What actually changed in Moodle 5.2?

Moodle 5.2 isn’t a major feature-heavy release. Most of the work has gone into cleaning up the interface and smoothing out everyday workflows. These are the kinds of improvements you notice more in daily use than at first glance.

Moodle is becoming easier to navigate and clearer to understand. These changes have the biggest impact in day-to-day use, especially for teachers, learners, and administrators.

The login page finally feels more modern

The login page has been redesigned with a cleaner, more modern layout. It creates a clearer and more professional first impression, especially for new users.

If you’ve used modern Moodle themes, this will probably look familiar. Themes have already been moving in this direction for a while. For example, in our Lumo theme you can choose between different login layouts depending on the kind of experience you want to create.

Some sites want a more branded look. Others just want something simple and clear. There’s no single right answer, but Moodle 5.2 does improve the default experience. The theme still makes a big difference to how polished the final result feels.

Course pages are easier to understand

This is one of the most useful parts of the 5.2 update. Key information such as activity dates, completion requirements, and actions is now displayed more prominently at the top of the page, making it easier for learners to understand what they need to do and by when.

That reduces friction straight away. Learners shouldn’t have to stop and work out what they’re supposed to do next. Moodle 5.2 makes that part more obvious, which is exactly the kind of improvement that helps day to day.

Less confusion around restricted content

Moodle now does a better job of showing why content is restricted and what needs to happen before it becomes available. If you’ve ever had users asking why they can’t access something, this change will help.

It’s not a major feature on paper, but it removes one of those annoying little points of confusion that keeps coming up in real sites.

Navigation is more streamlined

Subsections have been simplified, and they no longer feel like separate pages. Navigation is quicker, cleaner, and requires fewer clicks, which matters more in larger courses where structure can easily become messy.

This makes it easier to move through a course without unnecessary interruptions.

Small workflow improvements

Moodle 5.2 also includes a number of workflow improvements, particularly in the question bank. Categories can now be expanded and collapsed, edited directly in place, and reorganised using drag and drop. You can also see question counts at a glance and move entire categories more easily.

These changes make it quicker to organise and manage question banks, especially in courses with a large number of questions. Editing workflows across Moodle have also been smoothed out, with less jumping between pages.

For a full breakdown, see the official Moodle documentation: Quiz and question bank usability improvements.

Some smaller UI changes that actually make a difference

These are smaller interface changes, but they make a noticeable difference in day-to-day use.

Course index is more useful

The left-hand course index has been improved in a few subtle but genuinely useful ways. The course name stays visible at the top, completion status is clearer, and restricted items are easier to spot thanks to lock icons.

That makes long courses easier to scan and easier to navigate, especially when learners are trying to work out where they are and what they’ve already completed.

Sticky action buttons when editing

When editing an activity or resource, the action buttons now stay visible in a sticky footer as you scroll. That includes Save, Save and display, and Cancel.

This is a small change, but a good one. On longer forms, not having to scroll all the way back down just to save is a real improvement.

Subsections stay on the same page

In-course subsections no longer open their own separate pages in Moodle 5.2. Instead, users stay within the same page context, which reduces unnecessary clicks and makes the whole course flow feel more connected.

Duplicate subsections

Course editors can now duplicate a subsection directly from the dropdown menu. That’s a small but useful addition if you build out structured courses and want to reuse layouts or content blocks quickly.

Upgrade now or wait?

This is where it becomes practical. Most people aren’t deciding whether to upgrade at all. They’re deciding when.

If you’re starting a new site, using Moodle 5.2 from the start is usually the sensible choice. There’s little benefit in launching on an older version and then upgrading again shortly after.

If you’re running a larger or more complex LMS, waiting for Moodle 5.3 LTS can be a more practical option. You’ll still need to test thoroughly and ensure plugins are compatible, but the advantage is a longer support cycle. Instead of upgrading to 5.2 and then again shortly after, you can move to 5.3 LTS and stay on that version for a longer period.

Things to check before upgrading

Before upgrading, make sure you check plugin compatibility, confirm that your theme supports Moodle 5.2, take proper backups, and test everything in a staging environment first.

• Plugin compatibility
• Theme compatibility
• Backups
• Staging tests

Most upgrade issues don’t come from Moodle core itself. They usually come from plugins and themes.

Themes and upgrade safety

Themes are one of the most common sources of upgrade problems. Heavily customised themes are more likely to break, need patching, or create extra maintenance work after an update.

Themes that stay closer to Moodle core are generally easier to maintain and upgrade. They’re not risk-free, but they usually give you fewer surprises. The larger and more important your site is, the more this matters.

Theme licensing and upgrade timing

One thing people don’t always think about is how theme licensing fits into upgrade decisions. A lot of providers use subscriptions, so you pay every year whether you upgrade your Moodle site or not.

That doesn’t always match how Moodle sites are actually managed. In many cases, especially in universities, upgrades happen every 1 to 3 years rather than every release.

We primarily use a pay-as-you-go model, which means you pay for the version you use and upgrade when you choose. The upgrade cost is much lower than buying a full license again, and there’s no requirement to pay every year if you’re not upgrading.

• Pay for the version you use
• Upgrade when you choose
• Upgrade cost is much lower than a full license

See licensing details.

Final recommendation

If you’re starting a new project today, Moodle 5.2 is usually the sensible choice. If you’re running a larger or more risk-sensitive setup, waiting for Moodle 5.3 LTS is often the safer option.

There’s no single right answer for every Moodle site. It depends on your setup, your upgrade cycle, and how much risk you’re comfortable taking on.

Moodle 5.2 doesn’t reinvent the platform, but it does make Moodle easier to use. And in practice, that’s what matters most.

If you’re planning a Moodle 5.x upgrade and want a stable, upgrade-safe design, take a look at our Moodle 5 themes. They’re built on Boost and designed to stay aligned with Moodle core for smoother upgrades.

The post Moodle 5.2 vs 5.3 LTS: Should You Upgrade Now or Wait? appeared first on eLearning Themes.

Modern Moodle themes like Lumo include hero layouts, featured panes, and other visual sections. These make your site look more engaging, but they also highlight performance issues when images are too large. Moodle does not resize or compress images automatically, so if you upload a 1–3MB file, Moodle serves that same file to every visitor.

The good news: this is one of the easiest performance issues to fix.

This guide explains why image optimization matters and how to do it properly, using a real example from a recent Lumo customer.

1. Why Images Slow Down Moodle

Moodle does not optimize images. If you upload a 1920 × 1080 PNG at 2MB, Moodle delivers that full file to all users — including mobile users on slow connections.

What this causes:

• Slow page load times
• Delayed hero and featured section rendering
• Lag on phones and tablets
• High bandwidth usage

Lumo and other modern Moodle themes are lightweight, but they cannot compensate for very large image files. Optimizing your images is essential.

2. Real Use Case: What We Found While Helping a Lumo Customer

A customer recently contacted us about a theme issue (fixed in Lumo v2.3). While reviewing their site, we noticed something unrelated to the bug:

All of their Featured Section images were extremely large — most were over 2MB.

They looked good visually, but they were far bigger than needed. For Lumo’s pane blocks, images around 800px wide are more than enough. Large images like these will always slow down the homepage.

Here’s the advice we gave the customer:

• Resize featured pane images to around 800px wide
• Compress images using free tools such as TinyPNG or ImageCompressor

One of their original files was 2MB+. After resizing and compression, it was only 105KB — with no visible quality loss.

The homepage felt much faster immediately. This shows how small optimization steps can make a big difference on Moodle sites.

3. Recommended Image Sizes for Lumo Users

These sizes work well for Lumo and help keep your Moodle homepage fast.

Home Hero Section
Side image (Side Image Mode): 1000 × 1000 px (square images give the best results)
Full-width background image: 1920 × 1080 px (minimum width 1600 px)
File size: 150–300KB
Format:
– JPG for standard full-width hero images (no transparency)
– PNG only if you are using Side Image Mode and need transparency for creative images or cutouts

Home Featured Section (Pane Blocks)
Recommended size: 800 × 460 px
File size: 100–200KB
Format:
– JPG(recommended)
– PNG only if transparency is required

Home Category Section
Recommended size: 300 × 300 px
Format:
– JPG or PNG for photos
– SVG for icon-style, flat graphics

4. How to Compress Images

You can reduce image file sizes quickly using free online tools. These tools keep your images looking sharp while making them much smaller.

TinyPNG
Great for fast, high-quality compression for JPG and PNG files.

ImageCompressor
Useful for compressing multiple images at once. Offers a quality slider for more control.

Squoosh
Allows resizing and fine-tuning image quality. Export as JPG or PNG (avoid WebP for Moodle theme settings).

In our Lumo example, a 2MB PNG was reduced to around 100KB with no visible loss in quality. This type of reduction is typical and has a major impact on page speed.

Conclusion

Most Moodle sites feel slow for one simple reason: oversized images.

By resizing and compressing your images before uploading them to Moodle, you can reduce file sizes by 80–95% and make your homepage load much faster. No server changes, no coding, and no plugins — just better image preparation.

If you’re using Lumo, these steps will help your Moodle site stay clean, fast, and user-friendly for every learner.

The post Why Your Moodle Site Is Slow (And How Image Optimization Fixes It) appeared first on eLearning Themes.

Lumo Creative Hero Side Image Demo

In this guide, we’ll walk through how the Side Image layout works and share practical examples you can use in higher education and professional training environments. Transparent PNG images, background patterns, and Lumo’s built-in design options can help you create a homepage that feels fresh and visually engaging.

If you’re also exploring the new Full-Width Background Hero layout added in Lumo for Moodle 5.1+, you may find this guide helpful too: Moodle 5 Theme Lumo Guide: Customize the Hero Section (Full-Width Background Option)

How the Side Image Layout Works

The Side Image layout places your headline, description, and call-to-action buttons on the left, with your uploaded image displayed on the right. It’s a clean, reliable layout that works well for universities, colleges, online learning platforms, professional training providers, and corporate LMS sites.

When you upload a square image (for example 1000 × 1000 px), Lumo automatically crops it into a circle. This default style is simple, modern, and works well for:

• Tutor or faculty portraits
• Staff or instructor photos
• Student representation
• Small group photos
• Centered lifestyle or study images

Square images give you the best and cleanest results. Regular rectangular photos don’t crop well into circles and are not recommended unless you disable cropping.

Using Transparent PNGs for a More Creative Look

While the circular crop works well for many use cases, Lumo’s Side Image layout can do much more than simple portraits. This is where the Side Image layout really becomes powerful. If you want a more modern or custom look, something closer to high-end university websites or professional learning platforms, you can turn off the circular crop to show the full shape of a transparent PNG. This gives you an alternative visual style that works well for creative designs, especially when using cut-out images or illustrations.

Transparent PNGs are great for:

• Learner or student cut-outs
• Faculty, tutors, or team members
• Program, course, or subject-related visuals
• Device or platform mockups
• Illustrations, icons, or branded graphics
• Lifestyle images with the background removed

Example: A global community feel

Using a transparent PNG with three stacked learner cards creates a friendly and modern look. Because the cards have no background, the SVG pattern shows through around the edges, giving the hero area a lighter and more dynamic feel.

Example: Modern tutor or team showcase

Transparent PNG portraits placed together create a clean, instructor-focused introduction. This is ideal for showcasing faculty groups, instructors, or support teams. It feels professional and trustworthy while remaining visually engaging.

Example: Immersive Learning (transparent PNG + dark mode)

This example uses a transparent PNG illustration paired with Lumo’s dark background mode to create a bold, immersive look. The darker canvas helps the cut-out image stand out, especially when the PNG includes bright highlights or dynamic shapes. This style works well for courses or programs related to technology, innovation, creative industries, VR/AR, or digital skills.

The transparent PNG allows the circular pattern elements to show through naturally, which gives the hero area more depth without feeling heavy. This approach is ideal when you want something visually striking while still keeping the text readable and professional.

Settings used for this example:

• Hero background color mode: Dark
• SVG pattern: Circles (default scale)
• Pattern color: Theme’s secondary color
• Crop slide image: Off (to show the full PNG shape)
• Image type: Transparent PNG with isolated subject
• Text color: Automatic (light text on dark background)

This combination creates a strong, modern visual style that feels polished and works especially well on university program pages, technology departments, short-course platforms, and corporate training sites where you want higher impact.

Example: Clean Light-Mode Design (transparent PNG)

This example shows how a transparent PNG can create a clean and modern hero layout in light mode. By combining a soft background color with a customized SVG pattern, you can create a fresh, professional look that works well for higher education programs and online course portals.

Settings used for this example:

• Hero background color mode: Light Mode
• SVG pattern: Pattern C
• Pattern color: Custom grey (#B3C2C2)
• Image type: Transparent PNG portrait
• Text color: Automatic (dark text on light background)

The result is a clean, airy layout with a neutral color palette that makes the PNG image feel integrated into the page. This style works especially well for universities and professional training providers that want a polished, minimal, and trustworthy design.

Transparent PNGs pair perfectly with all of Lumo’s background color modes and SVG patterns, making it easy to build a hero section that feels fresh and tailored to your organization.

These examples show how flexible the Side Image layout can be when you move beyond standard rectangular photos. And the best part is that everything is achievable using Lumo’s built-in settings — no custom code needed.

Side Image Settings in Lumo

When you choose the Side Image layout, you gain access to a set of background and pattern options. These help shape the tone and style of your hero area.

Background Color Mode

Choose from Primary, Light, or Dark. Each mode gives the hero section a different feel suitable for academic and professional learning sites.

SVG Background Patterns

Lumo includes three built-in patterns:

• Parallelogram (A)
• Circles (B)
• Geometric Shapes (C)

Pattern A:

Pattern B:

Pattern C:

No Pattern:

Patterns add a soft visual layer that gives the hero section a more engaging, modern look. They work especially well with transparent PNGs because the pattern shapes interact naturally with the edges of the image. You can also turn the pattern off if you prefer a clean, minimal look.

Pattern Color

You can customize the pattern color to match your brand or highlight an accent tone. Subtle colors are ideal for academic sites, while brighter colors work well for training or promotional pages.

Image Cropping (Circle vs. Full Image)

• Circular cropping works best with square images
• Square images keep the main subject centered
• Non-square images don’t crop well unless they are transparent PNGs
• To show the full PNG shape, turn off “Crop slide images”

These settings give you full control over how structured or creative your hero area looks.

Best Practices for Side Image Designs

To get the strongest results:

• Use square images for clean circular cropping
• Use transparent PNGs for creative layouts
• Keep subjects centered
• Avoid busy or cluttered backgrounds
• Choose high-resolution images
• Prepare PNGs using remove.bg, Photoshop, or Figma
• Choose images where subjects face toward your text when possible

Side Image vs. Full-Width Background — When to Choose Which

Choose Side Image layout when you want:

• a clean, structured design
• strong text readability
• a modern, academic, or corporate style
• portraits or transparent PNG cut-outs
• a flexible layout that works for most content types

Choose Full-Width Background layout when you want:

• bold visuals
• immersive or campaign-style hero banners
• scenic campus photography
• a dramatic first impression

The Side Image layout in Lumo gives you a flexible and reliable way to design a modern Moodle homepage. Whether you use simple circular portraits or creative transparent PNGs, you can build a hero section that feels polished, professional, and aligned with your institution or organization.

Experiment with different image styles, background colors, and patterns – even small changes can refresh your entire homepage.

If you want to explore the new full-width background Hero option available in Lumo for Moodle 5.1+, here is the guide: Moodle 5 Theme Lumo Guide: Customize the Hero Section (Full-Width Background Option)

The post Moodle Theme Lumo Guide: Creative Ways to Use the Side Image Hero Layout appeared first on eLearning Themes.

Our Moodle 5 theme Lumo now supports a brand-new layout option for the hero section – a full-width background image mode.

Lumo Full-width Background Demo

Theme settings:

This new option gives you even more flexibility when styling your homepage and makes it easier to create a modern, visually engaging hero area without any custom coding.

In this guide, we’ll walk you through:

• New: Full-Width Background Image Mode
• Side-Image Layout (Existing Option)
• Real Design Examples for Different Organization Types
• What Each Layout Helps You Achieve
• Tips for Designing a Professional Hero Section
• Creative Hero Design Options
• Get the Latest Version of Lumo

New: Full-Width Background Image Mode

The full-width background mode displays your uploaded slide image as a full-width background behind the text on desktop. This layout is bold, modern, and ideal for organizations that want their Moodle homepage to make a strong first impression.

Recommended image size: 1920 × 1080 px (minimum width 1600 px)

Theme settings:

Side-Image Layout (Existing Option)

The side-image layout remains available and continues to be a great fit for organizations that prefer a structured, balanced design. Your uploaded image appears on the right-hand side on desktop, alongside clear and readable headline text on the left.

Recommended size: 1000 × 1000 px square

Side-image features include:

• Background color mode
• SVG background patterns
• Custom pattern colors
• Optional circular cropping

Theme settings:

Real Design Examples for Different Organization Types

These examples show how organizations can style their Lumo hero section using only the built-in settings. They’re not rules — any layout can work for any Moodle site.

1. For Everyone (General Learning Sites)

Full-Width Example:

Side-Image Example:

2. For Businesses (Corporate Training)

Full-Width Example:

Side-Image Example:

3. For Governments & Public Sector

Full-Width Example:

Side-Image Example:

4. For Universities & Higher Education

Full-Width Example:

Side-Image Example:

What Each Layout Helps You Achieve

Side-Image Layout Works Well When You Want:

• A structured, tidy homepage
• Predictable alignment across slides
• Clear, accessibility-friendly text
• A minimal look with subtle patterns

Full-Width Background Layout Works Well When You Want:

• Immersive, high-impact visuals
• A modern website feel
• Strong lifestyle or workplace photography
• A more atmospheric and emotional design

Tips for Designing a Professional Hero Section

• Use high-resolution images (1600 px+ wide)
• Keep headlines short and scannable
• Enable gradient overlay for busy photos
• Use consistent call-to-action buttons
• Test designs on both desktop and mobile
• Ensure color contrast meets accessibility guidelines

Want Even More Creative Design Ideas?

For advanced side-image layouts (such as layered PNGs, tutor grids, and custom compositions), see our companion guide: Moodle Theme Lumo Guide: Creative Ways to Use the Side Image Hero Layout

Get the Latest Version of Lumo

The full-width background image mode is available in the Moodle 5.1+ version of Lumo.

Lumo is designed to help Moodle sites look clean, modern, and professional without any coding.

Explore the Lumo Theme Demos:

For Everyone

For Businesses

For Governments

For Universities

The hero section plays an important role in shaping how learners feel when they arrive on your Moodle site. With the new full-width background image option, Lumo gives you more creative freedom to design a homepage that fits your organization’s identity.

Whether you prefer the structured side-image layout or a bold full-width design, you can customize the hero section in just a few clicks.

Try Lumo Theme

The post Moodle 5 Theme Lumo Guide: Customize the Hero Section (Full-Width Background Option) appeared first on eLearning Themes.

The examples below use the Lumo theme, but the same HTML works in any Moodle theme, and also in Moodle course pages if you switch TinyMCE editor to “Source code” mode.

Why You Might Need HTML

Simple HTML is useful when you want to:

• add footer menu links or custom footer content
• format contact details (address, phone, email)
• create calls-to-action or small link lists
• add line breaks, spacing, or inline icons
• structure text in homepage sections like the hero or featured blocks

Lumo uses plain textarea fields instead of rich-text editors in most theme settings to improve performance and reduce loading time. Adding simple HTML is the easiest way to control formatting.

A Helpful Tool for Beginners

If you’re not comfortable writing HTML manually, you can use this free converter:

https://www.syncfusion.com/free-tools/online-text-to-html-converter/

Type your text, click “Convert,” and paste the generated HTML into the Lumo footer block.

Basic HTML Tags You Need

Here are the HTML tags you’ll use the most:

Paragraphs

<p>Your text here</p>

Line breaks

<br>

Links

<a href="#">Read more</a>

Bold text

<b>Important:</b>

Lists (<ul> and <li>)

Lists are useful for menus, quick link groups, and structured footer content. Each item must be wrapped in a <li> tag.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Non-breaking space ( )

HTML collapses normal spaces, especially between inline elements like <b> and <a>. You can use a non-breaking space to force a visible space that will not disappear:

<b>Email:</b>&nbsp;<a href="mailto:info@example.com">info@example.com</a>

These simple tags are enough to build clean and structured footer content.

Footer HTML Examples for the Lumo Theme

Below are five ready-to-use footer content examples you can paste directly into the Lumo footer content blocks.

These examples cover:

• Two “Contact Us” layouts
• One “About Us” layout
• One “Get Involved” layout
• One menu-style footer block (from our original guide)

You can easily customize the text to suit your site.

1. Contact Us (with icons + compact layout)

This version uses icons for a modern, compact look.

<h4 class="footer-block-title">Contact Us</h4>
<p>123 Learning Street 
New York
United States 
10001</p>
<i class="fa-solid fa-phone me-2"></i>+123 4567 890<br>
<i class="fa-solid fa-envelope me-2"></i><a href="mailto:info@example.com">info@example.com</a>

2. Contact Us (basic text layout, no icons)

Good for a clean and neutral footer layout.

<h4 class="footer-block-title">Contact Us</h4>
<p>123 Learning Street 
New York
United States 
10001</p>
<b>Phone:</b>
+123 4567 890 
<b>Email:</b><br>
<a href="mailto:info@example.com">info@example.com</a>

3. About Us (paragraph + single link)

Ideal for introducing your organisation with one clear call-to-action link.

<h4 class="footer-block-title">About Us</h4>
<p>We are a modern learning platform offering online courses for 
professionals and students. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>
<i class="fa-solid fa-caret-right"></i>&nbsp;<a href="#">Learn more about us</a>
</p>

4. Get Involved (paragraph + list of links)

A good choice when you want to mix descriptive text with a small list of useful links.

<h4 class="footer-block-title">Get Involved</h4>
<p>Join our learning community and explore our latest activities. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<ul class="footer-links list-unstyled">
  <li class="link-item"><i class="fa-solid fa-caret-right"></i>&nbsp;<a href="#">Events</a></li>
  <li class="link-item"><i class="fa-solid fa-caret-right"></i>&nbsp;<a href="#">Newsletter</a></li>
  <li class="link-item"><i class="fa-solid fa-caret-right"></i>&nbsp;<a href="#">Forums</a></li>
</ul>

5. Footer Menu Block (from our original Lumo guide)

You can also create a footer column that works as a simple menu. This example comes from our original tutorial:

Lumo Moodle Theme Guide: How to Add a Custom Footer Menu Using Footer Blocks

This creates a clean, professional set of footer links that match the style used on many university and corporate learning portals.

<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>

Where to Add the HTML in Lumo

To add these in Lumo:

1. Go to Site administration → Appearance → Themes → Lumo → Footer
2. Open Footer Block 1–4
3. Paste your HTML into the content field
4. Save and refresh your site

Summary

Using simple HTML in Lumo’s footer blocks gives you full control over how your footer looks and feels. Whether you need contact details, menu-style links, or a short description about your organization, the examples in this guide provide ready-made layouts you can copy, paste, and customise.

For more footer examples, see our original guide:
Lumo Moodle Theme Guide: How to Add a Custom Footer Menu Using Footer Blocks

The post How to Use Simple HTML to Add Content in Moodle (Lumo Theme Examples) appeared first on eLearning Themes.

Its polished, professional look makes Lumo ideal for higher education institutions, corporate training platforms, and online academies that want to present their courses and programs with credibility and style.

In this guide, you’ll learn how to install and activate the Lumo theme on your Moodle 5 site step by step.

Step 1

After purchasing the theme, you will receive an email containing a download link. Download the theme zip file to your computer and extract it.

You should see one folder and one ReadMe file. The “lumo” folder is the actual theme folder you will upload to your Moodle site. The ReadMe-Moodle-Theme-Lumo.txt file contains quick setup instructions and additional notes about the theme.

Zip file contents:

• lumo (theme folder)
• ReadMe-Moodle-Theme-Lumo.txt (readme file)

Step 2

Upload the “lumo” folder to your server via an FTP program.

Important path note (for Moodle 5.x users):

If you are running Moodle 5.1 or later, upload the “lumo” folder to:

YOUR_MOODLE_INSTALLATION_ROOT/public/theme/lumo

This folder structure was introduced in Moodle 5.1 and applies to all Moodle versions from 5.1 upwards. In this setup, only the /public/ directory is web-accessible for better security and performance.

If you are running Moodle 5.0, upload the “lumo” folder to:

YOUR_MOODLE_INSTALLATION_ROOT/theme/lumo

If you upgrade your site from Moodle 5.0 to 5.1 or any later version, you’ll need to move the theme folder into the /public/theme/ directory.

For more details about Moodle’s new directory structure, see our guide on Moodle’s public folder structure.

Step 3

Log in to your Moodle site as an admin and go to the Themes page: Site administration > Appearance > Themes

Click the “Select theme” button located below the Lumo theme preview to activate it.

To configure the theme, click the cog icon and go to the theme settings page (see figure below):

Summary

That’s it! You’ve successfully installed and activated the Lumo theme for Moodle 5. Built on Boost and Bootstrap 5, Lumo remains fully compatible with the latest Moodle releases, giving you a reliable, modern, and customizable design for your learning platform.

Explore the Lumo theme demo and features

The post Lumo Theme Guide: How to Install the Lumo Theme for Moodle 5 appeared first on eLearning Themes.

From Moodle 5.1 onwards, Moodle introduces a new folder structure where only the /public/ directory is web-accessible. Core files, configuration, and system libraries now sit outside the web root, improving security and simplifying maintenance.

Upgrading to Moodle 5.1 or later is slightly different from previous versions, mainly due to the introduction of the /public/ folder structure. If you’re wondering how to upgrade safely, this guide walks you through the process step by step.

This guide applies to upgrades from Moodle 4.x or 5.0 to Moodle 5.1 and later versions, where the new /public/ folder structure requires changes to your hosting setup.

What’s New in Moodle 5.x

• New folder structure:
  From Moodle 5.1 onwards, the /public/ folder is the only directory served by the web server. Web-accessible code, including core components, themes, and third-party plugins, now resides under /public/, while sensitive or core directories such as admin, lib, and files like config.php are stored outside /public/ for improved security. ( Moodle Docs )


• Improved security:
  Separating public and private code paths helps prevent direct access to critical files.


• Cleaner upgrades and deployments:
  The new structure simplifies future updates and automated deployments by separating public code from private files — a change designed to support more flexible deployment and CI/CD setups. ( Moodle Docs )


• Compatibility updates:
  Moodle 5 supports modern PHP and database versions (for example PHP 8.3+ and recent MySQL / MariaDB releases), depending on the specific Moodle version.

For a deeper look at new features, see our related posts:
What’s New in Moodle 5.1 (UI and UX Improvements You’ll Notice)
Moodle 5: What’s New for Course Creators and Why Bootstrap 5 Matters

Step 1. Pre-Upgrade Preparation

1. Back up everything
   • Moodle database
   • Full codebase
   • moodledata folder
   • config.php file
2. Check requirements
   Confirm your server meets Moodle 5’s requirements (PHP 8.3+, MySQL 8.4 / MariaDB 10.6+, HTTPS).


3. Switch to Moodle’s default theme (Boost) before upgrading
   Before replacing any files, log in as an administrator and switch your active theme to Boost, Moodle’s default theme, before upgrading. This prevents upgrade errors that can occur when a custom or outdated theme isn’t compatible with the new version.
   
   
   For more details on safely updating themes, see our post: How To Upgrade Premium Moodle Themes
   .
4. Remove or update non-core plugins
   • Delete any custom plugins you no longer need.
   • Check the Moodle plugins directory to ensure your remaining plugins are compatible with Moodle 5.1 and later versions.
   • Only reinstall plugins after confirming compatibility.
   If your current theme or plugins haven’t been updated for Moodle 5.1 yet, this is a great opportunity to modernize. Our premium Moodle 5 themes Lumo, Maker, and Edutor are fully compatible with Moodle 5.1 and later versions, including the new /public/ folder structure.
5. Set up a staging copy
   Always test the upgrade on a staging or development site before applying it to your live Moodle instance.
   
   

   Note for customers using our premium Moodle themes:
   A single-application license allows you to install the theme on both a staging/development site and your public-facing production site. This makes it easier to test your upgrade safely before applying changes to your live Moodle installation.

Step 2. Replace the Moodle Codebase

1. Enable maintenance mode.
2. Remove old Moodle files except for:
   • config.php
   • Any plugins you’re keeping
   • The moodledata directory
3. Upload or extract the new Moodle 5.x files.
4. Move your existing config.php file back into place.

Step 3. Update the Folder Structure

This structural change is the main difference when upgrading from Moodle 4.x or 5.0, and is often where configuration issues occur.

From Moodle 5.1 onwards, your site should be served from:

/moodle/public/

not from the root Moodle directory. This step is required for most standard setups. If your document root isn’t updated, Moodle will not load correctly. ( Moodle Docs )

How to Point Your Site to the /public/ Folder

After upgrading, Moodle 5.1 expects your web server to serve files from the new /public/ directory instead of the root Moodle folder. How this is configured depends on your hosting setup.

Managed VPS or University Servers

If you have access to your web server configuration, update the document root to point directly to Moodle’s /public/ folder. For example:

# Apache example
DocumentRoot /var/www/moodle/public

# Nginx example
root /var/www/moodle/public;

Restart Apache or Nginx after saving the changes.

Shared or Managed Hosting

On shared or managed hosting platforms where you can’t directly change the document root, there are a few supported options:

• Create a symbolic link (symlink) to Moodle’s /public/ directory. Example:

ln -s /path/to/moodle/public /path/to/webroot/moodle

This creates a link from your web-accessible directory to Moodle’s /public folder. You can then point your domain to the symlink path in your hosting control panel.

• Use a location-specific alias if your hosting control panel supports it.
• Copy the contents of /public/ into your existing web root (/public_html/) as a last resort.

Reference: Moodle Docs – Shared Hosting (Upgrading)

Cloud Hosting (AWS, Azure, GCP)

In cloud or containerised environments, set your deployment root (for example /var/www/html) to /public. This structure works seamlessly with CI/CD pipelines and automated deployments.

Local Development

In local setups such as MAMP Pro, point your site’s document root to the /public/ folder so it mirrors production behavior.

Step 4. Run the Upgrade

Once your files and folder structure are in place, you can start the upgrade process.

Upgrade via the browser (recommended)

1. Log in to your Moodle site as an administrator.
2. Navigate to Site administration → Notifications, or visit:
   https://yourmoodlesite.com/admin/
3. Moodle will automatically detect the new version and guide you through the upgrade steps.
4. When the process is complete, purge caches via:
   Site administration → Development → Purge all caches

For large or automated deployments, Moodle also provides a command-line upgrade option.
See the official documentation for details: Moodle Docs

Step 5. Verify the Upgrade

• Log in and confirm course pages load correctly.
• Check file uploads, messaging, and cron jobs.
• Ensure your chosen theme displays correctly across devices.

Step 6. Troubleshooting Quick Reference

Step 7. Prepare for Future Releases

The new /public/ structure is here to stay. Keep your site upgrade-ready by:

• Maintaining a staging site for testing.
• Keeping all plugins up to date.
• Using Git or version control.
• Monitoring Moodle release updates.

Bonus Tip: Modernize Your Site While You Upgrade

Upgrading to Moodle 5 is the perfect opportunity to refresh your LMS design. Our Lumo, Maker, and Edutor themes are built on Bootstrap 5, fully compatible with Moodle 5.1+ and optimized for accessibility and mobile learning.

The post How to Upgrade to Moodle 5.x: Step-by-Step Guide + New <code>/Public/</code> Folder Structure Explained appeared first on eLearning Themes.

It is not a complete redesign, but it does feel more polished and modern for both educators and learners. If your university, company, or training organization is still using Moodle 4.x, Moodle 5.1 is worth exploring. It offers a smoother user experience and runs on a more up-to-date code base, setting the stage for future improvements.

In this post, we will look at some of the key UI and UX updates in Moodle 5.1 and how these small but meaningful changes can make a real difference in daily teaching and learning.

All our premium Moodle 5 themes, Lumo, Edutor, and Maker, work perfectly with Moodle 5.1.

Content Index

• New “Add Activity or Resource” Modal Window Design
• Improved Course Activities Overview Page
• AI Integration (Deepseek Added)
• TinyMCE Editor Improvements
• Other Small but Handy Improvements
• Major Change for Site Admins: Directory Restructure
• Final Thoughts

1. A Fresh “Add Activity or Resource” Modal Window Design

Moodle 5.1 has given the Add Activity or Resource window a significant UX update. The interface is now clearer, better organized, and faster to navigate, especially for course editors who add activities regularly.

New
(Moodle 5.1+)

Old
(Moodle 5.0 & 4.x)

Key improvements include:

• New purpose categories to make browsing easier ( Moodle docs)
• Related activities added to categories ( Moodle docs)
• A more intuitive selection process ( Moodle docs)
• Extra information such as whether an activity is gradable ( Moodle docs)
• A new details panel for richer activity information ( Moodle docs)

Moodle Docs: Activity chooser improvements

2. Improved Course Activities Overview Page

The Activities overview page, also known as the centralised course overview, was first introduced in Moodle 5.0. In Moodle 5.1 it has been expanded and polished to support more activity types and present course information in a clearer, more unified way.

To access it:

• Open a course.
• Click the Activities tab in the course navigation.
• You will see an overview of course activities grouped by activity type.

What is new in Moodle 5.1:

• The overview now supports many more activity types, including quiz, lesson, H5P, forum, workshop, choice, SCORM, glossary, database, and more.
• Teachers can view due dates and submission or grading status for activities like assignments and workshops.
• Students can quickly see due dates, completion requirements, and submission status in one place.
• The layout has been improved with better alignment and clearer date formatting.

This centralised view makes it easier for students to stay on top of their work and for teachers to track activity progress, especially in larger courses.

Moodle Docs: Activities overview | Moodle 5.1 release notes | Moodle HQ YouTube video

3. AI Integration (Deepseek Added)

Moodle 5.1 expands its built-in AI provider options by adding Deepseek to the list. This means institutions can integrate AI tools more flexibly, alongside providers like OpenAI.

AI features in Moodle 5.x can support:

• Text summarisation
• Generating draft content for activities
• Translation and language assistance
• Enhancing feedback workflows

While these features may not be relevant to every organisation yet, they are part of Moodle’s steady move toward intelligent learning environments.

Moodle Docs: AI new features and improvements

4. TinyMCE Editor Improvements

Moodle continues to modernise its editing experience. TinyMCE remains a key text editor in Moodle, and 5.1 brings several usability improvements for both teachers and students.

These include better formatting controls, cleaner toolbars, and a smoother writing experience overall. This makes it easier to add rich content in assignments, forums, pages, and other activity types.

Moodle Docs: TinyMCE improvements

5. Other Small but Handy Improvements

Moodle 5.1 also introduces a number of smaller UI and UX enhancements that make daily use more convenient.

Permalink option in activity menus

When editing mode is on, you can now copy a direct link to any activity from the action menu. This makes it easy to share links in announcements, messages, or forums.

Assignments and Report Builder updates

Moodle 5.1 also includes updates to Assignments and Report Builder, making reporting and grading workflows smoother. Rather than listing everything here, you can read the full details in the release notes:

• Moodle Docs: Assignments improvements
• Moodle Docs: Report builder improvements

6. Major Change for Site Admins: Directory Restructure

A significant technical change in Moodle 5.1 is the introduction of a new /public directory and related file structure updates. This improves maintainability and helps Moodle follow more modern web application standards.

If you manage a Moodle site:

• Check any custom plugins or themes for compatibility.
• Review the directory restructure notes.
• Test on a staging site before upgrading your production instance.

This is a backend change, so it does not affect the day-to-day user experience but is important for administrators.

Final Thoughts

Moodle 5.1 is not a radical redesign, but it is a thoughtful step forward. The new activity chooser design, the expanded activities overview page, AI integration, and smaller UX enhancements all add up to a more modern and efficient Moodle experience.

For universities, companies, and training providers still on Moodle 4.x, now is a good time to plan the upgrade.

The post What’s New in Moodle 5.1 (UI and UX Improvements You’ll Notice) appeared first on eLearning Themes.

In this tutorial, we’ll show you how to create a custom lead generation form page for offering a free brochure download of a learning program using our ready-made HTML template, along with Moodle’s Static Pages and Contact Form plugins. You can easily tailor the HTML content and lead gen form to suit your specific use case, such as offering a free brochure, eBook, or prospectus to encourage prospective learners to submit their details.

No design work is needed if you’re using one of our premium Moodle 5 themes. The form template is ready to use and fully styled for Lumo, Edutor, and Maker. If you’re using Moodle’s Boost theme or another Boost-based theme, you’ll need to apply your own CSS styling to match your site design.

Lumo

Edutor

Maker

Step 1 – Install the Required Plugins

You’ll need to install two free Moodle plugins to follow this tutorial:

• Static Pages – allows you to upload and display custom HTML pages
• Contact Form – adds a working contact form to your static page

To install:

1. Download the plugin ZIP files
2. Upload the extracted folders to your Moodle site’s /local/ directory
3. Complete the installation via the Moodle admin panel

Step 2 – Set the Contact Form Recipient Email

Before the form can send submissions, you need to set the email address that will receive the messages.

Go to:
Site administration > Server > Support contact

In the Support email field, enter the email address where you want form submissions to be sent.

Step 3 – Upload and Add the Page to Your Moodle Site

We’ve created a free responsive HTML lead form template that works out of the box with our Moodle 5 themes.

Once your content is ready, follow the steps below to upload and publish the page:

1. Go to:
   Site administration > Plugins > Local plugins > Static Pages > Documents
2. Upload your customized HTML file
3. Once uploaded, you’ll see the new file listed under List of static pages
4. Copy the page URL
5. Add the link to your Moodle site’s custom menu or footer so learners can find it easily

How to Customize

To edit the content of the template:

• Open the HTML file using a text editor such as:
  • Notepad (Windows)
  • TextEdit (Mac)
  • VS Code or Sublime Text (free code editors)
• Replace all placeholder text, form fields, links, and images with your own content
• Important: Keep all HTML tags and class names unchanged to preserve the layout and styling
• Keep the following form code unchanged for the form to function correctly with the Moodle contact form plugin:
  

  <div class="form-code-holder">
      <input type="hidden" id="sesskey" name="sesskey" value="">
      <script>document.getElementById('sesskey').value = M.cfg.sesskey;</script>
      <input type="hidden" id="referrer" name="referrer" value="">
      <script>document.getElementById('referrer').value = document.location.href;</script>
  </div>
  

• For advanced customization options, refer to the Moodle Contact Form Plugin Documentation.
• Save the file with the .html extension

Why Add a Lead Generation Form to Your Moodle Site?

A lead generation page helps you:

• Collect course interest or inquiries from potential learners
• Capture contact details for future follow-up
• Promote specific courses, webinars, or programs
• Streamline your marketing and sales process

Instead of relying on external landing pages, you can keep everything on your Moodle site, fully branded and easy to manage.

Optimized for Our Moodle 5 Themes (Lumo, Edutor & Maker)

This lead form template is fully styled and tested with all of our premium Moodle 5 themes:

• Lumo – modern, professional design ideal for corporate training and continuing education
• Edutor – academic-focused theme designed for schools and universities
• Maker – clean and flexible layout perfect for online course creators and training companies

Key features:

• Built with Bootstrap 5
• Fully responsive and mobile-friendly
• Works perfectly with the Static Pages and Contact Form plugins
• Easy to customize using theme settings

See a working example in our Lumo theme demo.

Final Thoughts

Adding a lead generation form page to your Moodle 5 site is an easy way to improve engagement and grow your audience.With our free HTML template and step-by-step guide, you can set up a custom lead form that looks great and functions smoothly, with no need to start from scratch.

Download the free template and try it out on your site today.

Looking to take your Moodle site to the next level?
Explore our Moodle 5 themes to find the perfect match for your project.

The post How to Create a Lead Generation Form Page for Your Moodle 5 Site (Free HTML Templates Included) appeared first on eLearning Themes.

Upgrading a Moodle site isn’t a one-click job. It takes planning, testing, and careful execution to make sure everything runs smoothly afterward. If you’re wondering whether it’s worth moving to Moodle 5, this post will walk you through the key benefits of the latest version and show you how using the right theme can make the transition much easier.

If you’re planning your upgrade, check out our step-by-step guide: How to Upgrade to Moodle 5.1 (With the New Public Folder Structure Explained).

What’s New in Moodle 5?

If you’re not yet familiar with Moodle 5, it introduces several updates that improve performance, usability, and long-term support. Some of the biggest changes include:

• Bootstrap 5 support for modern frontend development
• Improved performance and accessibility for all users
• AI integration with the new Moodle AI features, including generative tools that can assist educators with content creation and feedback (watch video)
• UX enhancements for course creators and learners, including streamlined interfaces and better activity workflows (watch video)

We’ve covered these features in more detail here:
Moodle 5: What’s New for Course Creators and Why Bootstrap 5 Matters

And if you’re a course creator or designer, don’t miss this practical follow-up post:
How to Use Bootstrap 5 Components in Moodle 5 to Improve Course Design

Why the Theme You Choose Matters

Upgrading your Moodle version without a compatible theme can lead to:

• Broken layouts or UI glitches
• Inconsistent branding or missing components
• Admin frustration trying to fix front-end issues

A theme designed for Moodle 5 and Bootstrap 5 will give you a smoother experience and allow you to take full advantage of what Moodle 5 offers.

How Our Moodle Themes Help with the Upgrade

All of our Moodle themes are now fully compatible with Moodle 5. However, if you’re looking for the best options to support your upgrade or build a new site, our top three recommended themes are Lumo, Edutor, and Maker — each offering a strong balance of design flexibility, modern UX, and ease of setup.

Lumo – Built for Moodle 5 and Bootstrap 5

Lumo is our newest theme, developed from the ground up for Moodle 5. It’s sleek, modern, and takes full advantage of Bootstrap 5.

Key benefits:

• Designed specifically for Moodle 5
• Clean, modern frontend with excellent UI and UX
• Supports homepage section reordering via the theme admin settings – no coding needed
• Includes a flexible pricing table section to promote course plans or subscription tiers:
  How and Why to Use the New Pricing Table Section
• Offers WordPress blog integration to dynamically show external blog posts on the Moodle homepage:
  Show WordPress Blog Posts in Moodle 5 Using the Static Pages Plugin (Lumo Theme)
• Fully supports ready-styled static pages using the Static Pages plugin, including:
  
  • Course landing page (Udemy-style)
  • Course landing page (standard)
  • Course catalog page
  • Static Blog page
  • WordPress Blog page
  • Contact form page
  • About, FAQs and Contact pages

Edutor and Maker – Moodle 4.x Ready and Moodle 5 Compatible

Still using Moodle 4.x? Edutor and Maker are great options if you’re not quite ready to upgrade but want a theme that will carry you into Moodle 5 when the time is right.

Edutor

Maker

Key benefits:

• Fully compatible with both Moodle 4.x and Moodle 5.x
• Actively maintained and tested on the latest Moodle releases
• Support the use of the Static Pages plugin to create attractive, ready-styled pages including:
• Course landing page (Udemy-style)
• Course landing page (standard)
• Course catalog page
• Static Blog page
• Contact form pages and more

Planning to Upgrade?

If you’re preparing to upgrade to Moodle 5, here are a few quick tips:

• Set up a staging site
  Test the upgrade process and compatibility before applying changes to your live Moodle site.
• Use a Moodle 5-ready theme
  Avoid issues with outdated themes that aren’t built for the new Bootstrap 5 structure.
• Review plugin compatibility
  Not all plugins may be Moodle 5-ready. Be sure to check the plugin directory or developer notes.

Final Thoughts

Moodle 5 is a solid upgrade that brings real performance and usability improvements, including new AI tools, enhanced accessibility, and modern frontend flexibility. But to take full advantage of it and avoid headaches during the transition, you’ll need a theme that’s up to date and built for the new structure.

Whether you’re already on Moodle 5 or planning to upgrade soon, our Moodle themes can help:

• Lumo is the ideal choice for new Moodle 5 sites with homepage layout control, pricing sections, WordPress blog integration, and custom static pages.
• Edutor and Maker are reliable options for Moodle 4.x sites preparing to upgrade, with support for modern layouts and pre-designed content pages.

Explore our Moodle themes and find the right fit for your upgrade

The post Why Upgrade to Moodle 5? Key Benefits and How Our Theme Makes the Transition Smoother appeared first on eLearning Themes.

In this post, we’ll walk you through why this feature matters and how you can enable and customise it for your own Moodle site.

Why Add a Pricing Table to Your Moodle Site?

Whether you’re offering paid courses, business training plans, or educational subscriptions, a pricing table makes it easier for learners to understand what you offer and how much it costs. It brings clarity, encourages conversions, and gives your site a more polished, professional look.

With Lumo’s new pricing table section, you can:

• Show up to four custom plans side by side
• Add a summary and list of key features for each plan
• Include clear pricing and CTAs to drive sign-ups or purchases
• Link CTA buttons to external platforms like Stripe, PayPal, Gumroad, Paddle, or your Moodle course catalog.

It’s an ideal feature for Moodle sites used by training providers, course creators, or universities offering professional learning options.

What You Can Do with the New Pricing Section

The section is designed to be flexible and easy to set up. You can:

• Choose between 2, 3, or 4 columns for the layout (on desktop)
• Add a plan name, summary, price, price description, and call-to-action button
• Include an optional plan content field, where you can add a list of features or other details using HTML

Here’s an example of what you can add in the plan content field:

<div class="intro">What's included:</div>
<ul class="list-unstyled plan-feature-list">
  <li><i class="bi bi-check-lg"></i> Feature one lorem ipsum</li>
  <li><i class="bi bi-check-lg"></i> Feature two lorem ipsum</li>
  <li><i class="bi bi-check-lg"></i> Feature three lorem ipsum</li>
  <li><i class="bi bi-check-lg"></i> Feature four lorem ipsum</li>
  <li><i class="bi bi-check-lg"></i> Feature five lorem ipsum</li>
</ul>

The output will look clean and consistent with the rest of the theme.

How to Enable the Pricing Table in Lumo

Log in as a site administrator and go to: Site administration > Appearance > Themes > Lumo Settings > Home Pricing Section

There, you can:

• Enable the section using the checkbox
• Choose how many plans (columns) to show
• Enter all plan details, including pricing, summaries, and CTAs
• Add HTML to the plan content area if needed

By default, the pricing section appears above the FAQs section on the front page.

If you upgraded the Lumo theme from an earlier version, make sure to manually add the new pricing section to the list in:

Lumo Settings > Home Section Order

This field uses a comma-separated list to define the order of homepage sections. If pricing section is missing from the list, the section won’t appear – even if it’s enabled.

Make sure to include fp_pricing in the comma-separated list to ensure the pricing section appears on the homepage.

Showcasing Different Use Cases

Lumo’s pricing table is flexible and works for different types of Moodle sites. Below are example layouts from our live demos to give you some inspiration.

1) General Use (Demo 1 – For Everyone)

This layout features four pricing plans — Essentials, Premium, Academy, and Enterprise — making it ideal for sites offering a range of course tiers or access levels. It works well for public-facing portals with diverse learner needs.

2) Business Training Portal (Demo 2 – For Business)

Designed for internal staff training or commercial learning platforms. This version emphasizes value, features, and clear call-to-actions.

3) Government Learning Portal (Demo 3 – For Governments)

4) Higher Education Site (Demo 4 – For Universities)

A great layout for showcasing course bundles, school/faculty-specific pricing, or discounts for students and staff.

Final Thoughts

This new pricing section is a great way to promote your learning plans more effectively, especially if you’re running a commercial Moodle site or want to highlight different course tiers.

We’ve kept the setup simple and flexible, so you can make it work for your unique needs, whether you’re a solo course creator or a large training provider.

Ready to give it a try? Explore the Lumo theme or check out our full Moodle theme collection to find the right fit for your site.

The post Lumo Moodle Theme: How and Why to Use the New Pricing Table Section appeared first on eLearning Themes.