To edit the 'Home' page, simply find the appropriate label <!-- swiper slide 3 start --> in the body of the HTML file.
Part to edit:
[...]
<!-- swiper slide 3 start -->
[...]
<!-- logo start -->
[...]
<a href="#"><img alt="Logo" src="img/logo-light.png"></a>
[...]<!-- logo end -->
<!-- social icons start -->
[...]
<ul class="social-icons">
<li>
<a class="fa fa-twitter" href="#"></a>
</li>
<li>
<a class="fa fa-facebook" href="#"></a>
</li>
<li>
<a class="fa fa-google-plus" href="#"></a>
</li>
<li>
<a class="fa fa-youtube" href="#"></a>
</li>
<li>
<a class="fa fa-linkedin" href="#"></a>
</li>
<li>
<a class="fa fa-instagram" href="#"></a>
</li>
<li>
<a class="fa fa-behance" href="#"></a>
</li>
<li>
<a class="fa fa-pinterest" href="#"></a>
</li>
<li>
<a class="fa fa-dribbble" href="#"></a>
</li>
</ul>
[...]<!-- social icons end -->
[...]
<!-- intro content visible start -->
[...]
<h3>
Creative / Modern / Minimal
</h3>
<h1>
the<span class="change-color">Edge</span>
</h1>[...]<!-- intro content visible end -->
<!-- intro content hidden start -->
[...]
<!-- google maps start -->
<div data-latitude="48.858278" data-longitude="2.294254" id="google-map">
[...]
</div><!-- google maps end -->
[...]
<!-- inner navigation start -->
[...]
<span class="btn arrow-left colored btn-first"><span class="mask"></span> <span class="btn-label">More Info</span></span> <span class=
"btn arrow-right colored-2"><span class="mask"></span> <span class="btn-label">Contact Us</span></span>
[...]<!-- inner navigation end -->
[...]
<!-- intro content visible start -->
[...]
<!-- newsletter form start -->
<h6>
Newsletter
</h6>
<p class="newsletter-p">
Subscribe today to receive the latest news
</p>
[...]<!-- newsletter form end -->
[...]
[...]<!-- intro content visible end -->
<!-- intro content hidden holder 2 start -->
[...]
<img alt="Logo Big" src="img/logo-dark-big.png">
<p>
'The Ex' is a strategic creative and brand design agency in Paris, New York and London. We build the world's most desirable brands.
</p>
[...]
<!-- social icons footer start -->
[...]
<ul class="social-icons-footer">
<li>
<a class="fa fa-twitter" href="#"></a>
</li>
<li>
<a class="fa fa-facebook" href="#"></a>
</li>
<li>
<a class="fa fa-google-plus" href="#"></a>
</li>
<li>
<a class="fa fa-youtube" href="#"></a>
</li>
<li>
<a class="fa fa-linkedin" href="#"></a>
</li>
<li>
<a class="fa fa-instagram" href="#"></a>
</li>
<li>
<a class="fa fa-behance" href="#"></a>
</li>
<li>
<a class="fa fa-pinterest" href="#"></a>
</li>
<li>
<a class="fa fa-dribbble" href="#"></a>
</li>
</ul>
[...]<!-- social icons footer end -->
<!-- footer copyright start -->
[...]
<a href="#">©2016 All Rights Reserved.</a>
[...]<!-- footer copyright end -->
[...]<!-- intro content hidden holder 2 end -->
[...]<!-- swiper slide 3 end -->
[...]
You can also edit the 'Logo' image by following its URL path: '/img/', and replace existing image file with your own image.
To edit the 'About' page, simply find the appropriate label <!-- swiper slide 2 start --> in the body of the HTML file.
Part to edit:
[...]
<!-- swiper slide 2 start -->
[...]
<h4>
//
</h4>
<h2>
About <span class="get-behind">About</span>
</h2>
<h3>
Branding / Design
</h3>
[...]
<!-- about content visible start -->
[...]
<!-- skills start -->
[...]
<ul id="skills">
<li>
<span class="expand identity"></span><span class="skills-description">Identity · 60%</span>
</li>
<li>
<span class="expand development"></span><span class="skills-description">Development · 80%</span>
</li>
<li class="last">
<span class="expand design"></span><span class="skills-description">Design · 100%</span>
</li>
</ul>
[...]<!-- skills end -->
[...]
<div class="col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis efficitur ullamcorper.
</p>
<p>
Suspendisse semper diam augue, eu ultrices purus ullamcorper eget. Nulla quam odio, volutpat a tincidunt a, ullamcorper <a href="#">sed
diam</a>.
</p>
</div>
<div class="col-md-6">
<p>
Cras tempor luctus congue. Nulla quam lacus, iaculis at porta et, <a href="#">fermentum a dolor</a>.
</p>
<p>
Duis pulvinar egestas vehicula. Nulla eleifend blandit efficitur. Praesent sit amet congue sem.
</p>
</div>
[...]
[...]<!-- about content visible end -->
<!-- about content hidden start -->
[...]
<div class="col-md-6 services-padding mb40">
<h5>
<span class="awesome">Brand</span> Identity
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum <a href="#">pharetra congue</a>.
</p>
</div>
<div class="col-md-6 services-padding border-left-services mb40">
<h5>
<span class="awesome">Brand</span> Design
</h5>
<p>
Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula non dignissim suscipit.
</p>
</div>
[...]
<div class="col-md-6 services-padding border-top-services mt40">
<h5>
<span class="awesome">Web</span> Design
</h5>
<p>
Curabitur sit amet odio vitae odio gravida tempus. Aenean in lectus neque.
</p>
</div>
<div class="col-md-6 services-padding border-left-services border-top-services mt40">
<h5>
<span class="awesome">Web</span> Development
</h5>
<p>
Nunc in lacus quis enim ultrices suscipit sit amet id lorem. Sed in <a href="#">lorem felis</a>.
</p>
</div>
[...]
[...]<!-- about content hidden end -->
[...]
<!-- inner navigation start -->
[...]
<span class="btn about-launcher colored-2"><span class="mask"></span> <span class="btn-label">Services</span></span>
[...]<!-- inner navigation end -->
[...]
<!-- intro content holder start -->
[...]
<img alt="Logo Big" src="img/logo-dark-big.png">
<p>
'The Ex' is a strategic creative and brand design agency in Paris, New York and London. We build the world's most desirable brands.
</p><!-- outer navigation start -->
[...]
<span class="btn arrow-left colored"><span class="mask"></span> <span class="btn-label">Works</span></span> <span class=
"btn arrow-right colored-2"><span class="mask"></span> <span class="btn-label">Home</span></span>
[...]<!-- outer navigation end -->
[...]<!-- intro content holder end -->
[...]<!-- swiper slide 2 end -->
[...]
To edit the 'Skills' percentage, simply open the CSS file [e.g. style.css].
Part to edit:
[...]
/* skills */
[...]
.identity {
width: 60%;
-webkit-animation: identity 2s ease-out;
-moz-animation: identity 2s ease-out;
-ms-animation: identity 2s ease-out;
-o-animation: identity 2s ease-out;
animation: identity 2s ease-out;
}
.development {
width: 80%;
-webkit-animation: development 2s ease-out;
-moz-animation: development 2s ease-out;
-ms-animation: development 2s ease-out;
-o-animation: development 2s ease-out;
animation: development 2s ease-out;
}
.design {
width: 100%;
-webkit-animation: design 2s ease-out;
-moz-animation: design 2s ease-out;
-ms-animation: design 2s ease-out;
-o-animation: design 2s ease-out;
animation: design 2s ease-out;
}
@-moz-keyframes identity { 0% { width: 0; } 100% { width: 60%; } }
@-moz-keyframes development { 0% { width: 0; } 100% { width: 80%; } }
@-moz-keyframes design { 0% { width: 0; } 100% { width: 100%; } }
@-webkit-keyframes identity { 0% { width: 0; } 100% { width: 60%; } }
@-webkit-keyframes development { 0% { width: 0; } 100% { width: 80%; } }
@-webkit-keyframes design { 0% { width: 0; } 100% { width: 100%; } }
[...]
To edit the 'Works' page, simply find the appropriate label <!-- swiper slide 1 start --> in the body of the HTML file.
Part to edit:
[...]
<!-- swiper slide 1 start -->
[...]
<h4>
//
</h4>
<h2>
Works <span class="get-behind">Works</span>
</h2>
<h3>
Photography / Portfolio
</h3>
[...]
<!-- photoSwipe start -->
<div class="the-edge-gallery">
<figure class="col-md-6 image-works">
<a class="effect-bubba-photos" data-size="1920x1080" href="photoswipe/photos/large/1.jpg"><img alt="Image description" class="img-responsive" src=
"photoswipe/photos/small/1.jpg"></a>
<figcaption class="img-caption">
Image caption 1
<div class="hover-effect"></div>
<div class="icon-works">
<a class="iw-slide-right fa fa-plus" href="#"></a> <a class="iw-slide-left fa fa-share-alt" href="#"></a>
</div>
</figcaption>
</figure>
<figure class="col-md-6 image-works">
<a class="effect-bubba-photos" data-size="1920x1080" href="photoswipe/photos/large/2.jpg"><img alt="Image description" class="img-responsive" src=
"photoswipe/photos/small/2.jpg"></a>
<figcaption class="img-caption">
Image caption 2
<div class="hover-effect"></div>
<div class="icon-works">
<a class="iw-slide-right fa fa-plus" href="#"></a> <a class="iw-slide-left fa fa-share-alt" href="#"></a>
</div>
</figcaption>
</figure>
<figure class="col-md-6 image-works">
<a class="effect-bubba-photos" data-size="1920x1080" href="photoswipe/photos/large/3.jpg"><img alt="Image description" class="img-responsive" src=
"photoswipe/photos/small/3.jpg"></a>
<figcaption class="img-caption">
Image caption 3
<div class="hover-effect"></div>
<div class="icon-works">
<a class="iw-slide-right fa fa-plus" href="#"></a> <a class="iw-slide-left fa fa-share-alt" href="#"></a>
</div>
</figcaption>
</figure>
<figure class="col-md-6 image-works">
<a class="effect-bubba-photos" data-size="1920x1080" href="photoswipe/photos/large/4.jpg"><img alt="Image description" class="img-responsive" src=
"photoswipe/photos/small/4.jpg"></a>
<figcaption class="img-caption">
Image caption 4
<div class="hover-effect"></div>
<div class="icon-works">
<a class="iw-slide-right fa fa-plus" href="#"></a> <a class="iw-slide-left fa fa-share-alt" href="#"></a>
</div>
</figcaption>
</figure>
</div><!-- photoSwipe end -->
[...]
<!-- intro content holder start -->
[...]
<img alt="Logo Big" src="img/logo-dark-big.png">
<p>
'The Ex' is a strategic creative and brand design agency in Paris, New York and London. We build the world's most desirable brands.
</p><!-- outer navigation start -->
[...]
<span class="btn arrow-right colored"><span class="mask"></span> <span class="btn-label">About</span></span>
[...]<!-- outer navigation end -->
[...]<!-- intro content holder end -->
[...]<!-- swiper slide 1 end -->
[...]
You can also edit the 'Works' images by following its URL path: '/photoswipe/photos/', 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 edit the 'Contact' page, simply find the appropriate label <!-- swiper slide 4 start --> in the body of the HTML file.
Part to edit:
[...]
<!-- swiper slide 4 start -->
[...]
<h4>
//
</h4>
<h2>
Contact <span class="get-behind">Contact</span>
</h2>
<h3>
Logo / Web / Print
</h3>
[...]
<!-- contact content hidden start -->
[...]
<div class="col-md-4">
<span class="awesome-contact"><span class="fa fa-map-marker"></span></span>
<p>
ex nihilo, Inc.<br>
Touchdown Dr 1176
</p>
</div>
<div class="col-md-4">
<span class="awesome-contact"><span class="fa fa-mobile"></span></span>
<p>
[00] 11 - 76<br>
[01] 11 - 76
</p>
</div>
<div class="col-md-4">
<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>
</div>
[...]
[...]<!-- contact content hidden end -->
[...]
<!-- inner navigation start -->
[...]
<span class="btn contact-launcher colored-2"><span class="mask"></span> <span class="btn-label">Contact Info</span></span>
[...]<!-- inner navigation end -->
[...]
<!-- intro content holder start -->
[...]
<img alt="Logo Big" src="img/logo-dark-big.png">
<p>
'The Ex' is a strategic creative and brand design agency in Paris, New York and London. We build the world's most desirable brands.
</p><!-- outer navigation start -->
[...]
<span class="btn arrow-left colored"><span class="mask"></span> <span class="btn-label">Home</span></span>
[...]<!-- outer navigation end -->
[...]<!-- intro content holder end -->
[...]<!-- swiper slide 4 end -->
[...]
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 set the 'Countdown Target Date', simply find the file named 'the-edge.js' placed in the folder named 'js'.
Open the file and find the appropriate label '// countdown setup start'.
Edit this section:
date: "1 September 2017 12:00:00", // countdown target date settings
To add images in the background of the template, simply find the appropriate label <!-- ken burns image slideshow start --> in the body of the HTML file.
Part to edit:
[...]
<!-- ken burns image slideshow start -->
<div id="kenburnsy-bg">
<img alt="Background" src="img/background/kenburnsy-bg-1.jpg"> <img alt="Background" src="img/background/kenburnsy-bg-2.jpg"> <img alt="Background" src=
"img/background/kenburnsy-bg-3.jpg"> <img alt="Background" src="img/background/kenburnsy-bg-4.jpg">
</div><!-- ken burns image slideshow end -->
[...]
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 images in the background of the template, simply open the CSS file [e.g. style.css].
Part to edit:
[...]
/* hero */
/* hero background 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);
}
.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);
}
.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);
}
.bg-img-SINGLE-works {
background-image: url(../img/background/SINGLE-bg-works.jpg);
}
.bg-img-SINGLE-about {
background-image: url(../img/background/SINGLE-bg-about.jpg);
}
.bg-img-SINGLE-home {
background-image: url(../img/background/SINGLE-bg-home.jpg);
}
.bg-img-SINGLE-contact {
background-image: url(../img/background/SINGLE-bg-contact.jpg);
}
[...]
.canvas-image {
background-image: url(../img/background/canvas-bg.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 the appropriate label <!-- YouTube video URL start --> in the body of the HTML file.
Replace:
[...]
<!-- YouTube video URL start -->
<div id="videoContainment"></div><a class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=gF0rrpMH-Jo', mute:true, showControls:false, quality:'default', opacity:1, containment:'#videoContainment', optimizeDisplay:true, loop:true, startAt:0, autoPlay:true, showYTLogo:false, addRaster:false, realfullscreen:true}"
id="bgndVideo"></a><!-- YouTube video URL end -->
[...]
With:
[...]
<!-- YouTube video URL start -->
<div id="videoContainment"></div><a class="player" data-property=
"{videoURL:'ttps://www.youtube.com/watch?v=youryoutubevideouniqueID', mute:true, showControls:false, quality:'default', opacity:1, containment:'#videoContainment', optimizeDisplay:true, loop:true, startAt:0, autoPlay:true, showYTLogo:false, addRaster:false, realfullscreen:true}"
id="bgndVideo"></a><!-- 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 mobile devices and it doesn't work on 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 'Vimeo Videos' in the background of the template, simply open the JS file named 'the-edge.js' placed in the folder named 'js'.
Part to edit:
[...]
// Vimeofy
[...]
'url': 'https://vimeo.com/117405868', // Vimeo VIDEO URL
[...]
Please note;
This template is designed to use Vimeo videos as a background; however, 'Vimeo Video Background' plugin is not supported by mobile devices and it doesn't work on 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 add 'Self-Hosted HTML5 Videos' in the background of the template, simply find the appropriate label <!-- HTML5 video URL start --> in the body of the HTML file.
Part to edit:
[...]
<!-- HTML5 video URL start -->
<div data-vide-bg="http://www.11-76.com/html5-videos/the-edge.mp4" data-vide-options="loop: true, muted: true, position: 0% 0%" id="video-bg"></div><!-- HTML5 video URL end -->
[...]
Please note;
This template is designed to use Self-Hosted MP4 file format videos as a background; however, 'Self-Hosted HTML5 Video Background' plugin is not supported by mobile devices and it doesn't work on 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/HTML5-bg.jpg'.
By default the sound of the video is set mute. To unmute the sound, change 'muted: true' into 'muted: false'.
To edit the real time live 'Twitter Feed', simply find the file named 'the-edge.js' placed in the folder named 'js'.
Open the file and find the appropriate label '// twitter ticker'.
Replace: username: "enihilo", // user name settings With: username: "yourtwitterusername", // user name settings
Twitter API 1.1 OAuth authentication process
[Step 1] Setup a Twitter Application
1. Visit https://dev.twitter.com/apps and sign in with your Twitter account username and password
2. Select 'Create a new application' and fill in the application form with the following application details:
- Name: e.g. 'yoursite.com'
- Description: e.g. 'tweet.js-mod'
- Website: e.g. http://www.yoursite.com/
- Callback URL: This field can be left blank
3. Enter the CAPTCHA and click 'Create your Twitter application'
4. Create your access token
5. Make a note of the 'Consumer key', 'Consumer secret', 'Access token' and 'Access token secret'
[Step 2] Authenticate the Twitter Feed
After creating your application, open the file named 'index.php' placed in the folder named 'twitter'.
Open the 'index.php' file and configure it with your OAuth credentials in the assigned slots below:
// Your Twitter App Consumer Key
private $consumer_key = 'YOUR_CONSUMER_KEY';
// Your Twitter App Consumer Secret
private $consumer_secret = 'YOUR_CONSUMER_SECRET';
// Your Twitter App Access Token
private $user_token = 'YOUR_ACCESS_TOKEN';
// Your Twitter App Access Token Secret
private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';
Save the edited 'index.php' file. Upload the entire 'twitter' folder on your web server.
Please note;
The 'twitter' folder [containing: index.php and the lib files) is designed to be placed in the document root of your website as a whole (e.g. yourdomain.com/twitter), otherwise it will not work.
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)