Elsa
multipurpose template from Andreas Lautenschlager
released: 01/13/2017
by: Andreas Lautenschlager www.lautenschlager.de
General Info
- If you want to create a new page, copy an existing page and edit it.
- If you want to edit the CSS, use the custom.css and add your changes. So you can always update the template if we publish a new version of this template.
- If you want to edit or replace specific code, use the search and replace function of your editor.
- Visit the preview page to get inspired.
- Certain features only work when you are online. Make sure you have a permanent connection.
- And most importantly: visit us regularly on Themeforest. We regularly publish new versions with new features of this template.
Bootstrap
This template is based on Bootstrap 3. To find out all the advantages and components that are included, please visit the official site: http://getbootstrap.com/.
Sections
We divided the template into sections. So you can easily customize the layout yourself. Note the comments in the HTML files.
<![CDATA[
<!-- Section before -->
<section>
...
</section>
<!-- Example Section (Our Team)-->
<section class="page-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title-section"><span class="title-regular">OUR</span><br/>TEAM</h2>
<hr class="title-underline" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="img/team.jpg" alt="" />
</div>
</div>
<div class="text-center margin-top-30">
<button type="button" class="btn btn-primary">MORE ABOUT US <i class="fa fa-arrow-right"></i></button>
</div>
</div>
</section>
<!-- next Section -->
<section>
...
</section>
]]>
Customization & Styles
Change Logo
To change the logo replaced the following pictures: logo.png and logo-footer.png. Then you only have to adjust the distances. This includes the following classes:
<![CDATA[
/ * Logo Width * /
.logo {
max-width: 150px;
}
/ * Margin Content * /
body,html {
margin-top: 25px;
}
@media (min-width: 768px) {
body {margin-top: 65px;}
}
/ * Margin Navbar * /
.navbar-nav {
margin-top: 0;
}
]]>
Colors
If you want to change the color of the template, copy the classes from the color.css to your custom.css and use the search and replace functions of your editor for the following colors:
<![CDATA[
Primary: #FF5800
Primary Shade: #c84600
Text: #7a7c82
Gray: #eee
Dark Gray: #333
Primary Footer: #222
Secondary Footer: #111
]]>
Fonts
To change the font, first go to http://www.google.com/webfonts and choose a font. Afterwards search the embedded font in the head part of the website and use the generated code from the google page.
Font in Header:
<![CDATA[
<!-- Google Fonts - Change if needed -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,400,700,300,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,700,300' rel='stylesheet' type='text/css'>
]]>
Afterwards add following lines in your custom.css and change the given font family:
<![CDATA[
body, html {
font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Oxygen', sans-serif;
}
p {
font-family: 'Source Sans Pro', sans-serif;
}
.title-light {
font-family: 'Source Sans Pro', sans-serif;
}
]]>
Icons
In this theme are some included icon fonts: Font Awesome, Glyphicons
More information here:
http://fortawesome.github.com/Font-Awesome/
http://getbootstrap.com/components/#glyphicons
Extensions
Google Map
To relocate the marker edit the lat and lng coordinates in google-map.js on line 117. Also you need a API Key. You can generate one here https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de and add it into the the script tag bellow.
To initiate Google Maps add following code before the closing body ( </body> ) tag:
<![CDATA[
<!-- Initiate Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap""></script>
<script src="js/google-map.js"></script>
]]>
Fancybox / Lightbox
Our Lightbox is driven by Fancybox. Please visit http://fancyapps.com/fancybox/ for more Informations.
To initiate Fancybox add following code before the closing body ( </body> ) tag:
<![CDATA[
<!-- Initiate Fancybox/Lightbox -->
<script type="text/javascript" src="extensions/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="extensions/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="extensions/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="extensions/fancybox/jquery.fancybox-media.js"></script>
<!-- Options for Fancybox/Lightbox -->
<script type="text/javascript">
$(document).ready(function () {
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect: 'none',
closeEffect: 'none',
prevEffect: 'none',
nextEffect: 'none',
arrows: false,
helpers: {
media: {},
buttons: {}
}
});
});
</script>
]]>
Portfolio / Gallery
The Portfolio and Gallery is driven by the Isotope script http://isotope.metafizzy.co/ and Fancybox.
You can find a example of ussage in the portfolio.html and gallery.html.
To initiate the Portfolio or Gallery add following code before the closing body ( </body> ) tag:
<![CDATA[
<!-- Portfolio Script -->
<script src="extensions/portfolio/isotope.min.js"></script>
<script src="extensions/portfolio/portfolio.js"></script>
]]>
How to add a filter
To add a filter edit the data-filter attributes within the UL Tags with the class "list-inline filter". Then assign the same filter by class to the elements within the div with the class "isotopeSelector"
Code for filters:
<![CDATA[
<div class="filter-container isotopeFilters2">
<ul class="list-inline filter">
<li class="active"><a href="#" data-filter="*">All </a><span>/</span></li>
<li><a href="#" data-filter=".illustrations">Illustrations</a><span>/</span></li>
<li><a href="#" data-filter=".photography">Photography</a><span>/</span></li>
<li><a href="#" data-filter=".websites">Websites</a><span>/</span></li>
<li><a href="#" data-filter=".art">Art</a></li>
</ul>
</div>
]]>
Code for a item:
<![CDATA[
<!-- Container -->
<div class="isotopeContainer2">
<!-- Portfolio Item -->
<div class="col-md-4 isotopeSelector art">
<article class="">
<figure>
<img src="img/portfolio/portfolio_1.jpg" alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay">
<div class="inner-overlay">
<div class="row margin-0 project-content">
<div class="col-md-12 info-head">
<h3>Project Title</h3>
<h4>Category</h4>
</div>
<div class="col-md-12 info">
<p>Lorem ipsum dolor sit amet...</p>
<p><a title="Project Image" class="fancybox-pop" href="img/portfolio/portfolio_1.jpg"><i class="fa fa-search fa-border fa-2x"></i></a>
<a title="Project Link" href="portfolio-item.php"><i class="fa fa-link fa-border fa-2x"></i></a></p>
</div>
</div>
</div>
</div>
</figure>
</article>
</div>
<!-- End Portfolio Item -->
<!-- More Items here... -->
</div>
]]>
Owl Carousel
Our Carousels are driven by Owl Carousel. Please visit https://owlcarousel2.github.io/OwlCarousel2/ for more Informations.
To initiate Owl Carousel add following code before the closing body ( </body> ) tag:
<![CDATA[
<!-- Initiate Owl Carousel -->
<script src="extensions/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="extensions/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="extensions/owlcarousel/assets/owl.carousel.min.css">
<!-- Owl Carousel Options -->
<script>
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>
]]>
Source and Credits
We would like to thank all designers, programmers and photographers for their exceptional work and the preparation of their works.
Pictures/Videos/Graphics
Fonts
Extensions