Kilimandjaro Technical Documentation

It's an easy to use template, let's go !

Overview

What is Kilimandjaro ?

Marketplace-Image

Kilimandjaro is an all inclusive Website Pack design for HubSpot users to get a great website experience that is really easy-to-use and focused on conversion.

 


What's included in this template ?

  • 2 headers
  • 51 templates with helper text
    • 1 generic template (flexible)
    • 6 pre-built templates : Homepage, About us, Team, Project List, Project Item
    • 7 templates with column system : 1 column, 2 columns and 3 columns
    • 2 templates for Landing pages (fixed and flexible)
    • 3 email templates : newsletter, blog post promotion, offer promotion
    • 2 templates for Blog Listing (List or Grid)
    • 1 template for Blog Post
    • All system template : search, unsubscribe, 404, 500, subscription preferences, update confirmation
  • 42 custom modules
  • Color & Style Customization Options in 1 CSS stylesheet

 

Kilimandjaro has been developed with  and lots of   by the Ideagency Team, enjoy !

Installation

How start with Kilimandjaro ?

WHERE DO I FIND MY NEW KILI TEMPLATE PACK ONCE IT HAS BEEN PURCHASED ?

Once your Kilimandjaro template pack is purchased, you'll find all the templates and files directly in the Design Manager of the Hubspot CMS.

 

1 - When you're on the Hubspot Platform, go to 'Marketing / Files and Templates / Design Tools' :

Capture d’écran 2019-08-22 à 10.56.32

 

2 - Now, you are in the Design Manager. Take a look on the left sidebar, you're new Kilimandjaro template pack will be there with all the templates and files :

 

Capture d’écran 2019-08-22 à 11.02.45

 

 

CLONING MY TEMPLATE BEFORE USING IT

Before you start using Kilimandjaro template pack, it's better to clone the sources files to always keep a back-up of your template if anything break during the website development or during its maintenance.

> How to clone the template pack:

1 - Go the Marketing/Files and templates/Design Tools 

2 - Select and right click on all the folder Kilimandjaro 

Capture d’écran 2019-11-27 à 11.22.14

3 - Click on Clone folder

 

 

LOCATE THE STYLESHEET ATTACHED TO THE TEMPLATE PACK

One of the things which makes Kilimandjaro easy-to-use is that all the CSS of the template is attached in one stylesheet.
How to locate it : 

 

1 - You are in the Design Manager of the Hubspot CMS and you can see all the Kilimandjaro files

Capture d’écran 2019-08-22 à 11.02.45

 

2 - Then, go to 'Kilimandjaro/CSS/kili-main-style.css' 

Capture d’écran 2019-08-29 à 09.47.01

 

3 - Once you've clicked on the css file, you'll get all the Klimandjaro CSS

Capture d’écran 2019-08-29 à 09.48.52

Setup

How setup your new template pack ?

CUSTOM FONTS AND COLORS

We tried to simplified as much as possible the edition of your website's colors and fonts families without breaking the overall harmony.

 

1 - To edit them, go to 'Kilimandjaro/CSS/kili-main-style.css' in your Hubspot Design Manager.

Capture d’écran 2019-08-29 à 09.48.52

 

2 - At the top of the stylesheet, you'll get all the global css code for fonts and colors. 

Capture d’écran 2019-11-18 à 11.37.43

 

3 - At this point, you can edit your two main fonts by importing them from Google Font or using @font-face rule. Then edit all the theme colors below : 

  • Text color
  • Title h1 color
  • Title h2 color
  • Titles color
  • Link color
  • Hover link color 
  • Primary and secondary background color 
  • Icons color
  • Top bar colors 
  • Bottom bar colors

 

In the Hubspot platform, you can create your own navigation menu directly in the Settings.

1 - When you are in the Settings, click Website/Navigation

Capture d’écran 2019-11-26 à 12.09.08

 

2 - At this point, you can create or edit your own navigation menu

Capture d’écran 2019-11-26 à 12.11.00

Capture d’écran 2019-11-26 à 12.11.31


 

UPDATE THE GLOBAL HEADERS

