To edit the 'Home' section, simply find the appropriate label <!-- home section start --> in the body of the HTML file.
Part to edit:
[...]
<!-- home section start -->
[...]
<h2 class="home-page-title">
Ex Nihilo's
</h2>
<h1 class="home-page-title">
Laxt
</h1><!-- sign up launcher start -->
[...]
<button class="c-btn fullwidth sign-up-modal-launcher"><span>Stay in the know</span></button>
[...]<!-- sign up launcher end -->
[...]<!-- home section end -->
[...]
To edit the 'Home' section text (Timeline Slider version), simply find the appropriate label <!-- timeline container start --> in the body of the HTML file.
Part to edit:
[...]
<!-- timeline container start -->
[...]
<!-- swiper container start -->
[...]
<!-- swiper slide 1 start -->
<div class="swiper-slide swiper-slide-bg-1 overlay overlay-top-bottom-dark-75" data-year="2018">
[...]
<span class="timeline-year">2018</span>
<h4 class="timeline-title">
Simplicity is complex
</h4>
<p class="timeline-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in dui nec erat pulvinar fringilla nec vel nisi. Proin lobortis nisi eu viverra <a class=
"link-underline" href="#">convallis</a>.
</p><!-- sign up launcher start -->
[...]
<button class="c-btn fullwidth sign-up-modal-launcher"><span>Stay in the know</span></button>
[...]<!-- sign up launcher end -->
[...]
</div><!-- swiper slide 1 end -->
<!-- swiper slide 2 start -->
<div class="swiper-slide swiper-slide-bg-2 overlay overlay-top-bottom-dark-75" data-year="2017">
[...]
<span class="timeline-year">2017</span>
<h4 class="timeline-title">
Design is a process
</h4>
<p class="timeline-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in dui nec erat pulvinar fringilla nec vel nisi. Proin lobortis nisi eu viverra <a class=
"link-underline" href="#">convallis</a>.
</p>
[...]
</div><!-- swiper slide 2 end -->
<!-- swiper slide 3 start -->
<div class="swiper-slide swiper-slide-bg-3 overlay overlay-top-bottom-dark-75" data-year="2016">
[...]
<span class="timeline-year">2016</span>
<h4 class="timeline-title">
Aesthetic is a decision
</h4>
<p class="timeline-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in dui nec erat pulvinar fringilla nec vel nisi. Proin lobortis nisi eu viverra <a class=
"link-underline" href="#">convallis</a>.
</p>
[...]
</div><!-- swiper slide 3 end -->
<!-- swiper slide 4 start -->
<div class="swiper-slide swiper-slide-bg-4 overlay overlay-top-bottom-dark-75" data-year="2015">
[...]
<span class="timeline-year">2015</span>
<h4 class="timeline-title">
Style is everything
</h4>
<p class="timeline-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in dui nec erat pulvinar fringilla nec vel nisi. Proin lobortis nisi eu viverra <a class=
"link-underline" href="#">convallis</a>.
</p>
[...]
</div><!-- swiper slide 4 end -->
[...]<!-- swiper container end -->
[...]<!-- timeline container end -->
[...]
To edit the 'Home' section text (Hero Slider - Split Content - Typed Text version), simply find and open the file named 'laxt.js' placed in the folder named 'js'.
Part to edit:
[...]
// typed text
[...]
strings: ["Fully Responsive", "Coming Soon Page", "Made for KINGS"],
[...]
[...]
[...]
To edit the 'Home' section text (Carousel Slider with Galleries version), simply find the appropriate label <!-- home IMG gallery carousel start --> in the body of the HTML file.
Part to edit:
[...]
<!-- home IMG gallery carousel start -->
[...]
<!-- home IMG gallery carousel item 1 start -->
[...]
<div class="home-page-img-gallery-carousel-heading">
Beauty / Fashion
</div>
[...]
<h4>
Simplicity<br>
is complex
</h4>
[...]
[...]
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec scelerisque nunc. Interdum et malesuada fames ac ante ipsum primis.
</p>
[...]
<!-- home IMG gallery carousel gallery 1 start -->
[...]
<a class="c-btn c-btn-gallery" href="img/gallery-slider/gallery-1/1.jpg" title="Gallery 1 / Image description 1"><span>View gallery</span></a>
<a href="img/gallery-slider/gallery-1/2.jpg" title="Gallery 1 / Image description 2"></a> <a href="img/gallery-slider/gallery-1/3.jpg" title=
"Gallery 1 / Image description 3"></a> <a href="img/gallery-slider/gallery-1/4.jpg" title="Gallery 1 / Image description 4"></a>
[...]<!-- home IMG gallery carousel gallery 1 end -->
[...]<!-- home IMG gallery carousel item 1 end -->
<!-- home IMG gallery carousel item 2 start -->
[...]
<div class="home-page-img-gallery-carousel-heading">
People / Life
</div>
[...]
<h4>
Design<br>
is a process
</h4>
[...]
[...]
<p>
Morbi hendrerit orci aliquet augue eleifend, ac gravida turpis rutrum. Suspendisse suscipit dui eu lorem pharetra egestas. Nunc nec eleifend libero.
</p>
[...]
<!-- home IMG gallery carousel gallery 2 start -->
[...]
<a class="c-btn c-btn-gallery" href="img/gallery-slider/gallery-2/2.jpg" title="Gallery 2 / Image description 1"><span>View gallery</span></a>
<a href="img/gallery-slider/gallery-2/3.jpg" title="Gallery 2 / Image description 2"></a> <a href="img/gallery-slider/gallery-2/4.jpg" title=
"Gallery 2 / Image description 3"></a> <a href="img/gallery-slider/gallery-2/1.jpg" title="Gallery 2 / Image description 4"></a>
[...]<!-- home IMG gallery carousel gallery 2 end -->
[...]<!-- home IMG gallery carousel item 2 end -->
<!-- home IMG gallery carousel item 3 start -->
[...]
<div class="home-page-img-gallery-carousel-heading">
Royalty / Stock
</div>
[...]
<h4>
Aesthetic<br>
is a decision
</h4>
[...]
[...]
<p>
Suspendisse sit amet imperdiet sem. Vivamus sit amet lorem interdum, aliquet metus quis, fermentum velit. Phasellus ullamcorper, ante ac semper congue.
</p>
[...]
<!-- home IMG gallery carousel gallery 3 start -->
[...]
<a class="c-btn c-btn-gallery" href="img/gallery-slider/gallery-3/3.jpg" title="Gallery 3 / Image description 1"><span>View gallery</span></a>
<a href="img/gallery-slider/gallery-3/4.jpg" title="Gallery 3 / Image description 2"></a> <a href="img/gallery-slider/gallery-3/1.jpg" title=
"Gallery 3 / Image description 3"></a> <a href="img/gallery-slider/gallery-3/2.jpg" title="Gallery 3 / Image description 4"></a>
[...]<!-- home IMG gallery carousel gallery 3 end -->
[...]<!-- home IMG gallery carousel item 3 end -->
<!-- home IMG gallery carousel item 4 start -->
[...]
<div class="home-page-img-gallery-carousel-heading">
Culture / Travel
</div>
[...]
<h4>
Style<br>
is everything
</h4>
[...]
[...]
<p>
In nibh nisi, blandit eget accumsan et, lobortis ac tellus. Vestibulum feugiat tellus a turpis consectetur pretium. Donec et ante odio. Vestibulum eu
accumsan nisl.
</p>
[...]
<!-- home IMG gallery carousel gallery 4 start -->
[...]
<a class="c-btn c-btn-gallery" href="img/gallery-slider/gallery-4/4.jpg" title="Gallery 4 / Image description 1"><span>View gallery</span></a>
<a href="img/gallery-slider/gallery-4/1.jpg" title="Gallery 4 / Image description 2"></a> <a href="img/gallery-slider/gallery-4/2.jpg" title=
"Gallery 4 / Image description 3"></a> <a href="img/gallery-slider/gallery-2/3.jpg" title="Gallery 4 / Image description 4"></a>
[...]<!-- home IMG gallery carousel gallery 4 end -->
[...]<!-- home IMG gallery carousel item 4 end -->
[...]<!-- home IMG gallery carousel end -->
[...]
You can edit the 'Home' section (Carousel Slider with Galleries version) background images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.11. home IMG gallery carousel IMG BACKGROUND */
.home-page-img-gallery-carousel-item-1 {
background-image: url(../img/gallery-slider/home-page-img-gallery-carousel-item-1.jpg);
}
.home-page-img-gallery-carousel-item-2 {
background-image: url(../img/gallery-slider/home-page-img-gallery-carousel-item-2.jpg);
}
.home-page-img-gallery-carousel-item-3 {
background-image: url(../img/gallery-slider/home-page-img-gallery-carousel-item-3.jpg);
}
.home-page-img-gallery-carousel-item-4 {
background-image: url(../img/gallery-slider/home-page-img-gallery-carousel-item-4.jpg);
}
[...]
You can also edit the 'Home' section (Carousel Slider with Galleries version) background images by following its URL path: 'img/gallery-slider/', and replace existing image files with your own images.
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.
Please note;
Demo images are not included. Image placeholders are provided instead.
To edit the 'About' section, simply find the appropriate label <!-- about section start --> in the body of the HTML file.
Part to edit:
[...]
<!-- about section start -->
[...]
<h2 class="section-heading spacer-line-vertical-dark reveal-element">
About
</h2>
[...]
[...]
<p class="about-txt reveal-element">
Laxt is a fully responsive high-end under construction/coming soon template with a modern design suitable for almost all creative businesses. The template is featuring
lots of images making it a perfect choice for photographers, artists and designers who want to showcase their work while building a <a class=
"link-underline link-underline-dark" href="#">website</a>.
</p>
[...]
[...]<!-- about section end -->
[...]
To edit the 'Services' section, simply find the appropriate label <!-- services section start --> in the body of the HTML file.
Part to edit:
[...]
<!-- services section start -->
[...]
<!-- halve dark TXT start -->
[...]
<h2 class="section-heading section-heading-light spacer-line-vertical-light reveal-element">
Design
</h2>
<p class="services-txt p-light reveal-element">
Laxt makes it easy for you to create a coming soon website. It is built on top of the hugely popular Bootstrap framework thus offering clean, semantic HTML and well-structured
CSS. The code is excellently formatted and commented, so when it comes to customizing it can be carried out <a class="link-underline" href="#">with ease</a>.
</p>
[...]
[...]<!-- halve dark TXT end -->
[...]
<!-- halve light TXT start -->
[...]
<h2 class="section-heading spacer-line-vertical-dark reveal-element">
Branding
</h2>
<p class="services-txt services-txt-dark reveal-element">
Laxt is a fully responsive high-end under construction/coming soon template with a modern design suitable for almost all creative businesses. The template is featuring lots of
images making it a perfect choice for photographers, artists and designers who want to showcase their work while building a <a class="link-underline link-underline-dark" href=
"#">website</a>.
</p>
[...]
[...]<!-- halve light TXT end -->
[...]<!-- services section end -->
[...]
You can edit the 'Services' section background images via CSS file (e.g. style.css).
Part to edit:
[...]
/* 1. TEMPLATE BACKGROUNDS */
[...]
/* 1.3. services IMG BACKGROUND */
.services-bg-1 {
background-image: url(../img/services/services-bg-1.jpg);
}
.services-bg-2 {
background-image: url(../img/services/services-bg-2.jpg);
}
[...]
You can also edit the 'Services' section images by following its URL path: 'img/services/', and replace existing image files with your own images.
Please note;
Demo images are not included. Image placeholders are provided instead.
To edit the 'Launch' section, simply find the appropriate label <!-- launch section start --> in the body of the HTML file.
Part to edit:
[...]
<!-- launch section start -->
[...]
<!-- parallax wrapper start -->
[...]
<!-- countdown start -->
[...]
<h2 class="countdown-top">
Going Live In
</h2>
[...]
[...]<!-- countdown end -->
[...]<!-- parallax wrapper end -->
[...]<!-- launch section end -->
[...]
You can edit the 'Launch' 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.
Please note;
Demo images are not included. Image placeholders are provided instead.
To edit the 'Contact' section, simply find the appropriate label <!-- contact section start --> in the body of the HTML file.
Part to edit:
[...]
<!-- contact section start -->
[...]
<h2 class="section-heading section-heading-light spacer-line-vertical-light reveal-element">
Contact
</h2>
[...]
[...]
<!-- contact info start -->
[...]
<i class="ion-ios-location-outline contact-info-description-img"></i> <span class="contact-info-text">ex Inc.<br>
Touchdown Dr 1176</span>
[...]
[...]
<i class="ion-ios-email-outline contact-info-description-img"></i> <span class="contact-info-text"><a class="link-underline" href=
"mailto:contact@domainname.com">contact@domainname.com</a></span>
[...]
[...]
<i class="ion-ios-telephone-outline contact-info-description-img"></i> <span class="contact-info-text">[00] 11 - 76<br>
[01] 11 - 76</span>
[...]
[...]<!-- contact info end -->
[...]
<!-- contact launcher start -->
[...]
<button class="c-btn fullwidth contact-modal-launcher"><span>Use the form</span></button>
[...]<!-- contact launcher end -->
[...]
[...]
<!-- social icons start -->
[...]
<li class="social-icon">
<a class="ion-social-twitter" href="#"></a>
</li>
<li class="social-icon">
<a class="ion-social-facebook" href="#"></a>
</li>
<li class="social-icon">
<a class="ion-social-googleplus" href="#"></a>
</li>
<li class="social-icon">
<a class="ion-social-youtube" href="#"></a>
</li>
<li class="social-icon">
<a class="ion-social-linkedin" href="#"></a>
</li>
<li class="social-icon">
<a class="ion-social-instagram" href="#"></a>
</li>
<li class="social-icon">
<a class="ion-social-pinterest" href="#"></a>
</li>
<li class="social-icon">
<a class="ion-social-dribbble" href="#"></a>
</li>
[...]<!-- social icons end -->
<!-- copyright start -->
[...]
Laxt © 2018 All Rights Reserved.<br>
Photography supplied courtesy of <a class="link-underline" href="http://curtet.com/" target="_blank">Patrick Curtet</a>.
[...]<!-- copyright end -->
[...]<!-- contact section end -->
[...]
To edit the 'Sign Up Form Modal' section, simply find the appropriate label <!-- sign up modal start --> in the body of the HTML file.
Part to edit:
[...]
<!-- sign up modal start -->
[...]
<h2 class="section-heading section-heading-light spacer-line-vertical-light-modal">
Newsletter<br>
sign up
</h2>
[...]
[...]<!-- sign up modal end -->
[...]
To edit the 'Contact Form Modal' section, simply find the appropriate label <!-- sign up modal start --> in the body of the HTML file.
Part to edit:
[...]
<!-- contact modal start -->
[...]
<h2 class="section-heading section-heading-light spacer-line-vertical-light-modal">
Get<br>
in touch
</h2>
[...]
[...]<!-- contact modal 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_key = 'YOUR_API_KEY'; [...] $list_id = 'YOUR_LIST_ID';
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 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.2. single IMG BACKGROUND */
.bg-img-SINGLE {
background-image: url(../img/background/SINGLE-bg.jpg);
}
[...]
/* 1.4. launch IMG BACKGROUND */
.parallax-launch {
background-image: url(../img/background/launch-bg.jpg);
}
/* 1.5. ken burns slideshow IMG BACKGROUND */
.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);
}
/* 1.6. slick fullscreen slideshow ZOOM/FADE IMG 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);
}
/* 1.7. home IMG carousel slider IMG BACKGROUND */
.home-page-img-item-1 {
background-image: url(../img/background/home-page-img-item-1.jpg);
}
.home-page-img-item-2 {
background-image: url(../img/background/home-page-img-item-2.jpg);
}
.home-page-img-item-3 {
background-image: url(../img/background/home-page-img-item-3.jpg);
}
.home-page-img-item-4 {
background-image: url(../img/background/home-page-img-item-4.jpg);
}
.home-page-img-item-5 {
background-image: url(../img/background/home-page-img-item-5.jpg);
}
.home-page-img-item-6 {
background-image: url(../img/background/home-page-img-item-6.jpg);
}
.home-page-img-item-7 {
background-image: url(../img/background/home-page-img-item-7.jpg);
}
/* 1.8. swiper parallax IMG BACKGROUND */
.swiper-slide-parallax-bg {
background-image: url(../img/background/parallax-bg.jpg);
}
/* 1.9. swiper timeline IMG BACKGROUND */
.swiper-slide-bg-1 {
background-image: url(../img/background/timeline-bg-1.jpg);
}
.swiper-slide-bg-2 {
background-image: url(../img/background/timeline-bg-2.jpg);
}
.swiper-slide-bg-3 {
background-image: url(../img/background/timeline-bg-3.jpg);
}
.swiper-slide-bg-4 {
background-image: url(../img/background/timeline-bg-4.jpg);
}
/* 1.10. swiper thumbnail IMG BACKGROUND */
.thumbnail-slider-bg-1 {
background-image: url(../img/background/thumbnail-slider-bg-1.jpg);
}
.thumbnail-slider-bg-2 {
background-image: url(../img/background/thumbnail-slider-bg-2.jpg);
}
.thumbnail-slider-bg-3 {
background-image: url(../img/background/thumbnail-slider-bg-3.jpg);
}
.thumbnail-slider-bg-4 {
background-image: url(../img/background/thumbnail-slider-bg-4.jpg);
}
.thumbnail-slider-bg-5 {
background-image: url(../img/background/thumbnail-slider-bg-5.jpg);
}
.thumbnail-slider-bg-6 {
background-image: url(../img/background/thumbnail-slider-bg-6.jpg);
}
.thumbnail-slider-bg-7 {
background-image: url(../img/background/thumbnail-slider-bg-7.jpg);
}
.thumbnail-slider-bg-8 {
background-image: url(../img/background/thumbnail-slider-bg-8.jpg);
}
[...]
/* 1.12. typed text IMG BACKGROUND */
.bg-split-content-img-1 {
background-image: url(../img/background/hero-split-content-bg-1.jpg);
}
.bg-split-content-img-2 {
background-image: url(../img/background/hero-split-content-bg-2.jpg);
}
.bg-split-content-img-3 {
background-image: url(../img/background/hero-split-content-bg-3.jpg);
}
.bg-split-content-img-4 {
background-image: url(../img/background/hero-split-content-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.
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 'laxt.js' placed in the folder named 'js'.
Part to edit:
[...]
// YouTube player
[...]
videoId: "3zXrWmkVjTM", // DEMO URL is: https://www.youtube.com/watch?v=3zXrWmkVjTM
mute: true, // 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 'Self-Hosted HTML5 Videos' in the background of the template, simply find the appropriate label <!-- self-hosted HTML5 video start --> in the body of the HTML file.
Part to edit:
[...]
<!-- self-hosted HTML5 video start -->
<div class="hero-bg" data-vide-bg="http://www.11-76.com/html5-videos/laxt.mp4" data-vide-options="loop: true, muted: true, position: 0% 0%" id="video-bg"></div>
<!-- self-hosted HTML5 video end -->
[...]
Please note;
By default the sound of the video is set mute. To unmute the sound, change 'muted: true' into 'muted: false'.
To add 'Vimeo Videos' in the background of the template, simply find the appropriate label <!-- Vimeo video start --> in the body of the HTML file.
Part to edit:
[...]
<!-- Vimeo video start -->
[...]
<iframe data-fullscreeneo="" src="https://player.vimeo.com/video/57539783?autoplay=1&background=1&hd=1&loop=1"></iframe>
[...]<!-- Vimeo video end -->
[...]
Please note;
By default the sound of the video is set mute. To unmute the sound, change 'background=1' into 'background=0'.
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 your video's preview image will be displayed 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)