In order to edit the template, please read the documentation file (user guide) provided within the download package.
It's a simple task, no coding knowledge is required.
Further customization of the main template files [HTML, CSS, JS, PHP] can be done by using Dreamweaver (for example). You can simply open the files in Dreamweaver, make your edits, and then upload them to the server.
Please note, this is not a WordPress theme, it’s an HTML5 template.
In order to upload files to your server, please follow these relatively easy steps:
1. unzip the purchased ZIP file
2. open the template folder
3. connect to your server via your preferred FTP client
4. open the server folder named ‘public_html’
(if you don't have a ‘public_html’ folder, please contact your hosting provider for further instructions)
5. upload all files from the template folder
public_html folder
The public_html folder is the web root for your primary domain name.
This means that public_html is the folder where you put all website files which you want to appear when someone types your main domain (the one you provided when you signed up for hosting).
Or put another way, when someone types your domain name into their browser, whatever is in the public_html folder is what will be shown to them.
Examples
For example, if you have a file called index.html (or any of the other default filenames) in the public_html folder, it will display that page.
If you do not have a default file in the public_html folder (such as index.html, default.html, etc.), then a list of files in the public_html folder will be shown.
To edit the 'Home' section, simply find the appropriate label <!-- section home start --> in the body of the HTML file.
Part to edit:
[...]
<!-- section home start -->
[...]
<!-- intro subtitle start -->
<div class="intro-subtitle">
LA-based designer
</div>
<!-- intro subtitle end -->
[...]
<!-- intro title start -->
<div id="intro-title-lead">
Johnny
</div>
<!-- intro title end -->
[...]
<!-- intro title start -->
<div id="intro-title">
Cardex
</div>
<!-- intro title end -->
[...]
<!-- bottom credits start -->
[...]
<a href="#">Cardex</a> © All Rights Reserved.
[...]
<!-- bottom credits end -->
<!-- social icons start -->
[...]
<li>
<a class="ion-social-twitter" href="#"></a>
</li>
<li>
<a class="ion-social-facebook" href="#"></a>
</li>
<li>
<a class="ion-social-linkedin" href="#"></a>
</li>
<li>
<a class="ion-social-instagram" href="#"></a>
</li>
<li>
<a class="ion-social-pinterest" href="#"></a>
[...]
<!-- social icons end -->
[...]
<!-- section home end -->
[...]
You can edit the 'Home' section images according to the documentation bellow (please read Background Images section).
You can also edit the 'Home' section images by following its URL path: 'img/background/', and replace existing image files with your own images.
To edit the 'Logo' images, simply find the appropriate label <!-- logo start --> in the body of the HTML file.
Part to edit:
[...]
<!-- logo start -->
<a class="logo on">
[...]
</a>
<!-- logo end -->
[...]
You can edit the 'Logo' images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 6. logo */
[...]
.logo-img:before {
[...]
background: url(../img/logo-dark.png) no-repeat;
display: block;
width: 57px;
height: 34px;
line-height: 34px;
[...]
}
@media only screen and (max-width: 995px) {
.logo-img:before {
background: url(../img/logo-light.png) no-repeat;
}
}
.logo-light .logo-img:before {
background: url(../img/logo-light.png) no-repeat;
}
.logo-dark .logo-img-dark:before {
background: url(../img/logo-dark.png) no-repeat;
}
[...]
You can also edit the 'Logo' images by following its URL path: 'img/', and replace existing image files with your own images.
Please note;
Demo 'Logo" image size is 57x34px.
To edit the 'About' section, simply find the appropriate label <!-- section about start --> in the body of the HTML file.
Part to edit:
[...]
<!-- section about start -->
[...]
<!-- section subtitle start -->
<h3 class="section-heading">
<span>01.</span> About
</h3>
<!-- section subtitle end -->
[...]
[...]
<!-- slick about start -->
[...]
<!-- about content wrapper start -->
[...]
<!-- about content wrapper end -->
[...]
<!-- about content wrapper start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>Johnny Cardex</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
The Artist
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
<div class="all-txt">
<p>
Hi, my name is Johnny Cardex and I'm a Los Angeles-based photographer. I am 25 years old and I come from London, which is in the south-east of England. My
mother is an actress and my father works in an office. I finished a degree in <a class="link-effect" href="#">Media Studies</a> last year and I'm unemployed at
the moment.
</p>
</div>
<!-- TXT end -->
[...]
<!-- about content wrapper end -->
[...]
<!-- about content wrapper start -->
[...]
<!-- about content wrapper end -->
[...]
<!-- about content wrapper start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>My personal</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Resume
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
<div class="all-txt">
<p>
<span class="head-details">Born</span> July 1, 1996
</p>
<p>
<span class="head-details">Age</span> 25 Years
</p>
<p>
<span class="head-details">Education</span> The University of La Verne
</p>
<p>
<span class="head-details">Experience</span> 1 Year
</p>
<p>
<span class="head-details">Position</span> Freelancer
</p>
</div>
<!-- TXT end -->
[...]
<!-- button start -->
<div class="the-button-wrapper">
<a class="the-button" href="CV.docx">
<span>Download CV</span> </a>
</div>
<!-- button end -->
[...]
<!-- about content wrapper end -->
[...]
<!-- about content wrapper start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>This is the</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Know-how
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
[...]
[...]
<!-- skill 1 start -->
<div class="skillbar" data-percent="95">
<span class="skillbar-title">Fashion</span>
[...]
</div>
<!-- skill 1 end -->
<!-- skill 2 start -->
<div class="skillbar" data-percent="90">
<span class="skillbar-title">Fine-art</span>
[...]
</div>
<!-- skill 2 end -->
<!-- skill 3 start -->
<div class="skillbar" data-percent="85">
<span class="skillbar-title">Documentary</span>
[...]
</div>
<!-- skill 3 end -->
<!-- skill 4 start -->
<div class="skillbar" data-percent="76">
<span class="skillbar-title">Architectural</span>
[...]
</div>
<!-- skill 4 end -->
[...]
[...]
<!-- TXT end -->
[...]
<!-- about content wrapper end -->
[...]
<!-- about content wrapper start -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Facts
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
[...]
<!-- fact 1 start -->
<div class="facts-counter-number">
9
</div>
[...]
<i class="ion-ios-timer-outline facts-counter-description-img"></i> <span class="facts-counter-title">Years</span>
[...]
<!-- fact 1 end -->
[...]
<!-- fact 2 start -->
<div class="facts-counter-number">
113
</div>
[...]
<i class="ion-ios-photos-outline facts-counter-description-img"></i> <span class="facts-counter-title">Items</span>
[...]
<!-- fact 2 end -->
[...]
<!-- fact 3 start -->
<div class="facts-counter-number">
7943
</div>
[...]
<i class="ion-ios-world-outline facts-counter-description-img"></i> <span class="facts-counter-title">Clients</span>
[...]
<!-- fact 3 end -->
[...]
<!-- fact 4 start -->
<div class="facts-counter-number">
468
</div>
[...]
<i class="ion-ios-people facts-counter-description-img"></i> <span class="facts-counter-title">Followers</span>
[...]
<!-- fact 4 end -->
[...]
<!-- TXT end -->
[...]
<!-- about content wrapper end -->
[...]
<!-- slick about end -->
[...]
<!-- section about end -->
[...]
You can edit the 'About' section background images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.2. about IMG BACKGROUND */
.about-bg-1 {
background-image: url(../img/about/about-bg-1.jpg);
}
.about-bg-2 {
background-image: url(../img/about/about-bg-2.jpg);
}
[...]
You can also edit the 'About' section images by following its URL path: 'img/about/', and replace existing image files with your own images.
To edit the 'Services' section, simply find the appropriate label <!-- section services start --> in the body of the HTML file.
Part to edit:
[...]
<!-- section services start -->
[...]
<!-- section subtitle start -->
<h3 class="section-heading section-heading-dark">
<span>02.</span> Services
</h3>
<!-- section subtitle end -->
[...]
[...]
<!-- swiper slide start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light" data-swiper-parallax="-300">
<span>Brand</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light" data-swiper-parallax="-200">
Identity
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
<div class="all-txt" data-swiper-parallax="-100">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect" href="#">since the 1500s</a>.
</p>
</div>
<!-- TXT end -->
[...]
<!-- swiper slide end -->
<!-- swiper slide start -->
<[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light" data-swiper-parallax="-300">
<span>Brand</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light" data-swiper-parallax="-200">
Design
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
<div class="all-txt" data-swiper-parallax="-100">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect" href="#">since the 1500s</a>.
</p>
</div>
<!-- TXT end -->
[...]
<!-- swiper slide end -->
<!-- swiper slide start -->
<[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light" data-swiper-parallax="-300">
<span>Web</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light" data-swiper-parallax="-200">
Design
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
<div class="all-txt" data-swiper-parallax="-100">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect" href="#">since the 1500s</a>.
</p>
</div>
<!-- TXT end -->
[...]
<!-- swiper slide end -->
<!-- swiper slide start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light" data-swiper-parallax="-300">
<span>Web</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light" data-swiper-parallax="-200">
Development
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
<div class="all-txt" data-swiper-parallax="-100">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect" href="#">since the 1500s</a>.
</p>
</div>
<!-- TXT end -->
[...]
<!-- swiper slide end -->
[...]
<!-- section services end -->
[...]
You can edit the 'Services' section images according to the documentation bellow (please read Background Images section).
You can also edit the 'Services' section images by following its URL path: 'img/background/', and replace existing image files with your own images.
To edit the 'Works' section, simply find the appropriate label <!-- section works start --> in the body of the HTML file.
Part to edit:
[...]
<!-- section works start -->
[...]
<!-- section subtitle start -->
<h3 class="section-heading">
<span>03.</span> Works
</h3>
<!-- section subtitle end -->
[...]
<!-- works IMG carousel start -->
[...]
<!-- works content wrapper 1 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>Beauty / Fashion</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Simplicity is complex
</h2>
<!-- section title end -->
[...]
<!-- button start -->
[...]
<a class="the-button" href="img/works/works-gallery/gallery-1/1.jpg" title="Gallery 1 / Image description">
<span>View Gallery</span>
</a>
<a href="img/works/works-gallery/gallery-1/2.jpg" title="Gallery 1 / Image description"></a>
<a href="img/works/works-gallery/gallery-1/3.jpg" title="Gallery 1 / Image description"></a>
<a href="img/works/works-gallery/gallery-1/4.jpg" title="Gallery 1 / Image description"></a>
[...]
<!-- button end -->
[...]
<!-- works content wrapper 1 end -->
[...]
<!-- works content wrapper 2 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>People / Life</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Design is a process
</h2>
<!-- section title end -->
[...]
<!-- button start -->
[...]
<a class="the-button" data-lity="" href="https://www.youtube.com/watch?v=9Co2-HD7W_E">
<span>Watch Video</span>
</a>
[...]
<!-- button end -->
[...]
<!-- works content wrapper 2 end -->
[...]
<!-- works content wrapper 3 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>Royalty / Stock</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Aesthetic is a decision
</h2>
<!-- section title end -->
[...]
<!-- button start -->
[...]
<a class="the-button" href="img/works/works-gallery/gallery-2/1.jpg" title="Gallery 2 / Image description">
<span>View Gallery</span>
</a>
<a href="img/works/works-gallery/gallery-2/2.jpg" title="Gallery 2 / Image description"></a>
<a href="img/works/works-gallery/gallery-2/3.jpg" title="Gallery 2 / Image description"></a>
<a href="img/works/works-gallery/gallery-2/4.jpg" title="Gallery 2 / Image description"></a>
[...]
<!-- button end -->
[...]
<!-- works content wrapper 3 end -->
[...]
<!-- works content wrapper 4 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>Culture / Travel</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Style is everything
</h2>
<!-- section title end -->
[...]
<!-- button start -->
[...]
<a class="the-button" data-lity="" href=
"https://vimeo.com/126363491">
<span>Watch Video</span>
</a>
[...]
<!-- button end -->
[...]
<!-- works content wrapper 4 end -->
[...]
[...]
<!-- works IMG carousel end -->
[...]
<!-- section works end -->
[...]
You can edit the 'Works' section background images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.4. works IMG carousel IMG BACKGROUND */
.works-page-img-carousel-item-1 {
background-image: url(../img/works/1.jpg);
}
.works-page-img-carousel-item-2 {
background-image: url(../img/works/2.jpg);
}
.works-page-img-carousel-item-3 {
background-image: url(../img/works/3.jpg);
}
.works-page-img-carousel-item-4 {
background-image: url(../img/works/4.jpg);
}
[...]
You can also edit the 'Works' section images by following its URL path: 'img/works/', and replace existing image files with your own images.
To edit the 'News' section, simply find the appropriate label <!-- section news start --> in the body of the HTML file.
Part to edit:
[...]
<!-- section news start -->
[...]
<!-- section subtitle start -->
<h3 class="section-heading section-heading-dark">
<span>04.</span> News
</h3>
<!-- section subtitle end -->
[...]
<!-- news IMG carousel start -->
[...]
<!-- news content wrapper 1 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>Beauty / Fashion</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Simplicity is complex
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
[...]
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect" href="#">since the 1500s</a>.
</p>
[...]
<!-- TXT end -->
[...]
<!-- button start -->
[...]
<a class="the-button the-button-details-news" data-id="news-more-1">
<span>Read More</span>
</a>
[...]
<!-- button end -->
[...]
<!-- news content wrapper 1 end -->
[...]
<!-- news content wrapper 2 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>People / Life</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Design is a process
</h2>
[...]
<!-- TXT start -->
[...]
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect" href="#">since the 1500s</a>.
</p>
[...]
<!-- TXT end -->
[...]
<!-- button start -->
[...]
<a class="the-button the-button-details-news" data-id="news-more-2">
<span>Read More</span>
</a>
[...]
<!-- button end -->
[...]
<!-- news content wrapper 2 end -->
[...]
<!-- news content wrapper 3 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>Royalty / Stock</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Aesthetic is a decision
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
[...]
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect" href="#">since the 1500s</a>.
</p>
[...]
<!-- TXT end -->
[...]
<!-- button start -->
[...]
<a class="the-button the-button-details-news" data-id="news-more-3">
<span>Read More</span>
</a>
[...]
<!-- button end -->
[...]
<!-- news content wrapper 3 end -->
[...]
<!-- news content wrapper 4 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>Culture / Travel</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
Style is everything
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
[...]
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect" href="#">since the 1500s</a>.
</p>
[...]
<!-- TXT end -->
[...]
<!-- button start -->
[...]
<a class="the-button the-button-details-news" data-id="news-more-4">
<span>Read More</span>
</a>
[...]
<!-- button end -->
[...]
<!-- news content wrapper 4 end -->
[...]
<!-- news IMG carousel end -->
[...]
[...]
<!-- news MORE carousel content 1 start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-dark">
<span>Beauty / Fashion</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-dark">
Simplicity is complex
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
[...]
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever <a class=
"link-effect link-effect-dark" href="#">since the 1500s</a>.
</p>
[...]
<!-- TXT end -->
[...]
<!-- button start -->
[...]
<a class="the-button the-button-dark the-button-details-news-closer" href=
"javascript:void(0)">
<span>Close</span>
</a>
[...]
<!-- button end -->
[...]
<!-- news MORE carousel content 1 end -->
[...]
<!-- news MORE carousel content 2 start -->
[...]
<!-- news MORE carousel content 2 end -->
<!-- news MORE carousel content 3 start -->
[...]
<!-- news MORE carousel content 3 end -->
<!-- news MORE carousel content 4 start -->
[...]
<!-- news MORE carousel content 4 end -->
[...]
<!-- section news end -->
[...]
You can edit the 'News' section background images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.5. news IMG carousel IMG BACKGROUND */
.news-page-img-carousel-item-1,
.panel-left.panel-left-bg-1 {
background-image: url(../img/news/1.jpg);
}
.news-page-img-carousel-item-2,
.panel-left.panel-left-bg-2 {
background-image: url(../img/news/2.jpg);
}
.news-page-img-carousel-item-3,
.panel-left.panel-left-bg-3 {
background-image: url(../img/news/3.jpg);
}
.news-page-img-carousel-item-4,
.panel-left.panel-left-bg-4 {
background-image: url(../img/news/4.jpg);
}
[...]
You can also edit the 'News' section images by following its URL path: 'img/news/', and replace existing image files with your own images.
To edit the 'Contact' section, simply find the appropriate label <!-- section contact start --> in the body of the HTML file.
Part to edit:
[...]
<!-- section contact start -->
[...]
<!-- section subtitle start -->
<h3 class="section-heading">
<span>05.</span> Contact
</h3>
<!-- section subtitle end -->
[...]
[...]
<!-- slick contact start -->
[...]
<!-- contact content wrapper start -->
[...]
<!-- contact content wrapper end -->
[...]
<!-- contact content wrapper start -->
[...]
<!-- section subtitle start -->
<h2 class="section-subheading section-subheading-light">
<span>Get In Touch</span>
</h2>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="section-heading section-heading-light">
With Us, Sir
</h2>
<!-- section title end -->
[...]
<!-- TXT start -->
[...]
<span class="contact-info-sign ion-ios-location-outline"></span>
<p>
ex Inc., Touchdown Dr 1176<br>
United States
</p>
[...]
<!-- TXT end -->
[...]
<!-- TXT start -->
[...]
<span class="contact-info-sign contact-info-sign-last ion-ios-email-outline"></span>
<p>
<a class="link-effect" href="mailto:contact@domainname.com">contact@domainname.com</a>
</p>
[...]
<!-- TXT end -->
[...]
<!-- contact content wrapper end -->
[...]
<!-- contact content wrapper start -->
[...]
<!-- contact content wrapper end -->
[...]
<!-- contact content wrapper start -->
[...]
<!-- contact form start -->
[...]
<!-- button start -->
[...]
<button class="the-button the-button-contact the-button-submit" id="submit" type="submit"><span>Submit</span></button>
[...]
<!-- button end -->
[...]
<!-- contact form end -->
[...]
<!-- contact content wrapper end -->
[...]
<!-- slick contact end -->
[...]
<!-- section contact end -->
[...]
You can edit the 'Contact' section background images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.6. contact IMG BACKGROUND */
.contact-bg-1 {
background-image: url(../img/contact/contact-bg-1.jpg);
}
.contact-bg-2 {
background-image: url(../img/contact/contact-bg-2.jpg);
}
[...]
You can also edit the 'Contact' section images by following its URL path: 'img/contact/', and replace existing image files with your own images.
To send the contents of your 'Contact Form' to your email, simply open the file named 'contact.php'.
Your email address goes here:
$myemail = 'you@yoursite.com';
To add 'YouTube Videos - SINGLE' in the background of the template, simply find the appropriate label <!-- YouTube video URL start --> in the body of the HTML file.
Part to edit:
[...]
<!-- YouTube video URL start -->
<div class="player" data-property=
"{videoURL: '3S9rxiz1lsU', containment: '#videoContainment', showControls: false, autoPlay: true, loop: true, vol: 50, mute: true, startAt: 0, stopAt: 0, opacity: 1, addRaster: false, quality: 'large', optimizeDisplay: true, ratio: 16/9, playOnlyIfVisible: true}"
id="bgndVideo"></div>
<!-- YouTube video URL end -->
[...]
Please note;
This template is designed to use YouTube videos as a background; however, 'YouTube Video Background' plugin is not supported by SOME mobile devices and it doesn't work on ALL mobile devices, so the background image is added to compensate for it. This background image can be found by following its URL path: 'img/background/YT-bg.jpg'.
To activate the background image, please open the 'style.css' file.
Part to edit:
[...]
/* YouTube video */
[...]
@media only screen and (max-width: 995px) {
.YT-bg {
[...]
background-image: url(../img/background/YT-bg.jpg);
[...]
/* uncomment the following to show an image for mobile devices */
/* display: block; */
}
}
[...]
To add 'Vimeo Videos' in the background of the template, simply find the appropriate label <!-- Vimeo video URL start --> in the body of the HTML file.
Part to edit:
[...]
<!-- Vimeo video URL start -->
<iframe data-fullscreeneo="" src="https://player.vimeo.com/video/98929509?autoplay=1&background=1&hd=1&loop=1"></iframe>
<!-- Vimeo video URL end -->
[...]
Please note;
This template is designed to use Vimeo videos as a background; however, 'Vimeo Video Background' plugin is not supported by SOME mobile devices and it doesn't work on ALL mobile devices, so the background image is added to compensate for it. This background image can be found by following its URL path: 'img/background/vimeo-bg.jpg'.
To activate the background image, please open the 'style.css' file.
Part to edit:
[...]
/* Vimeo video */
[...]
@media only screen and (max-width: 995px) {
.vimeo-bg {
[...]
background-image: url(../img/background/vimeo-bg.jpg);
[...]
/* uncomment the following to show an image for mobile devices */
/* display: block; */
}
}
[...]
To add images in the background of the template, simply find the appropriate CSS file placed in the folder named 'css' (e.g. style.css).
Open the file and find the appropriate label '/* 1. TEMPLATE BACKGROUNDS */'.
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. home IMG BACKGROUND */
.section-bg-home {
background-image: url(../img/background/home-bg.jpg);
}
[...]
/* 1.3. services IMG BACKGROUND */
.swiper-slide-parallax-bg {
background-image: url(../img/background/parallax-bg.jpg);
}
[...]
/* 1.7. slick fullscreen - ken burns slideshow ZOOM/FADE IMG BACKGROUND */
.bg-img-1,
.kenburns-slide-1 {
background-image: url(../img/background/hero-bg-1.jpg);
}
.bg-img-2,
.kenburns-slide-2 {
background-image: url(../img/background/hero-bg-2.jpg);
}
.bg-img-3,
.kenburns-slide-3 {
background-image: url(../img/background/hero-bg-3.jpg);
}
.bg-img-4,
.kenburns-slide-4 {
background-image: url(../img/background/hero-bg-4.jpg);
}
[...]
You can also edit the images by following its URL path: '/img/background/', and replace existing image files with your own images.
Contact the author
Ex Nihilo provides support through email contact form [http://themeforest.net/user/ex-nihilo#contact].
Typical response time is less than 1 business day.
Item support includes:
Availability of the author to answer questions
Get assistance with reported bugs and issues
Help with included 3rd party assets
Item support does not include:
Customizations and installations
Working time:
Monday thru Friday 9am to 5pm,
Central European Time (UTC+01:00)