HTML Templates Documentation

PSD files editing

PSD file is located in"sources/psd" folder. PSD files are source files of template design.

They consist of multiple layers, that's why any of template parts can be changed according to your needs.

Please note these changes won't affect live website unless .html files are edited accordingly.

Feel free to check the tutorials on using Photoshop for more detailed explanation.

.html and .css files editing

All of editable HTML files are located at "site" folder (index.html, index-1.html, index-2.html, etc.). Every index-#.html file represents separate template page.

Sublime Text 3 is an advised application for HTML files content editing, but you may also use any other suitable software.

In order to open .html file with Sublime Text 3 software, click on the file icon with right mouse button and select Open with > Sublime Text 3 in the dropdown menu. After file opening you can edit it.

CSS files are used to change template appearance, i.e., fonts (font-family, size, font-face, color, etc.), background, blocks width etc. CSS files can be edited with Sublime Text 3 software.

At our online support center you may find detailed tutorials on how to edit and manage .css files.

How to edit text

As previously stated, all site content is inserted to .html files. You'll need minimal skills on orienting within code.

In order to replace “lipsum” (filling text) with your own one, please do the following:

1. Navigate to ‘site’ folder within template package.
2. Open index.html file with HTML editor.
3. You may use search function (CTRL+F) to check for required text.
4. Edit text with HTML editor. Save changes and open your file in browser to see them applied.

Also, in order to check for required sections, you may use browser developer tools.

Please check articles and tutorials to find out more on how to use developer's tools.

See the article Developer's Tools.

Feel free to check a detailed video tutorial on How to edit text in JS Animated templates.

How to edit images

Navigate to 'site/img' folder. First way is to upload new images keeping the original filenames and extensions, simply replacing them.

Second way is to upload custom images specifying your own filenames and extensions.

Next you'll also need to change image filename in html.

1. Open .html file within “site” folder by using html editor for this purpose.
2. Use search function (CTRL+F) to locate an image in html file.
3. Edit image filename and extension.

Feel free to check a detailed video tutorial on How to edit images.