How to build a Moodle™ Custom Page in a Jiffy (Core Moodle™ vs using a Theme)
Are you looking to customize your Moodle™ by designing and launching a great-looking Moodle™ Custom Page?
This is the perfect place!! And when it comes to customization, having options is a good thing. We’ll give you TWO
We will demonstrate how to easily customize your Moodle™ and deliver the best learning experience to your students.
In this tutorial, we’ll be comparing building a custom page using Traditional Moodle™ Vs using the Edwiser RemUI theme!!
#1 Building a Moodle™ Custom Page (Page Creation Process)
Moodle™ has different ways to create and customize course pages. But there is no all-in-one Moodle™page builder.
Here, we will be using the coding approach in core Moodle™ using traditional to customize pages and improve layouts.
Before we can create a page in traditional Moodle™ we first create a course.
To create a course first let navigate to site Administration→ Courses→ add a new course
After a creating course, it should be displayed on the home
Click on the course created and click on the Turn Editing On button to start editing
Once the button is clicked, you can start adding or editing the course topic. To add a page click the add an activity or resources then click on Page
An input field appears for you to fill. Once you fill in the required inputs, let us now design our page. You’ll have to dabble with code to design pages in traditional Moodle™.
#2 Page Designing & Customization in Core Moodle™
Click on the expand arrow on the page content section to expand our options
Click on the code icon and paste the code below
<section>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size: 50px; color: black"><strong><br></strong></h1>
<h1 style="font-size: 50px; color: black"><strong><br></strong></h1>
<h1 style="font-size: 50px; color: black"><strong><br></strong></h1>
<h1 style="font-size: 50px; color: black"><strong><br></strong></h1>
<h1 style="font-size: 50px; color: black"><strong><br></strong></h1>
<h1 style="font-size: 50px; color: black"><strong><br></strong></h1>
<h1 style="font-size: 50px; color: black"><strong><br></strong></h1>
<h1 style="font-size: 50px; color: black"><br></h1>
<p>We will help you learn ALGEBRA</p>
</div>
</div>
</section>
<section>
<div class="container">
<h2 style="margin-top: 50px">Popular Topics</h2>
<p style="margin-bottom: 50px">
Pellentesque cursus arcu id magna euismod in elementum purus molestie.
</p>
<div class="row">
<div class="column-4" style="background-color: rgb(231, 231, 231)">
<img src="https://images.unsplash.com/photo-1542785291-fe3faea39066?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGlnaHR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Avatar" class="image">
<h4>Master Moddle in few seconds</h4>
<p>Rating...</p>
</div>
<div class="column-4" style="background-color: rgb(231, 231, 231)">
<img src="https://images.unsplash.com/photo-1542785291-fe3faea39066?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGlnaHR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Avatar" class="image">
<h4>Master EDwiser in few seconds</h4>
<p>Rating...</p>
</div>
<div class="column-4" style="background-color: rgb(231, 231, 231)">
<img src="https://images.unsplash.com/photo-1542785291-fe3faea39066?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGlnaHR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Avatar" class="image">
<h4>Master Moddle in few seconds</h4>
<p>Rating...</p>
</div>
<div class="column-4" style="background-color: rgb(231, 231, 231)">
<img src="https://images.unsplash.com/photo-1542785291-fe3faea39066?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGlnaHR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Avatar" class="image">
<h4>Master EDwiser in few seconds</h4>
<p>Rating...</p>
</div>
</div>
</div>
</section>
<section>
<div class="lis-sec">
<div class="row">
<div class="column-3" style="margin-top: 50px">
<h2>Best Industry Leaders</h2>
<p>
We pride ourselves on providing the best Learning Management
System for WordPress.
</p>
</div>
<div class="column-3" style="margin-top: 50px">
<h2>Learn Anything Online</h2>
<p>
Do you want to sell your courses online and let the world know
about you? Choose us!
</p>
</div>
<div class="column-3">
<img src="https://eitrawmaterials.eu/wp-content/uploads/2019/05/Label-brochure-1.jpg" alt="" class="image">
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2 style="margin-top: 50px">Top Instructors</h2>
<p style="margin-bottom: 50px">
Pellentesque cursus arcu id magna euismod in elementum purus molestie.
</p>
<div class="row">
<div class="column-4" style="background-color: rgb(231, 231, 231)">
<img src="https://cdn.icon-icons.com/icons2/2506/PNG/512/user_icon_150670.png" alt="Avatar" class="image">
<h4>Instructor</h4>
</div>
<div class="column-4" style="background-color: rgb(231, 231, 231)">
<img src="https://cdn.icon-icons.com/icons2/2506/PNG/512/user_icon_150670.png" alt="Avatar" class="image">
<h4>Instructor</h4>
</div>
<div class="column-4" style="background-color: rgb(231, 231, 231)">
<img src="https://cdn.icon-icons.com/icons2/2506/PNG/512/user_icon_150670.png" alt="Avatar" class="image">
<h4>Instructor</h4>
</div>
<div class="column-4" style="background-color: rgb(231, 231, 231)">
<img src="https://cdn.icon-icons.com/icons2/2506/PNG/512/user_icon_150670.png" alt="Avatar" class="image">
<h4>Instructor</h4>
</div>
</div>
</div>
</section>
You need to include the CSS, to do that, navigate to site Administration→ appearance and select the active theme → advance theme settings. Copy & paste the below CSS in the Raw initial SCSS input field.
.hero-image {
background-image: url("https://st3.depositphotos.com/3591429/13656/i/600/depositphotos_136562916-stock-photo-creative-website-banner.jpg");
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text button {
border: none;
outline: 0;
margin-top: 30px;
display: inline-block;
padding: 15px;
color: rgb(255, 255, 255);
background-color: rgb(156, 29, 29);
text-align: center;
cursor: pointer;
width: 190px;
}
.hero-text button:hover {
background-color: rgb(240, 233, 233);
color: rgb(206, 44, 44);
}
.column-4 {
float: left;
width: 22%;
padding: 5px;
height: 320px;
margin: 5px;
text-align: center;
}
.column-3 {
float: left;
width: 32%;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.lis-sec {
background-color: rgb(67, 168, 109);
/* height: 100px; */
padding: 70px;
}
#3 Designing a Moodle™Custom Page using Edwiser RemUI
Now let’s dive into building pages faster with Edwiser RemUI theme’s custom page builder. You’ll see how easy it is to customize any page on your Moodle™.
Note – Please follow #1 for page creation and continue with the below steps using the Edwiser RemUI’s custom page builder
Click on the Add block button
Select from the list of blocks
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.
The Live Customizer allows you to customize the block to our needs. Once we are done modifying click the save changes button to save changes.
The next thing to do is to drag the already customized section to our page.
So, there you have it! Now, do you agree that building pages is way easier using Edwiser RemUI, with its custom page builder? I’m sure you’ll have your own thought process to evaluate this.
Here’s what our customers feel. This might help you start thinking in the right direction!
With our Moodle™ page builder, you’ll be making the most modern and professional-looking Moodle™ custom pages possible.
Conclusion
If you hire a developer to handle Moodle™ customization, 30%-40% of your cost would be spent on building & customizing individual pages. This points to the fact that it not only demands a massive amount of work but also demands plenty of time and money.
- Ease of use
- Re- skinning Moodle™ and building Moodle™ custom pages individually – both the tasks can be accomplished using a single theme
- Faster page building and customization
- No coding required
- No complex settings or configurations required
- You can create your own design/layouts
- Flexibility to build and design pages your way
Edwiser RemUI’s custom page builder helps you save the trouble of creating custom Moodle™ pages starting from zero. Since this feature is a part of the theme, your overall customization costs come down, quickly bringing you a step closer to your ideal Moodle™.
So, try it out today for better-looking and functioning Moodle™ pages with minimal effort and in half the time.
