• Facebook
  • Twitter

Sella - Marketing HTML Template – Responsive HTML5 Template


Support Our Blog

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:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

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 :

Bootstrap Documentation

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:

Page structure

Below you will find default page structure :


CSS files and structure


If you would like to edit the color, font, or style of any elements, you would do the following:

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.

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:

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

style.less

  1. variables
  2. mixins
  3. animate
  4. navbar
  5. background-effects
  6. buttons
  7. typography
  8. iconbox
  9. cta
  10. footer
  11. forms
  12. portfolio
  13. price-table
  14. contact-information
  15. event-box
  16. blog
  17. testimonials
  18. progress-bars
  19. toggables
  20. sidebar
  21. widgets
  22. personbox
  23. label
  24. charts
  25. sections
  26. map
  27. 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

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


Preloader


In Sella - Marketing HTML Template we are using Pace preloader.

HTML markup

No HTML markup needed.

ScreenShot

Loader

Loader

JavaScript
Files are bundled inside sella.min.js. and style.css files

Documentation and information about Pace can be found on THIS website.


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.

  1. Default Navigation (on scroll Fixed Navigation)
  2. With Topbar

— Default Navigation (on scroll Fixed Navigation)

HTML markup

Screenshots

Navigation - Default

Navigation – Default

Navigation - Sticky

Navigation – Fixed

— With Topbar

HTML markup

Screenshot

Navigation - With Topbar

Navigation – With Topbar


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 

Screenshot

Section Header Left

Section Header Left

— .ct-section-header-decoration-center

HTML markup 

Screenshot

Section Header Center

Section Header Center


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

 

Screenshot

Accordion types

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


Isotope


— Filters

HTML markup

Screenshot

Filters

Filters

— Item

HTML markup

Screenshots

Isotope Item

Isotope Item

Isotope Hover

Isotope Hover

JavaScript

Isotope Documentation can be found here Files are bundled inside sella.min.js & style.css


Chartist


HTML markup

 

Screenshot

Chartsist

Chartsist

JavaScript

Chartist Documentation can be found here Files are bundled inside sella.min.js & style.css


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

Screenshot

Testimonials - Slider

Testimonials – Slider

— Box

HTML markup

Screenshot

 

Testimonials - Boxes

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


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

Screenshot

Contact Information

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


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.

 

  1. Size
    • btn-lg
    • btn-sm
    • btn-xs
  2. Color Full
    • motive
    • default
    • gray
    • primary
    • success
    • info
    • warning
    • danger
    • accent
  3. Color Open
    • motive-o
    • default-o
    • gray-o
    • primary-o
    • success-o
    • info-o
    • warning-o
    • danger-o
    • accent-o

HTML markup

Screenshot

Buttons

Buttons


Slider


This is the default markup with classes you must use if you want to create a slick slider.

HTML markup

— Main Slider

If you want to achieve slider looking like the one on our demo page use this markup example

HTML markup

Screenshot

Main Slider

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


Countdown


HTML markup

Screenshot

Countdown

Countdown

JavaScript

 

Countdown Documentation can be found here. Files are bundled inside sella.min.js & style.css


Count to


HTML markup

Screenshot

Count to

Count to

JavaScript

Count to Documentation can be found here. Files are bundled inside sella.min.js & style.css


Data Attributes


This are the attributes you can use in the Sella - Marketing HTML Template

  1. data-color – custom text color
  2. data-font-size – custom font size
  3. data-height – custom height
  4. data-background – custom background
  5. data-show – show hidden content
  6. data-parallax – set parallax value

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

Screenshot

Icon box ver.1

Icon Box ver.1

HTML markup

Screenshot

Icon Box ver.2

Icon Box ver.2

HTML markup

Screenshot

Icon Box ver.3

Icon Box ver.3


Event Box


Sella - Marketing HTML Template has 2 version of Event Box that you can use.

–Default version

HTML markup

Screenshot

Event Box - Default

Event Box – Default

–Style 2 version

HTML markup

Screenshot

Event Box - Style2

Event Box – Style2


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

 

Screenshot

Person Box

Person Box


Pricing Box


Present your prices by just adding this simple HTML markup:

HTML markup

Screenshot

Pricing Box

Pricing Box


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

Screenshot

Call To Action default

Call To Action – Default

–Dark

HTML structure

Screenshot

Call To Action - Dark

Call To Action – Dark


Lightgallery


It is a really nice way to present images on your website

HTML marker (example)

Screenshot

Lightgallery

Lightgallery

JavaScript

Lightgallery Documentation can be found here. Files are bundled inside sella.min.js & style.css


Pagination


To add pagination, use the simple HTML markup:

Pagination

Pagination


Blog Posts


In Sella - Marketing HTML Template we have 4 types of blog posts you can created using this markups:

Blog Image

HTML markup

Screenshot

Blog Image

Blog Image

Blog Slider

HTML markup

Screenshot

Blog Aside

Blog Slider

Blog Aside

HTML markup

Screenshot

Blog Aside

Blog Aside

Blog Video

HTML markup

Screenshot

Blog Video

Blog Video


Contact Form


All needed files are in /form directory.
To configure form just edit form/config.php and change e-mails to your own :

That’s it!

 

HTML markup

Screenshot

Contact Form

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

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 :

That’s it!

HTML markup

Screenshots

Newsletter

Newsletter


Input


Sella - Marketing HTML Template have two variations of Input

  • form-control-light
  • form-control-bordered-dark

HTML markup

Screenshots

Inputs Variations

Inputs Variations


Textarea


HTML markup

Screenshot

Text Area Examples

Text Area Examples


Search


HTML markup

Screenshot

Search

Search


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/


Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!