How to Customize Moodle™ Homepage and Build Custom Pages in Minutes

How to Customize Moodle™ Homepage and Build Custom Pages in Minutes

Having problems with Moodle™ Customization?  

Struggling to create a nice-looking interface, cleaner pages (Homepages and course pages), and navigation or do you feel that the customization options in Moodle™ are limited?

Not to worry as we’re here to help!

In this tutorial, we’ll help you understand how to easily customize any page on your Moodle™site using Edwiser RemUI.

For this, we will be modifying the university template. And we’ll also be talking about the custom page builder in the theme – trust me, page designing and customization is going to get super convenient with this 🙂

In case you don’t know, Edwiser RemUI is an elegant, modern, and responsive Moodle™ theme that transforms your Moodle™ experience. And even simplifies building & customizing new pages. The theme also comes with a Demo Importer offering ready-made homepage & course page templates for making Moodle™ more appealing to use and easy to get started with.

Setting up Edwiser RemUI

To set up Edwiser RemUI on Moodle™, check out the video below for more information.

Once you have followed the above procedure to import the Edwiser RemUI theme, you should have a dashboard view as shown below.

s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631700609366 dashboard

Creating or Editing a Flexible Homepage

As previously mentioned, we will be using the default university template. To edit, click the home button on the left navigation panel on the Dashboard, this will take us to the homepage. Next, you should click on the edit icon located at the bottom right corner of the page.

s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631700917940 site+edit

Once you click on the button, we will notice that Edwiser RemUI provides you with sectioning to customize the homepage according to the various sections as seen in the figure below.

s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631720998034 editin LI+2

The buttons at the bottom right allow you to add sections to your homepage and also to preview the homepage, while, the buttons at the top left allow you to edit the header section.

Note:

Every time you hover on any section, buttons at the left just like the ones we see in the picture above appear. These buttons allow you to edit that particular section.
Once you click on the settings icon on the top left, we are giving an editing block for that particular section. We can also use custom styling to style that particular section as illustrated in the image below.

s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631786591339 css

To add a section to our homepage, click on the add icon at the bottom right as indicated in the image above, this should open a tab as shown below.

s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631786103237 section

It provides us with lot of sections ranging from slider section to about us section and more. 

Building pages faster than ever with Moodle™ Custom Blocks

Now that you have customized the homepage, let us try and customize the dashboard with the Edwiser RemUI custom Moodle™ blocks. These Moodle™ blocks or the custom page builder in the theme give you the flexibility to build & modify your Moodle™ page layouts to suit your needs. 

The functionality to add images text and other blocks gives you enough flexibility to experiment with a variety of interesting page layouts.
So, to edit out the dashboard:   

  • click home icon at the top left hand corner,
  • click the `customize this page` button, 
  • click on  ` add block`  button 
s 72D2FA700985C3949F81E71051E8B6BC730808BA6EA6933C07D17B667949663B 1632312440607 blockc
s 72D2FA700985C3949F81E71051E8B6BC730808BA6EA6933C07D17B667949663B 1632312468735 sc

The custom page builder provides you with over 14+ custom blocks for quick & easy personalized page designing.  

  • Pricing
  • Features (3 Layouts)
  • Contact_us, Grid view
  • Hero section (2 layouts)
  • HTML, Media text (4)

Just drag and drop, to customize individual pages as per your e-learning needs. Also, right within the custom block is the Live Customizer, which allows you to customize any page on the go. 

s 72D2FA700985C3949F81E71051E8B6BC730808BA6EA6933C07D17B667949663B 1632313331319 live

After selecting a block, click on the ` open with Live Customizer `  to customize the block 

s 72D2FA700985C3949F81E71051E8B6BC730808BA6EA6933C07D17B667949663B 1632313414465 in+live

Once you are done customizing, click the ` save changes ` button to save all changes. 

Building and Customizing Moodle™ Pages.

Creating a new page is also made easier with Edwiser RemUI. While still on the homepage, click Add an activity or resources link located at the bottom right of the page.

s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631791813032 new+page

Once you click on the button, a modal appears for which you are to select a page, to add a new page as shown in the image below.

s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631791859084 page
s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631791888056 nw+p

An input field appears for you to fill similar to that seen in the images above. Once you fill in the required inputs, you can submit the form to create our new page.
Having created a new page, you have one more thing to add in order to access that page. Click on add block on the left-side navigation, and select the main menu. 

s 72D2FA700985C3949F81E71051E8B6BC730808BA6EA6933C07D17B667949663B 1632307068115 image

To access the page,  click on the button shown on the image below.

s AD293DFB9A4F4D5AE7964ECE96BD27F91E5BD5744C32600A56642EB4784A3992 1631792290279 bu

Conclusion

As demonstrated in this tutorial, you have seen how easy it is to modify, customize and create Moodle™custom pages using Edwiser RemUI,
Here are some benefits in a nutshell:

  • custom Moodle blocks for super-quick page building
  • Flexible, modern and clean UI design
  • Fast and simple customization without coding
  • Ready-to-use homepages & course pages that come with it.

And that’s a wrap! We hope you found this tutorial helpful. Don’t forget to check out Edwiser RemUI to further EXPLORE features and prices. 

2 thoughts on “How to Customize Moodle™ Homepage and Build Custom Pages in Minutes”

  1. Avatar of suganya

    Thank for the information

    I have one doubt

    I want create for separate home page for students and teacher

    Can you help me

Leave a Comment

Your email address will not be published. Required fields are marked *