How to customize your course website using Website Builder?

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

Customizing Course Website using Website Builder

Scroll down to the Pages. Under Title,  select a page.

Then under Customize click Design to construct your website.

On the Page builder, you are allowed to design your website page. From here you can -

• add new sections.
• remove unwanted sections.
• modify the appearance and positions of sections.

Add a section

Go to your page builder dashboard > Click +Add Sections

Under Add section dashboard, select various segments such as - Header, slider, video, team members, pricing, testimonial, etc to make your course platform page look attractive. 

Remove unwanted sections

You can remove any section from your course website. 

Go to the unwanted/extra section > Click [X] remove icon. 

Then click Delete. And that section will get removed from your course platform page.

Modify desired sections

Page builder enables modification of any section on the home page of your course platform.

Select the section > Click the Setting section icon.

Reposition of sections

Under Section settings, your desired section can be moved vertically 

To do reposition of any section vertically tap on the following arrows to - 

• Move Up
• Move Down
• Move to Top 
• Move to Bottom

Set Height 

Under Height set the size of any section by tapping the height %.

Scroll icon

You can enable the scroll icon on your course platform website to ease navigation for your users.

Check the checkbox and enable the scroll icon on your course platform website. 

Screen mode settings

Under section modification settings we also allow you to toggle between the Light and Dark modes.

Tap Light or Dark based on your screen preference. 

Edit Banner Images and Texts

You can edit your preferred images and texts in any section. 

To edit images, 

Home Page Sections

A standard home page contains the following sections. However, these sections are fully customizable & 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/customize 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 utilize this section to introduce your mobile apps, & send them directly to the 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 customize 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:

• Customize 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.