The Kilimandjaro template pack have two different global header which differentiate complex and simple templates : 

 

  • Kili Global Group Header simple

Capture d’écran 2019-11-26 à 16.25.14

 

  • Kili Global Group Header complex

Capture d’écran 2019-11-26 à 16.24.57

 

The Kilimandjaro Headers simple and complex are global modules. You won't be able to edit them directly in the Hubspot Page Builder.

Capture d’écran 2019-11-26 à 16.14.07

Capture d’écran 2019-11-27 à 09.38.18

 

> How to edit Kilimandjaro Global Group Header simple : 

Capture d’écran 2019-11-26 à 16.14.07

1 - Go in the Hubspot Design Tools (Marketing/Files and Templates/Design Tools), and select 'Kili Global Header Simple' module

Capture d’écran 2019-11-26 à 17.01.55

 

2 - Now you are in the module source code and you can click on 'Edit Global and Smart content' on the right sidebar

 

3 - Then, you can edit the Global Header simple content like the logo and set the navigation menu you created before

Capture d’écran 2019-11-26 à 17.09.55

 

> How to edit Kilimandjaro Global Group Header complex : 

Capture d’écran 2019-11-27 à 09.38.18

1 - It's the same way as the Global Header simple. Go in the Hubspot Design Tools (Marketing/Files and Templates/Design Tools), and select 'Kili Global Header Complex' module

Capture d’écran 2019-11-27 à 09.35.07

 

2 - Now you are in the module source code and you can click on 'Edit Global and Smart content' on the right sidebar

 

3 - Then, you can edit the Global Header complex content like the topbar, the logo and set the navigation menu you created before

Capture d’écran 2019-11-27 à 09.35.07

 

The Kilimandjaro Footer is a global module. You won't be able to edit it directly in the Hubspot Page Builder.

Capture d’écran 2019-11-26 à 14.34.46

 

The footer is editable directly in the Hubspot Design Manager : 

1 - You are in the Hubspot Design Manager (Marketing/Files and Templates/Design Tools), and select the 'Kili Global Footer' module

Capture d’écran 2019-11-26 à 14.26.42

 

2 - Now, you are in the source code of the 'Kili Global Footer' module, click on 'Edit global and smart content' on the right sidebar

Capture d’écran 2019-11-26 à 14.26.57

 

3 - You are now on the right place to edit the global content of the Kilimandjaro Footer

Capture d’écran 2019-11-26 à 14.29.48

 

 

SETUP THE BLOG

Kilimandjaro template pack has 3 templates, with complex and simple header, for the blog section : 2 for Blog list and 1 for Blog post.

 

  • Blog List default

Capture d’écran 2019-11-27 à 09.49.10

 

  • Blog List grid

Capture d’écran 2019-11-27 à 09.48.46

 

  • Blog Post

Capture d’écran 2019-11-27 à 09.50.05


> How to set the blog templates on your website : 

1 - Go to the settings with the toothed wheel on top right on the screen and select Website/Blog

Capture d’écran 2019-11-27 à 09.54.47

 

2 - Then, select Templates on the top tab

Capture d’écran 2019-11-27 à 09.57.01

 

3 - At this moment, you will be able to set the template for your Blog List and your Blog Post

Capture d’écran 2019-11-27 à 09.59.53

Capture d’écran 2019-11-27 à 09.59.59

 

 

SETUP SYSTEM PAGES 

Kilimandjaro has 10 system page templates. You can see the list here.

To set them on your website : 

1 - Go the Settings in your Hubspot platform with the toothed wheel on top right. 

Capture d’écran 2019-11-18 à 12.13.15

2 - Then, click on Website/Pages

Capture d’écran 2019-11-18 à 12.15.04

 

3 - Finally, click on the tab System Pages and at this point, you will be able to set the templates for the system pages of your website

Capture d’écran 2019-11-18 à 12.19.32

 

Templates

The list of predefined templates

Templates Complex

All the templates 'complex' include a more advanced header with a top header.

