Thank you for purchasing our EduVibe Online Learning React Education Template. We are happy that you are one of our customers and we assure you will not be disappointed. We do our best to produce top notch items with great functionality, premium designs, and clear code.

This template is built with React JS. It is a clean and modern React Education Template. It’s suitable for any university, online course, motivation, photography, school, kindergarten and distance learning institution to get you started with ease. This template comes packed with tons of pre-built section blocks to choose from which lets you build your own website without messing around too much. These pages are easy to edit, making it perfect for customizing it the way you need, such as an SEO-optimized site. You can’t go wrong when choosing EduVibe for your next project!

Requirements

There are system requirements in order to install and setup doob template and its components properly. Make sure that you are running the node.js install npm install.

Recommended node and npm

                                    
                                        node install
                                        npm install
                                    
                                

Install Npm Packages

NPM : You must have to npm install packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

                                    
                                        npm install
                                    
                                

Development Server

Run npm run start for a dev server. then the app supposed to open automatically at your default browser at location http://localhost:3000/. But, if it doesn't start automatically then please paste this( http://localhost:3000/ ) URL at your browser and hit Enter. The app will automatically reload if you change any of the source files.

                                    
                                        npm run start
                                    
                                

Build

Run npm run build to build the project. The build artifacts will be stored in the build/ directory. Use the npm run build --prod flag for a production build.

                                    
                                        npm run build
                                        npm run build --prod
                                    
                                

Download The File

After purchasing EduVibe template from templateforest.net with your Envato account, go to your Download page. You can choose to download EduVibe template by clicking on All files & documentation.

Download Thumb

Files Included

The downloaded file comes at a .zip format. You need to extract the downloaded zip file. After extracing the file, you'll find 2 the following 2 folders.

  1. Documentation -> This folder contains the documentation which you are currently reading now.
  2. EduVibe -> The Installable React template file.
Downloaded File Thumb

React Installation

We suggest you to follow this video we created for you. This video will help you to understand how to install React on this template step buy step with no step skipped.


Basic Site Settings

Change Site Title

Suppose we want to change the title of Home 1. To achieve this please go to, src > pages > homepages > HomeOne.js. Here, just change the content of .

Change Site Title

Change FavIcon

If you want to change the Favicon of your site then please go to, public > index.html.

Change Favicon

In this template we've created different Header for you. Suppose, we want to change the logo of Header of Header 1. To achieve this please go to, src > common > header > HeaderOne.js

Site Title

Customize Menu

To make any changes at menu items please go to, src > common > header > Nav.js

Customize Menu

Course Settings

Create A Course

Suppose we want to create/update/delete a course item. Then we need to modify the CourseData.json file. The file is located at, src > data > course > CourseData.json.

Course Data

Course Details Page

If you want to modify the course details page then please go to, src > pages > detailspages > CourseDetails.js file. Now, if you change anything on this file and suppose you've a course which ID is 1, then you can see the changes at http://localhost:3000/course-details/1

Course Details 1

We've created another Course Details page example for your. Which is located at, src > pages > detailspages > CourseDetailsTwo.js file. Now, if you change anything on this file and suppose you've a course which ID is 1, then you can see the changes at http://localhost:3000/course-details-two/1

Course Details 2

Template Options

Header

All the Header sections we created for you located at, src > common > header.

All Headers

All the Footer sections we created for you located at, src > common > footer.

All Footers

Instructors

All the Instructor sections we created for you located at, src > components > instructor.

All Instructor

Instructor Details

To modify Instructor Details page please go to, src > pages > detailspages > InstructorDetails.js.

Instructor Details

Contact Form

To modify Contact Forms please go to, src > components > contact. Here, you'll find all the contact forms we've created for you. Here we've used EmailJS platform. Please read this EmailJS Documentation for further details.

Contact Form

Coming Soon(CountDown)

To modify Coming Soon page, please go to, src > components > ComingSoonOne.js. Please read this CountDown Documentation for further details.

Coming Soon Page

404 Page

To modify 404 page please go to, src > pages > innerpages > Error.js.

404 Page

Back To Top Arrow

If you want to modify the Back To Top Arrow then please go to, src > common > footer > ScrollTopButton.js.

Scroll To Top

Global Settings

Global Color & Typography

All the global color, typography and media query(for responsive) related settings are written at, src > assets > scss > default > _variables.scss

Global Color
Global Color Settings
Global Typography
Global Typography Settings
Global Media Query
Global Media Query Settings

CSS/SCSS Files

All the CSS and SCSS files are called at, src > assets > scss > default > _variables.scss

Global CSS and SCSS Settings
Global CSS and SCSS Settings

Thank you for purchasing our template. We are happy that you are one of our customers. If you come up with any template-related questions that are beyond the scope of this documentation file, please feel free to let us know via our support forum https://devsvibe.freshdesk.com/. You can also mail us at contact@devsvibe.com. Our support engineers will reply to you within 10 minutes to 8 hours(max).