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 <!-- home start --> in the body of the HTML file.
Part to edit:
[...]
<!-- home start -->
[...]
<!-- swiper slider item start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-home fadeIn-element">
<h2 class="section-title-line section-title-line-home">
<span>Image caption #1</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h1 class="hero-heading hero-heading-home fadeIn-element">
Simplicity is <span>complex</span>
</h1>
<!-- section title end -->
[...]
<!-- button start -->
<div class="more-wraper-center more-wraper-center-home fadeIn-element">
<a data-lity="" href="https://www.youtube.com/watch?v=X_7P4YmkfY8">
[...]
<div class="more-button-txt-center">
<span>Watch Video</span>
</div>
</a>
</div>
<!-- button end -->
[...]
<!-- swiper slider item end -->
<!-- swiper slider item start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-home fadeIn-element">
<h2 class="section-title-line section-title-line-home">
<span>Image caption #2</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h1 class="hero-heading hero-heading-home fadeIn-element">
Design is a <span>process</span>
</h1>
<!-- section title end -->
[...]
<!-- button start -->
<div class="more-wraper-center more-wraper-center-home fadeIn-element">
<a data-lity="" href="https://www.youtube.com/watch?v=X_7P4YmkfY8">
[...]
<div class="more-button-txt-center">
<span>Watch Video</span>
</div>
</a>
</div>
<!-- button end -->
[...]
<!-- swiper slider item end -->
<!-- swiper slider item start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-home fadeIn-element">
<h2 class="section-title-line section-title-line-home">
<span>Image caption #3</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h1 class="hero-heading hero-heading-home fadeIn-element">
Aesthetic is a <span>decision</span>
</h1>
<!-- section title end -->
[...]
<!-- button start -->
<div class="more-wraper-center more-wraper-center-home fadeIn-element">
<a data-lity="" href="https://www.youtube.com/watch?v=X_7P4YmkfY8">
[...]
<div class="more-button-txt-center">
<span>Watch Video</span>
</div>
</a>
</div>
<!-- button end -->
[...]
<!-- swiper slider item end -->
<!-- swiper slider item start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-home fadeIn-element">
<h2 class="section-title-line section-title-line-home">
<span>Image caption #4</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h1 class="hero-heading hero-heading-home fadeIn-element">
Style is <span>everything</span>
</h1>
<!-- section title end -->
[...]
<!-- button start -->
<div class="more-wraper-center more-wraper-center-home fadeIn-element">
<a data-lity="" href="https://www.youtube.com/watch?v=X_7P4YmkfY8">
[...]
<div class="more-button-txt-center">
<span>Watch Video</span>
</div>
</a>
</div>
<!-- button end -->
[...]
<!-- swiper slider item end -->
[...]
<!-- home end -->
[...]
You can edit the section images according to the documentation bellow (please read Background Images section).
You can also edit the section images by following its URL path: 'img/background/', and replace existing image files with your own images.
To edit the 'About' section, simply find the appropriate label <!-- about start --> in the body of the HTML file.
Part to edit:
[...]
<!-- about start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-dark">
<h2 class="section-title-line section-title-line-dark">
<span>Who we are</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="hero-heading hero-heading-dark">
The <span>Restaurant</span>
</h2>
<!-- section title end -->
[...]
<!-- quote start -->
<div class="testimonial">
<div class="inner">
<div class="quote">
<blockquote class="quote-inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s.
</blockquote>
</div>
</div>
</div>
<!-- quote 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 subtitle start -->
<h2>
Being around for
</h2>
<!-- page subtitle end -->
[...]
<!-- page title start -->
<h3 class="facts-counter-number">
76
</h3>
<!-- page title end -->
[...]
<!-- page subtitle start -->
<h4>
Years
</h4>
<!-- page subtitle end -->
[...]
<!-- about end -->
<!-- team start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-dark">
<h2 class="section-title-line section-title-line-dark">
<span>Meet the team</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="hero-heading hero-heading-dark">
The <span>Best</span> Chefs
</h2>
<!-- section title end -->
[...]
<!-- carousel start -->
[...]
<!-- section item start -->
[...]
<a class="iw-slide-left ion-social-twitter" href="#"></a> <a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/about/team/1.jpg" title="IMG Description"></a> <a class="iw-slide-right ion-social-instagram" href="#"></a>
[...]
[...]
<div class="team-box">
C. Eastwood<span>Chief Photographer</span>
</div>
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<a class="iw-slide-left ion-social-twitter" href="#"></a> <a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/about/team/2.jpg" title="IMG Description"></a> <a class="iw-slide-right ion-social-instagram" href="#"></a>
[...]
[...]
<div class="team-box">
R. Redford<span>Assistant Photographer</span>
</div>
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<a class="iw-slide-left ion-social-twitter" href="#"></a> <a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/about/team/3.jpg" title="IMG Description"></a> <a class="iw-slide-right ion-social-instagram" href="#"></a>
[...]
[...]
<div class="team-box">
M. Scorsese<span>Advertising Photographer</span>
</div>
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<a class="iw-slide-left ion-social-twitter" href="#"></a> <a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/about/team/4.jpg" title="IMG Description"></a> <a class="iw-slide-right ion-social-instagram" href="#"></a>
[...]
[...]
<div class="team-box">
W. Kar-wai<span>Editorial Photographer</span>
</div>
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<a class="iw-slide-left ion-social-twitter" href="#"></a> <a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/about/team/5.jpg" title="IMG Description"></a> <a class="iw-slide-right ion-social-instagram" href="#"></a>
[...]
[...]
<div class="team-box">
M. Gibson<span>Corporate Photographer</span>
</div>
[...]
<!-- section item end -->
[...]
<!-- carousel end -->
[...]
<!-- team end -->
[...]
To edit the section images, please open the 'style.css' file.
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.3. about IMG BACKGROUND */
.about-bg-1 {
background-image: url(../img/about/1.jpg);
}
.about-bg-2 {
background-image: url(../img/about/2.jpg);
}
/* 1.4. about team IMG BACKGROUND */
.carousel-item-team-01 {
background-image: url(../img/about/team/1.jpg);
}
.carousel-item-team-02 {
background-image: url(../img/about/team/2.jpg);
}
.carousel-item-team-03 {
background-image: url(../img/about/team/3.jpg);
}
.carousel-item-team-04 {
background-image: url(../img/about/team/4.jpg);
}
.carousel-item-team-05 {
background-image: url(../img/about/team/5.jpg);
}
[...]
You can also edit the 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 <!-- services start --> in the body of the HTML file.
Part to edit:
[...]
<!-- services start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-dark">
<h2 class="section-title-line section-title-line-dark">
<span>What we do</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="hero-heading hero-heading-dark">
The <span>Services</span>
</h2>
<!-- section title end -->
[...]
<!-- quote start -->
<div class="testimonial">
<div class="inner">
<div class="quote">
<blockquote class="quote-inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s.
</blockquote>
</div>
</div>
</div>
<!-- quote end -->
[...]
<!-- section subtitle start -->
<h4>
<span class="color-switch">Great</span> menu
</h4>
<!-- section subtitle 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 subtitle start -->
<h4>
<span class="color-switch">Free</span> delivery
</h4>
<!-- section subtitle 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 subtitle start -->
<h4>
<span class="color-switch">Pro</span> catering
</h4>
<!-- section subtitle 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 -->
[...]
<!-- services end -->
<!-- benefits start -->
[...]
<!-- slick left start -->
[...]
<!-- skill start -->
<div class="skillbar" data-percent="100">
<span class="skillbar-title">Fast service</span>
[...]
</div>
<!-- skill end -->
<!-- skill start -->
<div class="skillbar" data-percent="100">
<span class="skillbar-title">Free reservation</span>
[...]
</div>
<!-- skill end -->
<!-- skill start -->
<div class="skillbar" data-percent="100">
<span class="skillbar-title">Free delivery</span>
[...]
</div>
<!-- skill end -->
<!-- skill start -->
<div class="skillbar" data-percent="100">
<span class="skillbar-title">Free parking</span>
[...]
</div>
<!-- skill end -->
[...]
<!-- slick left end -->
[...]
<!-- benefits end -->
<!-- offers start -->
[...]
<!-- slick left start -->
[...]
<!-- skill 1 start -->
<div class="skillbar-2" data-percent="100">
<span class="skillbar-title-2">Lunch</span>
[...]
</div>
<!-- skill 1 end -->
<!-- skill 2 start -->
<div class="skillbar-2" data-percent="100">
<span class="skillbar-title-2">Dinner</span>
[...]
</div>
<!-- skill 2 end -->
<!-- skill 3 start -->
<div class="skillbar-2" data-percent="100">
<span class="skillbar-title-2">Breakfast</span>
[...]
</div>
<!-- skill 3 end -->
<!-- skill 4 start -->
<div class="skillbar-2" data-percent="100">
<span class="skillbar-title-2">Snacks</span>
[...]
</div>
<!-- skill 4 end -->
[...]
<!-- slick left end -->
[...]
<!-- offers end -->
[...]
To edit the section images, please open the 'style.css' file.
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.5. services benefits IMG BACKGROUND */
.img-fullwidth-benefits-carousel-1 {
background-image: url(../img/services/benefits/1.jpg);
}
.img-fullwidth-benefits-carousel-2 {
background-image: url(../img/services/benefits/2.jpg);
}
/* 1.6. services offers IMG BACKGROUND */
.img-fullwidth-offers-carousel-1 {
background-image: url(../img/services/offers/1.jpg);
}
.img-fullwidth-offers-carousel-2 {
background-image: url(../img/services/offers/2.jpg);
}
[...]
You can also edit the section images by following its URL path: 'img/services/', and replace existing image files with your own images.
To edit the 'Testimonials' section, simply find the appropriate label <!-- blank start --> in the body of the HTML file.
Part to edit:
[...]
<!-- blank start -->
[...]
<!-- testimonials quote start -->
[...]
<blockquote class="quote-inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s.
</blockquote>
[...]
<!-- testimonials quote end -->
<!-- testimonials quote start -->
[...]
<blockquote class="quote-inner">
Suspendisse lobortis bibendum blandit. Fusce consectetur urna eget nunc interdum convallis. Sed volutpat vestibulum nisl a sollicitudin.
</blockquote>
[...]
<!-- testimonials quote end -->
<!-- testimonials quote start -->
[...]
<blockquote class="quote-inner">
Aliquam erat volutpat. Vivamus ornare rhoncus tellus, eget feugiat lorem bibendum nec. Nam sapien urna, tincidunt vel semper id, rhoncus vel
mauris.
</blockquote>
[...]
<!-- testimonials quote end -->
[...]
<!-- button start -->
<div class="more-wraper-center">
<a data-lity="" href="https://www.youtube.com/watch?v=X_7P4YmkfY8">
[...]
<div class="more-button-txt-center">
<span>Watch Video</span>
</div>
</a>
</div>
<!-- button end -->
[...]
<!-- blank end -->
[...]
You can edit the section images according to the documentation bellow (please read Background Images section).
You can also edit the section images by following its URL path: 'img/background/', and replace existing image files with your own images.
To edit the 'Inside' section, simply find the appropriate label <!-- inside start --> in the body of the HTML file.
Part to edit:
[...]
<!-- inside start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-dark">
<h2 class="section-title-line section-title-line-dark">
<span>Step inside</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="hero-heading hero-heading-dark">
The <span>Interior</span>
</h2>
<!-- section title end -->
[...]
[...]
<!-- carousel start -->
[...]
<!-- section item start -->
<div class="post-box hover-effect-img">
<div class="hover-icons">
<a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/inside/1.jpg" title="IMG Description"></a>
</div>
[...]
</div>
<!-- section item end -->
<!-- section item start -->
<div class="post-box hover-effect-img">
<div class="hover-icons">
<a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/inside/2.jpg" title="IMG Description"></a>
</div>
[...]
</div>
<!-- section item end -->
<!-- section item start -->
<div class="post-box hover-effect-img">
<div class="hover-icons">
<a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/inside/3.jpg" title="IMG Description"></a>
</div>
[...]
</div>
<!-- section item end -->
<!-- section item start -->
<div class="post-box hover-effect-img">
<div class="hover-icons">
<a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/inside/4.jpg" title="IMG Description"></a>
</div>
[...]
</div>
<!-- section item end -->
<!-- section item start -->
<div class="post-box hover-effect-img">
<div class="hover-icons">
<a class="ion-ios-plus-empty popup-photo-gallery-open" href="img/inside/5.jpg" title="IMG Description"></a>
</div>
[...]
</div>
<!-- section item end -->
[...]
<!-- carousel end -->
[...]
<!-- inside end -->
[...]
To edit the section images, please open the 'style.css' file.
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.7. inside IMG BACKGROUND */
.carousel-item-inside-01 {
background-image: url(../img/inside/1.jpg);
}
.carousel-item-inside-02 {
background-image: url(../img/inside/2.jpg);
}
.carousel-item-inside-03 {
background-image: url(../img/inside/3.jpg);
}
.carousel-item-inside-04 {
background-image: url(../img/inside/4.jpg);
}
.carousel-item-inside-05 {
background-image: url(../img/inside/5.jpg);
}
[...]
You can also edit the section images by following its URL path: 'img/inside/', and replace existing image files with your own images.
To edit the 'News' section, simply find the appropriate label <!-- blog start --> in the body of the HTML file.
Part to edit:
[...]
<!-- blog start -->
[...]
<!-- section subtitle start -->
<div class="section-title section-title-dark">
<h2 class="section-title-line section-title-line-dark">
<span>Stay in the know</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="hero-heading hero-heading-dark">
The <span>News</span>
</h2>
<!-- section title end -->
[...]
[...]
<!-- carousel start -->
[...]
<!-- halve start -->
[...]
<!-- section subtitle start -->
<div class="blog-tag">May 1, 2022</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2>
Simplicity is complex
</h2>
<!-- section title end -->
[...]
<!-- section txt start -->
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s.
</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-dark more-button-bg-center-dark-close more-button-circle"></div>
<div class="more-button-txt-center more-button-txt-center-close">
<span>Read More</span>
</div>
</div>
<!-- button end -->
[...]
<!-- halve end -->
<!-- halve start -->
[...]
[...]
<!-- halve end -->
<!-- halve start -->
[...]
[...]
<!-- halve end -->
<!-- halve start -->
[...]
[...]
<!-- halve end -->
[...]
<!-- carousel end -->
[...]
<!-- blog end -->
<!-- news modal 1 start -->
[...]
<!-- section subtitle start -->
<div class="blog-tag">May 1, 2022</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2>
Simplicity is complex
</h2>
<!-- 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 -->
[...]
<!-- carousel start -->
[...]
<!-- section item start -->
[...]
<img alt="Img" src="img/blog/gallery-1/1.jpg">
[...]
<!-- 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 -->
[...]
<img alt="Img" src="img/blog/gallery-1/2.jpg">
[...]
<!-- 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">
W. Kar-wai
</div>
<!-- section title end -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<img alt="Img" src="img/blog/gallery-1/3.jpg">
[...]
<!-- 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">
R. Redford
</div>
<!-- section title end -->
[...]
<!-- section item end -->
<!-- section item start -->
[...]
<img alt="Img" src="img/blog/gallery-1/4.jpg">
[...]
<!-- 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">
T. Scott
</div>
<!-- section title end -->
[...]
<!-- section item end -->
[...]
<!-- 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 -->
[...]
<!-- section txt start -->
<div class="blog-quote">
<p>Sed ut <span>perspiciatis unde</span> omnis iste natus error sit voluptatem accusantium doloremque laudantium, <span>totam rem</span> aperiam.</p>
</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 -->
[...]
<!-- button start -->
[...]
<span>Close</span>
[...]
<!-- button 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 -->
[...]
To edit the section images, please open the 'style.css' file.
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.8. 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 section images by following its URL path: 'img/blog/' as well as 'img/news/', and replace existing image files with your own images.
To edit the 'Contact' section, simply find the appropriate label <!-- contact start --> in the body of the HTML file.
Part to edit:
[...]
<!-- contact start -->
[...]
<!-- section subtitle start -->
<div class="section-title">
<h2 class="section-title-line">
<span>Let's talk</span>
</h2>
</div>
<!-- section subtitle end -->
[...]
<!-- section title start -->
<h2 class="hero-heading">
The <span>Contact</span>
</h2>
<!-- section title end -->
[...]
<!-- contact info start -->
[...]
<span class="contact-info-text">ex Inc. Touchdown Dr 1176</span>
[...]
<span class="contact-info-text large">+123 456 7890</span>
[...]
<span class="contact-info-text"><a class="link-effect link-effect-light" href="mailto:contact@domainname.com">contact@domainname.com</a></span>
[...]
<!-- contact info end -->
[...]
<!-- contact end -->
[...]
You can edit the section images according to the documentation bellow (please read Background Images section).
You can also edit the section images by following its URL path: 'img/background/', 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 edit the 'Google Maps Location', simply find the appropriate label <!-- google maps start --> in the body of the HTML file named 'index.html'.
Part to edit:
[...]
<!-- google maps start -->
<div class="google-maps">
<iframe src=
"https://maps.google.com/maps/ms?msa=0&msid=211966962386664154949.0004e6fcf6a48ede4754f&hl=en&ie=UTF8&t=m&iwloc=0004e6fcfe81051738dcb&ll=48.857981,2.293514&spn=0,0&z=10&output=embed">
</iframe>
</div>
<!-- google maps end -->
[...]
More on Google Maps at: https://developers.google.com/maps/documentation/javascript/
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:
[...]
/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. fullscreen slider BACKGROUND */
.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-5 {
background-image: url(../img/background/hero-bg-5.jpg);
}
.bg-img-6 {
background-image: url(../img/background/hero-bg-6.jpg);
}
.bg-img-7 {
background-image: url(../img/background/hero-bg-7.jpg);
}
.bg-img-8 {
background-image: url(../img/background/hero-bg-8.jpg);
}
/* 1.2. parallax IMG BACKGROUND */
.parallax-contact {
background-image: url(../img/background/parallax-contact.jpg);
}
.parallax-blank {
background-image: url(../img/background/parallax-blank.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)