# Composer - Responsive Multiconcept Theme

Created : 26th September 2016
Last Update : 27th September 2016
By : Innwithemes
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to ask via Support Forum. Please rate our theme if you like it.

If you like to add more feature, feel free to contact us. We will do it if possible.

Contact us

### Table Of Content

### 1. About Theme

Details about Composer Theme

### 1.1. Theme Features

List of Theme Features

### 1.2. What's in the Box?

What you get in this theme

### 1.3. Licence

Explain Themeforest Licence

### 2. Getting Started

Theme Requirements and Server Configuration

### 2.1. Install CMS

Install WordPress on your Server

### 2.2. Server Settings

Some of the Server configuration

### 3. Theme Setup

### 3.1. Theme Installation

How to Install Theme

### 3.2. Install Plugins

Installing Required Plugins

### 3.3. Demo Content

Import Demo Content

### 3.4. Slider Revolution

Importing Revolution Slider

### 3.5. Setting Up Pages

Choose Front and Post page

### 3.6. Child Theme

Style Using Child Theme

### 4. Navigations

Explain about Navigations

### 4.1. Menu Items

How to create and adding menu?

### 4.2. Dropdown Menu

How to create dropdown menu?

### 4.3. Mega Menu

How to create and activate mega menu?

### 5. Sidebar

Create custom sidebar and adding widget

### 5.1. About Sidebar

Understanding about Default Sidebars

### 5.2. Custom Sidebars

How to create custom sidebar?

### 5.3. Adding Widgets

How to adding widget to the sidebar?

### 6. Basic Styling

Learn to change Logo/Favicon, Custom CSS, Body Layout/Width, Typography and Color Adjustment

### 6.1. Logo/Fav Icon

How to change logo/favicon?

### 6.2. Custom CSS

Adding CSS property

### 6.3. Layout/Width

Change Body layout & width

### 6.4. Typography

Changing Theme fonts

### 6.5. Theme Color

Explain color settings

### 6.6. Body Background

Explain body backgrounds

### 7. Layout

Learn to adjust the layout for Page and Blog related pages layout.

### 7.1. Page layout

Accessing/Adjusting layout for Pages

### 7.2. Blog layout

Adjusting layout for Blog related pages

### 8. About Header

Learn to know how to adjust header?

### 8.1. Header layout

Adjusting header layout

### 8.2. Customize Header

Header styling & options

### 9. Credits

Files included in this template

### 8. Thank You!

Thanks for purchasing our template

## 1. About Theme

Created to help you make awesome websites in just minutes. Composer has tons of shortcodes there’s no need for coding knowledge.

### 1.1. Theme Features

Composer Theme comes with lots of features. This section listed main features avaliable in this theme.

1. Fully Reponsive Design
2. Retina Ready
3. Theme Created using HTML5/CSS3 and Bootstrap
4. 1600+ Icon Fonts Included
5. Unlimited Colors
6. Filterable Portfolio
7. Contact Form 7
8. Woocommerce Integrated
9. Tons of Shortcodes
10. Shortcodes Generator

### 1.2. What's in the Box?

Let Composer take your website where your imagination wants it to go.

1. A professionally designed premium WordPress theme comes with above all of its features
2. Composer has 35+ unique concepts which helps to achieve your expectations without any coding knowledge.
3. 3 Premium plugins included ( Visual Composer $34, Ultimate VC Addon $18 and Slider revolution $19 )
4. Theme support provided by our professional support team. Please Open Ticket here.

### 1.3. Licence

All licenses on the Envato Market sites are for a single use. If you are going to use Composer on one domain, or multiple subdomains, you will only require one License. If you are going to use Composer on multiple domains, then you will need to purchase a separate License for each domain. Read more about licensing here

## 2. Getting Started

If you’ve recently purchased a hosting plan and a domain name, the next step is to install WordPress on your server. Here is the few simple guide help you!

### 2.1. Install CMS on your Server

There is the ways to install wordpress in your server are as follows

##### Useful Articles

Installing WordPress on a Local Server Environment

How to Move WordPress From Local Server to Live Site

##### Useful Video Tutorial

How to install Wordpress on you Server using CPanel

How to install Wordpress on you Server using FTP

### 2.2. Server Configuration

