Your Moodle site’s homepage sets the tone for the entire learning experience. The hero section is often the first thing learners see, so it’s worth making it look professional, on-brand, and welcoming.
Our Moodle 5 theme Lumo now supports a brand-new layout option for the hero section – a full-width background image mode.
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
- 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
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.