1. Introduction
The Education Theme is a fully responsive, modern, and customizable HTML template designed for schools, universities, online courses, and educational institutions. It includes sections for showcasing courses, instructors, testimonials, blogs, FAQs, pricing, and contact forms.
1.1. What's Included
After purchasing wooprex template on wooprex.com with your Wooprex account, go to your Download page. You can choose to download wooprex template only or the entire wooprex template package which contains the following files:
- Fully Responsive Design: Optimized for all devices.
- Modern & Clean UI: Sleek, professional, and user-friendly design.
- Easy Customization: Modify styles, fonts, and colors easily.
- Cross-Browser Compatibility: Works on Chrome, Firefox, Safari, and Edge.
2. Folder & File Structure
2.1. Folder Structure
Here you will find the folder structure of the entire template.
2.2. Layout Structure
The main contents are generating from layout.tsx file. It will handle all available page and error page
2.3. Component Architecture
Each .tsx file follow this steps (function> return > export function). The general template structure is the same throughout the template. Here is the general structure:
2.4. SASS Architecture
We are using SASS and the structure is given below. Here is the outlook of the SASS file:
2.5. JavaScript Architecture
We can write js in specific component (.tsx) for specific file. We can also create custom file (utils, composable) to write custom js. We also used so many libraries (Swiper, Gsap, CounterUp, Magnific Popup, SimpleParallax, and etc). The common structure is below:
2.6. Next Configuration
For deploying project in purely static (SSG), we updates next.config.js, this will create a out folder with static files after npm run build in terminal:
3. Installation & Setup
Prerequisites:
- Node.js (>= 16.x)
- npm or yarn
Follow these steps to initialize the project:
- Download the template from the provided source.
- Extract the ZIP file and open the folder in your code editor.
- Open terminal from code editor.
- $ npm install or $ yarn install - (Install project dependencies using npm or yarn)
- $ npm run build or $ yarn build - (Generates the .next folder for dynamic deployment (SSR) on a server). In our case, both .next and out folder.
- $ npm run dev or $ yarn dev - (Run the project by this command)
After running the build command, the .next and out folder will be generated as shown below:
Finally Run npm run dev or yarn dev to view project in browser
4. Customization Guide
4.1. Logo & Favicon
- 1. Open public folder from root
- 2. Look for the .svg file to change the logo
- 3. Replace your .svg logo with the current logo
- 4. Open src/app to change the site icon (.ico) file
Replace your icon file here to visible in the browser:
4.2. Colors & Fonts
Modify src/assets/scss/base/_variable.scss to change default color and declare the font:
Modify src/assets/scss/_reset.scss to initialize google font:
4.3. Flaticon
We have used flaticon premium icon for the site. You can add icon like this:
4.4. Navigation Menu
Update the Desktop Menu by modifying its structure, design, or functionality as needed.
Update the Mobile Menu by modifying its structure, design, or functionality as needed.
4.5. Changing Images
Change the Image by replacing it with a new one, updating its source, or modifying its properties as needed.
4.6. Change Meta
Change meta title in specific views (Home.vue) like this:
5. Responsive Design & Media Queries
We have used CSS media query to responsive the site (src/assets/scss/_responsive.scss):
6. Sources & Credits
These things we have used to build our site:
7. Support
If you need assistance with installation, customization, or troubleshooting, feel free to reach out:
- Email: help@wooprex.com
- Documentation: Official Docs
- Live Chat: Available on our website during business hours.
For any issues, please provide detailed information, including error messages and screenshots, to help us assist you better.