Unlike WordPress, you can’t add “Pages” in Moodle as it only allows you to add “Courses”. Luckily, there is a brilliant Moodle third party plugin called “Static Pages” which can help you add HTML pages to your Moodle site with ease. It’s a great way to add some essential pages to your Moodle site to make it complete as a learning platform.
Step 1 – Install the plugin
Download the Static Page plugin and upload the downloaded zip file to your Moodle site via the Install plugins page:
Site Administration > Plugins > Install plugins. You need to be a site admin to install and use the plugin.
Step 2 – Configure the plugin
After installing the plugin, you can see the “Static Pages” option under the “Site Administration” section as shown in the figure below.
Click the “Static Pages” link and you will be able to upload your HTML files and configure the relevant settings. You can find detailed explanations of each setting from the plugin’s online documentation here.
For setting up our demo, we changed the “Clean HTML code” option from default “Yes, clean HTML code” to “No, don’t clean HTML code”. Make sure you do the same if you’d like to use our HTML templates and embed iframe content such as Youtube/Vimeo video and Google maps in your pages.
Step 3 – Add HTML Pages
Upload your HTML pages to the documents input field and save the changes. To make your HTML pages you can reference the plugin documentation here.
Basic code structure:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Imprint</title> </head> <body> <h1>Imprint</h1> [Your content goes here] </body> </html>
You can download the HTML pages we used in our demo below and edit the page content to suit your own needs.Free Download (5368 downloads)
If you are using our Moodle theme Maker, there is no need to style the pages as all of the styling for the pages is included in the Maker theme.
If you are using a different Moodle theme you will need to add custom styling to the pages. You can either add your CSS to your theme’s Custom CSS option (if it has one) or include a
<style> tag into the
<head>> section of your HTML document as shown below:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Imprint</title> <style> [Your custom css code goes here] </style> </head> <body> <h1>Imprint</h1> [Your content goes here] </body> </html>
Step 4 – Link the Pages
After adding your pages, you can get the page URLs from the “List of static pages” page.
We hope you find this tutorial and the HTML page templates useful. If you think there are any other types of static pages that could be useful for a Moodle site please leave a comment below.