If you would like to get this theme on your site, please make sure you have the installed WordPress on your server. To successfully run Composer on your website we recommend a certain PHP and WordPress configuration setting.

##### Requirements

Please check if these requirements are met. WordPress 4.0 or higher, PHP 5.4 or higher, MySQL 5 or higher. If your PHP version is lower than 5.4.x please contact your hosting service provider to have them increase the PHP version on your server.

##### Configuration

Memory Limit: Sometimes a WordPress Memory Exhausted error shows up when activating a new plugin or doing some other task. If it happens some fatal errors will display. You can have a closer look at how to increase the PHP memory limit here.

Max Upload Size: Depending on the web hosting company you choose and the package you select, each of you will see maximum file upload limit on your Media Uploader page in WordPress. You can have a closer look at how to increase the PHP Max Upload Size here. Few of the optional settings for php.ini file below:

- post.max_vars = 5000
- request.max_vars = 5000
- max_execution_time = 300

## 3. Theme Setup

Please make sure WordPress installed on your server. Get Composer on your site, Please follows the steps as per instructions.

### 3.1. Theme Installation

There few ways to upload theme in wordpress are as follows:

##### 3.1.1. Adding New Themes using the Administration Panels

Installing Composer Theme from the WordPress admin dashboard

1. Log in to the WordPress Administration Panels.
2. Navigate to Appearance > Themes > Add New.
3. Click Install Themes and click the Upload button.
4. Navigate the composer.zip file on your computer and click Install Now.
5. Once you activate Composer, you will be redirected to our Welcome Screen. There you will see a notification message to install and activate the required & recommended plugins.
6. Simply click the Install button on each plugin to install it.

##### 3.1.2. Adding New Themes by using cPanel

If your host offers the cPanel control panel then follow these instructions.

1. In cPanel File Manager, Navigate to your Themes folder.
2. Upload and Unzip the composer.zip to theme folder wp-content > themes folder.
3. From the Available Themes section, Select Composer theme and click on the activate.

##### 3.1.3. Adding New Themes Manually (FTP)

To add a new Theme to your WordPress installation, follow these basic steps:

1. Download the Theme archive and extract the files it contains. You may need to preserve the directory structure in the archive when extracting these files.
2. Using an FTP client to access your host web server, create a directory name Composer and to save Composer Theme in the wp-content/themes directory provided by WordPress. For example, our Theme is named Composer so directory should be in wp-content/themes/Composer.
3. Upload the Theme files to the new directory on your host server.
4. From the Available Themes section, Select Composer theme and click on the activate.

##### Useful Video Tutorial

How to install, upload and activate WordPress Theme?

### 3.2. Install Plugins

Our theme includes plugins that are also included with your purchase, and are included in the ThemeForest download package. You can install them from the Composer > Plugins > Install Plugins.

##### 3.2.1 Required Plugins

1. Navigate to Composer > Plugins > Install Plugins
2. Install and activate the required plugins such as Composer Core Plugins and WPBakery Visual Composer.
3. After activate the WPBakery Visual Composer, additonally activate the Ultimate Addons for Visual Composer and it helps the theme smoothier.

##### 3.2.2 Recommended Plugins

1. Navigate to Composer > Plugins > Install Plugins
2. WooCommerce – This plugin is free. If creating an online shop, we recommend using WooCommerce.
3. Revolution Slider – This is a premium slider plugin helps to create sliders
4. Contact Form 7 – This plugin is free. We recommend using Contact Form 7 if you need to use forms on your website pages.

### 3.3. Upload Demo Content

You can upload demo content into your site. To upload demo content, please follow following steps.

##### 3.3.1 Install Demo Data using WordPress Importer

1. Navigate to Composer > Tools > Import > WordPress
2. Install and activate the WordPress Importer free plugin.
3. Choose the demo.xml file from the theme package and import the file.

### 3.4. Importing Revolution slider

Install and activate the Revolution Slider premium plugins

1. Navigate to Composer > Revolution Slider > Import Slider
2. Choose the slider file ( Eg: business.zip ) from the theme package ( package-composer/Demo Slider ) and click the Import Slider
3. For the elaborated details about the Revolution Slider settings, layout, animation, etc.. Please look at the Revolution Slider online documentation

