How to customise your course website using Website Builder?

This is a step by step guide to customising your home page, course landing pages & blogs using the new website builder.

Spayee’s in-built Website Builder helps you in customising the default web pages of your course platform. You can customise your home page, course landing pages, blogs & other web pages using our in-built Website Builder.

Customising Course Website using Website Builder

Go to your Dashboard > DESIGN > Website.

 

Now, scroll down & click on "Design", besides "Home".

 

 

Fully customisable Page Builder will open.

From here you can add or remove new sections on the home page, change its appearance & its positioning.

 

Home Page Sections

A standard home page contains the following sections. However, these sections are fully customisable & editable.

 

1) Banner Image & Text

This section contains the header of a home page. You can add your preferred image here & edit the text.

 

2) Course Features

This section contains the unique selling points of your courses. You can change its display name, its description, individual features & well as positioning.

 

3) Popular Online Courses

This section includes the courses which have been most popular on your platform.

You can edit its text, remove or reposition its element.

 

 

4) Course Platform Features

This section helps you to introduce features of your course that might stand out for your learners. You can edit its text, remove or reposition its element.

 

 

5) Popular & Special Online Courses

This section automatically picks up courses from your platform which has been most popular & which generated the highest sales.

You can edit/remove/customise its display text, course cover image & "View More" button.

 

 

6) Students Reviews

You can feature your student's reviews through this section. You can edit/remove/customise its student's review, cover image & their names.

 

7) Team Members Introduction

Introduce your team members to the world. You can edit/remove/customise its text, cover image & their names.

 

8) Mobile App Links

If you are subscribed to our Business plan or above, you can utilise this section to introduce your mobile apps, & send them directly to app download option

You can edit/remove/customise its text, cover image & link.

Now that you have got a fair understanding of various sections of a home page, you can add, remove or customise individual blocks as per your preference. 

Editing Individual Sections using Website Builder

Components of a Website Builder

A typical website builder has two broad components:

  1. The first component consists of the following:
  • All Sections: You can drag & drop a new section from here on your web page.
  • Blocks: Select a new block from here to drag & drop on your web page.
  • Fonts: Change the fonts from here.
  • HTML: You can change the HTML codes from here.

 

2. The second component consists of the different sections of the webpage which will be displayed. From here, you can:

  • Customise individual sections.
  • Add/ Remove a section or its elements.
  • Reposition a section or an element.

 

FIRST COMPONENT: USE CASE

  1. Add a New Section: Click on “+” icon on the menu bar from the left. Choose the section style & click on it. Please note that the “block” can only be dragged over sections.

 

Example: Add Form

From the same section, you can click on “Forms”& tap on your chosen “Form” to. The added form would be full-customisable.

 

2. Add New Block

Click on the “Blocks” icon. Select your preferred block from the top. Now drag & drop the block of your choice.

 

3. Change Fonts

Click on the “Fonts” icon. Select your preferred font type from the top. Now click on your choice, select if you want to apply it to the specific section or the whole website.

 

 

4. Edit Code

In order to edit its HTML code, click on the “HTML” section, edit its code & “Save”.

 

 

To save the above changes, click on “Save” from the top menu bar.

 

 

SECOND COMPONENT: USE CASE

To make changes to a particular section of the landing page, just click on that section. Once you click, the HTML editor opens from where you can completely change the look of that particular section.

 

  • Add icon “+”: Using this you can add another element to the section including a paragraph, headline, image, table, button or more,
  • The Dot “...” icon: From here you can move that particular element up or down within that section, create a copy of that element or do more settings including customising its size.
  • Delete “x” icon to delete that particular element from the section.

Section Settings

You can move any section of the page up or down, customise it’s height as well as add the “Scroll Icon”. Click on “Tool” icon placed at the right side of the particular section to do the required section settings.

 

Remove Section

In order to delete the whole section, click on the “x” icon placed right below section settings.

 

Edit Section

Every section you choose has an HTML editor using which you can customise the look & feel of texts.

Restructure Sections

In order to change the placement of a section, click on the section you want to move. Click on the “Move” icon at the right of section to manually drag and place it up or down.