Templates Description Demo Modules List available
Homepage 1 Complex Kili Home Page first style with Complex header Live demo
  • Kili Hero Banner 1 
  • Kili Services 1 
  • Kili Image and Tab
  • Kili Parallax Title Desc CTA
  • Kili Title Tabs
  • Kili Pricing Table 1
  • Kili Testimonials 1
  • Kili Last Posts
  • Kili Logo Carousel
HomePage 2 Complex Kili Homepage second style with Complex header Live demo
  • Kili Hero Banner 3
  • Kili Services 1
  • Kili Image Text 
  • Kili Pricing Table 1
  • Kili Testimonials 
  • Kili Last Posts
  • Kili Logo Carouse
Project List Complex A template to introduce all your project items Live demo
  • Kili Hero Banner 2
  • Kili Projects List Content
Single Project Complex A template to present each project you've done Live demo
  • Kili Hero Banner 2
  • Kili Project Content Heading
  • Kili Title Tabs
Our Team Complex A template to introduce all your awesome team members Live demo
  • Kili Hero Banner 2
  • Kili Image Text 
  • Kili Services 2
  • Kili Testimonials 
  • Kili Counter 
  • Kili Team V1
Layout 1 Column Complex A full width content template with one flexible column to add any modules you want. Live demo
  • No fixed modules 
  • Add the Kili modules you need
Layout 2 Columns Equals Complex A template with 2 equals flexible columns and 1 full width flexible column to add the modules you need. Live demo
  • No fixed modules 
  • Add Kili modules you need
Layout 2 Columns Left Complex A template with a third flexible column and a two-thirds flexible column to add Kili modules you need. Live demo
  • No fixed modules
  • Add Kili modules you need
Layout 2 Columns Left Submenu Complex A template with a two-thirds flexible column and a third column to the left which contain a submenu. Live demo
  • Submenu module 
  • No more fixed modules 
  • Add Kili modules you need
Layout 2 Columns Right Complex A template with a third flexible column to the right and a two-thirds flexible column to add Kili modules Live demo
  • No fixed modules 
  • Add Kili modules you need
Layout 2 Columns Right Submenu Complex A template with a two-thirds flexible column and a third column to the right which contain a submenu. Live demo
  • Submenu module 
  • No more fixed modules 
  • Add Kili modules you need
Layout 3 Columns Equals Complex A template with 3 equals flexible columns and 2 full width flexible column to add Kili modules Live demo
  • No fixed modules
  • Add Kili modules you need

Templates Simple

All the templates 'simple' include a simple header with a default navigation and a search input.

Templates Description Demo Modules List available
Homepage 1 Simple Kili Home Page first style with Simple header Live demo
  • Kili Hero Banner 1
  • Kili Services 1
  • Kili Image and Tab
  • Kili Parallax Title Desc CTA
  • Kili Title Tabs
  • Kili Pricing Table 1
  • Kili Testimonials 1
  • Kili Last Posts
  • Kili Logo Carousel
Homepage 2 simple Kili Homepage second style with Simple header Live demo
  • Kili Hero Banner 3
  • Kili Services 1
  • Kili Image Text 
  • Kili Pricing Table 1
  • Kili Testimonials 
  • Kili Last Posts
  • Kili Logo Carousel
Project List simple A template to introduce all your project items Live demo
  • Kili Hero Banner 2
  • Kili Projects List Content
Single Project Simple A template to present each project you've done Live demo
  • Kili Hero Banner 2
  • Kili Project Content Heading
  • Kili Title Tabs
Our Team Simple A template to introduce all your awesome team members Live demo
  • Kili Hero Banner 2
  • Kili Team V1
About Us Simple A template to introduce all your business and your identity Live demo
  • Kili Hero Banner 2
  • Kili Image Text 
  • Kili Services 2
  • Kili Testimonials 
  • Kili Counter 
  • Kili Team V1
Layout 1 Column Simple A full width content template with one flexible column to add any modules you want. Live demo
  • No fixed modules 
  • Add Kili modules you need
Layout 2 Columns Equals Simple A template with 2 equals flexible columns and 1 full width flexible column to add the modules you need. Live demo
  • No fixed modules 
  • Add Kili modules you need
Layout 2 Columns Left Simple A template with a third flexible column to the left and a two-thirds flexible column to add Kili modules you need. Live demo
  • No fixed modules
  • Add Kili modules you need