### 3.5. Setting Up Pages

Setting up your homepage and post page in Composer is the same as setting it up in any other typical WordPress installation. You simply need to specify in the Reading Settings which page will be your Main Home Page and Blog Page.

1. Navigate to Composer > Settings > Reading
2. Select the static page options
3. Choose the page you want as your home page from the Front Page dropdown list.
4. As the same way select the blog page as the Posts page.

### 3.6. Child Theme

Composer theme package includes a child theme. A WordPress child theme allows you to apply custom code changes to your site. Using a child theme ensures your customizations will not be overwritten, even if you update the parent theme.

1. Upload and activate the Composer Child Theme is the same way how you activate the parent theme.
2. Whatever you want to customize css styles, Edit the child-theme-styles.css in the Composer Child Theme.

## 6. Basic Styling

Explains about basic styling such as Logo/Favicon, Custom CSS, Body Layout/Width, Typography and Color Adjustment.

### 6.1. Logo/Favicon

Logo is a visual cornerstone of a company's brand. Your company's identity is visually expressed through its logo. A favicon is like a miniature logo. It helps internet users remember your brand. For changing Logo, You can do so by simply navigating to the Appearance > Theme Options > General.

For changing Logo for particular page, You can do so by simply navigating to the page options ( Page > Add New > Page Options > General ).

### 6.2. Custom CSS

If you have the knowledge of CSS, This setting is helpful to meet the needs of administrators who would like to add their own CSS to their theme. To add custom CSS styles that override Theme default styles. For adding Custom CSS, You can do so by simply navigating to the Appearance > Theme Options > General.

### 6.3. Body Layout & Width

It includes few body layouts such as Wide, Boxed and Frame. For accessing the Body layout & width, You can do so by simply navigating to the Appearance > Theme Options > General.

1. Wide: The wide layout occupies the entire window width of the screen. You can control the width using Content wrap setting.
2. Boxed: The boxed layout helps to shrink the header and footer. It takes boxed layout width from Main Wrap setting.
3. Frame: The frame layout make the website looks like a frame, 20px white gap covers the entire page.

### 6.4. Typography

It includes two types typography control.

##### 6.4.1. Typography

You can do so by simply navigating to the Appearance > Theme Options > Typography. Here you can change Primary Font( It applies headings such as h1,h2,h3,h4,h5,h6 ), Body font( It applies all fonts paragraph, link, lists, etc..) and Content font( It applies for Quotes ).

##### 6.4.2. Advance Typography

To take full control of the font settings please turn on the Advance typography. You can do so by simply navigating to the Appearance > Theme Options > Advance Typography. Here you can adjust the fonts settings for each and every elements individually.

### 6.5. Theme Color

You can do so by simply navigating to the Appearance > Theme Options > Styling Options. Here you can change the color of the theme and change color for some individual elements. Please make sure you turn on the Custom Styles

### 6.6. Body Background

You can do so by simply navigating to the Appearance > Theme Options > Styling Options. Here you can adjust the body background of the theme. Please make sure you turn on the Customize Body Background

If you want to adjust body background color for individual page. In the below of the page, you can see Page Options. In the Page Options Tab please select the General.

If you want to adjust body background color for blog, archives, search, single blog and 404 pages, Please go to Appearance > Theme Options > Choose appropriate settings panel and change the body background color.

## 7. Layout

Layout is the part of graphic design that deals in the arrangement of visual elements on a page.

### 7.1. Page layouts

It contains 5 page layouts such as Fullwidth, Left Sidebar, Right Sidebar, Left Navigation, Right Navigation. For accessing the page layout, You can do so by simply navigating to the Page > Add New.

In the below of the page, you can see Page Options. In the Page Options Tab please select the Layout

1. Full Width: The fullwidth layout is the default layout for the theme and it displays your content with a white background through out.
2. Left Sidebar/Right Sidebar: Both layout oocupies two third part of left/right widget area. Below Select Sidebar option helps you to change sidebar for particular page. Default sidebar is Primary Sidebar in widget area ( Appearance > Widgets ). For clear, view attached below images.
3. Left Nav/Right Nav: Both layout occupies two third part of left/right menu list area. Below Left Side Navigation/Right Side Navigation option helps you to change naviation for particular page. Default navigation is Left Nav/Right Nav in menu settings ( Appearance > Menu ). For clear, view attached below images.

