How to Customize Moodle™ login page
Why customize Moodle™ login page
The login page is one of the most important pages of your Moodle™ site – For you as well as your students. You can track the behavior of your logged-in learners which has great benefits when it comes to profiling your users, personalizing their learning experience, and overall reporting. For your students, the activity of filling out a login page unlocks access to restricted, member-only course content and helps them make the most of your Moodle™ courses.
Learners will visit your site again and again, probably to learn something new, get assignments or just revise what they had read earlier. Users who want to access their accounts can’t do so without the login page, and if it’s not designed well or if it’s a pain to use, you might lose users!
The first interaction with a learner is usually the Login page; it’s also where first impressions are made! So, as a site admin, take your Moodle™ login page design seriously! You have to make sure that it’s not just aesthetically pleasing but also easy to use and welcoming.
Have you ever wondered how educators can make their Moodle™ login page more personal? Many teachers ask this question on online learning platforms. Luckily, customization is possible with Moodle™. In this article, we will show you how to customize the default Moodle™ log-in page to accentuate your e-learning site’s branding and identity.
Customizing the login page via a Moodle™ Theme with CSS editing tools
The Moodle™ Plugin Directory offers a lot of attractive paid and free themes that you can still personalize using CSS. So It’s okay if you don’t have experience with CSS. We do not discourage you from customizing your Moodle™ login page. There are many themes available that combine flexibility and functionality.
Free MoodleTM themes give your site a fresh new look. On the other hand, premium themes like Edwiser RemUI may be just what you need to elevate your branding and experience. The plugin not only comes with many layouts to choose from, but it anticipates your needs by adding new features and bundling other plugins.
How to easily customize the default Moodle™ login page using the Edwiser RemUI theme?
To customize the login page with Edwiser RemUI, enable the live customizer of the theme. To enable the live customizer you need to click on the paintbrush icon available in the top right region of the header menu for Edwiser RemUI 4.0 and in the secondary left navigation for Edwiser RemUI 3.9 to 3.11.
For Moodle™ 4.0
For Moodle™ 3.9,3.10 and 3.11
Once the live customizer is enabled, navigate to the ‘Login’ Tab to customize your login page.
Note: The login page cannot be previewed in the live customizer because it is displayed to non-logged-in users only. You can preview the customization by saving the changes and opening the login page in incognito mode.
You can now customize the ‘Login panel’ and the ‘login page content’ once you are in the ‘Login’ Tab inside the Live customizer.
- Panel: Here you will find the options to customize the panel (card) of your login page.
Go ahead and customize the following elements to make it unique for your brand.
i) Logo: Here you can add a logo that you need to display on the login and signup cards.
ii) Page background: Change the background color of the panel, any color that resonates well with your brand identity.
iii) Text/link/link-hover color: Change the color of the text/link that is displayed on the panel
iv) Page layout: You can choose between three layouts for your panel i.e Right, Left and center
For reference on the page layout option, check the screenshots below
- Center Align:
- Left Align:
- Right Align:
2) Page: Text
i) Site Description: Here you can add additional information that you need to display on the login page. It can be a description of your site, login instructions for users, or any other information that you need to share.
You can also add images, and links and style the text in the editor. The editor is highlighted in the screenshot below:
ii) Upload Background image: Last but not the least, upload a background image that looks good and compliments the login page t in a way that it stands out. Make sure you choose a subtle image that doesn’t capture much attention or something that isn’t too bright or vivid.
So this was our guide to customizing your Moodle™ login page
You can try customizing traditionally if you have a fair knowledge of coding.
And if you’re looking for something simple and efficient without spending more time and effort in coding. You can be relaxed about customizing your Moodle™ site with Edwiser RemUI. Check it out! It’s a handy plugin to easily customize the default Moodle™ login page.
In case you have easier ways to customize the Moodle™ login page feel free to share your experience so others can also benefit from it.