Layout 2 Columns Left Submenu Simple A template with a two-thirds flexible column and a third column to the left which contain a submenu. Live demo
  • Submenu module 
  • No more fixed modules 
  • Add Kili modules you need
Layout 2 Columns Right Simple A template with a third flexible column to the right and a two-thirds flexible column to add Kili modules Live demo
  • No fixed modules 
  • Add Kili modules you need
Layout 2 Columns Right Submenu Simple A template with a two-thirds flexible column and a third column to the right which contain a submenu. Live demo
  • Submenu module 
  • No more fixed modules 
  • Add Kili modules you need 
Layout 3 Columns Equals Simple A template with 3 equals flexible columns and 2 full width flexible column to add Kili modules Live demo
  • No fixed modules
  • Add Kili modules you need

Templates Landing Pages

Here is two templates for your landing pages

Templates Description Demo Modules List available
Landing Page The first Landing Page template Live demo
  • Kili Hero Banner LP
Landing Page Generic The second Landing Page template Live demo
  • Kili Hero Banner LP 2
  • Kili Section Form

Templates Blog

Here the blog templates

Templates Description Demo Modules List available
Kili Blog List default A default blog list template Live demo
  • Kili Blog List Hero Banner 
  • Blog Content
  • Recent Posts
  • Popular Posts
Kili Blog List Grid A grid template for your blog list Live demo
  • Kili Blog List Hero Banner 
  • Blog Content
Kili Blog Post A default template for your blog post Live demo
  • Kili Blog Post Hero Banner 
  • Blog Content
  • Recent Posts
  • Popular Posts
KiliComplex Blog List default A default default template for your blog list with complex header Live demo
  • Kili Blog List Hero Banner 
  • Blog content
  • Recent Posts
  • Popular Posts
KiliComplex Blog List Grid A grid template for your blog list with complex header Live demo
  • Kili Blog List Hero Banner 
  • Blog Content 
KiliComplex Blog Post A default template for your Blog post with complex header Live demo
  • Kili Blog Post hero Banner 
  • Blog content 
  • Recent Posts 
  • Popular Posts

Templates Email

Here is the templates for your Email Ressource, Post Promotion and Subscription

Templates Description Demo Modules List available
Email Ressource A template for your email ressource Live demo
  • Default email template
Email Post Promotion A template for your Email Post Promotion Live demo
  • Default email template
Email Subscription A template for your email Subscription Live demo
  • Default email template

Templates System page

Here are the templates for each system pages

Templates Description Demo Modules List available
404 Error Page Complex A template for your page 404 Live demo
  • Default template
404 Error Page Simple A template for your page 404 with simple header Live demo
  • Default template
505 Error Page Complex A template for your page 505 with complex header Live demo
  • Default template
505 Error Page Simple A template for your page 505 with simple header Live demo
  • Default template
Preferences Page Complex A template for Email preferences with complex header Live demo
  • Default template
Preferences Page Simple A template for Email preferences with simple header Live demo
  • Default template
Confirmation Page Complex A template for email confirmation with complex header Live demo
  • Default template
Confirmation Page Simple A template for email confirmation with simple header Live demo
  • Default template
Unsubscribe Page Complex A template for unsubscribe Email with complex header Live demo
  • Default template
Unsubscribe Page Simple A template for unsubscribe Email with simple header Live demo
  • Default template

Modules

How to use Kilimandjaro modules ?

Hero Banner module

Kilimandjaro Hero Banner

Accordion module

Kilimandjaro Accordion

Image and Tab module

Kilimandjaro Image and Tab

Counter module

Kilimandjaro Counter Module

Full Width Text module

Kilimandjaro Full Width Text

Image and Text module

Kilimandjaro Image Text

Logo Carousel module

Kilimandjaro Logo Carousel

Parallax section module

Kilimandjaro Parallax Section-1

Pricing Table module

Kilimandjaro Princing Table

Services module

Kilimandjaro Services

Team module

Kilimandjaro Team

Testimonials module

Kilimandjaro Testimonials

Title tabs module

Kilimandjaro Title Tabs