### 7.2. Blog Layout

It contains 3 layouts such as Fullwidth, Left Sidebar and Right Sidebar. This layout setting is similar to Blog, Archives, Single Blog and Search Page. For accessing the blog layout, You can do so by simply navigating to the Appearance > Theme Options > Blog.

1. Full Width: The fullwidth layout is the default layout for the theme and it displays your content with a white background through out.
2. Left Sidebar/Right Sidebar: Both layout occupies two third part of left/right widget area. Above Choose the Register Sidebar option helps you to change sidebar for particular page. Default sidebar is Blog Sidebar in widget area ( Appearance > Widgets ).

## 8. About Header

Tons of options here to customize header, Those options help you to achieve what you expect.

### 8.1. Layout

For accessing the header layout, You can do so by simply navigating to the Appearance > Theme Options > Header Options.

It contains two types of header layout such as Wide and Boxed. Wide layout occupies entire window width and boxed layout shrink the header and it takes width from Appearance > Theme Options > General Content Wrap settings.

If you want to change the header for individual page. In the below of the page, you can see Page Options. In the Page Options Tab please select the Header.

### 8.2. Customize Header

Tons of header customization feature in this theme. This section helps you to know about this properly.

##### 8.2.1 Header Overview

Please select the header variations option in Appearance > Theme Options > Header Options > Menu Layout. This theme contains 12 header style with tons of combinations.

Header Logo: You want to know about customizing Logo, Please verify this section for further details here

Main Navigation, Left and Right Navigation: Most of the header variations are using Main navigation and Centered Logo Headers using two navigations( Left Navition and Right Navigation ). Please verify this section to know about navigation here

Left Side and Right Side Element: For adding or modifying this section, Please go to Appearance > Theme Options > Header Builder > Main Header

##### 8.2.2 Top Header

Top header really helps to display some short information in header area.

For enabling this top header, You can do so by simply navigating to the Appearance > Theme Options > Header Options > Show Top Header?

After enable top header, Top Header Position option and Top Header Background Style options displaying below. You can choose wherever you want to display wheather its top or bottom and choose how it looks?.

Lot of option here to add in top header using header builder. Use the drag and drop builder to enable and position of the top header elements. For accesing this option, Please go to Appearance > Theme Options > Header Builder > Top Header

Few of the things have a options to changing text, URL and style.

Custom Text, Telephone, Email and Social Icons: For those options you can edit the values in Appearance > Theme Options > Top Header

Menu: For Menu you can add the menu in Appearance > Menu and choose the menu location as Top Header Nav

Woocommerce Cart: Please make sure you active the Woocommerce plugin, if you did it ll display.

Search: You can change the search form placeholder text using this option Appearance > Theme Options > General > Search Text

WPML Languages: Please make sure you active the WPML plugin. You can also change WPML selector styles as well. Please go to Appearance > Theme Options > Header Options

##### 8.2.3 Header Styling Options

You can change the text color, background color, link and hover color of the header, top header and menu. For customizing the styling, please go to Appearance > Theme Options > Header Builder > Custom Header Styles Please turn on the options and customize header style whatever you want.

Additionally you can customize lot of options like enabling sticky header, transparent header, mobile dropdown menu and Header and Menu background style, etc.. For changing those options, Please navigate to Appearance > Theme Options > Header Options

Note: If you want to adjust header options for individual page. In the below of the page, you can see Page Options. In the Page Options Tab please select the Header. If any of the settings as Default It takes the value from theme options.

### 8. Credits

#### Images

Images are not included in the template. Most of them are premium images from here

#### Scripts Used

- Twitter Bootstrap (http://twitter.github.com/bootstrap/)
- Font Awesome (http://fortawesome.github.com/Font-Awesome/)
- jQuery (http://www.jquery.com/)
- Modernizr (http://modernizr.com/)
- Mobile Menu (https://github.com/mambows/mobilemenu)
- jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
- Magnific Popuphttp://dimsemenov.com/plugins/magnific-popup/

### 8. Thank you

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions about this theme. No guarantees, but I'll do my best to assist. If you have a more general question about the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.