Sella - Marketing HTML Template – Responsive HTML5 Template
Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!
Scope of free support
We can help you with:
- Responding to questions or problems regarding the item and its features
- Fixing any discovered item’s bugs
- Providing updates to ensure compatibility with new software versions
Back to top
Was this article helpful ?
HTML Structure
This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).
If you would like to read more
about bootstrap framework click here :
Grid System and Single row structure
The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here
Basic grid HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> |
Page structure
Below you will find default page structure :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> [css] </head> <body> [header] [main menu] <!-- main container --> <div id="wrapper"> [component 1] <!-- fullwidth element --> </div> [fullwidth parallax] <div class="container"> <!-- / fullwidth element --> [component 6] </div> <!-- / main container --> [footer] [javascripts] </body> </html> |
Back to top
Was this article helpful ?
CSS files and structure
If you would like to edit the color, font, or style of any elements, you would do the following:
|
1 |
#primaryContent a {color: #someColor;} |
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.
I.E.
|
1 |
#wrap #primaryContent a {color: #someColor;} |
So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.
Colors
The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:
|
1 2 3 4 5 |
<head> (..) <link rel="stylesheet" type="text/css" href="css/motive.css"> (..) </head> |
Icons
We’ve included 360+ font icons.
Awesome Icons – http://fontawesome.io/icons/
HTML markup:
|
1 2 |
<!-- Awesome Icons --> <i class="fa fa-cog"></i> |
CSS Files & Structure
We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.
style.less
- variables
- mixins
- animate
- navbar
- background-effects
- buttons
- typography
- iconbox
- cta
- footer
- forms
- portfolio
- price-table
- contact-information
- event-box
- blog
- testimonials
- progress-bars
- toggables
- sidebar
- widgets
- personbox
- label
- charts
- sections
- map
- counter
The template also includes:
Google Fonts
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700italic,400,300,300italic,400italic);
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:400italic);
Mixins and Variables
- variables
- mixins
- animate
— Plugins
- slick
- selectize
- lightgallery
- chartist
- tablesaw
- pace preloader
- fullpage scroll
- countdown
— Components
- navbar
- background-effects
- buttons
- typography
- iconbox
- cta
- footer
- forms
- portfolio
- price-table
- contact-information
- event-box
- blog
- testimonials
- progress-bars
- toggables
- sidebar
- widgets
- personbox
- label
- charts
- sections
- map
- counter
Back to top
Was this article helpful ?
Javascript Components
JavaScript files:
- jquery.min.js – https://jquery.com/
- bootstrap.min.js – http://getbootstrap.com/getting-started/
- browser.min.js – https://github.com/gabceb/jquery-browser-plugin
- device.min.js – https://github.com/borismus/device.js/tree/master/build
- jquery.placeholder.min.js – https://github.com/mathiasbynens/jquery-placeholder
- skrollr.min.js – http://prinzhorn.github.io/skrollr/
- slick.js – http://kenwheeler.github.io/slick/
- jquery.isotope.min.js – http://isotope.metafizzy.co/
- selectize.min.js – https://brianreavis.github.io/selectize.js/
- helpers.js – custom script
- chartist.js
- jquery.countdown.js
- jquery.countTo.js
- jquery.fullpage.min.js
- lightgallery.js
- pace.js
- tablesaw.js
- jquery.appear.js
- main.js
Screenshot
Back to top
Was this article helpful ?
Preloader
In Sella - Marketing HTML Template we are using Pace preloader.
HTML markup
No HTML markup needed.
ScreenShot
Loader
JavaScript
Files are bundled inside sella.min.js. and style.css files
Documentation and information about Pace can be found on THIS website.
Back to top
Was this article helpful ?
Navigation
Navigation is really important part of the theme. In Sella - Marketing HTML Template we have 2 variations of it. The menu markup also contains search bar.
- Default Navigation (on scroll Fixed Navigation)
- With Topbar
— Default Navigation (on scroll Fixed Navigation)
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<nav class="ct-nav"> <div class="navbar navbar-default navbar-fixed text-center"> <div class="navbar-header"><a href="index.html" class="navbar-brand navbar-panel"><img src="assets/images/demo-content/logo.png" alt="" class="ct-img"><img src="assets/images/demo-content/logo-dark.png" alt="" class="ct-img-show"></a><a href="tel:08001234567" class="navbar-panel"> <span class="ct-tel">0 800 123 4567</span><i class="fa fa-phone ct-tel-icon"></i></a> <ul class="ct-socials list-inline list-unstyled navbar-panel"> <li class="ct-socials__itemfacebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li class="ct-socials__itemtwitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li class="ct-socials__iteminstagram"><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> </div> <div class="ct-search ct-js-search"> <div class="ct-search-icon"><i class="fa fa-search"></i></div> <form> <input type="text" class="form-control"> </form> </div> <ul class="nav navbar-nav navbar-right navbar-fw"> <li class="dropdown dropdown-fw"><a href="index.html">Home</a> <ul class="dropdown-menu"> <li><a href="coach.html">coach</a> </li> <li><a href="speaker.html">speaker</a> </li> <li><a href="training.html">training</a> </li> <li><a href="online-content.html">online content</a> </li> <li><a href="coming-soon.html">coming soon</a> </li> <li><a href="index.html">corporate</a> </li> </ul> </li> <li><a href="about.html">About me</a> </li> <li><a href="services.html">services</a> </li> <li><a>case study</a> </li> <li><a href="pricing.html">pricing</a> </li> <li><a href="testimonials.html">testimonials</a> </li> <li class="dropdown dropdown-fw"><a>pages</a> <ul class="dropdown-menu"> <li><a href="about-us.html">about us</a> </li> <li><a href="team.html">team</a> </li> <li><a href="blog-single.html">blog single</a> </li> <li><a href="contact-us.html">contact us</a> </li> <li><a href="faq.html">faq</a> </li> <li><a href="job.html">job</a> </li> <li><a href="portfolio.html">portfolio</a> </li> <li><a href="portfolio-single.html">portfolio single</a> </li> <li><a href="services-extended.html">services extended</a> </li> </ul> </li> <li><a href="blog.html">blog</a> </li> <li><a href="contact.html">contact me</a> </li> </ul> </div> </nav> |
Screenshots
Navigation – Default
Navigation – Fixed
— With Topbar
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<nav class="ct-nav"> <div class="navbar navbar-default navbar-fixed text-center ct-navbar-style2"> <div class="ct-topbar"> <div class="container"> <ul class="list-unstyled list-inline ct-topbar-contact"> <li><a href="tel:08001234567"><i class="fa fa-phone"></i>0 800 123 4567</a></li> <li><a href="mailto:example@example.com"><i class="fa fa-envelope-o"></i>example@example.com</a></li> </ul> <ul class="list-unstyled list-inline ct-topbar-user-panel"> <li><a data-toggle="modal" data-target="#modal_login"><i class="fa fa-power-off"></i>login</a></li> <li><a data-toggle="modal" data-target="#modal_register"><i class="fa fa-plus"></i>register</a></li> </ul> <div class="clearfix"></div> </div> </div> <div class="container"> <div class="navbar-header"><a href="index.html" class="navbar-brand navbar-panel"><img src="assets/images/demo-content/logo-dark.png" alt=""></a></div> <div class="ct-search ct-search-simple ct-js-search"> <div class="ct-search-icon"><i class="fa fa-search"></i></div> <form class="form-group"> <input type="text" class="form-control"> </form> </div> <ul class="nav navbar-nav navbar-right navbar-fw"> <li class="dropdown"><a href="index.html">Home</a> <ul class="dropdown-menu"> <li><a href="coach.html">coach</a> </li> <li><a href="speaker.html">speaker</a> </li> <li><a href="training.html">training</a> </li> <li><a href="online-content.html">online content</a> </li> <li><a href="coming-soon.html">coming soon</a> </li> <li><a href="index.html">corporate</a> </li> </ul> </li> <li><a href="about.html">About me</a> </li> <li><a href="services.html">services</a> </li> <li><a href="portfolio.html">case study</a> </li> <li><a href="pricing.html">pricing</a> </li> <li><a href="testimonials.html">testimonials</a> </li> <li class="dropdown dropdown-fw"><a>pages</a> <ul class="dropdown-menu"> <li><a href="about-us.html">about us</a> </li> <li><a href="team.html">team</a> </li> <li><a href="contact-us.html">contact us</a> </li> <li><a href="faq.html">faq</a> </li> <li><a href="job.html">job</a> </li> <li><a href="portfolio.html">portfolio</a> </li> <li><a href="portfolio2.html">portfolio2</a> </li> <li><a href="portfolio-single.html">portfolio single</a> </li> <li><a href="services-extended.html">services extended</a> </li> </ul> </li> <li class="dropdown"><a href="blog.html">blog</a> <ul class="dropdown-menu"> <li><a href="blog.html">blog listing</a> </li> <li><a href="blog-single.html">blog single post</a> </li> </ul> </li> <li><a href="contact.html">contact me</a> </li> </ul> </div> </div> </nav> |
Screenshot
Navigation – With Topbar
Back to top
Was this article helpful ?
Section Header
In Sella - Marketing HTML Template we have several variations of this element that can be created using classes you can see down below.
- .ct-section-header-decoration-left
- .ct-section-header-decoration-center
— .ct-section-header-decoration-left
HTML markup
|
1 2 3 |
<div class="ct-section-header ct-section-header-decoration-left ct-u-margin-bottom-30"><span class="h5 ct-u-color--gray">things i do</span> <h2 class="h1">services<br>for your business</h2> </div> |
Screenshot
Section Header Left
— .ct-section-header-decoration-center
HTML markup
|
1 2 3 |
<div class="ct-section-header ct-section-header-decoration-center ct-u-margin-bottom-30"><span class="h5 ct-u-color--gray">things i do</span> <h2 class="h1">services<br>for your business</h2> </div> |
Screenshot
Section Header Center
Back to top
Was this article helpful ?
Accordion
You can find 2 types of variation in Sella - Marketing HTML Template for Accordion. you can choose betwenn this two variations by adding or removing the class you can see down below.
- DEFAULT (no extra class)
- .ct-accordion-dark
HTML markup example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="1" role="tablist" aria-multiselectable="true" class="panel-group ct-accordion-dark"> <div class="panel panel-default"> <div role="tab" id="header-1" class="panel-heading"> <h4 class="panel-title"><a aria-controls="collapse-1" aria-expanded="true" data-parent="#1" data-toggle="collapse" href="#collapse-1" role="button" class="collapsed">who is the best it company out there?</a></h4> </div> <div id="collapse-1" role="tabpanel" aria-labelledby="header-1" class="panel-collapse collapse"> <div class="panel-body"> <p>Sella, enough said. Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel, efficitur et velit.</p> </div> </div> </div> </div> |
Screenshot
Accordion types – default version and dark version
JavaScript
Bootstrap Documentation for Accorion can be found Here. Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Isotope
— Filters
HTML markup
|
1 2 3 4 5 6 |
<ul class="ct-js-gallery-filters ct-gallery-filters"> <li><a href="#" data-filter="*" class="btn btn-motive-o btn-sm active">all</a></li> <li><a href="#" data-filter=".marketing" class="btn btn-motive-o btn-sm">marketing</a></li> <li><a href="#" data-filter=".training" class="btn btn-motive-o btn-sm">training</a></li> <li><a href="#" data-filter=".other" class="btn btn-motive-o btn-sm">other</a></li> </ul> |
Screenshot
Filters
— Item
HTML markup
|
1 2 3 4 5 6 7 8 |
<article class="ct-gallery-item marketing"> <figure><img src="assets/images/demo-content/portfolio-thumbnail.jpg" alt=""/> <figcaption> <div class="ct-gallery-item-text"> <div class="inner"><span class="ct-gallery-item-title ct-section-header-decoration-center">motivational campaign</span><span class="ct-gallery-item-tags">marketing / other</span></div> </div> </figcaption> </figure> |
Screenshots
Isotope Item
Isotope Hover
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
/* Isotope */ (function ($) { "use strict"; jQuery(document).ready(function () { if ($().isotope && ($('.ct-js-gallery').length > 0)) { var $container = $('.ct-js-gallery'), // object that will keep track of options isotopeOptions = {}, // defaults, used if not explicitly set in hash defaultOptions = { filter: '*', itemSelector: '.ct-gallery-item', // set columnWidth to a percentage of container width masonry: { } }; $container.imagesLoaded().progress(function (instance, image) { if (!image.isLoaded) { return; } var p = $(image.img).closest('.hidden'); p.removeClass('hidden'); $container.addClass('is-loaded'); // set up Isotope $container.each(function () { $(this).isotope(defaultOptions); $container.isotope('layout'); }); $container.isotope('layout'); }).always(function (instance) { if($().infinitescroll){ $container.infinitescroll({ loading: { finished: undefined, //img: finishedMsg: "<div class='gallerymessage'>No more images</div>", msg: null, msgText: "<div class='gallerymessage'>Loading</div>", selector: null, speed: 'fast', start: undefined }, navSelector: ".wp-pagenavi", nextSelector: ".nextpostslink", itemSelector: ".ct-gallery-item", extraScrollPx: 0, prefill: true }, function( newElements ) { $container.imagesLoaded(function(){ $(newElements).removeClass('hidden'); $container.isotope('appended', $(newElements)); }); }); } }); $('.ct-js-gallery-filters a').click(function () { $('.ct-js-gallery-filters .active').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); } }); }(jQuery)); |
Isotope Documentation can be found here Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Chartist
HTML markup
|
1 2 |
<div class="ct-js-chart ct-chart ct-chart-animated"> </div> |
Screenshot
Chartsist
JavaScript
|
1 2 3 4 5 6 7 8 9 |
new Chartist.Pie('.ct-chart-1', { series: [75, 25] }, { donut: true, donutWidth: 4, startAngle: 0, showLabel: false, chartPadding: 1, }); |
Chartist Documentation can be found here Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Testimonials
The best way to adversize your company is to let your customers speak for you. And we have two types of this element! In Sella - Marketing HTML Template for Testimonials section we are using Slick slider. More information about this jQuery Slick plugin you will find in the documentation link down below.
— Slider
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div data-arrows="true" data-dots="true" class="ct-slick ct-js-slick ct-slick-dots-style2 ct-u-padding-bottom-40 ct-u-padding-top-40"> <div class="tablex item"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="ct-testimonials ct-testimonials--dark"> <div class="ct-testimonials-inner"> <div class="ct-testimonials-image"><img src="assets/images/demo-content/testimonials.jpg" alt=""/></div> <div class="ct-testimonials-dsc"> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar.</p> </div> <div class="ct-testimonials-client"><span class="ct-testimonials-name h4">jeffrey kendrick</span><span class="ct-testimonials-company h5">sales manager @ crisppi</span></div> </div> </div> </div> </div> </div> </div> </div> |
Screenshot
Testimonials – Slider
— Box
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="ct-testimonials ct-testimonials--block"> <div class="ct-testimonials-inner"> <div class="ct-item-label--circle"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23px" height="17px" viewBox="0 0 23 17"> <text transform="translate(-25.00,10.00)" class="icon-svg"> <tspan y="42.60" x="16.88">“</tspan> </text> </svg> </div> <div class="ct-testimonials-dsc"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.</p> </div> <div class="ct-testimonials-client"><span class="ct-testimonials-name h4">jefrey kendrick</span><span class="ct-testimonials-company h5">sales manager @crisppi</span></div> </div> </div> |
Screenshot
Testimonials – Boxes
Slick Custom Tweaks
New Responsive data-attributes for ease of use:
- data-items-xl
- data-items-lg
- data-items-md
- data-items-sm
- data-items-xs
Slick Documentation can be found here. Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Contact Information
It is nice to let your visitors to know how to keep in touch with you. In Sella - Marketing HTML Template for Contact Information section we are using Slick slider. More information about this jQuery Slick plugin you will find in the documentation link down below.
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div data-autoplay="true" data-autoplaySpeed="3000" data-arrows="false" data-items-xs="2" data-items-sm="2" data-items-md="3" data-items-lg="4" data-items="1" class="ct-slick ct-js-slick ct-contact-information"> <div class="tablex item"><a href="https://www.google.pl/maps?q=121+King+Street,+Melbourne&um=1&ie=UTF-8&sa=X&ved=0CAcQ_AUoAWoVChMI6NOf-4DHyAIVgvxyCh02aA8-"> <div class="ct-contact-information-item ct-u-background--motive-15"> <div class="inner"><i class="fa fa-home"></i></div> <div class="inner"><span class="ct-contact-information-title h4">my location</span><span class="ct-contact-information-subtitle h5">121 King Street, Melbourne</span></div> </div></a> </div> <div class="tablex item"><a href="tel:08001234567"> <div class="ct-contact-information-item ct-u-background--motive-10"> <div class="inner"><i class="fa fa-mobile"></i></div> <div class="inner"><span class="ct-contact-information-title h4">phone no.</span><span class="ct-contact-information-subtitle h5">0 800 123 4567</span></div> </div></a> </div> <div class="tablex item"><a href="mailto:example@example.com"> <div class="ct-contact-information-item ct-u-background--motive-5"> <div class="inner"><i class="fa fa-envelope-o"></i></div> <div class="inner"><span class="ct-contact-information-title h4">e-mail address</span><span class="ct-contact-information-subtitle h5">example@example.com</span></div> </div></a> </div> <div class="tablex item"> <div class="ct-contact-information-item ct-u-background--motive"> <div class="inner"><i class="fa fa-clock-o"></i></div> <div class="inner"><span class="ct-contact-information-title h4">working time</span><span class="ct-contact-information-subtitle h5">Mon-Fri, 9-5</span></div> </div> </div> </div> |
Screenshot
Contact Information
Slick Custom Tweaks
New Responsive data-attributes for ease of use:
- data-items-xl
- data-items-lg
- data-items-md
- data-items-sm
- data-items-xs
Slick Documentation can be found here. Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Buttons
In Sella - Marketing HTML Template you will find several variations of sizes and colors for buttons. Using the class you see down below you will be able to set the size of the button and its color.
- Size
- btn-lg
- btn-sm
- btn-xs
- Color Full
- motive
- default
- gray
- primary
- success
- info
- warning
- danger
- accent
- Color Open
- motive-o
- default-o
- gray-o
- primary-o
- success-o
- info-o
- warning-o
- danger-o
- accent-o
HTML markup
|
1 2 |
<button class="btn btn-motive btn-lg">Read More</button> <a href="#" class="btn btn-motive btn-lg">Read More</a> |
Screenshot
Buttons
Back to top
Was this article helpful ?
Slider
This is the default markup with classes you must use if you want to create a slick slider.
HTML markup
|
1 2 3 4 5 |
<div class="ct-slick ct-js-slick"> <div class="item">...</div> ... <div class="item">...</div> </div> |
— Main Slider
If you want to achieve slider looking like the one on our demo page use this markup example
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-slick ct-js-slick"> <div data-background="assets/images/demo-content/slider-bg.jpg" class="ct-header tablex item"> <div data-height="91%" class="ct-u-display-tablex"> <div class="inner text-uppercase"> <div class="container ct-u-color--white text-center"><span class="h4">let me bring you</span> <h1 class="h1"><span class="ct-u-color--motive">new</span>customers</h1><span class="h4">creative marketing / b2b / b2c / startup acceleration</span> </div> </div> </div> </div> ... </div> |
Screenshot
Main Slider
Slick Custom Tweaks
New Responsive data-attributes for ease of use:
- data-items-xl
- data-items-lg
- data-items-md
- data-items-sm
- data-items-xs
Slick Documentation can be found here. Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Countdown
HTML markup
|
1 |
<div class="ct-js-countdown ct-countdown"></div> |
Screenshot
Countdown
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if ($().countdown) { $('.ct-js-countdown').each(function() { $(this).countdown('2016/1/1', function(event) { var $this = $(this).html(event.strftime('' + '<span class="ct-countdown-days">%D</span> ' + '<span class="ct-countdown-hours">%H</span> ' + '<span class="ct-countdown-min">%M</span> ' + '<span class="ct-countdown-sec">%S</span> ' + '<div class="clearfix"></div>')); }); }); } |
Countdown Documentation can be found here. Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Count to
HTML markup
|
1 2 3 |
<div class="ct-counter"><i class="fa fa-coffee"></i> <div data-from="0" data-to="32786" data-speed="5000" class="ct-js-counter"></div><span class="h4">Cofee Cups So Far</span><img src="assets/images/demo-content/logo-counter.png" alt=""> </div> |
Screenshot
Count to
JavaScript
|
1 2 3 4 5 |
if ($().countTo) { $('.ct-js-counter').each(function() { $(this).countTo(); }); } |
Count to Documentation can be found here. Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Data Attributes
This are the attributes you can use in the Sella - Marketing HTML Template
- data-color – custom text color
- data-font-size – custom font size
- data-height – custom height
- data-background – custom background
- data-show – show hidden content
- data-parallax – set parallax value
Back to top
Was this article helpful ?
Icon Box
You can easily change what icon will be displayed in box by changing icon class. Here you will find full set of icons.
Sella - Marketing HTML Template have 3 varations of icon boxes that are using the classes you can see below.
- .ct-iconBox–style2
- .ct-iconBox–inline
- .ct-iconBox–small
HTML markup
|
1 2 3 4 5 6 7 8 |
<div class="ct-iconBox"> <div class="ct-iconBox-icon"><i class="fa fa-line-chart"></i> </div> <div class="ct-iconBox-description"> <h4 class="ct-iconBox-title">fb & aw campaigns</h4><span class="ct-iconBox-subtitle">integer a mattis diam, at sagittis dolor.</span> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel.</p> </div> </div> |
Screenshot
Icon Box ver.1
HTML markup
|
1 2 3 4 5 6 7 |
<div class="ct-iconBox ct-iconBox--inline ct-iconBox--small"> <div class="ct-iconBox-icon"><i class="fa fa-exclamation-triangle"></i> </div> <div class="ct-iconBox-description"> <h4 class="ct-iconBox-title">I’ll find your weakness</h4><span class="ct-iconBox-subtitle">Integer a mattis diam at sagittis</span> </div> </div> |
Screenshot
Icon Box ver.2
HTML markup
|
1 2 3 4 5 6 7 8 |
<div class="ct-iconBox ct-iconBox--style2"> <div class="ct-iconBox-icon"><i class="fa fa-line-chart"></i> </div> <div class="ct-iconBox-description"> <h4 class="ct-iconBox-title">fb & aw campaigns</h4><span class="ct-iconBox-subtitle">integer a mattis diam, at sagittis dolor.</span> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel.</p> </div> </div> |
Screenshot
Icon Box ver.3
Back to top
Was this article helpful ?
Event Box
Sella - Marketing HTML Template has 2 version of Event Box that you can use.
–Default version
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<a href="#" class="ct-event-box"> <div class="ct-event-box__inner"> <div class="ct-event-box__icon"> <div class="inner"> <svg width="37px" height="32px" viewbox="0 0 37 32" class="ct-icon ct-icon--drawing"> <path></path> </svg> </div> </div> <h3 class="ct-event-box__header">Drawing Parties</h3> <div class="ct-event-box__hover"> <div class="inner"> <h5 class="ct-event-box__header">Drawing Parties</h5> <p class="ct-event-box__content">Lorem ipsum dolor sitam consectetur brevis estia nunc aeneat brevis es. </p> </div> </div> </div> </a> |
Screenshot
Event Box – Default
–Style 2 version
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="ct-eventBox ct-eventBox--col3-left"> <div class="ct-eventBox-item ct-u-background--motive text-left"><i class="fa fa-calendar-check-o"></i> <div class="ct-section-header ct-section-header--type2"><span class="h1 big">come and see me live!</span> </div> </div> </div> <div data-autoplay="true" data-autoplaySpeed="3000" data-arrows="false" data-items-sm="1" data-items-md="2" data-items-lg="2" data-items="1" class="ct-eventBox ct-eventBox--col3-right text-center ct-slick ct-js-slick"> <div class="tablex item"> <div class="ct-eventBox-item ct-u-background--motive-5"> <div class="ct-section-header ct-section-header--type2"><span class="h1">next event starts in</span> </div> <div class="ct-js-countdown ct-countdown"></div> <div class="ct-eventBox-info"> <div class="ct-eventBox-inner"> <div class="ct-left"> <div class="inner ct-icon"><i class="fa fa-calendar"></i></div> <div class="inner ct-desc"><span class="h4">December 5, 2015</span><span class="h5 ct-subtitle">10:00 - 18:00</span></div> </div> <div class="ct-right"> <div class="inner ct-icon"><i class="fa fa-map"></i></div> <div class="inner ct-desc"><span class="h4">Sella Plaza</span><span class="h5 ct-subtitle">928 Park Ave R. New York, NY 10001, United States</span></div> </div> </div> </div> </div> </div> <div class="tablex item"> <div class="ct-eventBox-item ct-u-background--motive-10"> <div class="ct-section-header ct-section-header--type2 ct-u-margin-top-20"><span class="h1">buy your ticket now</span> </div> <div class="text-center"><span class="ct-price">$ 149</span><img src="assets/images/demo-content/etickets-logo.png" alt=""></div><a href="#" class="btn btn-default btn-lg btn-square ct-u-margin-bottom-20">buy ticket now<i class="fa fa-ticket"></i></a> </div> </div> </div> |
Screenshot
Event Box – Style2
Back to top
Was this article helpful ?
Person Box
Person Box in Sella - Marketing HTML Template have one variation that is using the class you can see below.
- .ct-personBox–light
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="ct-personBox"> <div class="ct-personBox-image"><img src="assets/images/demo-content/personbox.jpg" alt="person"/></div> <div class="ct-personBox-description"> <div class="ct-personBox-meta"><span class="h5 ct-personBox-name">john warner</span><span class="ct-personBox-position">ceo & founder</span> <ul class="ct-socials list-inline list-unstyled"> <li class="ct-socials__itemfacebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li class="ct-socials__itemtwitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li class="ct-socials__iteminstagram"><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> </div> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar.</p><span class="progress-bar-label">Marketing<span>92%</span></span> <div class="progress"> <div role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width:92%" class="progress-bar"></div> </div><span class="progress-bar-label">PR<span>85%</span></span> <div class="progress"> <div role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%" class="progress-bar"></div> </div><span class="progress-bar-label">Managing<span>98%</span></span> <div class="progress"> <div role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" style="width:98%" class="progress-bar"></div> </div> </div> </div> |
Screenshot
Person Box
Back to top
Was this article helpful ?
Pricing Box
Present your prices by just adding this simple HTML markup:
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="ct-priceTable"> <div class="ct-priceTable-main"><span class="ct-priceTable-title h4">online campaign</span><span class="ct-priceTable-subtitle h5">Integer a mattis diam</span><span class="ct-priceTable-price"><span class="ct-priceTable-currency">$</span>495</span><span class="ct-priceTable-tag">per month</span><span class="ct-priceTable-short-dsc">Fully serviced tailormade campaign for your company</span> </div> <div class="ct-priceTable-features"> <ul class="ct-priceTable-list"> <li>Website traffic analytics</li> <li>New traffic strategies</li> <li>Campaign optimization</li> <li>Full progress reports</li> <li>Customer support</li> </ul><a href="#" class="btn btn-dark btn-lg">purchase now<i class="fa fa-shopping-cart"></i></a> </div> </div> |
Screenshot
Pricing Box
Back to top
Was this article helpful ?
Call to action
In Sella - Marketing HTML Template we have one variation for call to action
- .ct-call-to-action-dark
–Default (no extra class needed)
HTML markup
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-call-to-action"> <div class="ct-call-to-action-inner"> <div class="ct-action-item"><a href="index.html"><img src="assets/images/demo-content/logo-light.png" alt="alt"/></a></div> <div class="ct-action-item"> <h5 class="h2 ct-u-font-weight--300 ct-action-title">Sella is your<span class="ct-u-font-weight--700"> next marketing theme</span></h5><span>Buy it now and start your marketing business</span> </div> <div class="ct-action-item"><a href="#" class="btn-dark btn btn-lg">purchase now<i class="fa fa-shopping-cart"></i></a></div> </div> </div> |
Screenshot
Call To Action – Default
–Dark
HTML structure
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-call-to-action ct-call-to-action-dark"> <div class="ct-call-to-action-inner"> <div class="ct-action-item"><a href="index.html"><img src="assets/images/demo-content/logo-light.png" alt="alt"/></a></div> <div class="ct-action-item"> <h5 class="h2 ct-u-font-weight--300 ct-action-title">Sella is your<span class="ct-u-font-weight--700"> next marketing theme</span></h5><span>Buy it now and start your marketing business</span> </div> <div class="ct-action-item"><a href="#" class="btn-dark btn btn-lg">purchase now<i class="fa fa-shopping-cart"></i></a></div> </div> </div> |
Screenshot
Call To Action – Dark
Back to top
Was this article helpful ?
Lightgallery
It is a really nice way to present images on your website
HTML marker (example)
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="ct-gallery" class="ct-gallery ct-js-gallery ct-gallery--col5 lightGallery"><a href="assets/images/demo-content/portfolio-big-image.jpg"> <article class="ct-gallery-item marketing"> <figure><img src="assets/images/demo-content/portfolio-thumbnail.jpg" alt=""/> <figcaption> <div class="ct-gallery-item-text"> <div class="inner"><span class="ct-gallery-item-title ct-section-header-decoration-center">motivational campaign</span><span class="ct-gallery-item-tags">marketing / other</span></div> </div> </figcaption> </figure> </article></a> </div> |
Screenshot
Lightgallery
JavaScript
|
1 2 3 4 5 |
$('.lightGallery').each(function() { $(this).lightGallery({ thumbnail:true }); }); |
Lightgallery Documentation can be found here. Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Pagination
To add pagination, use the simple HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 |
<nav> <ul class="pagination"> <li><a href="#" aria-label="Previous"><i class="fa fa-long-arrow-left"></i>Prev</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" aria-label="Next">next<i class="fa fa-long-arrow-right"></i></a></li> </ul> </nav> |
Pagination
Back to top
Was this article helpful ?
Blog Posts
In Sella - Marketing HTML Template we have 4 types of blog posts you can created using this markups:
Blog Image
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 |
<article itemprop="blogPost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting" class="ct-article"> <h4 class="ct-article-title"><a href="blog-single.html" itemprop="url">meetings in london</a></h4><span itemprop="dateCreated" class="h5 ct-article-meta">August 13, 2015 by <a href="#" itemprop="url">Admin</a> in <a href="#" itemprop="url">Trainings</a></span> <div class="ct-article-media"><a href="blog-single.html" itemprop="url"><img src="assets/images/demo-content/blog-post.jpg" alt=""/></a> </div> <div itemprop="text" class="ct-article-description"> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel.</p> </div> <div class="ct-article-comments"><a href="blog-single.html" class="h6 text-uppercase pull-left">continue reading</a><span class="pull-right h6">2 Comments</span> <div class="clearfix"></div> </div> </article> |
Screenshot
Blog Image
Blog Slider
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<article itemprop="blogPost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting" class="ct-article"> <h4 class="ct-article-title"><a href="blog-single.html" itemprop="url">getting full-room</a></h4><span itemprop="dateCreated" class="h5 ct-article-meta">August 7, 2015 by <a href="#" itemprop="url">Admin</a> in <a href="#" itemprop="url">other</a></span> <div class="ct-article-media"> <div data-arrows="true" class="ct-slick ct-js-slick"> <div class="tablex item"><img src="assets/images/demo-content/blog-post2.jpg" alt=""/></div> <div class="tablex item"><img src="assets/images/demo-content/blog-post.jpg" alt=""/></div> <div class="tablex item"><img src="assets/images/demo-content/blog-post3.jpg" alt=""/></div> </div> </div> <div itemprop="text" class="ct-article-description"> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel.</p> </div> <div class="ct-article-comments"><a href="blog-single.html" class="h6 text-uppercase pull-left">continue reading</a><span class="pull-right h6">2 Comments</span> <div class="clearfix"></div> </div> </article> |
Screenshot
Blog Slider
Blog Aside
HTML markup
|
1 2 3 4 5 6 |
<article itemprop="blogPost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting" class="ct-article ct-article-aside"> <h4 class="ct-article-title"><a href="blog-single.html" itemprop="url">this is aside post</a></h4><span itemprop="dateCreated" class="h5 ct-article-meta">July 9, 2015 by <a href="#" itemprop="url">Admin</a> in <a href="#" itemprop="url">Announcements</a></span> <div itemprop="text" class="ct-article-description"> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel.</p> </div> </article> |
Screenshot
Blog Aside
Blog Video
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting" class="ct-article"> <h4 class="ct-article-title">Check it out<a href="blog-single.html" itemprop="url"></a></h4><span itemprop="dateCreated" class="h5 ct-article-meta"> August 14, 2015 by <a href="#" itemprop="url">Admin</a> in <a href="#" itemprop="url">Video</a></span> <div class="ct-article-media"> <div class="embed-responsive embed-responsive-16by9"> <iframe src="https://www.youtube.com/embed/2Rxoz13Bthc" class="embed-responsive-item"></iframe> </div> </div> <div itemprop="text" class="ct-article-description"> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel. Nullam nec lectus eu erat tempus pulvinar. Quisque mauris felis, porta et cursus vel.</p> </div> <div class="ct-article-comments"><a href="blog-single.html" class="h6 text-uppercase pull-left">continue reading</a><span class="pull-right h6">2 Comments</span> <div class="clearfix"></div> </div> </article> |
Screenshot
Blog Video
Back to top
Was this article helpful ?
Contact Form
All needed files are in /form directory.
To configure form just edit form/config.php and change e-mails to your own :
|
1 2 |
$to = "mail@example.com"; $from = "mail@example.com"; |
That’s it!
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<form action="../assets/form/send.php" method="POST" class="validateIt ct-form ct-form--with-inner"> <div class="row ct-u-margin-bottom-20"> <div class="col-md-4"> <div class="inner-group"> <div class="form-group"> <input type="text" placeholder="Name *" id="contact_name" required="required" class="form-control form-control-light input-lg"/> <label for="contact_name" class="sr-only">Name *</label> </div> <div class="form-group"> <input type="text" placeholder="Email *" id="contact_email" required="required" class="form-control form-control-light input-lg"/> <label for="contact_email" class="sr-only">Email *</label> </div> </div> </div> <div class="col-md-8"> <div class="form-group"> <textarea placeholder="Your message *" id="contact_message" rows="5" required="required" class="form-control form-control-light ct-u-margin-both-0"></textarea> <label for="contact_message" class="sr-only">Your message *</label> </div> </div> </div> <div class="row"> <div class="col-sm-8 text-left"><span class="ct-u-color--gray ct-u-font-family-secondary ct-u-font-style--italic center-block ct-u-margin-top-15">Fields marked with * are mandatory</span></div> <div class="col-sm-4"> <div class="row"> <div class="col-xs-5"><a class="btn btn-link"><i class="fa fa-close"></i>clear</a></div> <div class="col-xs-7"> <button class="btn btn-motive btn-square">send message</button> </div> </div> </div> </div> </form> |
Screenshot
Contact Form
Options (can be changed in HTML) :
- Mail Subject – just change value in :
- Success Message – change successMessage div content
- Error Message – change errorMessage div content
Back to top
Was this article helpful ?
Newsletter
All need files you will find in /form directory.
To configure form just edit form/config.php and change e-mails to your own :
|
1 2 |
$to = "mail@example.com"; $from = "mail@example.com"; |
That’s it!
HTML markup
|
1 2 3 4 5 6 7 |
<form action="../assets/form/send.php" method="POST" class="validateIt ct-form"> <div class="form-group"> <input type="text" placeholder="Email *" id="contact_email2" required="required" class="form-control form-control-light form-control-bordered-dark input-lg"/> <label for="contact_email2" class="sr-only">Email *</label> </div> <button class="btn btn-motive btn-lg btn-square">sign up now</button> </form> |
Screenshots
Newsletter
Back to top
Was this article helpful ?
Input
Sella - Marketing HTML Template have two variations of Input
- form-control-light
- form-control-bordered-dark
HTML markup
|
1 2 3 4 |
<div class="form-group"> <input type="email" placeholder="Email" id="email" required="required" class="form-control"/> <label for="email" class="sr-only">Email</label> </div> |
Screenshots
Inputs Variations
Back to top
Was this article helpful ?
Textarea
HTML markup
|
1 2 3 4 |
<div class="form-group"> <textarea placeholder="Message" id="message" rows="7" required="required" class="form-control"></textarea> <label for="message" class="sr-only">Message</label> </div> |
Screenshot
Text Area Examples
Back to top
Was this article helpful ?
Search
HTML markup
|
1 2 3 |
<form class='form-group'> <input type="text" class="form-control"> </form> |
Screenshot
Search
Back to top
Was this article helpful ?
Sources & Credits
The following sources and files have been used to build up this theme
Twitter Bootstrap – http://twitter.github.com/bootstrap/
jQuery – http://www.jquery.com
Isotope – http://isotope.metafizzy.co/
Chartist – https://gionkunz.github.io/chartist-js/
Slick – http://kenwheeler.github.io/slick/
Back to top
Was this article helpful ?