Definity

Multipurpose One/Multi Page HTML5 Template

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!

Intro

Note: This is not a WordPress theme, and it wont install like a WordPress theme, this is a HTML5 template (static website).

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.

Structure

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.

 

Index files

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).

 

Pages

The pages are in (main folder/pages/), there is separate folders for portfolio pages and blog pages. 

 
Elements

There is a lots of elements/shortcodes to chose from 

 

 

Assets Folder

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.

CSS Files

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). 

Note: SCSS files come included in this template, you may find them usefull if you know how to use it, if not, know that they are not necessary to run this template, you don`t need to include them on your host and the same goes for ...css.map files.

Headers - Page Titles

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.

Note: image height depends on the image and what you want to show, this images for the page titles have similar height but is not the same - its base on how much you want to show off the image when you scroll, so when you add your images you maybe need to test few different height to get the best look.

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.

see documentation for the parallax plugin used, (http://markdalgleish.com/projects/stellar.js/docs/)

 

Hero

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).

 

Video Background

You can play videos only from youtube.

check the plugin documentation for more info: https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

you add you settings in the data-porperty:

for more check the docs. of the plugin.

 

Ken Burns Slider

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;

Grid

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

Buttons

To see example of all buttons go to (main folder/elements/buttons.html)

 

Type

There is a lot of choices for buttons, there a 3 basic types: 

You can appy button classes on the following elements: <a>, <button>, <input type="submit">, <input type="button">

Input elements when aplied .btn-ghost class have slightly different hover effect because they don`t accept psudo classes.

 

Sizes

They can have 3 sizes: small, normal, and  large, buttons just with the base class have the size of normal, to change the size you add the class: .btn-large or .btn-small, for example:

<button class="btn-ghost btn-large">Large ghost button</button>

 

Style

Buttons have two styles the default dark style and light style, add this classes to change the style to light to the matching buttons:

 

example:

<button class="btn-ghost btn-small btn-ghost-light">Small ghost button with light style</button>

 

Round Buttons

Round buttons can be achived by adding the class: .btn-round to all type of buttons.

Counters

Circle Counters

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);

 

Number Counters

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.

Testimonials

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. 

Sliders/Carousels

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; 

Note: about the parallax slider (above the portfolio section in index-main-mp.html): this is syncronized two sliders in one, the text block is one slider and the image behind him is another slider.

Portfolio

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.

 

Lightbox

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.

 

Filtering functionality

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. 

Google Maps

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).

 

Note: contact forms don`t actualy send messages they are left up to you to connect them the best way that suits you.

Newsletter CTA setup (MailChimp)

  1. First create MailChimp account, if you don’t have already;
  2. Then go to Lists in your MailChimp account;
  3. Create new List, enter all the info that is required of you, name it something descriptive e.g. yourwebsite.com - Newsletter form;
  4. Then click the arrow at the end of the list and select Signup Form;
  6. Click general forms and you will see example form from MailChimp;
  7. Now click in the email input field in the form example, and (in chrome browser) right click > select inspect elements;
  8. Here you need to find your MC url, MC id and MC user code
  9. In the <form action=“…." is your MC url
  10. Bellow that you will see three input type=“hidden” elements, the first two are the id and the user code, (in the value=“…");
  12. After you find this information, you need to link it in the Definity template;
  13. In the template main folder go to >assets>js>vendors>jquery.ajaxchimp.js and open it;
  14. At the bottom find the section “Your info from MailChimp goes bellow”;
  15. Here in the url: you add your MC url, MC user and MC id (see image bellow);
    16. * You add all this info in one line! just copy and paste it in from the chrome inspect elements;

"…?u=…&id=…” this characters should be there, you add you info between them on the …; And thats it, you now have working newsletter form connected with MailChimp so you can create email campaigns form MailChimp, all people that will subscribe will go in your mail chimp list, that you create it at the beginning.

P.S. in the MailChimp account don’t create the General form just click cancel we need it just for the information.

In the widgets footer there is newsletter widget, this is intended for WordPress conversion and should be used with WP plugin, right now is not working, if you want to also use it as a newsletter subscription form, just add the class .mc-ajax to the form element inside the widget.

Important Note: I left my info just to be more clear how this looks, if you planing to use the newsletter elements in your website please edit this with your information because i don’t want to receive the subscription emails from your website!

Links for more information:
MailChimp
plugin used

Contact Form

How to setup the contact form in the Definity Template so you can receive email to your email account:

  1. Find the file contact-form.php, go to main folder>assets>contact-form>contact-form.php and open it;
  2. At the top enter your email and subject line between the ‘ ' (see the image bellow);
  4. And thats it, you will now receive emails when someone use the contact form from the template.

P.S. Be sure to check the spam folder in your email account!

Note: this contact form will only work on live server will not work on localhost or if you just open it from the download folder.

Credits

Scripts & Plugins:

 

Images:

 

Video:

 

Audio:

 

Important: Please note that the template does not include the images in the source zip file.
 
 
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates and themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
AjdeThemes