Getting Started
Unzip the downloaded files to the local disk on your computer.
When it has finished you should have a folder with the following files & directories inside.
| Folder | Contents |
|---|---|
| development | themes grunt and sass build system (for advanced users) |
| production | the theme folder |
| Documentation | contains theme's documentation |
Inside the extracted folder there will be a folder with documentation and a folder "production" containing all source files. Updload the "production" Folder to your server via FTP.
Installation by grunt
ellen ~ grunt
What's Included
Learn about what's included files. check the below table
| File Name | Description |
|---|---|
| animate.css | animate.css is a library built with css for make animations. |
| bootstrap.min.css | Bootstrap is a free and open-source front-end framework for designing websites and web applications. |
| fontawesome.min.css | Font Awesome is a font and icon toolkit based on CSS and SASS. It was made by Dave Gandy for use with Twitter Bootstrap |
| GridLoadingAnimations.min.css | Some inspiration for loading effects on grid items. |
| owl.carousel.min.css | Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. |
| revealer.min.css | some effects built with css for revealer effects |
| style.css | Main Stylesheets |
| fonts/ | Custom fonts directory |
| img/ | Images Directory |
| anime.min.js | Anime is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes |
| block_revealers_main.min.js | some effects built with JS for revealer effects |
| bootstrap.min.js | Bootstrap is a free and open-source front-end framework for designing websites and web applications. |
| GridLoadingAnimations.min.js | Some inspiration for loading effects on grid items. |
| imagesloaded.pkgd.min.js | a Javascript library for check image loading |
| jquery.min.js | jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. |
| jquery.paroller.js | paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected elements. |
| main.js | Main Javascript Codes |
| masonry.pkgd.min.js | Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. |
| numscroller.js | jQuery plugin for number increment rolling animation when it becomes visibile while scrolling. |
| owl.carousel.min.js | |
| popper.min.js | is a library using by bootstrap 4 framework. |
| retina.min.js | retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays. |
| scrollMonitor.min.js | The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element's visibility and location relative to the viewport. If your scroll container is an element other than the body you can create a container that creates watchers. |
| video/ | Video files directory |
| about-us.html | About Us Page |
| contact-us.html | Contact Us Page |
| index.html | Home Page |
| index-transparent-header.html | Home Page with Transparent Header |
HTML Page Structure
<html>
<head>
[Page meta, page css files, page title, favicon etc]
</head>
<body>
<header>
[Logo, Main banner content]
<nav>
[Navbar content]
</nav>
</header>
<section>
[Sections]
</section>
<footer>
[Footer content]
</footer>
[Js files content]
</body>
</html>
Setting your fonts
ellen template uses Google WebFont, there are thousands of fonts available, you can select fonts as per your need from Google Fonts Library and insert in head section
In order to use google fonts, you need to visit Google Fonts and follow the instructions on how to get a new font. After you have decided on the styles of the font that you want to load, google fonts will provide you with a code to copy as the first element in the <head> of your HTML document. The code would look similar to this e.g
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,300italic,
400italic,600italic' rel='stylesheet' type='text/css'>
Go to style.min.css in the production/css/ folder and add this rule for the integration of the fonts into your CSS to take place
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
}
with a default font-weight 400. From there you can set your custom rules for your font.
Color Scheme
ellen template uses sass variables, so changing color scheme is much easier. You just need to add your color at one place and it will apply everywhere.
Go to development/lib/bootstrap-4.0.0/scss/_variables.scss file, check for the variable name and replace the HEX color code.
Grid
ellen template uses Bootstrap 4 Grid Layouts.
Some Example layout for Page column
Helper Classes
ellen template uses standard bootstrap 4 utilities classes like for margin, padding etc. You can learn more about utilities classes here and use them as per your need.
Contact Form
To connect the contact form with your email account please enter your email address into the contact-email.php file under $recipient = "[email protected]"; and subject can be changed from $subject = "Your Subject $name";
/* Your Email. Add here */
$recipient = "[email protected]";
/* Customer Subject */
$subject = "Your Subject $name\n";
Sections Introduction
The site is made of many sections like header, content, slider, testimonials, our partners and more...
The main sections Introduction below:
Topbar
Inside the Topbar section following code demostrate the individual Topbar detail.
In order to add more Topbar items, just copy and paste below code and make required changes.
<div class="topbar topbar--light">
<div class="container">
<div class="topbar__language dropdown float-left">
<div class="dropdown-toggle" role="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="topbar__language__text">ENGLISH</span><i class="topbar__language__icon fa icon-caret-down"></i>
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenu">
<button class="dropdown-item" type="button">English</button>
<button class="dropdown-item" type="button">Danish</button>
</div>
</div>
<div class="topbar--light__social float-right d-none d-sm-block">
<ul class="topbar__social__list">
<li class="topbar__social__list__item">
<a href="https://www.facebook.com/" class="topbar__social__list__item__link fab fa-facebook-f"></a>
</li>
<li class="topbar__social__list__item">
<a href="https://www.twitter.com/" class="topbar__social__list__item__link fab fa-twitter"></a>
</li>
<li class="topbar__social__list__item">
<a href="https://www.instagram.com/" class="topbar__social__list__item__link fab fa-instagram"></a>
</li>
<li class="topbar__social__list__item">
<a href="https://www.linkedin.com/" class="topbar__social__list__item__link fab fa-linkedin-in"></a>
</li>
</ul>
</div>
</div>
</div>
Navbar Menu
Inside the Navbar Menu section following code demostrate the individual Menu detail.
In order to add more Navbar Menu items, just copy and paste below code and make required changes.
<nav class="navbar navbar-expand-lg navbar-light main-navigation--modern">
<a class="navbar-brand" href="index.html"><img src="img/logo_header.png" alt="ellen"> </a>
<div class="collapse navbar-collapse d-none d-lg-block" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="home-1.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="home-1.html#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="home-1.html#recent-works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="home-1.html#our-team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="home-1.html#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="home-1.html#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">Contact</a>
</li>
</ul>
<div class="main-navigation--modern__tel float-right d-none d-sm-block">
<a href="tel:+12152146367">+1 (215) 2146367</a>
</div>
</div>
</nav>
You can change the social media links in this section.
Change Logo
To change logo, place your logo file and find navbar-brand class in home-1.html (about.html - contact-us.html) file. Replace the current logo image name with yours.
<a class="navbar-brand" href="home-1.html"><img src="img/logo_header.png" alt="ellen"> </a>
Slider
Inside the Slider section following code demostrate the individual Slider detail.
<section class="index-slider-wrapper">
<div data-ride="carousel" class="carousel carousel-fade ellen-index-carousel index-slider" id="ellen-index-carousel">
<div role="listbox" class="carousel-inner index-slider__inner">
<div class="carousel-item index-slider__inner__item">
<canvas class="canvas-dot-eff" style="position: absolute; width: 100%; z-index: 3; display: block;"
width="1903" height="645">
</canvas>
<div class="index-slider__inner__item__overlay"></div>
<img src="img/slider-image-4.jpg" class="index-slider__inner__item__img" alt="">
<div class="carousel-caption index-slider__inner__item__caption">
<h2 class="index-slider__inner__item__caption__heading" data-animation="animated fadeInUp">
Let us help you grow your business
</h2>
<p class="index-slider__inner__item__caption__p d-none d-sm-block" data-animation="animated fadeInUp">
There are endless possibilities in building
your own business.
</p>
<p class="index-slider__inner__item__caption__p d-none d-sm-block" data-animation="animated fadeInUp">
It all starts with an idea.
</p>
<div class="index-slider__inner__item__caption__button" data-animation="animated fadeInUp">
<a href="about-us.html" class="btn btn-primary index-slider__inner__item__caption__button__input--transparent">
ABOUT US
</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev index-slider__left-nav" href="#ellen-index-carousel" role="button" data-slide="prev">
<span class="icon-bc-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next index-slider__right-nav" href="#ellen-index-carousel" role="button" data-slide="next">
<span class="icon-bc-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
You can change img tag and add your image address there.
Footer
The footer area of the page contains the page's footer and requires the following markup
<footer id="footer" class="footer footer--appearance-1">
<div class="container text-center">
<a href="#header" class="footer__go-to-top m-auto"><i class="icon-bc-right footer__go-to-top__i"></i></a>
<div class="footer__logo"><a href="home-1.html"><img src="img/logo.png" alt=""></a></div>
<div class="footer__nav mt-4">
<ul class="footer__nav__list ">
<li class="footer__nav__list__item">
<a href="home-1.html" class="footer__nav__list__item__link">Home</a>
</li>
<li class="footer__nav__list__item">
<a href="about-us.html" class="footer__nav__list__item__link">About</a>
</li>
<li class="footer__nav__list__item">
<a href="home-1.html#services" class="footer__nav__list__item__link">Services</a>
</li>
<li class="footer__nav__list__item">
<a href="home-1.html#recent-works" class="footer__nav__list__item__link">Works</a>
</li>
<li class="footer__nav__list__item">
<a href="home-1.html#our-team" class="footer__nav__list__item__link">Team</a>
</li>
<li class="footer__nav__list__item">
<a href="home-1.html#news" class="footer__nav__list__item__link">News</a>
</li>
<li class="footer__nav__list__item">
<a href="home-1.html#testimonials" class="footer__nav__list__item__link">Testimonials</a>
</li>
<li class="footer__nav__list__item">
<a href="contact-us.html" class="footer__nav__list__item__link">Contact</a>
</li>
</ul>
</div>
<div class="footer__social mt-5">
<ul class="footer__social__list">
<li class="topbar__social__list__item">
<a href="https://www.facebook.com/" class="topbar__social__list__item__link fab fa-facebook-f"></a>
</li>
<li class="topbar__social__list__item">
<a href="https://www.twitter.com/" class="topbar__social__list__item__link fab fa-twitter"></a>
</li>
<li class="topbar__social__list__item">
<a href="https://www.instagram.com/" class="topbar__social__list__item__link fab fa-instagram"></a>
</li>
<li class="topbar__social__list__item">
<a href="https://www.linkedin.com/" class="topbar__social__list__item__link fab fa-linkedin-in"></a>
</li>
</ul>
</div>
</div>
</footer>
You can change the social media links in this section.
RTL
ellen template support RTL Languages
<!-- Include these file -->
<link rel="stylesheet" href="css/style.rtl.min.css">
<script src="js/main.rtl.min.js"></script>
<!-- RTL Class -->
<section class="rtl-dir"></section>
<!-- RTL align -->
<section class="rtl-align"></section>