Kolaso Theme Documentation

kolaso WordPress Theme

kolaso is a pixel perfect creative multi purpose Landing page WordPress Theme based on Html5, CSS3 & designed with great attention to details, flexibility and performance. It is ultra professional, smooth and sleek, with a clean modern layout. Kolaso specially designed for startup, mobile app, agency, course, freelancer, service, product, sass software, event related services agency, freelance, portfolio, photography, corporate and ecommerce shop.

Thank you for purchasing kolaso theme. This documentation will help to know more about theme and how is structured and how to use the theme features.

Requirements

To be able to use kolaso theme, you must have the following:

  • Setup WordPress CMS Last Version.
  • Upload WordPress Theme (kolaso).
  • An FTP tool to upload the files for (kolaso)
  • Make sure you upload the required assets files/folders listed below:
    • /assets/* – Assets Folder
    • /framework/* – Framework Folder
    • /assets/style.css – Main Stylesheet File
    • functions.php – Main theme php functions
    • *.php – Other Files

Installation

Follow the steps below to get started with your kolaso :

  1. Open the Package Folder to find all Files.
  2. You will need to upload requirement files

Active Theme

Follow this step you need:

  1. You will need to active kolaso theme from wp-admin > apperance > themes.

screenshotscreenshotscreenshot

Active Plugins

Follow the steps below to get started with activation required plugins:

  1. Active Plugins Which get with theme activation
  2. In your admin panel, go to Appearance -> Install Plugins.
  3. Active wordpress import plugin, you can find it wp-admin > tools > import > wp wordess import
  4. Active importer/exporter widget plugin, you can find it here

screenshotscreenshotscreenshot

Import Content

Follow the steps below to import content to website:

  1. Active wordpress import plugin
  2. Uploas data.xml which included in demo-data Folder

screenshotscreenshotscreenshot

  1. You need upload two files on the path below:
  2. – attachment-data.xml
  3. – data.xml

screenshotscreenshot

Update Theme Options

Greate, Now start to import options for website

  1. you can find theme option in wp-admin > theme options
  2. Get options form theme-options.json which include in Package
  3. Copy options form file to your theme
  4. CLick Import.

screenshotscreenshotscreenshot

Import Widgets

Follow the steps below to import revolution slider to website:

  1. active importer/exporter widget plugin, you can find it here
  2. import widgets.wie which include in Package

screenshot

Theme Options

Follow the steps below to know how to edit theme options:

Logo Optionsscreenshot

Layout Optionsscreenshot
Custom Css And Javascriptscreenshot
Social Networkscreenshot
Header Optionsscreenshot
Module Buliderscreenshot
Header Buliderscreenshot
Page Title Optionsscreenshot
Blog OptionscreenshotBlog Option (Archives)screenshotBlog Option (Single)screenshot
Portfolio OptionscreenshotPortfolio Option (Single)screenshot
Shop OptionscreenshotShop Option (Archive Page)screenshot
Style Optionsscreenshot
Typography Optionsscreenshot

Mega Menus

From the ‘Appearance’ menu select the ‘Menus’ option to bring up the Menu Editor.

screenshot1. select form custom link and check create mega menu for this item

screenshot2. Create Columns for what you want and remove link

screenshot3. Add link if you need to add icon you can add icon code from Font Awesome Library or Themify Icons

screenshot

Page

Page OptionsWith the Page Options specially built for our themes, you can easily customize Header, Page Title, Footer, Page Option, One Page of every page.

NoteThis Edits For Current page Only
BodyscreenshotHeaderscreenshotPage TitlescreenshotFooterscreenshotHome Page

To set a page as Home page, go to Settings > Reading in your WordPress Dashboard panel.

screenshotscreenshot

Standard Format

screenshot

Video Format

screenshot

Quote Format

screenshot

Link Format

screenshot

Gallery Format

screenshot

Audio Format

screenshot

Testimonial

screenshotscreenshot

Team Member

screenshotscreenshot

Portfolio

screenshotscreenshot

Client Logo

screenshotscreenshotscreenshot

Elements

Visual Composer is a powerful WordPress page builder that allows you to create complex page layouts without touching a single line of code. To switch to Visual Composer’s Backend Editor, click on this button:

screenshotscreenshotA shortcode selecting panel will show up, you can see all the shortcode available in the theme. Select the one you would like to use.

screenshot

tabs

screenshot

  • Style: select tab style
  • Active Tab: You can active any tab
  • Then you can add any elements you need to put it inside tabs

screenshot

Accordion

screenshot

  • Active Tab: You can active any accordion
  • Style: select accordion style
Heading

screenshot

  • Style Heading: Select Heading color “Dark”, “light”
  • Content Alignment: Select content align “Text Center” , “Text Right” and “Text Left”

screenshot

  • Heading Element Tag: Select Heading Tag “h1”, “h2”, “h3”, “h4”, “h5” and “h6”
  • Title Text: write title heading
  • Content: write title description

screenshot

  • Extra Class: If you wish to add extra class to this element
  • Extra Id: If you wish to add extra id to this element
Clients image

screenshotscreenshotscreenshot

  • Style: select clients style
  • Clients Count: Number Of Items to show

screenshot

  • Client Categories: select Which categories would you like to show
Hero Content

screenshot

  • Style Heading: Select Heading color “Dark”, “light”
  • Content Alignment: Select content align “Text Center” , “Text Right” and “Text Left”

screenshot

  • Heading Element Tag: Select Heading Tag “h1”, “h2”, “h3”, “h4”, “h5” and “h6”
  • Title Text: write title heading
  • Content: write description text
  • Button Link: click on select url to Add link for button.
  • Button Text: Enter text for button.
Popup Video Style

screenshot

  • Popup Video Style: Select Popup Video Style
  • Upload Images: Upload images you want to show in gallery

screenshot

  • Add Video Links: click on select url to Add Url link and text link
Testimonial Block

screenshotscreenshotscreenshot

  • Testimonial Block Style: select Testimonial Block style.
  • Testimonial Block Count: Enter Post Count.

screenshot

  • Testimonial ID: Enter Testimonial id.
Team Block

screenshotscreenshot

  • Team Block Style: select Testimonial Block style.
  • Team Block Count: Enter Post Count.

screenshot

  • Team ID: Enter Team id.
Portfolio Block

screenshotscreenshotscreenshot

  • Style: select Portfolio Block style.
  • Portfolio Block Count: Enter Post Count.

screenshot

  • Enable Fillter Portfolio: Enable / Disable Fillter Portfolio.
  • Default Text: enter text.

screenshot

  • Portfolio Categories: Select Which categories would you like to show?
  • Portfolio ID: Enter Portfolio id.
List icon Block

screenshot

  • Text Content: Enter Text Content.
  • Icon Library: Select Icon library
  • Select Icon: Select Icon
Location Map

screenshot

  • Add A Custom Map Size: set width and height for map.
  • Upload Map Marker: Select Icon library

screenshot

  • Enter A Marker Title: set width and height for map.
  • Address: Enter map locaion Address
  • Lat Position: Enter google map lat long
  • Lng Position: Enter google map lng long
  • Map Zoom: Enter map zoom value
Alert Block

screenshot

  • Style: select alert block Style.
  • Main Alart Color: Select Main Alart Color
  • Background Alart Color: Select Background Alart Color
  • Text Alart Color: Select Text Alart Color

screenshot

  • Alerts Title: Enter Alerts Title.
  • Alerts Description: Enter Alerts Description.
  • Icon Library: Select Icon library
  • Select Icon: Select Icon
Blockquots Blocks

screenshot

  • Style: select Blockquots Style.

screenshot

  • Content: Enter Blockquote Content.
  • Blockquote Title: Enter Blockquote Title.
Buttons

screenshot

  • Style: select Button Style.
  • Button Link URL: click on select url to Add link url and text for button.

screenshot

  • Select Button Width: Select Button width “full width” and “auto width”
  • Select Button Style:Select Button style “background color”, “background Gradient”, “background White” and “background Dark”
  • Select Button Border:Select Button Border “with Border” and “without Border”
  • Select Button Border Style:Select Button Border style “with Border radius” and “with Border radius”
  • Select Button Hover Style:Select Button Hover style “Button Hover Normal” and “Button Hover inverse”
Circles

screenshot

  • Style: select Circles Style.

screenshot

  • Circle Title: Enter Circle Title.
  • Circle Description: Enter Circle Description.
  • Circle Percent: Enter Circle Percent for example 80%.

screenshot

  • Select Circle Style: select Circle Style “show icon” and “show percentage”
Counters

screenshot

  • Counters Style: select Counters Style.
  • Select Counters Layout Color Style: Select Counters Layout Color Style “dark color” and “light color”

screenshot

  • Counters Title: Enter Counters Title.
  • Counters Description: Enter Counters Description.
  • Select Counters Style: Show / Hide icon
Countdown

screenshot

  • Countdown Style: select Countdown Style.
  • Select Countdown Style: Select Select Countdown Style “light style” and “dark style”

screenshot

  • Countdown Year: Enter Countdown Year.
  • Countdown Month: Enter Countdown Month.
  • Countdown Day: Enter Countdown Day.
Timeline

screenshot

  • Timeline Title: select Timeline Title.
  • Timeline From: select Timeline From.
  • Timeline To: select Timeline To.
  • Select Item Position: Select item position “position right” and “position lefta”
Call to action

screenshot

  • Call To Action Style: select Call to Action Style.
  • Select Countdown Style: Select Select Countdown Style “light style” and “dark style”

screenshot

  • Style Heading: select Style Heading “dark” and “light”
  • Call To Action Title: Enter Call to Action Title
  • Call To Action Description: Enter Call to Action Description
  • Button Link: click on select url to Add link url and text for button.
Social icons

screenshot

  • Select Social Media Background Style: Select Social Media Background style “with background” and “without background”
  • Facebook Link: add your facebbok account link
Mailchamp

screenshot

  • Circle Style: Select Circle Style

screenshot

  • Form ID Subscribe: Enter Form ID Subscribe
  • Subscribe Style: Select Subscribe Style “light” and “dark”
Progress Bars

screenshot

  • Progress Bars Style: Select Progress Bars Style

screenshot

  • Progress Bars Title: Enter Progress Bars Title
  • Progress Bars Percent: Enter Progress Bars percent
Pricing

screenshot

  • Pricing Style: Select Pricing Style

screenshot

  • Pricing Title: Enter Pricing Title
  • Pricing Percent: Enter Pricing Percent
  • Pricing Description: Enter Pricing Description

screenshot

  • Button Link: click on select url to Add link url and text for button.
  • Enable Active: Enable / disable active pricing.
Grid Block

screenshot

  • Data Source: Select content type for your grid.
  • Post Count: Enter Post Count.
  • Post Order By: Select Post Order By “Date”, “Random” and “Comment Count”
List Block

screenshot

  • Data Source: Select content type for your grid.
  • Post Count: Enter Post Count.
  • Display Style: Select display style for grid.
  • Post Order By: Select Post Order By “Date”, “Random” and “Comment Count”

Credit Files

I’ve used the following images, icons or other files as listed.

JavaScript Plugins
  1. jQuery
  2. bootstrap
  3. Owl Carousel
  4. Counter Up
  5. Magnific Popup
  6. Images Loaded
  7. Isotope
  8. countdown
  9. jquery gmap
  10. easy pie chart
  11. jQuery Waypoints
Icon Font
  1. FontAwesome
  2. Linearicons
  3. themify
  4. typicons
CSS Library
  1. Animate.css

Support

If you need any help. Feel free to contact us. We will reply within 24 hours. Send a mail from Profile Support

Changelog

Initial Release V1.0

Released on 2 June 2018.

Top