Documentation: Next Open Template

Introduction

Thank you for purchasing  this template desgined for a Language School. Within this manual we will show you how to install, edit and update the template.

We did our best to simplify this instruction and make it clear and easy to use.

Every file contains comments that help you to custom the template

Install

After you extract the zip file you get a folder with all files used in this template.

You can see an edit these files to customize them.

When all files are ready you have to upload the files on your server root.

Use your favourite FTP client or the CMS if you using one in your server.

File Structure

After template extracting you'll see the following files & folders structure:

  • site
    • css: style and font files
    • js: javascript files
    • img:  images files
    • index.html: the index page 
    • post.php: php script for the contact and subscribe forms action
  • documentacion
    • readme.html:  the file you are reading
Edit content

You can edit .html .css .js files with any text editor  or with an specific editor for this kind of file like Virtual Studio Code

The lorem ipsum text you'll see in  index.html file is a placeholder for the text you have to add for your site. So replace it with a text suitable for your web.

Images gallery are placeholder and you have to set your own ones.

Edit content: HTML

There is just  one page, index.html, where you'll find coments <!-- name area --> so it's easier to find any area you want to modify.

The readmore links you can see in the page can bee customized for link other pages if you need it, or can be removed if you don't need them.

The header contains th responsive nav menu, every option link to a section on the page..

The content of the page is in a main section.

Hero is acarousel implemented with Bootstarp. You can replace the images and text, but try to keep the size of images.

Most of animations are implemented usin AOS plugin

The stats figures are aniamted using a javascript routine, stats.js. The figures are set in attribute data-purecounter-start and data-purecounter-end. 

Edit content: images

The pack contains royalty free images for background and for ilustration in courses and other sections.

Most of images are got from https://unsplash.com/, https://pixabay.com and https://pexels.com. See the last section of this document.

If you change the sizes of the images try to keep the aspect ratio in order to maintain the aspect of the template.

Icons are free icons from bootstrap icons.

Edit content: CSS

This template use css files for plugins:AOS and Bootstrap (version 5.1)

There is a style.css built for the tameplate, it is documentes.

Fonts Open Sans from Google are included.

Edit content: JS

This template use several scripts:

  • AOS for animation
  • stats: animate states figure
  • main: contains init routines, events and other scripts. it's documented.
Sources and credits

Images

  • https://unsplash.com
  • https://pixabay.com

Javascript:

  • https://javascript.espaciolatino.com
  • https://github.com/michalsnik/aos

Fonts

  • Google