Lumo is our latest modern Moodle 5 theme, and the Side Image layout has been part of its Hero section since the very beginning. It’s the default layout in the theme because it’s simple, flexible, and easy to style. With the right image and a few setting tweaks, you can create a homepage that looks polished, modern, and unique to your institution or organization.

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)

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)