Our brand new Moodle 4.x theme Edutor comes with many professionally designed sections on the front page for you to promote your site and courses. Each section is configurable via the theme settings page and they can be turned on or off based on your needs.

In this tutorial we will share the HTML code snippets you can use to configure Edutor theme’s “Frontpage Promo Section” exactly like shown on our Moodle theme demo.

The Frontpage Promo Section allows you to add up to six promotional items and the added items will auto slide as carousel sliders. Each item contains a configurable content area in which you can add plain text or more advanced HTML code (see examples below). You can also upload an image and add an optional video to be displayed next to the content area for each item.

How to add the code

Go to: Site administration > Appearance > Themes > Edutor > Frontpage Promo Section You need to activate the code editor mode before enter the HTML code as shown in the screencast below.

Design One

Front View:

Theme settings:

HTML code snippet:

<p class="mb-5">Intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac sapien quis dolor aliquam lacinia at nec enim. Sed pulvinar fermentum eros eget bibendum.</p>
<a class="theme-card-link" href="#link1">
    <span class="theme-card-content">
        <span class="theme-card-title">For Learners</span>
        <span class="theme-card-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
        <span class="arrow-holder"></span>
    </span>
</a>
<a class="theme-card-link" href="#link1">
    <span class="theme-card-content">
        <span class="theme-card-title">For Instructors</span>
        <span class="theme-card-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
        <span class="arrow-holder"></span>
    </span>
</a>
<a class="theme-card-link" href="#link1">
    <span class="theme-card-content">
        <span class="theme-card-title">For Sponsors</span>
        <span class="theme-card-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
        <span class="arrow-holder"></span>
    </span>
</a>

Design Two

Front View:

Theme settings:

HTML code snippet:

<p>Intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac sapien quis dolor aliquam lacinia at nec enim. Sed pulvinar fermentum eros eget bibendum.</p>

<ul class="theme-checklist">
    <li><i class="list-check-icon fa fa-check-circle mr-2"></i>List item example lorem ipsum</li>
    <li><i class="list-check-icon fa fa-check-circle mr-2"></i>List item example lorem ipsum</li>
    <li><i class="list-check-icon fa fa-check-circle mr-2"></i>List item example lorem ipsum</li>
</ul>

Want to create your own promo section imagery similar to the ones used on our theme demo? We have included the original Photoshop PSD design template in the theme zip file so you can easily customise and export your own promo images for this section.

Photoshop PSD Template Included:

Replace With Your Images: