Elsa 主题 - 文档

艾尔莎

Andreas Lautenschlager 的多用途模板

发布日期：2017 年 1 月 13 日
作者：Andreas Lautenschlager www.lautenschlager.de

基本信息

如果您想创建新页面，请复制现有页面并进行编辑。
如果您想编辑 CSS，请使用 custom.css 并添加您的更改。因此，如果我们发布此模板的新版本，您可以随时更新模板。
如果您想编辑或替换特定代码，请使用编辑器的搜索和替换功能。
访问预览页面以获取灵感。
某些功能仅当您在线时才可用。请确保您有永久连接。
最重要的是：定期访问 Themeforest。我们会定期发布此模板的新版本及其新功能。

引导

此模板基于 Bootstrap 3。要了解所有优点和包含的组件，请访问官方网站：http://getbootstrap.com/。

章节

我们将模板分为几个部分。因此，您可以轻松地自行定制布局。请注意 HTML 文件中的注释。

<section> ... </section>  <section class="page-section"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="title-section"><span class="title-regular">我们的</span><br/>团队</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">关于我们的更多信息 <i class="fa fa-arrow-right"></i></button> </div> </div> </section>  <section> ... </section>

定制与风格

更改徽标

要更改徽标，请替换以下图片：logo.png和logo-footer.png。然后您只需调整距离。这包括以下类：

/ * 徽标宽度 * / .logo { max-width: 150px; } / * 边距内容 * / body,html { margin-top: 25px; } @media (min-width: 768px) { body {margin-top: 65px;} } / * 边距导航栏 * / .navbar-nav { margin-top: 0; }

颜色

如果您想更改模板的颜色，请将类从 color.css 复制到 custom.css，然后使用编辑器的搜索和替换功能获取以下颜色：

主要颜色：#FF5800 主要色调：#c84600 文本：#7a7c82 灰色：#eee 深灰色：#333 主要页脚：#222 次要页脚：#111

字体

要更改字体，请先访问http://www.google.com/webfonts并选择一种字体。然后在网站头部搜索嵌入的字体并使用来自 google 页面的生成代码。

页眉中的字体：

<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'>

之后在您的 custom.css 中添加以下行并更改给定的字体系列：

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; }

图标

此主题包含一些图标字体：Font Awesome、Glyphicons

扩展

谷歌地图

要重新定位标记，请编辑 google-map.js 中第 117 行的纬度和经度坐标。您还需要一个 API 密钥。您可以在此处生成一个https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de并将其添加到下面的脚本标记中。

要启动 Google 地图，请在结束主体（</body>）标签之前添加以下代码：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap""></script> <script src="js/google-map.js"></script>

我们的 Lightbox 由 Fancybox 驱动。请访问http://fancyapps.com/fancybox/了解更多信息。

要启动 Fancybox，请在结束主体（</body>）标签之前添加以下代码：

<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>  <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:

<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:

<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:

<div class="isotopeContainer2">  <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>   </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:

<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">  <script> $('.owl-carousel').owlCarousel({ loop: true, margin: 10, nav: true, responsive: { 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 5 } } }) </script>