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 <!-- page home start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page home start -->
[...]
<!-- social icons start -->
<div class="social-icons">
<ul>
<li>
<a class="ion-social-twitter" href="#"><span>Twitter</span></a>
</li>
<li>
<a class="ion-social-facebook" href="#"><span>Facebook</span></a>
</li>
<li>
<a class="ion-social-instagram" href="#"><span>Instagram</span></a>
</li>
</ul>
</div>
<!-- social icons end -->
[...]
<!-- section title start -->
<h1 class="hero-heading hero-heading-true-bold-2">
Creativex
</h1>
<!-- section title end -->
[...]
<!-- section subtitle start -->
<h2>
Style is everything
</h2>
<!-- section subtitle end -->
[...]
<!-- page 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" href="#">
<div class="logo-img"></div>
</a>
<!-- logo end -->
[...]
You can also edit the 'Logo' images by following its URL path: 'img/', and replace existing image files with your own images.
To edit the 'About' section, simply find the appropriate label <!-- page about start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page about start -->
[...]
<!-- section title start -->
<div class="section-heading">
<span>01.</span> About
</div>
<!-- section title end -->
[...]
<!-- section txt start -->
<div class="animated-text-wrapper-r">
<div class="animated-text-r">
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
<div class="animated-text-content-r"><span>The</span> brand. </div>
</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<h1 class="section-header">
Shooting <span>fashion</span> & <span>portraits</span> photos. Editing selected <span>wedding</span> photos. Delivering <span>high-resolution</span> image files.
</h1>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Inspiring Generations</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="txt">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text <a class="link-effect" href="#">ever since the 1500s</a>.
</p>
</div>
<!-- section txt end -->
[...]
<!-- page about end -->
<!-- page services start -->
[...]
<!-- section txt start -->
<div class="big-num-full-1">
<div class="big-num">1</div>
</div>
<div class="section-heading section-heading-dot">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Web design</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="txt">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text <a class="link-effect" href="#">ever since the 1500s</a>.
</p>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="big-num-full">
<div class="big-num">2</div>
</div>
<div class="section-heading section-heading-dot">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">UX/UI design</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="txt">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text <a class="link-effect" href="#">ever since the 1500s</a>.
</p>
</div>
<!-- section txt end -->
[...]
[...]
<!-- section txt start -->
<div class="big-num-full">
<div class="big-num">3</div>
</div>
<div class="section-heading section-heading-dot">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Brand identity</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="txt">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text <a class="link-effect" href="#">ever since the 1500s</a>.
</p>
</div>
<!-- section txt end -->
[...]
<!-- page services end -->
<!-- page team intro start -->
[...]
<!-- section title start -->
<div class="section-heading">
<span>02.</span> The team
</div>
<!-- section title end -->
[...]
<!-- section txt start -->
<div class="animated-text-wrapper-l">
<div class="animated-text-l">
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
<div class="animated-text-content-l"><span>Meet</span> the pros. </div>
</div>
</div>
<!-- section txt end -->
[...]
<!-- page team intro end -->
<!-- page team start -->
[...]
<!-- carousel start -->
[...]
<!-- section item start -->
[...]
<!-- team item start -->
[...]
<a class="popup-photo" href="img/team/1.jpg" title="IMG Description">
[...]
</a>
[...]
<img alt="Img" src="img/team/1.jpg">
[...]
<!-- team item end -->
[...]
<!-- section title start -->
<a class="popup-photo" href="img/team/1.jpg">
<div class="section-title-inner">
C. Eastwood
</div>
<!-- section title end -->
<!-- section title start -->
<div class="section-title-inner section-title-inner-dark">
Chief Photographer
</div>
</a>
<!-- section title end -->
[...]
<!-- section txt start -->
<div class="social-icons social-icons-dark">
<!-- social icons start -->
<ul>
<li>
<a class="ion-social-twitter" href="#"><span>Twitter</span></a>
</li>
<li>
<a class="ion-social-facebook" href="#"><span>Facebook</span></a>
</li>
<li>
<a class="ion-social-instagram" href="#"><span>Instagram</span></a>
</li>
</ul>
<!-- social icons end -->
</div>
<!-- section txt end -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<!-- section item end -->
[...]
<!-- carousel end -->
[...]
<!-- page team end -->
[...]
You can edit the 'About' section background images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.3. about IMG BACKGROUND */
.about-bg {
background-image: url(../img/about/1.jpg);
}
[...]
You can also edit the 'About/Team' section images by following its URL path: 'img/about/' and 'img/team/', and replace existing image files with your own images.
To edit the 'Works' section, simply find the appropriate label <!-- page works start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page works start -->
<!-- page works intro start -->
[...]
<!-- section title start -->
<div class="section-heading">
<span>03.</span> Works
</div>
<!-- section title end -->
[...]
<!-- section txt start -->
<div class="animated-text-wrapper-r">
<div class="animated-text-r">
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
<div class="animated-text-content-r"><span>We mean</span> business. </div>
</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<h1 class="section-header">
<span>Simplicity</span> is not a style, it is more a <span>philosophy</span> about how to <span>design</span> something more <span>effectively</span>.
</h1>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot section-heading-center-true">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">What's done</div>
</div>
<!-- section txt end -->
[...]
<!-- button start -->
<div class="more-wraper-center">
<a data-lity="" href="https://www.youtube.com/watch?v=3S9rxiz1lsU">
<div class="more-button-bg-center more-button-bg-center-color-rev more-button-circle"></div>
<div class="more-button-txt-center more-button-txt-center-color-rev">
<span>See more</span>
</div>
</a>
</div>
<!-- button end -->
[...]
<!-- page works intro end -->
<!-- item page INTRO start -->
[...]
<div class="photo image-works" data-photo-src="1.jpg">
[...]
<!-- works item folio start -->
<div class="item-folio">
[...]
<!-- works item IMG start -->
<a class="thumb-link" data-size="1920x2200" href="img/works/1.jpg">
<i class="iw-slide ion-plus"></i>
</a>
<!-- works item IMG end -->
<!-- works item description start -->
<div class="item-folio__caption">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<!-- works item description end -->
[...]
</div>
<!-- works item folio end -->
[...]
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Selected works</div>
</div>
<!-- section txt end -->
[...]
<ul>
<li>
<a href="#item-1">Beauty / Fashion</a>
</li>
<li>
<a href="#item-2">Nature / Wild</a>
</li>
<li>
<a href="#item-3">People / Life</a>
</li>
<li>
<a href="#item-4">Culture / Travel</a>
</li>
</ul>
[...]
[...]
<div class="photo image-works" data-photo-src="2.jpg">
[...]
<!-- works item folio start -->
<div class="item-folio">
[...]
<!-- works item IMG start -->
<a class="thumb-link" data-size="1920x1080" href="img/works/2.jpg">
<i class="iw-slide ion-plus"></i>
</a>
<!-- works item IMG end -->
<!-- works item description start -->
<div class="item-folio__caption">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<!-- works item description end -->
[...]
</div>
<!-- works item folio end -->
[...]
<!-- item page INTRO end -->
<!-- item page start -->
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot section-heading-center">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Beauty / Fashion</div>
</div>
<!-- section txt end -->
[...]
<div class="photo image-works" data-photo-src="3.jpg">
[...]
<!-- works item folio start -->
<div class="item-folio">
[...]
<!-- works item IMG start -->
<a class="thumb-link" data-size="1920x1280" href="img/works/3.jpg">
<i class="iw-slide ion-plus"></i>
</a>
<!-- works item IMG end -->
<!-- works item description start -->
<div class="item-folio__caption">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<!-- works item description end -->
[...]
</div>
<!-- works item folio end -->
[...]
[...]
<!-- section txt start -->
<div class="box-description">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text <a class="link-effect" href="#">ever since the 1500s</a>.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<!-- section txt end -->
[...]
<div class="photo image-works" data-photo-src="4.jpg">
[...]
<!-- works item folio start -->
<div class="item-folio">
[...]
<!-- works item IMG start -->
<a class="thumb-link" data-size="1920x1080" href="img/works/4.jpg">
<i class="iw-slide ion-plus"></i>
</a>
<!-- works item IMG end -->
<!-- works item description start -->
<div class="item-folio__caption">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<!-- works item description end -->
[...]
</div>
<!-- works item folio end -->
[...]
[...]
[...]
[...]
[...]
[...]
<!-- item page end -->
<!-- page works end -->
[...]
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 <!-- page news intro start --> in the body of the HTML file.
Repeat the same procedure with the 'blog.html' and 'blog-single.html' file.
Part to edit:
[...]
<!-- page news intro start -->
[...]
<!-- section title start -->
<div class="section-heading">
<span>04.</span> News
</div>
<!-- section title end -->
[...]
<!-- section txt start -->
<div class="animated-text-wrapper-l">
<div class="animated-text-l">
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
<div class="animated-text-content-l"><span>Stay in</span> the know. </div>
</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<h1 class="section-header">
Shooting <span>fashion</span> & <span>portraits</span> photos. Editing selected <span>wedding</span> photos. Delivering <span>high-resolution</span> image files.
</h1>
<!-- section txt end -->
[...]
<!-- page news intro end -->
<!-- page news start -->
[...]
<!-- carousel start -->
[...]
<!-- news item 1 start -->
[...]
<!-- section subtitle start -->
<div class="news-info">
<h3>
June 1, 2022
</h3>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h1 class="section-header-news section-header-news-xs">
Simplicity <span>is complex</span>
</h1>
<!-- section title end -->
[...]
<!-- section txt start -->
<p class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text <a class="link-effect" href="#">ever since the 1500s</a>.
</p>
<!-- section txt end -->
[...]
<!-- button start -->
<div class="more-wraper-center" data-toggle="modal" data-target="#newsModal-1">
<div class="more-button-bg-center more-button-bg-center-color-rev more-button-circle"></div>
<div class="more-button-txt-center more-button-txt-center-color-rev">
<span>Read more</span>
</div>
</div>
<!-- button end -->
[...]
<!-- news item 1 end -->
<!-- news item 2 start -->
[...]
<!-- news item 2 end -->
<!-- news item 3 start -->
[...]
<!-- news item 3 end -->
<!-- news item 4 start -->
[...]
<!-- news item 4 end -->
[...]
<!-- carousel end -->
[...]
<!-- page news end -->
<!-- page blog entries start -->
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot section-heading-center-true">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Stay in the know</div>
</div>
<!-- section txt end -->
[...]
<!-- section title start -->
<h1 class="section-header-news">
Read <span>our blog</span>
</h1>
<!-- section title end -->
[...]
<!-- button start -->
<div class="more-wraper-center">
<a class="more-button-wrapper" href="blog.html">
<div class="more-button-bg-center more-button-bg-center-color-rev more-button-circle"></div>
<div class="more-button-txt-center more-button-txt-center-color-rev">
<span>All entries</span>
</div>
</a>
</div>
<!-- button end -->
[...]
<!-- page blog entries end -->
<!-- news modal 1 start -->
[...]
<!-- section txt start -->
<div class="animated-text-wrapper-r">
<div class="animated-text-r">
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
</div>
</div>
<!-- section txt end -->
[...]
<!-- section subtitle start -->
<div class="news-info">
<h3>
June 1, 2022
</h3>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h1 class="section-header-news section-header-news-modal">
Simplicity <span>is complex</span>
</h1>
<!-- section title end -->
[...]
[...]
<!-- section title start -->
<h1 class="section-header">
<span>Simplicity</span> is not a style, it is more a <span>philosophy</span> about how to <span>design</span> something more <span>effectively</span>.
</h1>
<!-- section title end -->
[...]
<!-- section txt start -->
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a class="link-effect" href="#">magna aliqua</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id <a class="link-effect" href="#">est laborum</a>.
</p>
<!-- section txt end -->
[...]
<!-- item IMG start -->
<div class="img-fullwidth-all">
<img alt="Img" src="img/news/1.jpg">
</div>
<!-- item IMG end -->
[...]
<!-- section txt start -->
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a class="link-effect" href="#">magna aliqua</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id <a class="link-effect" href="#">est laborum</a>.
</p>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="blog-quote">
<h1 class="section-header">
<span>Simplicity</span> is not a style, it is more a <span>philosophy</span> about how to <span>design</span> something more <span>effectively</span>.
</h1>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a class="link-effect" href="#">magna aliqua</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id <a class="link-effect" href="#">est laborum</a>.
</p>
<!-- section txt end -->
[...]
<!-- carousel start -->
[...]
<!-- section item start -->
[...]
<!-- team item start -->
[...]
<img alt="Img" src="img/news/news-gallery/gallery-1/1.jpg">
[...]
<!-- team item end -->
[...]
<!-- section title start -->
<div class="section-title-inner">
Photo Credit:
</div>
<!-- section title end -->
<!-- section title start -->
<div class="section-title-inner section-title-inner-dark">
C. Eastwood
</div>
<!-- section title end -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<!-- section item end -->
</div>
</div>
<!-- carousel end -->
[...]
[...]
<!-- section txt start -->
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a class="link-effect" href="#">magna aliqua</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id <a class="link-effect" href="#">est laborum</a>.
</p>
<!-- section txt end -->
[...]
[...]
<!-- button start -->
<div class="more-wraper-center" data-toggle="modal" data-dismiss="modal">
<div class="more-button-bg-center more-button-bg-center-color-rev more-button-circle"></div>
<div class="more-button-txt-center more-button-txt-center-color-rev">
<span>Close</span>
</div>
</div>
<!-- button end -->
[...]
<!-- section txt start -->
<div class="animated-text-wrapper-l">
<div class="animated-text-l">
<div class="animated-text-content-l"><span>The</span> blog. </div>
<div class="animated-text-content-l"><span>The</span> blog. </div>
<div class="animated-text-content-l"><span>The</span> blog. </div>
<div class="animated-text-content-l"><span>The</span> blog. </div>
<div class="animated-text-content-l"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
<div class="animated-text-content-r"><span>The</span> blog. </div>
</div>
</div>
<!-- section txt end -->
[...]
<!-- news modal 1 end -->
<!-- news modal 2 start -->
[...]
<!-- news modal 2 end -->
<!-- news modal 3 start -->
[...]
<!-- news modal 3 end -->
<!-- news modal 4 start -->
[...]
<!-- news modal 4 end -->
[...]
You can edit the 'News' section background images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.4. news IMG BACKGROUND */
.news-bg-1 {
background-image: url(../img/news/1.jpg);
}
.news-bg-2 {
background-image: url(../img/news/2.jpg);
}
.news-bg-3 {
background-image: url(../img/news/3.jpg);
}
.news-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 'Testimonials' section, simply find the appropriate label <!-- page testimonials start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page testimonials start -->
[...]
<!-- testimonials start -->
[...]
<!-- section title start -->
<h1 class="section-header section-header-light section-header-testimonials">
<span>Simplicity</span> is the<br>
ultimate <span>sophistication</span>.
</h1>
<!-- section title end -->
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot section-heading-center-true">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Unknown printer</div>
</div>
<!-- section txt end -->
[...]
<!-- testimonials end -->
[...]
<!-- page testimonials end -->
[...]
You can edit the 'Testimonials' section images according to the documentation bellow (please read Background Images section).
You can also edit the 'Testimonials' section images by following its URL path: 'img/background/', and replace existing image files with your own images.
To edit the 'Contact' section, simply find the appropriate label <!-- page contact intro start --> in the body of the HTML file.
Part to edit:
[...]
<!-- page contact intro start -->
[...]
<!-- section title start -->
<div class="section-heading">
<span>05.</span> Contact
</div>
<!-- section title end -->
[...]
<!-- section txt start -->
<div class="animated-text-wrapper-r">
<div class="animated-text-r">
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
<div class="animated-text-content-r"><span>Let's</span> talk. </div>
</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<h1 class="section-header">
Please send an e-mail at the <span>address provided below</span> or feel free to <span><a class="link-underline-contact contact-modal-launcher link-effect link-effect-contact" href=
"#">use the form</a></span>.
</h1>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Street Address</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="txt">
<p>
ex Inc. Touchdown Dr 1176
</p>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Phone Number</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="txt">
<p>
+123 456 7890
</p>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="section-heading section-heading-dot">
<div class="section-heading-span">
<!-- dot start -->
<div class="dot"></div>
<!-- dot end -->
</div>
<div class="move-up-dot">Email Enquiry</div>
</div>
<!-- section txt end -->
[...]
<!-- section txt start -->
<div class="txt">
<p>
<a class="link-effect" href="mailto:contact@domainname.com">contact@domainname.com</a>
</p>
</div>
<!-- section txt end -->
[...]
<!-- page contact intro 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 '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: '3zXrWmkVjTM', 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}"
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/video.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/video.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 '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 class="html5-videoContainment" data-vide-bg="https://www.11-76.com/html5-videos-22/creativex/creativex.mp4" data-vide-options="loop: true, muted: true"></div>
<!-- HTML5 video URL end -->
[...]
Please note;
This template is designed to use Self-Hosted HTML5 videos as a background; however, 'Self-Hosted HTML5 Videos' 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/video.jpg'.
To activate the background image, please open the 'style.css' file.
Part to edit:
[...]
/* HTML5 video */
[...]
@media only screen and (max-width: 995px) {
.html5-bg {
[...]
background-image: url(../img/background/html5-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. single IMG BACKGROUND */
.bg-img-SINGLE {
background-image: url(../img/background/single-bg.jpg);
}
/* 1.2. testimonials IMG BACKGROUND */
.bg-photo.testimonials {
background-image: url(../img/background/testimonials.jpg);
}
[...]
/* 1.5. ZOOM/FADE slideshow - ken burns slideshow 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:
[...]
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)