Many Moodle sites include theme settings that allow you to add your own text, links, and footer content. Our premium Moodle 5 theme Lumo works the same way and uses simple HTML for these content areas. In this guide, we’ll show you how to format text, create links, and build structured footer blocks in Lumo using clean HTML markup.

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