To edit the 'Home Page', simply find the appropriate label <!-- home slides start --> in the body of the HTML file.
Part to edit:
[...]
<!-- home slides start -->
[...]
<li>Simplicity is complex
</li>
<li>Design is a process
</li>
<li>Aesthetic is a decision
</li>
<li>Style is everything
</li>
[...]<!-- home slides end -->
<!-- main title start -->
[...]
<h1>
The Wall
</h1>
[...]<!-- main title end -->
<!-- home navigation start -->
[...]
<li>
<a class="nav-button navscroll" data-idpage="page-about">More information</a>
</li>
<li>
<a class="nav-button ex-modal-launcher">Newsletter Sign-Up</a>
</li>
[...]<!-- home navigation end -->
[...]
OR/AND
[...]
<!-- page home start -->
[...]
<h1>
The Wall
</h1>
<h2>
Simplicity is complex
</h2>
[...]
<h1>
The Wall
</h1>
<h2>
Design is a process
</h2>
[...]
<h1>
The Wall
</h1>
<h2>
Aesthetic is a decision
</h2>
[...]
<h1>
The Wall
</h1>
<h2>
Style is everything
</h2>
[...]<!-- page home end -->
[...]
To edit the 'About Page', simply find the appropriate label <!-- page about start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page about start -->
[...]
<h4>
// 01
</h4>
<h2>
About <span class="get-behind">Who we are</span>
</h2>
<h3>
Photography / Portfolio
</h3>
[...]
<span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed dictum tellus. Praesent ullamcorper
fermentum egestas. Sed magna tortor, consectetur ac purus feugiat, porta aliquam turpis.<span class="quote-mark-r fa fa-quote-right"></span>
[...]
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed dictum tellus. Praesent ullamcorper fermentum egestas. Sed magna tortor, consectetur ac
purus feugiat, porta aliquam turpis. Integer imperdiet enim nec risus elementum, sit amet lacinia ligula congue. Mauris pellentesque ex in purus malesuada feugiat.
</p>
<p>
Aliquam nec ipsum feugiat nibh cursus gravida. Nullam mattis condimentum dapibus. Suspendisse congue tincidunt felis, et porttitor ligula aliquet sit amet. Duis
quis tristique diam, <a href="#">a porttitor lorem</a>.
</p>
[...]<!-- page about end -->
[...]
To edit the 'Facts Page', simply find the appropriate label <!-- page facts start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page facts start -->
[...]
<div class="facts-counter-number">
76
</div>
<div class="facts-counter-description">
<i class="fa fa-briefcase"></i> <span class="facts-counter-title">Completed Projects</span>
</div>
[...]
<div class="facts-counter-number">
41
</div>
<div class="facts-counter-description">
<i class="fa fa-users"></i> <span class="facts-counter-title">Clients Served</span>
</div>
[...]
<div class="facts-counter-number">
12
</div>
<div class="facts-counter-description">
<i class="fa fa-globe"></i> <span class="facts-counter-title">Countries Reached</span>
</div>
[...]
<div class="facts-counter-number">
1976
</div>
<div class="facts-counter-description">
<i class="fa fa-camera-retro"></i> <span class="facts-counter-title">Photos Taken</span>
</div>
[...]<!-- page facts end -->
[...]
You can edit the 'Facts Page' image background by following its URL path: 'img/background/facts-bg.jpg', and replace existing image files with your own images.
To edit the 'Featured Work Page', simply find the appropriate label <!-- page featured work start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page featured work start -->
[...]
<h4>
// 02
</h4>
<h2>
Work <span class="get-behind">Featured</span>
</h2>
<h3>
Photography / Portfolio
</h3>
[...]
<!-- featured work 1 start -->
[...]
<a class="iw-slide-left fa fa-twitter" href="#"></a> <a class="fa fa-facebook" href="#"></a> <a class="iw-slide-right fa fa-google-plus" href="#"></a>
[...]<img alt="Team" class="img-correction" src="img/featured-work/featured-work-01.jpg">
[...]
<h3>
Commercial / Stock
</h3>
[...]<!-- featured work 1 end -->
<!-- featured work 2 start -->
[...]
<a class="iw-slide-left fa fa-twitter" href="#"></a> <a class="fa fa-facebook" href="#"></a> <a class="iw-slide-right fa fa-google-plus" href="#"></a>
[...]<img alt="Team" class="img-correction" src="img/featured-work/featured-work-02.jpg">
[...]
<h3>
Beauty / Fashion
</h3>
[...]<!-- featured work 2 end -->
<!-- featured work 3 start -->
[...]
<a class="iw-slide-left fa fa-twitter" href="#"></a> <a class="fa fa-facebook" href="#"></a> <a class="iw-slide-right fa fa-google-plus" href="#"></a>
[...]<img alt="Team" class="img-correction" src="img/featured-work/featured-work-03.jpg">
[...]
<h3>
Nature / Landscapes
</h3>
[...]<!-- featured work 3 end -->
[...]
[...]<!-- page featured work end -->
[...]
You can edit the 'Featured Work Page' images by following its URL path: 'img/featured-work/', and replace existing image files with your own images.
To edit the 'Services Page', simply find the appropriate label <!-- page services start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page services start -->
[...]
<h4>
// 04
</h4>
<h2>
Services <span class="get-behind">What we do</span>
</h2>
<h3>
Photography / Portfolio
</h3>
[...]
<!-- owl carousel services start -->
[...]
<ul class="services-owl">
<li>
<h5>
<span class="awesome-services">Beauty &</span> <span class="change-color">Fashion</span>
</h5><!-- icon effect start -->
<div class="set-8">
<div class="hi-icon-wrap hi-icon-effect-8">
<a class="hi-icon hi-icon-services-1" href="#"></a>
</div>
</div><!-- icon effect end -->
<p>
Praesent ullamcorper fermentum egestas.
</p>
</li>
<li>
<h5>
<span class="awesome-services">Editorials &</span> <span class="change-color">Magazines</span>
</h5><!-- icon effect start -->
<div class="set-8">
<div class="hi-icon-wrap hi-icon-effect-8">
<a class="hi-icon hi-icon-services-2" href="#"></a>
</div>
</div><!-- icon effect end -->
<p>
Curabitur sed dictum tellus.
</p>
</li>
<li>
<h5>
<span class="awesome-services">Celebrations &</span> <span class="change-color">Weddings</span>
</h5><!-- icon effect start -->
<div class="set-8">
<div class="hi-icon-wrap hi-icon-effect-8">
<a class="hi-icon hi-icon-services-3" href="#"></a>
</div>
</div><!-- icon effect end -->
<p>
Sed magna tortor, consectetur ac purus feugiat.
</p>
</li>
<li>
<h5>
<span class="awesome-services">People &</span> <span class="change-color">Portraits</span>
</h5><!-- icon effect start -->
<div class="set-8">
<div class="hi-icon-wrap hi-icon-effect-8">
<a class="hi-icon hi-icon-services-4" href="#"></a>
</div>
</div><!-- icon effect end -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</li>
</ul>
[...]<!-- owl carousel services end -->
[...]
<span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed dictum tellus. Praesent ullamcorper
fermentum egestas. Sed magna tortor, consectetur ac purus feugiat, porta aliquam turpis.<span class="quote-mark-r fa fa-quote-right"></span>
[...]<!-- page services end -->
[...]
To edit the 'News Page', simply find the appropriate label <!-- page news start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page news start -->
[...]
<h4>
// 05
</h4>
<h2>
News <span class="get-behind">Current projects</span>
</h2>
<h3>
Photography / Portfolio
</h3>
[...]
<!-- news carousel start -->
[...]
<!-- news post 1 start -->
[...]
<!-- news post 1 image start -->
[...]
<img alt="News" class="img-correction" src="img/news/news-01.jpg">
[...]
<img alt="News" class="img-correction" src="img/news/news-02.jpg">
[...]<!-- news post 1 image end -->
[...]
<!-- news post content 1 start -->
<h5 class="date">
29/1/2017, Sunday
</h5>
<h2 class="section-news-title">
Lorem ipsum
</h2>
<h2 class="section-news-subtitle">
· Commercial / People ·
</h2>[...]
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed dictum tellus. Praesent ullamcorper fermentum egestas. Sed magna tortor, consectetur ac
purus feugiat, porta aliquam turpis. Integer imperdiet enim nec risus elementum, sit amet lacinia ligula congue. Mauris pellentesque ex in purus malesuada
feugiat.
</p>
<p>
Aliquam nec ipsum feugiat nibh cursus gravida. Nullam mattis condimentum dapibus. Suspendisse congue tincidunt felis, et porttitor ligula aliquet sit amet.
Duis quis tristique diam, <a href="#">a porttitor lorem</a>.
</p><!-- news post content 1 end -->
[...]<!-- news post 1 end -->
[...]
[...]<!-- page news end -->
[...]
You can edit the 'News Page' images by following its URL path: 'img/news/', and replace existing image files with your own images.
To edit the 'Testimonials Page', simply find the appropriate label <!-- page testimonials start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page testimonials start -->
[...]
<!-- testimonials start -->
[...]
<div class="testimonial">
<p>
If you can't explain it to a six year old, you don't understand it yourself.
</p>
<p></p>
<h6>
― Albert Einstein
</h6>
</div>
<div class="testimonial">
<p>
Simplicity is the ultimate sophistication.
</p>
<p></p>
<h6>
― Leonardo da Vinci
</h6>
</div>
<div class="testimonial">
<p>
Simplicity is the glory of expression.
</p>
<p></p>
<h6>
― Walt Whitman
</h6>
</div>
</div><!-- testimonials end -->
[...]<!-- page testimonials end -->
[...]
You can edit the 'Testimonials Page' image background by following its URL path: 'img/background/testimonials-bg.jpg', and replace existing image files with your own images.
To edit the 'Contact Page', simply find the appropriate label <!-- page contact start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page contact start -->
[...]
<h4>
// 06
</h4>
<h2>
Contact <span class="get-behind">Get In Touch</span>
</h2>
<h3>
Photography / Portfolio
</h3>
[...]
<span class="awesome-contact"><span class="fa fa-map-marker"></span></span>
<p>
ex nihilo, Inc.<br>
Touchdown Dr 1176<br>
<a class="open-hidden-container">Find us on Google Maps <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></a>
</p><span class="awesome-contact"><span class="fa fa-mobile"></span></span>
<p>
[00] 11 - 76<br>
[01] 11 - 76
</p><span class="awesome-contact"><span class="fa fa-paper-plane"></span></span>
<p>
<a href="mailto:contact@yourdomainname.com">contact@yourdomainname.com</a><br>
<a href="mailto:info@yourdomainname.com">info@yourdomainname.com</a>
</p>
[...]<!-- page contact end -->
[...]
To add your 'Google Maps' location, simply find and open the file named 'plugins.js' placed in the folder named 'js'.
Part to edit:
// google maps POSITION // EDIT the following latitude and longitude coordinates: 34.052235,-118.243683 // [...]new google.maps.LatLng(34.052235,-118.243683)[...]d=[["EX","undefined","undefined","undefined","undefined",34.052235,-118.243683,"img/location-icon.png"],["EX","undefined","undefined","undefined","undefined",34.052235,-118.243683,"img/location-icon.png"]][...]
Selected DEMO Location is:
Los Angeles, California
Latitude: 34.052235°
Longitude: -118.243683°
You can visit this site: http://www.findlatitudeandlongitude.com/ to pinpoint your location.
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 form submissions to a subscriber list in your MailChimp account, simply open the file named 'subscribe.php' and configure it with your MailChimp credentials in the assigned slots below:
$api = new MCAPI('YOUR_API_KEY');
[...]
$retval = $api->listSubscribe( 'YOUR_LIST_ID', $_POST["subscribe-email"], $merge_vars, 'html', false, true );
Please make sure you have generated your MailChimp API Key and copied your MailChimp List ID.
- MailChimp API Key ARTICLE as available at: http://kb.mailchimp.com/accounts/management/about-api-keys#Finding-or-generating-your-API-key
- MailChimp List ID ARTICLE as available at: http://kb.mailchimp.com/lists/managing-subscribers/find-your-list-id
To edit the 'Signup Form Page', simply find the appropriate label <!-- signup form start --> in the body of the HTML file.
Part to edit:
[...]
<!-- signup form start -->
[...]
<h5>
Newsletter sign up
</h5>
<h4>
Subscribe today
</h4>
[...]<!-- signup form end -->
[...]
To edit the 'Works Page', simply find the appropriate label <!-- page works intro start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page works intro start -->
[...]
<h4>
// 03
</h4>
<h2>
Works <span class="get-behind">Full portfolio</span>
</h2>
<h3>
Photography / Portfolio
</h3>
[...]
<!-- item page 1 start -->
<!-- item page 1 INTRO start -->
[...]
<div class="photo image-works" data-photo-src="works-1.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-1" data-slider-items="works-1.jpg|works-2.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<nav class="nav-secondary-experience">
<h4>
Works #1
</h4>
<ul>
<li>
<span class="navscroll nav-works" data-idpage="item-1">Item Name 1</span>
</li>
<li>
<span class="navscroll nav-works" data-idpage="item-2">Item Name 2</span>
</li>
<li>
<span class="navscroll nav-works" data-idpage="item-3">Item Name 3</span>
</li>
<li>
<span class="navscroll nav-works" data-idpage="item-4">Item Name 4</span>
</li>
<li>
<span class="navscroll nav-works" data-idpage="item-5">Item Name 5</span>
</li>
</ul>
</nav>
[...]
<div class="photo image-works" data-photo-src="works-2.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-2" data-slider-items="works-2.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]<!-- item page 1 INTRO end -->
[...]
<h2>
Item Name 1 <span class="item-desc">Commercial / Stock</span>
</h2>
[...]
<div class="photo image-works" data-photo-src="works-3.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-3" data-slider-items="works-3.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<div class="box-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum <a href="#">pharetra congue</a>.
</p>
<p>
Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula non dignissim suscipit, neque nunc efficitur felis.
</p>
</div>
[...]
<div class="photo image-works" data-photo-src="works-4.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-4" data-slider-items="works-4.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<h2>
Item Name 2 <span class="item-desc">Beauty / Fashion</span>
</h2>
[...]
<div class="photo image-works" data-photo-src="works-5.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-5" data-slider-items="works-5.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<div class="box-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum <a href="#">pharetra congue</a>.
</p>
<p>
Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula non dignissim suscipit, neque nunc efficitur felis.
</p>
</div>
[...]
<div class="photo image-works" data-photo-src="works-6.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-6" data-slider-items="works-6.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<h2>
Item Name 3 <span class="item-desc">Nature / Landscapes</span>
</h2>
[...]
<div class="photo image-works" data-photo-src="works-7.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-7" data-slider-items="works-7.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<div class="box-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum <a href="#">pharetra congue</a>.
</p>
<p>
Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula non dignissim suscipit, neque nunc efficitur felis.
</p>
</div>
[...]
<div class="photo image-works" data-photo-src="works-8.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-8" data-slider-items="works-8.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<h2>
Item Name 4 <span class="item-desc">People / Portraits</span>
</h2>
[...]
<div class="photo image-works" data-photo-src="works-9.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-9" data-slider-items="works-9.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<div class="box-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum <a href="#">pharetra congue</a>.
</p>
<p>
Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula non dignissim suscipit, neque nunc efficitur felis.
</p>
</div>
[...]
<div class="photo image-works" data-photo-src="works-10.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-10" data-slider-items="works-10.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<h2>
Item Name 5 <span class="item-desc">Editorials / Magazines</span>
</h2>
[...]
<div class="photo image-works" data-photo-src="works-11.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-11" data-slider-items="works-11.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]
<div class="box-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum <a href="#">pharetra congue</a>.
</p>
<p>
Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula non dignissim suscipit, neque nunc efficitur felis.
</p>
[...]
<div class="photo image-works" data-photo-src="works-12.jpg">
[...]
<a class="iw-slide-left fa fa-share-alt" href="#"></a> <a class="bt-nav zoom-item" data-slider-id="item-name-12" data-slider-items="works-12.jpg"><i class=
"fa fa-plus"></i></a> <a class="iw-slide-right fa fa-link" href="#"></a>
[...]
</div>
[...]<!-- item page 1 end -->
[...]
[...]
You can edit the 'Works Page' images by following its URL path: 'img/works/', and replace existing image files with your own images.
To edit the 'Draggable Image Wall', simply find and open the file named 'the-wall-slider.js' or/and 'the-wall-static.js' placed in the folder named 'js'.
Part to edit:
// 18. the Wall
[...]
["the-wall/1.jpg", [
["the-wall/1-2.jpg", "Item Name<br \/>\r\nCommercial / Stock"]
]],
["the-wall/2.jpg", [
["the-wall/2-2.jpg", "Item Name<br \/>\r\nBeauty / Fashion"]
]],
["the-wall/3.jpg", [
["the-wall/3-2.jpg", "Item Name<br \/>\r\nLife / Stories"]
]],
["the-wall/4.jpg", [
["the-wall/4-2.jpg", "Item Name<br \/>\r\nPeople / Portraits"]
]],
["the-wall/5.jpg", [
["the-wall/5-2.jpg", "Item Name<br \/>\r\nEditorials / Magazines"]
]],
["the-wall/6.jpg", [
["the-wall/6-2.jpg", "Item Name<br \/>\r\nCommercial / Stock"]
]],
["the-wall/7.jpg", [
["the-wall/7-2.jpg", "Item Name<br \/>\r\nBeauty / Fashion"]
]],
["the-wall/8.jpg", [
["the-wall/8-2.jpg", "Item Name<br \/>\r\nLife / Stories"]
]],
["the-wall/9.jpg", [
["the-wall/9-2.jpg", "Item Name<br \/>\r\nPeople / Portraits"]
]],
["the-wall/10.jpg", [
["the-wall/10-2.jpg", "Item Name<br \/>\r\nEditorials / Magazines"]
]],
["the-wall/11.jpg", [
["the-wall/11-2.jpg", "Item Name<br \/>\r\nCommercial / Stock"]
]],
["the-wall/12.jpg", [
["the-wall/12-2.jpg", "Item Name<br \/>\r\nBeauty / Fashion"]
]],
["the-wall/13.jpg", [
["the-wall/13-2.jpg", "Item Name<br \/>\r\nLife / Stories"],
["the-wall/13-3.jpg", "Item Name 2<br \/>\r\nLife / Stories"],
["the-wall/13-4.jpg", "Item Name 3<br \/>\r\nLife / Stories"]
]],
["the-wall/14.jpg", [
["the-wall/14-2.jpg", "Item Name<br \/>\r\nPeople / Portraits"]
]],
[...]
]]
];
var maxLength = 36;
[...]
"slideshow": true, // options: true, false
[...]
[...]
You can edit the 'Image Wall' images by following its URL path: 'the-wall/', and replace existing image files with your own images.
Please note,
Demo is using 36 images, if you want to use less or more images, please edit the following line:
[...]var maxLength = 36;[...]
Deafault image size is: width - 301px and height - 320px.
Please note,
There is an extra image (named: plus-1.jpg) at the end to compensate for the gap.
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 '/* TEMPLATE BACKGROUNDS */'.
Part to edit:
[...]
/* TEMPLATE BACKGROUNDS */
/* hero background IMG */
/* single IMG */
.bg-img-SINGLE {
background-image: url(../img/background/SINGLE-bg.jpg);
}
/* slide slider IMG */
.bg-img-1 {
background-image: url(../img/background/hero-bg-1.jpg);
}
.bg-img-2 {
background-image: url(../img/background/hero-bg-2.jpg);
}
.bg-img-3 {
background-image: url(../img/background/hero-bg-3.jpg);
}
.bg-img-4 {
background-image: url(../img/background/hero-bg-4.jpg);
}
/* split slider IMG */
.bg-img-split-1 {
background-image: url(../img/background/hero-bg-split-1.jpg);
}
.bg-img-split-2 {
background-image: url(../img/background/hero-bg-split-2.jpg);
}
.bg-img-split-3 {
background-image: url(../img/background/hero-bg-split-3.jpg);
}
.bg-img-split-4 {
background-image: url(../img/background/hero-bg-split-4.jpg);
}
/* zoom slider IMG */
.bg-img-zoom-1 {
background-image: url(../img/background/hero-bg-zoom-1.jpg);
}
.bg-img-zoom-2 {
background-image: url(../img/background/hero-bg-zoom-2.jpg);
}
.bg-img-zoom-3 {
background-image: url(../img/background/hero-bg-zoom-3.jpg);
}
.bg-img-zoom-4 {
background-image: url(../img/background/hero-bg-zoom-4.jpg);
}
/* ken burns slideshow IMG */
.kenburns-slide-1 {
background-image: url(../img/background/kenburns-bg-1.jpg);
}
.kenburns-slide-2 {
background-image: url(../img/background/kenburns-bg-2.jpg);
}
.kenburns-slide-3 {
background-image: url(../img/background/kenburns-bg-3.jpg);
}
.kenburns-slide-4 {
background-image: url(../img/background/kenburns-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.
You can use any size for a background image.
Please note;
Demo images are not included. Image placeholders are provided instead.
To add 'YouTube Videos' in the background of the template, simply find and open the file named 'the-wall-all.js' placed in the folder named 'js'.
Part to edit:
[...]
// 12. YTPlayer
$("#background-video").YTPlayer({
videoId: "r8j-MWq4HZc", // DEMO URL is: https://www.youtube.com/watch?v=r8j-MWq4HZc
mute: true, // sound options: true, false
[...]
[...]
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'.
By default the sound of the video is set mute. To unmute the sound, change 'mute: true' into 'mute: false'.
To add images and/or 'YouTube and Vimeo Videos' in the background of the template, simply find the appropriate label <!-- fotorama background start --> in the body of the HTML file.
Part to edit:
[...]
<!-- fotorama background start -->
<img src="img/background-fotorama/1.jpg" data-caption="Lorem ipsum dolor sit amet" alt="Img 1">
<img src="img/background-fotorama/2.jpg" data-caption="Consectetur adipiscing elit" alt="Img 2">
<a href="https://www.youtube.com/watch?v=ga-LSXrrWNI" data-caption="YouTube Video">YouTube Video</a>
<a href="https://vimeo.com/154237664" data-caption="Vimeo Video">Vimeo Video</a>
[...]
[...]<!-- fotorama background end -->
[...]
You can also edit the images by following its URL path: '/img/background-fotorama/', and replace existing image files with your own images.
You can use any size for a background image.
Please note;
Demo images are not included. Image placeholders are provided instead.
Contact the author
This author provides limited support through email contact form [http://themeforest.net/user/ex-nihilo#contact].
Item support includes:
Availability of the author to answer questions
Answering technical questions about item’s features
Assistance with reported bugs and issues
Help with included 3rd party assets
However, item support does not include:
Customization services
Installation services
This author’s response time can be up to 2 business days.
Working time:
Monday thru Friday 9am to 5pm
Central European Time (UTC+01:00)