Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!
Definity is HTML5 template, witch is 100% responsive and its build with Bootstrap 3 and SASS. It has clean, minimalistic and modular design, also is well comentent with clean code.
To edit this template with your info you will need a code editor, i use Sublime Text (http://www.sublimetext.com/3) and a browser i recommend to use Google Chrome.
There is multiple home page layouts to chose from (multi page and one page), also various selection of pages that you can use to create your website, but you can also create your own page layouts very easily (just copy and paste code form the elements examples), there is also a blank page to get you started (main folder/pages/blank.html). Also there is two coming soon pages that you can use till you build your website.
When you start editing the template with your info is good idea to create separate folder, copy the assets folder and 404.html page there, rename one of the index... files to index.html and then move and edit pages that you will use. Also is good practice to create separate styleseet for your edits and load it bellow Definity CSS.
Files and folders are organized nicely and with descriptive names, inside the main folder there is assets folder, it contains the CSS, JS, Fonts, and Images files.
In the elements folder are all shortcodes/elements examples, witch you can use to build your own layouts.
In the pages folder there are all the pages, in this template, portfolio pages and blog pages are grouped in separate folders.
In the main folder files named with index... are the homepages, you can chose one that you will use and rename it to index.html.
Files that start with index... are the homepages, they are named descriptively.
example: index-fs-slider-mp.html (is the template for full screen slider multi page demo).
The pages are in (main folder/pages/), there is separate folders for portfolio pages and blog pages.
There is a lots of elements/shortcodes to chose from
The assets folder contains the CSS, JS, Fonts, Images files. There is a vendor folders, they contain all the external resources like plugins and scripts.
To add your own images use the image folder inside the assets folder (main folder/assets/images/), and put your images there.
The main stylesheet file is located in (main folder/assets/styles/main.css). Use the table of contents at the top of the stylesheet to navigate more easily.
This template have two stylesheets, main.css and responsive.css first is the file with all the css for all elements, the second (responsive.css) is the mediaqueries that make this template responsive.
From the image bellow you can see how the css is linked, the top files are the plugins css files, bellow them are the template css files, if you decied to edit the css is good practice to create separate css file and link it last (bellow the Definity CSS).
They are many available headers(page titles) in Definity.
Go to (main folder/elements/headers.html) to see all the examples.
To use it copy the code from headers.html for the specific header that you want to use and paste it after the navigation.
To change the parallax image you will need to modify the css (main.css) or add the yours css to separate css file and link it bellow the Definity CSS files in the head of the page.
(use the find command to navigate the main.css file faster (ctrl + f) and find the rules that apply to the background images).
as you can see the class for e.g. medium size light parallax header(page title) is .pt-plax-md-light
you need to change the url path to the background image that you want to use it, and you can adjust the transparency value of the overlay light background that is over the image.
You can also change the speed of the parallax scrolling from the data-stellar-background-ratio=“0.4” that is on the header element with parallax image.
Most of the hero images (big fullscreen image when you load the index... demos), are loaded with css, so to change the image you need replace it from (main folder/assets/styles/css/main.css), then find the hero section.
For example for full screen slider find the classes: fs-slide-1, fs-slide-2, fs-slide-3 and replace the background url link, also if you want to darken or lighten the image, you can adjust the alfa value of of .bg-overlay for that image (background: rgba(17,17,17, 0.7); - 0.7 is the alfa value it goes from 1 to 0).
You can play videos only from youtube.
you add you settings in the data-porperty:
for more check the docs. of the plugin.
To add your images in the ken burns demo, go (main folder/assets/js/main.js) file, find the Ken Burns section, and replace the path to the images with your path to your images, see image bellow for more detail;
To see example of grid columns view the page grid (main folder/elements/grid.html)
The grid used to create the pages is the grid from bootstrap 3 framework witch is a 12 columns responsive fluid grid so you can create any type of layout that you want for more info visit the link to bootstrap 3 guide how to use it
There are multiple examples of counters, see (main folder/elements/counters.html) for all the examples;
For the circle counters edit the attribute (e.g. data-percent=“75” so the circle fill up to 75%);
For the icons see (main folder/elements/line-icons-page.html);
For the number counters you need to change the java script (main folder/assets/js/main.js) to add different numbers, its very simple, see image bellow;
Because this counters use id you need to have only one with that id on a same page. If you want to have multiple counters you need to create different id and separate function inside the main.js file - you can see example bellow the function on the image there is another function for minimal number counters, is the same but with different id-s.
You can find all the examples of testimonials layouts in (main folder/elements/testimonials.html).
If you want to change the background images for the testimonials find the section in the main.css file for testimonials and replace the background: url(…) with your image, adjust the alfa value (transparency) for the background overlay if you want.
Same thing for the twitter slider.
Slick slider is the plugin used for the sliders in this template check the plugin link for more info about the settings of the plugin.
Settings of the plugin are in (main folder/assets/js/main.js) inside the function initSliders.
All sliders are responsive, work great on mobile devices you can slide them, left and right to change slides.
If you want to create new slider check the plugin documentation and see from the other sliders how they are created in main.js;
There is a lot of availble templates to chose from for portfolio, you can find all the pages in (main folder/elements/portfolio/).
When you add your own images keep in mid the aspect ratio of the images especialy for the masonry layouts, to achive similar look like in the demo site, stick to the same size of the images.
One page demos have lightbox included, witch is activated by adding the class: .open-gallery at the <a> element with class: .open-btn and also puting the path to the images in the href.
if you want to open like a link in different page just remove the .open-gallery class and add the link where you want to point.
Create tags like this in the image (web design, print, photo) in the data-filters, then tag each .portfolio-item with that class, you can add multiple tags to show for multiple filters.
Code for google maps is in (main folder/assets/js/gmap.js), to edit the map you need to chage the latitude and longitude with your coordinates, how to find them? Find your place on the google.com/maps, then in the url find @ between @ and a z letter is your coordinates first is the latitude, the second is the longitude, then replace them in the gmap.js file.
Map styles, if you want different style for the google map, go to this site: https://snazzymaps.com/ get the code for the map style that you want and enter it where is says (styling of the map in JSON object).
How to setup the contact form in the Definity Template so you can receive email to your email account:
P.S. Be sure to check the spam folder in your email account!