This is a step-by-step guide to customizing your home page, course landing pages & blogs using the new 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
Go to your left-nav > Website & apps > Under Website, select Themes.
Choose your theme
Under Themes, select a theme for your course website.
Design your course platform pages
Scroll down to the Pages. Under Title, select a page.
Note: Here, we have demonstrated the steps for creating a standard home page.
Then under Customize click Design to construct your website.
Note: Page builder will open on a new tab.
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
Under Height set the size of any section by tapping the height %.
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:
- 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
- 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.
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.
In order to delete the whole section, click on the “x” icon placed right below section settings.
Every section you choose has an HTML editor using which you can customise the look & feel of texts.
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.