start

editing

To modify HTML files you should use text editor, we recommend Sublime Text.

publishing

At first choose your homepage from HTML files and rename it to index.html, then upload files to your server (use FTP client, we recommend Filezilla).

dark & light themes

To enable dark theme add dark-theme class to body. By default template uses light theme


<body class="dark-theme">
	...
</body>

slideshows

options

To enable Autoplay use data-autoplay=""(true/false) attribute. Set Interval between slides with data-interval=""(in ms) attribute


<div class="swiper-container" data-autoplay="true" data-interval="4000">
	<div class="swiper-wrapper">
	...
	</div>
</div>

For Mouse & Keyboard navigation use mousewheel and keyboard classes


<div class="swiper-container mousewheel keyboard">
	<div class="swiper-wrapper">
	...
	</div>
</div>

captions

For slide captions use data-caption=""(optional) attribute. Link it with data-link=""(optional) attribute


<div class="swiper-slide" data-caption="Example Slide Caption" data-link="http://link-url"></div>

Horizontal gallery

slide widths

For slide sizes use classes below (without class it's fullwidth)


<!-- Part of Full width -->

<!-- one-fourth     (1/4) -->
<!-- one-third      (1/3) -->
<!-- one-half       (1/2) -->
<!-- two-thirds     (2/3) -->
<!-- three-fourths  (3/4) -->

<div class="swiper-slide two-thirds">
	...
</div>

Centered Mode

Add center class


<div class="horizontal-slider swiper-container center">
	<div class="swiper-wrapper">
		...
	</div>
</div>

youtube background

Add youtube-bg class and data-property attribute, Set videoURL


<div class="youtube-bg" data-property="{videoURL: 'https://www.youtube.com/watch?v=wLRDC6jbUr8'}"></div>

Add class muted if you want video to be muted on window load


<div class="youtube-bg muted" data-property="{videoURL: 'https://www.youtube.com/watch?v=wLRDC6jbUr8'}"></div>

portfolio / gallery grid

columns

Use data-columns attribute to set column number


<div class="grid" data-columns="3">
	...
</div>

item sizes

Define grid item sizes with classes .wide and .tall


<!-- GRID -->
<div class="grid">

	<!-- DEFAULT SIZE -->
	<div class="grid-item">
		...
	</div>
	<!-- /DEFAULT SIZE -->
	
	<!-- TALL -->
	<div class="grid-item tall">
		...
	</div>
	<!-- /TALL -->
	
	<!-- WIDE -->
	<div class="grid-item wide">
		...
	</div>
	<!-- /WIDE -->

	<!-- WIDE & TALL -->
	<div class="grid-item wide tall">
		...
	</div>
	<!-- /WIDE & TALL -->
	
</div>
<!-- /GRID -->

space between items

use data-gutter attribute to set gutter size(in pixels)


<div class="grid" data-gutter="5">
	...
</div>

Fullwidth mode

Add fullwidth class to .container


<div class="container fullwidth">
	<div class="grid">
		...
	</div>
</div>

filter

item category

For your grid items to assign category use classnames


<div class="grid-item photography branding">
	...
</div>

filter buttons

Add filters with data-filter attribute and classname selectors


<div class="filter">
	<ul>
		<li data-filter="*" class="active">all</li>
		<li data-filter=".branding">branding</li>
		<li data-filter=".design">design</li>
		<li data-filter=".photography">photography</li>
	</ul>
</div>

justified gallery

Make it fullwidth using fullwidth class


<div class="container fullwidth">
	<div class="justified">

		<a href="image.jpg" data-rel="lightcase:gallery" title="Caption Text">
			<img src="image.jpg" alt="">
		</a>

		<a href="image.jpg" data-rel="lightcase:gallery" title="Caption Text">
			<img src="image.jpg" alt="">
		</a>

		...

	</div>
</div>

To open your media with Lightbox, create a link and add the attribute data-rel="lightcase"

Lightbox also supports Youtube, Vimeo and HTML5 videos


<a href="http://media-source" data-rel="lightcase" title="Caption Text">
	...
</a>

Links with the same attribute will open all of them as a collection


<a href="http://media-source1" data-rel="lightcase:myGallery" title="Caption Text 1"></a>			
<a href="http://media-source2" data-rel="lightcase:myGallery" title="Caption Text 2"></a>

image carousel


<div class="owl-slider">
	<img src="image1.jpg" alt="">
	<img src="image2.jpg" alt="">
	<img src="image3.jpg" alt="">
</div>

buttons


<!-- BUTTON -->
<a href="#" class="button">BUTTON</a>

<!-- OUTLINE BUTTON -->
<a href="#" class="button outline">OUTLINE BUTTON</a>

<!-- LIGHT BUTTON -->
<a href="#" class="button light">LIGHT BUTTON</a>

<!-- LIGHT OUTLINE BUTTON -->
<a href="#" class="button outline light">LIGHT OUTLINE BUTTON</a>

spacers & separators

margins

use .m{10, 20, ... 140}, .mt{10, 20, ... 140}, .mb{10, 20, ... 140} classes


<!-- margin 20 px-->
<div class="m20"></div>
<!-- margin top 70 px-->
<div class="mt70"></div>
<!-- margin bottom 120 px-->
<div class="mb120"></div>

paddings

use .p{10, 20, ... 140}, .pt{10, 20, ... 140}, .pb{10, 20, ... 140} classes


<!-- padding 20 px-->
<div class="p20"></div>
<!-- padding top 70 px-->
<div class="pt70"></div>
<!-- padding bottom 120 px-->
<div class="pb120"></div>

separators

Use class separator, separator-left or separator-right


<!-- center separator -->
<p class="separator"></p>
<!-- left separator -->
<p class="separator-left"></p>
<!-- right separator -->
<p class="separator-right"></p>

backgrounds

For Backgrounds use data-background attribute. Set image URL, HEX or RGB color codes


<div class="page-section" data-background="background-image.jpg">...</div>	

<div class="page-section" data-background="#000">...</div>	

<div class="page-section" data-background="rgb(0, 0, 0)">...</div>

responsive videos

Place Youtube or Vimeo videos inside .video-container element


<div class="video-container">
	<iframe src="http://player.vimeo.com/video/85523671?title=0&byline=0&portrait=0"></iframe>
</div>

contact form

Open php/contact.php file and change the following:

Recipients E-mail address


$to = "where@tosendemail.com";

Subject Line


$subject = 'Subject Line';

google map

Open js/main.js file and change options:

line 483


var latitude = 51.5255069,
	longitude = -0.0836207,

Documentation