PI of ThemeleadDocumentation

http://themelead.comLatest Update: Oct 5th 2014By: ThemeLeadhttp://themelead.com (http://themelead.com)Email: support@themelead.com (mailto:support@themelead.com)

For support please checkout ThemeLead SUPPORT (http://support.themelead.com/pi)

INTRODUCTION

General

We would like to thank you for purchasing PI! We are sure that you have made an excellent choice in selecting it.You also have agreed that Pi is unique among tons of Premium WordPress themes. Before getting started, pleasemake sure that you always check out PI documentation files. We offer all kinds of useful information that youneed to use PI. Besides, Knowledgebase, Video tutorials, Forum Search(http://support.themelead.com) in our Free support center are available for you to fully satisfy yourquestions. Thank you, we hope you enjoy PI.

WordPress information

To begin with PI, you can get knowledge about WordPress from installing WordPress to FAQs to WordPress.Below are some useful channel for WordPress users:

WordPress general (http://codex.wordpress.org/Installing_WordPress) - General information aboutWordPress how to install it on your server.First steps with WordPress (http://codex.wordpress.org/First_Steps_With_WordPress) - A detaileddocument with many topics about how to begin WordPress.WordPress FAQs (http://codex.wordpress.org/FAQ_New_To_WordPress) - providing answers to basicquestions about WordPress.

Requirement for PI

To use PI, your server must be running WordPress 3.1 or higher, PHP5 or higher, and mysql 5 or higher.

Please make sure that your server is running the minimum requirements to run WordPress at least.Check to ensure that you have updated the latest version of WordPress or download the latest version ofWordPress (https://wordpress.org./) from offical website.

INSTALLATION

The installation of PI does not waste your time. Below are some steps to build your website with our theme:

1. Install via WordPress

H1

H2

Step 1: After getting the installation zip file of Pi, you should navigate to Appearance >>> Theme (H1)

Step 2: Click add new and then wait while the theme uploaded and installed (H2).

Step 3: Click to activate it (H2).

Step 4: Done

2. Install via FTP

Step 1 – Log into your hosting space via an FTP software.Step 2 – Unzip the installation zip file of Pi and ONLY use the extracted PI theme folder.Step 3 – Upload the extracted PI theme folder into wp-content >>> themes folder.Step 4 – Activate the newly installed theme. Go to Appearance >>> Themes and activate it.Step 5 – Follow the steps to install and activate. The other necessary plugins we have include in the themeand all will be ready to use when you do it right.

3. Common Install Errors

3.1. Are You Sure You Want To Do This?

If you get the “Are You Sure You Want To Do This” message when installing PI via WordPress, it means you havean upload file size limit. Install the theme via FTP if this happens, or call your hosting company and ask them toincrease the limit.

3.2. Upload size limit

If you get this message when you install PI on localhost, here is a solution for you:

Step 1 - Find the php.ini file

Step 2 - Find the following lines and adjust the value. We suggest to change the upload file limit to 10M

Step 3 - Done!

THIRD PARTY PLUGINS

1. Install all plugins

automatically

Step 1: Click to Plugins >>> Installed Plugins.

Step 2: There is the notification to install necessaryplugins on the top. Click to "install" all pluginsmentioned in plugins folder.

Step 3: Activate these installed plugins.

Step 4: Done. All plugins are ready to build yourown website.

2. Install all plugins

manually

Besides themelead shortcodes plugins, You have toinstall 3rd party plugins. To install these pluginsmanually, please go to Plugins >>> Add New.Search the name of the plugin, install and activate itas above.

There are 14 plugins you need to install:

Third Party PluginsContact form 7Advanced Custom Fields ProBreadcrumb navxtAdvanced Custom Field: Repeater FeildCustom SidebarsHello DollyMenu ExporterRegenerate ThumbnailsRevolution SliderWooCommerce

ONE CLICK DEMO IMPORT

If you want to import our content like demo, dont' worry because you need to follow 3 simple steps:

Step 1- Install theme and plugins as above.

Step 2- Click to Appearance >>> ThemeOptions

Step 3- Click to "Import Demo Content"

Step 5: Done. All demo content has been automatically imported.

BLOG

1. Create blog single post

Step 1- Navigation to Post in your WordPress admin.Click on Add New to make a new post.

Step 2 - Create a new post with various options

- Create a title and insert your post content in the editing field. You can use any of our shortcodes insidepost.

Add your post format. It includes:

Standard post(http://demo.themelead.com/pi/this-is-a-standard-post-2/)video (http://demo.themelead.com/pi/self-hosted-video/)audio (http://demo.themelead.com/pi/self-hosted-audio/)gallery (http://demo.themelead.com/pi/format-gallery/)link (http://demo.themelead.com/pi/format-link/)

(http://demo.themelead.com/pi/format-link/)(http://demo.themelead.com/pi/format-link/)quote(http://demo.themelead.com/pi/format-quote/)image

If you choose format"video, audio, link, quote, gallery", please customize their detailed options in "Post format".

- Add category, tag and your featured image post fromthe right side. Please add new category if it hasntexisted. Image format will take the featured image asthe post image

Post layout: We include 5 layouts: default, right sidebar,left sidebar, full-width. Choose any fit layout for yoursingle post page.

Custom sidebar name: this is unique option of Pi. Byusing one great third party plugin named Custom

Sidebar by WPMUdev, you can create your own sidebar apart from default sidebars.See full instruction on createa new page section

- Custom top slider for post. Top Slider includesnumber of images will be shown between headerand your post. You can see top slider fron-end(http://demo.themelead.com/pi/gallery-2/)

Firstly, choose show or hide top sliderIn order that top slider can be run, you have toadd some images for slides. Click on AddGallery. You can arrange images into someobjects in Bulk ActionsChoose some details information: auto play,duration time between 2 slides, slide speedYou can choose show or hide pagination andnavigation. Pagination is the sequence ofunder-image circles assigned to images in topslider. While navigation is the arrows to moveleft or rightIf you want slide to be played when scrollingmouse in the scope of top slider, you canchange mousewheel using options to True.Change keyboard using option if you want touse navigation on keyboard.In show/hide cycle, you can choose "True" or"False" if you want to make slides rotation.

- Customize Post format if you choose one of these formats "video, audio, link, quote, gallery".

For format "video", you have some options:

Video format url: you can only add link from Vimeo and YoutubeVideo code: some websites provide video code. Please embed video code herePost media: you can upload your video or audio from your computer

In format "Audio", you can only add url from soundcloud or upload audio file in "Post media"Link format url: option for format "Link" only, please fill in full http:// address

H1

For format "quote": there are 2 options: quote author to fill the authour name, author quote url to addauthor link.For format "gallery": you have some options which have been guided in Top Slider. Please check it tounderstand.

Step 3- Click to Settings >>> Readings to choose number of post can be shown in each blog page.

1. Create a new blog page

There are 5 blog styles: large, medium, timeline, grid, masonry. Each style can be customized in many layouts:default, right sidebar, left sidebar, fullwidth, 100% width.

It is very easy to create your own blog.

Step 1: Choose "Add New" to create a new blogpage.

Step 2: Customizing some special options:

1. Choose Blog Template on Page Attributes. 5 blogtemplates are available: large, grid, masonry,medium, timeline (H2).

Step 3: Customize Page Options. There are 3options you must to change: Page Layout, PageTitlebar and Blog.

Page Layouts is to customize blog content arrangement. You do focus on change page layouts including 5layouts: default, right sidebar, left sidebar, fullwidth, 100% width.Default front-end (http://demo.themelead.com/pi/blog-large-right-sidebar/)Right sidebar front-end (http://demo.themelead.com/pi/sidebar-right-2/)Left sidebar front-end (http://demo.themelead.com/pi/sidebar-left/)Fullwidth front-end (http://demo.themelead.com/pi/blog-grid-no-sidebar/)100% width front-end (http://demo.themelead.com/pi/masonry-fullwidth-3-columns/)Custom sidebar: it is one of new and unique feature of PI. It helps you create your own sidebar widget.Please see more details on page section.Page sidebar width: customize width of sidebar

Background color: set your pagebackground color here.Padding of content: it is a padding at thetop or bottom of the content area. You can fillin appropriate value in pxSpecial page and top menu name: theyare also 2 fanstatic options for creating a newpage in Pi. Check Page section to get detailedinformation.

Page Titlebar:If you don't want to fill the titlename above, you can customize your pagetitlebar here. Beside some simply options, youcan notice some special options in PI:Top Padding and Bottom Padding: It is a lineat the top or bottom of your title area, which isdifferent from padding of content.Background image: select it from "Media" oryour computer. Set your background imageposition among 9 available positions.Titlebar font size: Set the size of your text intitle areaTitlebar layout: Choose from justify or alignleft for alignment of elements on titlebarBackground color: Set your color in title areaBackground parallax: set your title backgroundeffect if you want to see nice paralax effect intitle bar. Here is one example.

- Title opacity: adjust the opacity of titlebar

- Shadow opacity: Shadow makes a dark area fortitlebar here, highlighting your titlebar name. This isthe setting to adjust the opacity of titlebar

- Overlay opacity: An effect cover the surface of titlebar area with a coating. This is the setting to adjust theopacity of overlay

- Clipmask opacity: This is the setting to adjust opacity of clipmask, an effect cleaves scope of title into smallsquares.

Custom title content:You can create your content for title area instead of filling the title name above, whichis the same as customizing post content: you can add image, media or using shortcodes.Here is an beautiful example of using title bar with shortcodes inside:http://demo.themelead.com/pi/about-me/

Blog

You can change some information:

Blog Special Template: There are 6 specialstyles for 3 blog templates: Large, Mediumand MasonryLarge side date front-end(http://demo.themelead.com/pi/side-date-2/)Medium side date front-end(http://demo.themelead.com/pi/medium-side-date/)Masonry 3 columns front-end(http://demo.themelead.com/pi/blog-mansory-fullwidth-3-columns/)Masonry 4 columns front-end(http://demo.themelead.com/pi/100-width-4-columns/)Masonry no isotope front-end (http://demo.themelead.com/pi/no-isotope/)

Display content or excerpt and adjust excerpt length of page content.Blog infinite scroll: to have the feeding effect of post like Facebook!Blog Timeline image: option for Timeline template only. This image should be round and will be shown atthe beginning period of timeline. You can add a beautiful author image like our demoShow/Hide categories filter: It will be displayed like menu bar in Blog Masonry template

Post metadataPost metadata: this options is to customizeblog's single post metadata display in yourblog page.

- Show/Hide post permanlink: Permanlink will belocated in your post title. When clicking on your title,your full single blog post will be shown.

- See a single blog post in a page with full optionsshown in front-end

You can show/hide all elements such as:thumbnail, readmore button, social share,excerpt, author, categories an so on.

To get more information, you can follow:

Blog tutorial video (https://www.youtube.com/watch?v=xSX_6XfprEg&feature=youtu.be)

PORTFOLIO

1. Create a new single portfolio

Step 1- Navigation to Portfolio >>> Add NewPortfolio in Dashboard.

Step 2- We will show the first option: portfoliolayout

Portfolio layout

Portfolio sidebar content is an option where you want to show/hide sidebar, which will display content from metafields such as client, location period, etc in the portfolio information tab. Example here:(http://demo.themelead.com/pi/portfolio/cui-sequitur-mutationem-consuetudium/)

Sticky Sidebar using: you can decide to make the sidebar sticky or not. Example here:(http://demo.themelead.com/pi/portfolio/ut-wisi-enim-ad-minim-veniam-2/)

Show/Hide sidebar content: If choosing hid, the default portfolio layout is full width

Portfolio information - shows you how to set your portfolio font size, your portfolio meta data.

Portfolio size: option for Portfolio Masonry free style: small, big, horizontal, vertical. It will be used to arrageimages nicely. Example here: (http://demo.themelead.com/pi/gallery-masonry-freestyle/)

Portfolio meta:

- Hover enlarge: if shown, featured image of single portfolio will be displayed with full size screen when hoveredin the portfolio page

See an example about your portfolio meta:

Portfolio format: If you choose format "Video, audio,gallery", you can customize by adding video, audioand image here. Their customization is the same asPost format option. See "Create a single blog post" toget full the way to customizeExcerpt: if filling excerpt, a snippet will appeared inportfolio page on the behalf of content of singleportfolio.

To get more information, you can follow:

Front-end settings (http://demo.themelead.com/pi/portfolio/standard-project-item/)

1. Create a new portfolio page

Create new porfolio page is the same as Blogs. However you can change Portfolio tab in Page option instead ofBlogs tab

In Page Attributes, you can choose 4 portfoliotemplate: Portfolio Gallery Grid, PortfolioGallery Masonry, Portfolio Text Grid, PortfolioText Masonry.

In addition to modify Page layout and page titlebarwhich is like doing in Blog section, you can focus onbulding various portfolio page with Portfolio sectionin Page option:

Portfolio Columns: There are 4 options here: 2columns, 3 columns, 4 columns, 5 columns. Soyou can create four styles in each template.Portfolio Styles: There are 2 special styles: Gallery Masonry Free Style, Gallery Grid No Paddingcorresponding to template Gallery Masonry and Gallery Grid.Portfolio items per page: the number of items can be shown in front-end.

Now contemplate these results of Pi in front-end settings:

Gallery Masonry (http://demo.themelead.com/pi/gallery-masonry-3-columns/)Gallery Grid (http://demo.themelead.com/pi/gallery-grid-3-columns/)Text Masonry (http://demo.themelead.com/pi/text-masonry-3-columns/)Text Grid (http://demo.themelead.com/pi/text-grid-3-columns/)Gallery Masonry Free Style (http://demo.themelead.com/pi/gallery-masonry-freestyle/)Gallery Grid No Padding (http://demo.themelead.com/pi/gallery-grid-no-padding/)

PAGE

1. Homepage

With PI, you can create any homepage in the most creative way possible, thanks to a large number ofshortcodes and flexbile layouts from the theme.

Here we provide you 18 demo homepages, each comes with different style and purpose:

Homepage Versions:

1. Homepage 1:

You can insert the following code into the back-end's visual section:

[fullwidth][rev_slider home-slider][/fullwidth][section id="about" padding_top="80" padding_bottom="70"]

[column size="1/3"][iconbox title="Responsive Design" layout="2" icon="http://demo.themelead.com/pi/wp-content/uploads/2014/09/smartphone-641.png" link="http://themeforest.net/user/themelead?ref=themelead" link_text="Learn more →" animation="true" delay="0"]Pi is fully responsive with different handsets and various screens. You are free to surf your web with flexibility in any portable devices at ease.[/iconbox][/column]

[column size="1/3"][iconbox title="200+ Options" layout="2" icon="http://demo.themelead.com/pi/wp-content/uploads/2014/09/wheel-64.png" link="http://themeforest.net/user/themelead?ref=themelead" link_text="Learn more →" animation="true" delay="300"]Coming with an enormous variety of options to quickly and easily customize entire site. You will make an excellent choice by selecting this theme.[/iconbox][/column]

[column size="1/3" last="true"][iconbox title="SEO Friendly" layout="2" icon="http://demo.themelead.com/pi/wp-content/uploads/2014/09/magnifier-64.png" link="http://themeforest.net/user/themelead?ref=themelead" link_text="Learn more →" animation="true" delay="600"]With fast loading time, Pi will be friendly for search engine, impressive for the visitors and give you a huge number of free traffic to your site.[/iconbox][/column][/section]

[fullwidth id="achievements" padding_top="90" padding_botom="70" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/piechart-bg.jpg" background_position="center center" parallax="true" overlay_color="#4D98AD" overlay_opacity="30" text_white="true" shadow="true"]

[animation effect="fadeIn" delay="0"][align align="center"][font font="Sanchez" tag="h2" size="" align="center" font_weight="none" css=""][responsive_text compression="1.5" min_size="30" max_size="60"]WE'RE INNOVATIVE[/responsive_text][/font][/align][/animation]

[spacer /][container][column size="1/4" last="false"][animation effect="fadeIn" delay="0"][piechart percent="70" color="#fff" trackcolor="transparent" text_color="#fff" title="Attracting New Talent" icon="" text="" thickness="4" speed="2000" delay="0" size="150" linecap="round"][/piechart][/animation][/column][column size="1/4" last="false"][animation effect="fadeIn" delay="300"][piechart percent="85" color="#fff" trackcolor="transparent" text_color="#fff" title="Modern apprenticeships" icon="" text="" thickness="7" speed="2000" delay="0" size="150" linecap="round"][/piechart][/animation][/column][column size="1/4" last="false"][animation effect="fadeIn" delay="600"][piechart percent="90" color="#fff" trackcolor="transparent" text_color="#fff" title="Funding for skills dev" icon="" text="" thickness="10" speed="2000" delay="0" size="150" linecap="round"][/piechart][/animation][/column][column size="1/4" last="true"][animation effect="fadeIn" delay="900"][piechart percent="95" color="#fff" trackcolor="transparent" text_color="#fff" title="Skills planning and HR" icon="calendar" text="" thickness="13" speed="2000" delay="0" size="150" linecap="round"][/piechart][/animation][/column]

[/container]

2. Homepage 2:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="100" padding_botom="100" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/bg-home-2-1.jpg" background_position="center center" parallax="true" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][animation effect="fadeInUp" delay="1000"][font font="Sanchez" tag="h1" size="60" align="center" font_weight="200" css=""]Hi, I'm Pi.[br /]Let's get to know each other![/font][/animation][/fullwidth]

[fullwidth id="" padding_top="30" padding_botom="30" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="left top" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][container][heading h="h2" align="center" font="" font_size="" subtitle="themelead IS A FAMILY FULL OF CREATIVE PEOPLE" border="true" css=""]I was born in themelead Family[/heading][/container][/fullwidth]

[column size="1/2" last="false"][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/10/mem-41.jpg" full_image="" image_pos="right" name="John" role="Developer" style="2" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/member][/column][column size="1/2" last="true"][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-3.jpg" full_image="" image_pos="left" name="Christine" role="Developer" style="2" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/member][/column]

[column size="1/2" last="false"][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-2.jpg" full_image="" image_pos="right" name="Katy" role="Designer" style="2" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/member][/column][column size="1/2" last="true"][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-1.jpg" full_image="" image_pos="left" name="Mike" role="Marketer" style="2" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/member][/column]

[fullwidth id="" padding_top="60" padding_botom="60" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="#4D98AD" background_image="" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="true" shadow="false" clipmask_opacity=""][container][animation effect="rollIn" delay="100"]

3. Homepage 3:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="60" padding_botom="0" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/bg-home-3-edit.png" background_position="left top" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][container][animation effect="fadeInDown" delay="500"][align align="center"][font font="" tag="h2" size="30" align="center" font_weight="none" css=""]Meet Pi, the New Ultimate Responsive Multipurpose WordPress theme![/font][spacer height="20" /][/align][/animation]

[animation effect="fadeInUp" delay="1500"][align align="center"][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/09/home-3.png" alt="" grayscale="false" /][/align][/animation]

[/container]

[/fullwidth]

[fullwidth id="" padding_top="30" padding_botom="20" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][container][heading h="h2" align="center" font="Lato" font_size="" subtitle="" border="true" css=""]We have created Pi with the hugest passion ever![/heading][/container][/fullwidth]

[fullwidth id="" padding_top="" padding_botom="" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][big_tab active="2" mouse="click" animation="true" direction="horizontal"][tab_element title="FULLY RESPONSIVE" icon=""][container][column size="1/2" last="false"][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/10/shortcode-mobile1.png" alt="" grayscale="false" /][/column][column size="1/2" last="true"][iconbox title="Responsive Design" layout="2" icon="" link="http://demo.themelead.com/pi" link_text="Learn more →" align="left" animation="true" delay="" css=""]Pi works amazing on all screens from desktop to tablet or mobile. The layout is pretty simple; such structure is really easy to adapt to various screen sizes. It has to deal with a lot of multimedia content including videos and dynamic effects and fantastic graphics. Although it is quite a

4. Homepage 4:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="100" padding_botom="80" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/box-1.jpg" background_position="left top" parallax="true" overlay_color="#4d98ad" overlay_opacity="70" text_color="" text_white="true" shadow="false" clipmask_opacity=""][column size="1/3" last="false"][align align="center"][simple_heading h="h3"]FULLY RESPONSIVE[/simple_heading][/align][piechart percent="100" color="#fff" trackcolor="transparent" text_color="#fff" title="" icon="" text="" thickness="10" speed="2000" delay="" size="" linecap="round"][/piechart][/column][column size="1/3" last="false"][align align="center"][simple_heading h="h3"]UNLIMITED CONFIGURATIONS[/simple_heading][/align][spacer height="30" /][counter number="50" from="0" speed="1000" delay="" align="center" prefix="" suffix="+ SHORTCODES" prefix_icon="" suffix_icon="" text_color="#fff" number_color="#fff" size="" title=""][/counter][/column][column size="1/3" last="true"][align align="center"][simple_heading h="h3"]PROFESSIONAL SUPPORT[/simple_heading][/align][spacer height="50" /][button link="http://demo.themelead.com/pi" target="_self" icon="folder-open" icon_positon="right" subtitle="" color="" size="large" align="center" fullwidth="false" transparent="true" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]LEARN MORE[/button][/column][/fullwidth]

[fullwidth id="" padding_top="50" padding_botom="30" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][container][spacer height="10" /][column size="3/5" last="false"][imagebox image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/home-image-1.jpg" image_hover="" title="Lorem ipsum dolor" title_pos="below_image" link="" target="_self" image_position="left" effect="" css=""][br /][br /]Aenean massa. Cum sociis natoque penatibus et magnis dis

5. Homepage 5:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="" padding_botom="" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="left top" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][rev_slider home-slider][/fullwidth]

[spacer height="60" /]

[column size="1/3" last="false"][imagebox image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/sport-1.jpg" image_hover="" title="Lorem ipsum dolor" title_pos="below_image" link="" target="_self" image_position="" effect="fade" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.[br /][br /][button link="http://themeforest.net/user/themelead?ref=themelead" target="_self" icon="forward" icon_positon="right" subtitle="" color="" text_color="" size="tiny" align="left" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Learn More[/button][/imagebox][/column]

[column size="1/3" last="false"][imagebox image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/sport-2.jpg" image_hover="" title="Lorem ipsum dolor" title_pos="below_image" link="" target="_self" image_position="" effect="fade" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.[br /][br /][button link="http://themeforest.net/user/themelead?ref=themelead" target="_self" icon="forward" icon_positon="right" subtitle=""

6. Homepage 6:

You can insert the following code into the back-end's visual section:

[heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]HOW WE CREATED PI[/heading]

[process][step title="CONCEPT" image="" featured="false"][iconbox title="" layout="2" icon="infinity" link="" link_text="" align="left" animation="true" delay="" css=""]Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.[/iconbox][/step][step title="DESIGN" image="" featured="false"][iconbox title="" layout="2" icon="pencil" link="" link_text="" align="left" animation="true" delay="" css=""]Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.[/iconbox][/step][step title="CODE" image="" featured="false"][iconbox title="" layout="2" icon="code" link="" link_text="" align="left" animation="true" delay="" css=""]Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.[/iconbox][/step][step title="FINALIZATION" image="" featured="true"][iconbox title="" layout="2" icon="heart" link="" link_text="" align="left" animation="true" delay=""

Home Onepage:

1. Home Onepage Version 1:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="100" padding_botom="100" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/bg-onepage-2.jpg" background_position="center center" parallax="true" overlay_color=""

2. Home Onepage Version 2:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="80" padding_botom="80" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/bg-onepage.jpg" background_position="center center" parallax="true" overlay_color="" overlay_opacity="" text_color="" text_white="true" shadow="false" clipmask_opacity=""][container][animation effect="fadeInDown" delay="500"][heading h="h1" align="center" font="" font_size="" subtitle="" border="false" css=""]ENJOY THE AWESOMENESS WE BRING TO YOU![/heading][/animation][spacer height="60" /][box width="" background_color="" background_image="" padding_top="40" padding_bottom="40" padding_left="" padding_right="" overlay_opacity="20" overlay_color="#000" effect="none" align="center" text_white="true" css=""]

[column size="1/3" last="false"][iconbox title="Beautiful Design" layout="1" icon="heart" link="http://demo.themelead.com/pi" link_text="Learn more →" align="right" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/iconbox][/column]

[column size="1/3" last="false"][iconbox title="Powerful Options" layout="1" icon="bolt" link="http://demo.themelead.com/pi" link_text="Learn more →" align="right" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/iconbox][/column]

[column size="1/3" last="true"][iconbox title="Professional Support" layout="1" icon="users" link="http://demo.themelead.com/pi" link_text="Learn more →" align="right" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/iconbox][/column][/box][/container][/fullwidth]

[fullwidth id="" padding_top="50" padding_botom="20" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][container][align align="center"][simple_heading h="h2"]OUR SERVICES[/simple_heading][/align][/container][/fullwidth]

[sticky_tab background_color="#D8D8D8" background_image="" padding_top="20" padding_bottom="40"][tab title="premium wordpress themes"][spacer height="20" /][animation effect="fadeInDown" delay="500"][align align="center"][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/10/OUR-SERVICES_themes.png" alt="" grayscale="false" /][/align][/animation][spacer height="10" /]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[br /][button link="http://demo.themelead.com/pi" target="_self" icon="" icon_positon="left" subtitle="" color="" text_color="" size="medium" align="left" fullwidth="false" transparent="false" pill="false" popover_title="Lorem ipsum dolor" popover_image="" popover_effect="fade" popover_theme="dark" trigger="hover" popover_content="Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi." popover_width="200"]Read More[/button][/tab][tab title="premium wordpress plugins"][animation effect="fadeInDown" delay="500"][align align="center"][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/10/plugin.png" alt="" grayscale="false" /][/align][/animation][spacer height="10" /]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[br /][button link="http://demo.themelead.com/pi" target="_self" icon="" icon_positon="left" subtitle="" color="" text_color="" size="medium" align="left" fullwidth="false" transparent="false" pill="false" popover_title="Lorem ipsum dolor"

3. Home Onepage Version 3:

You can insert the following code into the text section of the back-end part:

[fullwidth id="" padding_top="150" padding_botom="150" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/onepage-bg-3.jpg" background_position="center bottom" parallax="true" overlay_color="#4D98AD" overlay_opacity="60" text_color="" text_white="true" shadow="false" clipmask_opacity=""][container][align align="center"][flexslider effect="fade" auto="true" auto_time="5000" speed="500" pager="false" navi="false"][slide]WELCOME TO PI

[/slide][slide]50+ SHORTCODES

[/slide][slide]FULLY RESPONSIVE

[/slide][slide]VARIOUS STYLES

[/slide][/flexslider][/align][/container][/fullwidth][spacer height="40" /][heading h="h2" align="center" font="" font_size="" subtitle="" border="false" css=""]About Us[/heading][hr width="" width="100" /][box width="600" background_color="" background_image="" padding_top="10" padding_bottom="10" padding_left="0" padding_right="0" content_width="600" opacity="" overlay_color="" border="false" effect="none" align="center" css=""]

[animation effect="fadeInDown" delay="1000"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.[/animation]

[/box][spacer height="40" /][heading h="h2" align="center" font="" font_size="" subtitle="" border="false" css=""]Services[/heading][hr width="" width="100" /]

[column size="1/3" last="false"][iconbox title="PHOTOGRAPHY" layout="2" icon="camera" link="http://demo.themelead.com/pi" link_text="Learn more →" align="" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. [/iconbox][/column]

[column size="1/3" last="false"][iconbox title="CODING" layout="2" icon="code" link="http://demo.themelead.com/pi" link_text="Learn more →" align="" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. [/iconbox][/column]

[column size="1/3" last="true"][iconbox title="SERVERS" layout="2" icon="earth" link="http://demo.themelead.com/pi" link_text="Learn more →" align="" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. [/iconbox][/column]

Home Portfolio:

1. Home Portfolio Version 1:

Note: Since it is a Home Portfolio, remember to set Page Template as Portfolio template (in this case,Portfolio Gallery Masonry) and select Fullwidth for Page Layout.

You can insert the following code into the visual section of the back-end part:

[flexslider effect="slide" auto="true" auto_time="5000" speed="500" pager="true" navi="false"][slide][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/09/home-portfolio-1.jpg" alt="" grayscale="false" /][/slide][slide][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/09/home-portfolio-2.png" alt="" grayscale="false"/][/slide][slide][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/09/portfolio-bg.png" alt="" grayscale="false" /][/slide][/flexslider][spacer height="60" /]

[container][heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]About Us[/heading][/container]

[container]

[column size="1/3" last="false"][box width="300" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/port-4.jpg" padding_top="30" padding_bottom="30" padding_left="" padding_right="" overlay_opacity="50" overlay_color="#4D98AD" effect="zoom" align="center" text_white="true" css=""][font font="" tag="h3" size="30" align="center" font_weight="200" css=""]CRAZY [br/]CREATIVE[/font][button link="#" target="_self" icon="forward" icon_positon="right" subtitle="" color="" text_color="" size="small" align="center" fullwidth="false" transparent="true" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Learn More[/button][/box][/column]

[column size="1/3" last="false"][box width="300" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/port-5.jpg" padding_top="30" padding_bottom="30" padding_left="" padding_right="" overlay_opacity="50" overlay_color="#4D98AD" effect="zoom" align="center" text_white="true" css=""][font font="" tag="h3" size="30" align="center" font_weight="200" css=""]LOVE [br/]COFFEE[/font][button link="#" target="_self" icon="forward" icon_positon="right" subtitle="" color="" text_color="" size="small" align="center" fullwidth="false" transparent="true" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Learn More[/button][/box][/column]

[column size="1/3" last="true"][box width="300" background_color=""

2. Home Portfolio Version 2:

You can insert the following code into the back-end's visual section:

[portfolio number="6" column="3" style="text-grid" filter="true" padding="true" filter_style="2"/]

[spacer height="40" /][align align="center"][simple_heading h="h2"]About Us[/simple_heading][/align]

[spacer height="20" /][column size="1/3" last="false"][iconbox title="Crazy Creative" layout="2" icon="infinity" link="#" link_text="Learn more →" align="left" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/iconbox][/column]

[column size="1/3" last="false"][iconbox title="Art Lovers" layout="2" icon="heart" link="#" link_text="Learn more →" align="left" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/iconbox][/column]

[column size="1/3" last="true"][iconbox title="Perfect Quality" layout="2" icon="checkmark" link="#" link_text="Learn more →" align="left" animation="true" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/iconbox][/column][spacer height="60" /][fullwidth id="" padding_top="60" padding_botom="" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="#4D98AD" background_image="" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="true" shadow="false" clipmask_opacity=""][container][heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]Our Happy Clients[/heading][/container]

3. Home Portfolio Version 3:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="80" padding_botom="80" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/Slider_Revolution-bg.jpg" background_position="center center" parallax="true" overlay_color="#000" overlay_opacity="20" text_color="" text_white="true" shadow="false" clipmask_opacity=""][heading h="h2" align="center" font="" font_size="" subtitle="" border="false" css=""]Welcome to Pi[br /]An Ultimate Multipurpose WordPress Theme[/heading][button link="http://demo.themelead.com/pi" target="_self" icon="" icon_positon="right" subtitle="" color="" text_color="#fff" size="medium" align="center" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Get Started[/button][/fullwidth]

[spacer height="60" /][animation effect="fadeInLeft" delay="500"][column size="1/3" last="false"][simple_heading h="h2"]About Us[/simple_heading]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,

Home Blog:

1. Home Blog Version 1:

You can insert the following code into the back-end's visual section:

Note: Since it is a Home Blog, remember to set Page Template as Blog template (in this case, BlogTimeline) and select Fullwidth for Page Layout.

[animation effect="fadeInDown" delay="500"][heading h="h2" align="center" font="" font_size="" subtitle="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." border="false" css=""]About Me[/heading][/animation]

[animation effect="fadeInUp" delay="500"][testimonial image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/author-home-3.jpg"

2. Home Blog Version 2:

Note: Since it is a Home Blog, remember to set Page Template as Blog template (in this case, BlogTimeline) and select Fullwidth for Page Layout.

You can easily create Home Blog Version 2 by simply selecting Blog Large for Page Template andFullwidth for Page Layout.

3. Home Blog Version 3:

Note: Since it is a Home Blog, remember to set Page Template as Blog template (in this case, Blog Grid)and select Fullwidth for Page Layout.

You can insert the following code into the back-end's visual section:

[column size="2/3" last="false"][simple_heading h="h3" align="left"]About Me[/simple_heading][animation effect="fadeInUp" delay="300"][testimonial image="http://demo.themelead.com/pi/wp-content/uploads/2014/08/anh1.png" name="Lily" from="New York" link_name="#" target="_blank"]I love writing about my stories. Welcome to my blog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[/testimonial][/animation][/column]

[animation effect="fadeInRight" delay="300"][column size="1/3" last="true"][simple_heading h="h3" align="left"]Keep in touch with me[/simple_heading][icon icon="twitter" color="#fff" size="50" link="#" target="_self" title="Twitter" background_color="#4D98AD" /][icon icon="behance" color="#fff" size="50" link="#" target="_self" title="Behance" background_color="#4D98AD" /][icon icon="dribbble" color="#fff" size="50" link="#" target="_self" title="Dribbble" background_color="#4D98AD" /][icon icon="flickr" color="#fff" size="50" link="#" target="_self" title="Flickr" background_color="#4D98AD" /][icon icon="earth" color="#fff" size="50" link="#" target="_self" title="My other website" background_color="#4D98AD" /][br /][font font="" tag="h4" size="20" align="left" font_weight="none" css=""]Email: support@themelead.com[/font][/column][/animation]

[spacer height="40" /][heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]Enjoy My Blog[/heading]

Home Shop:

1. Home Shop Version 1:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="" padding_botom="" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="left top" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][rev_slider home-slider][/fullwidth]

[spacer height="60" /][heading h="h2" align="left" font="" font_size="" subtitle="" border="true" css=""]Featured Products[/heading]

[featured_products per_page="4" columns="4" orderby="date" order="desc"]

[spacer height="20" /][heading h="h2" align="left" font="" font_size="" subtitle="" border="true" css=""]Recent Products[/heading]

[recent_products per_page="8" columns="4" orderby="date" order="desc"]

[column size="3/4" last="false"][simple_heading h="h3" align="left"]See our customers say about us[/simple_heading][flexslider effect="fade" auto="true" auto_time="5000" speed="500" pager="true" navi="false"][slide][testimonial image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-6.jpg" name="John" from="England" link_name="" target="_blank"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.[/testimonial][/slide][slide][testimonial image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-2.jpg" name="Mike" from="USA" link_name="" target="_blank"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.[/testimonial][/slide][slide][testimonial image="" name="John" from="England" link_name="" target="_blank"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Nullam dictum felis eu pede

2. Home Shop Version 2:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="" padding_botom="" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="left top" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][rev_slider home-slider][/fullwidth]

[spacer height="60" /][column size="1/3" last="false"][box width="300" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/Depositphotos_34844397_original2.jpg" padding_top="30" padding_bottom="30" padding_left="" padding_right="" overlay_opacity="50" overlay_color="#4D98AD" effect="zoom" align="center" text_white="true" css=""][font font="" tag="h3" size="30" align="center" font_weight="200" css=""]WEEKLY GIVEAWAY[/font][button link="#" target="_self" icon="forward" icon_positon="right" subtitle="" color="" text_color="" size="small" align="center" fullwidth="false" transparent="true" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Learn More[/button][/box][/column]

[column size="1/3" last="false"][box width="300" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/Depositphotos_2992927_original2.jpg" padding_top="30" padding_bottom="30" padding_left="" padding_right="" overlay_opacity="50" overlay_color="#4D98AD" effect="zoom" align="center" text_white="true" css=""][font font="" tag="h3" size="30" align="center" font_weight="200" css=""]JOIN COMPETITION[/font][button link="#" target="_self" icon="forward" icon_positon="right" subtitle="" color="" text_color="" size="small" align="center" fullwidth="false" transparent="true" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Learn More[/button][/box][/column]

[column size="1/3" last="true"][box width="300" background_color=""

3. Home Shop Version 3:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="" padding_botom="" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="left top" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][rev_slider home-slider][/fullwidth]

[spacer height="60" /][heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]MUST HAVE[/heading]

[featured_products per_page="8" columns="4" orderby="date" order="desc"]

[fullwidth id="" padding_top="60" padding_botom="60" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/bg-tes-shop.jpg" background_position="center center" parallax="true" overlay_color="#4D98AD" overlay_opacity="70" text_color="" text_white="true" shadow="false" clipmask_opacity=""][heading h="h2" align="center" font="" font_size="" subtitle="" border="false" css=""]WHAT CUSTOMERS SAY ABOUT US[/heading][br /][align align="center"][icon icon="quote-right" color="#4D98AD" size="50" link="#" target="_self" title="" background_color="" /][/align][container][flexslider effect="slide" auto="true" auto_time="5000" speed="500" pager="false" navi="true"][slide][font font="" tag="h4" size="20" align="center" font_weight="100"

SAMPLE PAGES

PI provides you a great number of sample pages and layout, which help you create an impressive website onyour own:

1. About Us:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="60" padding_botom="60" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/bg-home-2-1.jpg" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false"

2. About Me:

You can insert the following code into the back-end's visual section:

[column size="2/5" last="false"][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/09/b1.jpg" alt="" grayscale="false" /][/column][column size="3/5" last="true"][simple_heading h="h3"]My Story[/simple_heading][dropcap style="2" icon="wordpress" fontsize="" css=""][/dropcap]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.[animation effect="fadeInUp" delay="500"][align align="center"][icon icon="wordpress" color="#fff" size="120" link="" target="_self" title="WordPress" background_color="#4D98AD" /][icon icon="joomla" color="#fff" size="120" link="" target="_self" title="Joomla" background_color="#4D98AD" /][icon icon="blogger" color="#fff" size="120" link="" target="_self" title="Blogger" background_color="#4D98AD" /][/align][/animation][/column]

[spacer height="70" /][heading h="h2" align="center" font="" font_size="" subtitle="Lorem ipsum dolor sit amet" border="true" css=""]My Skills[/heading][column size="1/2" last="false"][progress percent="75" color="#4d98ad" background_color="" text_color="" title="Graphic Design" height="" striped="true" speed="3000" easing="easeOutExpo"][/progress][progress percent="85" color="#4d98ad" background_color="" text_color="" title="Web Design" height="" striped="true" speed="3000" easing="easeOutExpo"][/progress][progress percent="70" color="#4d98ad" background_color="" text_color="" title="Joomla Development" height="" striped="true" speed="3000" easing="easeOutExpo"][/progress][progress percent="90" color="#4d98ad" background_color="" text_color="" title="WordPress Development" height="" striped="true" speed="3000" easing="easeOutExpo"][/progress][progress percent="90" color="#4d98ad" background_color="" text_color="" title="HTML/CSS" height="" striped="true" speed="3000" easing="easeOutExpo"][/progress][progress percent="80" color="#4d98ad" background_color="" text_color="" title="UI/UX Design" height="" striped="true" speed="3000" easing="easeOutExpo"][/progress][/column]

[animation effect="fadeInRight" delay="500"][column size="1/2" last="true"][align align="center"][image link="http://demo.themelead.com/pi/wp-content/uploads/2014/10/aboutme.jpg" alt="" grayscale="false" /][/align][/column][/animation]

[spacer height="50" /][fullwidth id="" padding_top="60" padding_botom="60" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/SplitShire_IMG_7374.jpg" background_position="center center" parallax="true" overlay_color="#4D98AD" overlay_opacity="70" text_color="" text_white="true" shadow="false" clipmask_opacity=""][container][heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]Some Fun Facts About Me[/heading][column size="1/3" last="false"][counter number="6" from="0" speed="500" delay="" align="center" prefix="" suffix="+" prefix_icon="" suffix_icon="" text_color="" number_color="" size="" title="Years in Design Industry"][/counter][/column][column size="1/3" last="false"][counter number="4" from="0" speed="500" delay="" align="center" prefix="" suffix="+" prefix_icon="" suffix_icon="" text_color="" number_color="" size="" title="Years in Web Development"][/counter][/column][column size="1/3" last="true"][counter number="100" from="0" speed="1000" delay="" align="center" prefix="" suffix="+" prefix_icon="" suffix_icon="" text_color="" number_color="" size="" title="Happy Clients"][/counter][/column][/container][/fullwidth]

[spacer height="70" /][heading h="h2" align="center" font="" font_size="" subtitle="consectetuer adipiscing elit." border="true" css=""]My Latest Works[/heading]

3. Team:

You can insert the following code into the back-end's visual section:

[heading h="h2" align="center" font="" font_size="" subtitle="Let's meet these crazy innovative guys" border="true" css=""]Our most precious property is our people[/heading]

[carousel column="3" auto="true" auto_time="5000" speed="500" pager="true" navi="true" touch="true" mousewheel="false" loop="true" keyboard="false"][carousel_item][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-1.jpg" full_image="" image_pos="top" name="Mike" role="CEO" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/member][/carousel_item][carousel_item][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-2.jpg" full_image="" image_pos="top" name="John" role="founder" youtube="URL Youtube" google_plus="URL Google Plus" github="URL Git Hub"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/member][/carousel_item][carousel_item][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-3.jpg" full_image="" image_pos="top" name="Alice" role="Co-founder" linkedin="URL LinkedIn" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/member][/carousel_item][carousel_item][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-4.jpg" full_image="" image_pos="top" name="Micheal" role="Developer" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/member][/carousel_item][carousel_item][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-5.jpg" full_image="" image_pos="top" name="Ron" role="Designer" behance="URL Behance" dribbble="URL Dribbble" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/member][/carousel_item][carousel_item][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/09/mem-6.jpg" full_image="" image_pos="top" name="Mark" role="Marketer" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/member][/carousel_item][/carousel]

[box width="1100" background_color="#4D98AD" background_image="" padding_top="40" padding_bottom="40" padding_left="30" padding_right="30" content_width="900" opacity="" overlay_color="" border="false" effect="none" align="center" css=""][font font="Sanchez" tag="h2" size="" align="left" font_weight="100" css=""]Ready to bring your site to the next level?[/font][button link="http://demo.themelead.com/pi" target="_self" icon="cart" icon_positon="right" subtitle="" color="" text_color="" size="medium" align="center" fullwidth="false" transparent="true" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Purchase Pi Now[/button][/box]

[spacer height="60" /][heading h="h2" align="center" font="" font_size="" subtitle="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." border="true" css=""]Our Value Members[/heading]

[column size="1/2" last="false"][animation effect="fadeInLeft" delay="500"][member image="http://demo.themelead.com/pi/wp-content/uploads/2014/10/mem-5.jpg" full_image="http://demo.themelead.com/pi/wp-content/uploads/2014/10/mem-5.jpg" image_pos="right" name="John" role="Developer" style="2" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]Lorem ipsum dolor sit amet,

4. Services:

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="0" padding_botom="0" padding_left="0" padding_right="0" margin_top="" margin_bottom="" background_color="" background_image="" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][rev_slider home-slider][/fullwidth]

[spacer height="70" /][column size="3/5" last="false"][image_slider auto="true" auto_time="3000" speed="500" pager="true" navi="true" touch="true" mousewheel="false" loop="true" keyboard="false"][slide title="" desc="" link="" target="_blank" caption_position="bottom left"]http://demo.themelead.com/pi/wp-content/uploads/2014/09/sport-1.jpg[/slide][slide title="" desc="" link="" target="_blank" caption_position="bottom left"]http://demo.themelead.com/pi/wp-content/uploads/2014/09/sport-2.jpg[/slide][slide title="" desc="" link="" target="_blank" caption_position="bottom left"]http://demo.themelead.com/pi/wp-content/uploads/2014/09/sport-3.jpg[/slide][/image_slider][/column]

[column size="2/5" last="true"][heading h="h3" align="center" font="" font_size="" subtitle="" border="true" css=""]What we offer[/heading][animation effect="fadeInRight" delay="500"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.[/animation][br /][animation effect="fadeInDown" delay="500"][iconlist icon="checkmark" color="#4D98AD"][li icon="" color=""]Unique Concept[/li][li icon="" color=""]Unlimited Posibilities[/li][li icon="" color=""]Pricing Policy[/li][li icon="" color=""]Amazing Support[/li][/iconlist][/animation][/column][fullwidth id="" padding_top="60" padding_botom="30" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="#f9f9f9" background_image="" background_position="center center" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][container][animation effect="RollIn" delay="1000"][column size="1/3" last="false"][iconbox title="Easy to use" layout="2" icon="thumbs-up" link="" link_text="" align="" animation="false" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh diam nonummy[/iconbox][/column][column size="1/3" last="false"][iconbox title="Social Impact" layout="2" icon="behance" link="" link_text="" align="" animation="false" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh diam nonummy[/iconbox][/column][column size="1/3" last="true"][iconbox title="WPML Compatible" layout="2" icon="feather" link="" link_text="" align="" animation="false" delay="" css=""]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh diam nonummy[/iconbox]

5. FAQs

You can insert the following code into the back-end's visual section:

[tab active="1" mouse="click" animation="true" direction="horizontal"][tab_element title="INSTALLATION PROCESS" icon=""][toggle title="Cum sociis natoque penatibus et magnis dis parturient montes" icon="help" open="false" container="true"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[/toggle][br /][toggle title="Cum sociis natoque penatibus et magnis dis parturient montes" icon="help" open="false" container="true"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[/toggle][br /][toggle title="Cum sociis natoque penatibus et magnis dis parturient montes" icon="help" open="false" container="false"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[/toggle][br /][toggle title="Cum sociis natoque penatibus et magnis dis parturient montes" icon="question" open="false" container="false"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[/toggle][br /][/tab_element]

[tab_element title="BASIC CONFIGURATION OPTIONS" icon=""][toggle title="Cum sociis natoque penatibus et magnis dis parturient montes" icon="help" open="false" container="false"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[/toggle][br /][toggle title="Cum sociis natoque penatibus et magnis dis parturient montes" icon="help" open="false" container="false"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[/toggle][br /][toggle title="Cum sociis natoque penatibus et magnis dis parturient montes" icon="help" open="false" container="false"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.[/toggle][br /][toggle title="Cum sociis natoque penatibus et magnis dis parturient montes" icon="help" open="false" container="false"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean

6. Contact

You can insert the following code into the back-end's visual section:

[fullwidth id="" padding_top="" padding_botom="" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="left top" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][google_map z="15" lat="0" lon="0" w="100%" h="" maptype="ROADMAP" address="New York" marker="yes" markerimage="http://demo.themelead.com/pi/wp-content/uploads/2014/09/cy-theme-80.png" traffic="yes" infowindowdefault="yes" infowindow="This is themelead Office" hidecontrols="false" scrollwheel="true" color="#4D98AD" draggable="true"/][/fullwidth]

[spacer height="40" /][heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]We’d Love to Hear From You, Lets Get In Touch![/heading]

[column size="3/5" last="false"][dropcap style="1" icon="http://demo.themelead.com/pi/wp-content/uploads/2014/09/cy-theme-logo-2-150.png" fontsize="" css=""][/dropcap]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.[spacer height="30" /][/column]

[column size="2/5" last="true"][font font="Sanchez" tag="h4" size="" align="left" font_weight="100" css=""]Keep In Touch with us on Social Media![/font][icon icon="facebook" color="#fff" size="50" link="" target="_self" title="Facebook" background_color="#4D98AD" /][icon icon="google-plus" color="#fff" size="50" link="" target="_self" title="Google Plus" background_color="#4D98AD" /][icon icon="twitter" color="#fff" size="50" link="" target="_self" title="Twitter" background_color="#4D98AD" /][icon icon="behance" color="#fff" size="50" link="" target="_self" title="Behance" background_color="#4D98AD" /][icon icon="dribbble" color="#fff" size="50" link="" target="_self" title="Dribbble" background_color="#4D98AD" /][icon icon="mail" color="#fff" size="50" link="" target="_self" title="Send Us an Email" background_color="#4D98AD" /][hr width="" width="" /][spacer height="30" /][/column]

7. Pricing

You can insert the following code into the back-end's visual section:

[heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]Standard Table[/heading]

[pricing separated="false"] [pricing_column title="Standard" price="29.9" old_price="35.5" unit="$" unit_position="left" link="#" link_text="Get the quote →" target="_self" featured="false" color=""][iconlist icon="" color=""] [li icon="checkmark" color="007c00"]10 Projects[/li] [li icon="checkmark" color="007c00"]30GB Usage [/li] [li icon="checkmark" color="007c00"]Unlimited Users[/li] [li icon="" color=""]10 Projects[/li] [li icon="" color=""]30GB Usage[/li] [li icon="minus-2" color="ff0000"]Unlimited Users[/li][/iconlist][/pricing_column] [pricing_column title="Premium" price="45.5" old_price="39.9" unit="$" unit_position="left" link="#" link_text="Get the quote →" target="_self" featured="true" color="#4D98AD"][iconlist icon="" color=""] [li icon="" color=""]10 Projects[/li] [li icon="" color=""]30GB Usage [/li] [li icon="checkmark" color="#ff0000"]Unlimited Users[/li] [li icon="" color=""]10 Projects[/li] [li icon="" color=""]30GB Usage[/li] [li icon="" color=""]Unlimited Users[/li][/iconlist][/pricing_column] [pricing_column title="Professional" price="55.5" old_price="49" unit="VND" unit_position="left" link="#" link_text="Get the quote →" target="_self" featured="false" color=""][iconlist icon="" color=""] [li icon="checkmark" color="007c00"]10 Projects[/li] [li icon="checkmark" color="007c00"]30GB Usage [/li] [li icon="" color=""]Unlimited Users[/li] [li icon="checkmark" color="007c00"] [/li] [li icon="" color=""]30GB Usage [/li] [li icon="" color=""]Unlimited Users[/li][/iconlist][/pricing_column] [pricing_column title="Extreme" price="75.5" old_price="59" unit="$" unit_position="left" link="#" link_text="Get the quote →" target="_self" featured="false" color=""][iconlist icon="" color=""] [li icon="" color=""]10 Projects[/li] [li icon="" color=""]30GB Usage [/li] [li icon="" color=""]Unlimited Users[/li] [li icon="" color=""]30GB

Page Layouts

There are 10 page layout styles. Besides the standard of layouts you expect in Premium WordPress Theme,our team has created 7 new and unique layouts: Sticky Sidebar, No titlebar, Side Navigation, Side Scroll, TopMenu, Top Menu Scroll, Top Menu only Sticky with their customization as below:

Note:Layouts can only be customized in Page Layout. To modify these new layouts of Pi, you can install newthird party plugin "Custom sidebar" made by WPmudev. Read the guide of Plugins installation to see moreinformation.

Standard Layouts:

To create a page with standard layouts(Fullwidth, Left Sidebar and Right Sidebar),simply chooseamong the options in Page Layout and set Page Template to Default Template.

See front-end settings:

Fullwidth (http://demo.themelead.com/pi/this-is-page-title-2/)Left Sidebar (http://demo.themelead.com/pi/this-is-page-title-4/)Right Sidebar (http://demo.themelead.com/pi/this-is-right-sidebar-page/)

Sticky Sidebar, Side Navigationand Side Scroll:

Note:

-Sticky Sidebar: Sticky Sidebar will display asticky sidebar when scrolling the content.

-Side Navigation: Side Navigation will alsodisplay a sticky sidebar when scrolling the content.This sidebar will contain a custom menu, which letyou navigate the other pages.

-Side Scroll: Side Scroll will display a sticky sidebar which contains a custom menu that let you navigate yourpage in the most convenient way.

Step 1: Choose Sticky Bar in Special Page option.Step 2: Fill in the name of the Custom Sidebar in Custom Sidebar option. The name of the custom sidebarcan either belong to an existing sidebar or the sidebar that you will create later in Widgets.Step 3: To create a new sidebar, go to Appearance >>> Widgets, and select Create a new sidebar

- Drag the available widgets into your custom sidebar

- Edit the sidebar in any way you want(as can be seen in the picture, click Edit >>> Choose Advanced - Editcustom wrapper)

- Save changes

- See the results in front-end (http://demo.themelead.com/pi/this-is-sticky-sidebar-page/)

Note:

- To create a Side Navigation sidebar, dragCustom Menu to your side navigation sidebar>>> Select Menu (in the photo: sidenavigation)>>> Save

- To create a Side Scroll sidebar, drag CustomMenu to your side scroll sidebar >>> SelectMenu. In text section, add id="" before eachheading and make sure that each menu tree inyour selected menu has the equivalent link withthose IDs.

For example: In the photo, id="about" was added to the Heading About Us in the text section.Equivalently, in the Side Scroll menu, the URL of About Us tree has to be: link to the page/#about

Step 4: Now back to your page back-end. You can custom your sidebar width in Page Sidebar Width.Step 5: Publish. Now enjoy the results in front-end settingsSticky Sidebar (http://demo.themelead.com/pi/this-is-sticky-sidebar-page/)Side Navigation (http://demo.themelead.com/pi/this-is-side-navigation-page/)Side Scroll (http://demo.themelead.com/pi/this-is-side-scroll-page/)

Top Menu, Top Menu Scroll, Top Menu Only Sticky

-Top Menu: Top Menu page will display a menu on top of the page .

-Top Menu Only Sticky: Top Menu Only Sticky page will display a sticky menu on top when scrolling thecontent.

-Top Menu Scroll: Top Menu Scroll will display a sticky top menu which contains a custom menu that let younavigate your page in the most convenient way.

For Top menu, Top menu scroll, top menu only sticky, the steps are relatively the same as Sticky Sidebar,Sidebar Navigation and Sidebar Scroll. Remember to choose special page style as top menu or sticky topmenu. You can also create id for each menu item for Top Menu Scroll like Side Scroll.Front-end settingsTop menu (http://demo.themelead.com/pi/this-is-top-menu-page/)Top menu scroll (http://demo.themelead.com/pi/2285-2/)Top menu only sticky (http://demo.themelead.com/pi/page-with-top-menu/)

SHORTCODES

1.1. HeadingHere are the parameters of this shortcode:

h: h1, h2, h3, h4, h5 or h6. Default is h2.align: heading align: left, center or right. Default is left.font: Use any font from Google Font.subtitle: Content subtitle.css: Custom css.border: true or false. If it is false, it returns to a heading with no border. Default is true.

Heading

[heading h="h2" align="center" font="" font_size="" subtitle="" border="false" css=""]Title Here[/heading][heading h="h2" align="right" font="" font_size="" subtitle="" border="false" css=""]Title Here[/heading][heading h="h2" align="left" font="" font_size="" subtitle="" border="false" css=""]Title Here[/heading]

Heading With Border

[heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]Title Here[/heading][heading h="h2" align="right" font="" font_size="" subtitle="" border="true" css=""]Title Here[/heading][heading h="h2" align="left" font="" font_size="" subtitle="" border="true" css=""]Title Here[/heading]

Simple Heading

[simple_heading h="h2"]Title Here[/simple_heading]

Customization

[heading h="h2" align="center" font="Google Font Name" font_size="" subtitle="" border="true" css=""]Title Here[/heading]

[heading h="h2" align="center" font="" font_size="" subtitle="" border="true" css=""]Title Here[/heading]

1.2. DropcapHere are the parameters of this shortcode:

style:1, 2 or 3. Default is 1.icon:an icon from the icon set. If this is enabled, it becomes icon dropcap instead of the textdropcap.figure:the figure of your dropcap. Default is square

Text Dropcap

[dropcap style="1" icon="" figure="square"]Your text here[/dropcap][dropcap style="2" icon="" figure="square"]Your text here[/dropcap][dropcap style="3" icon="" figure="square"]Your text here[/dropcap]

Icon Dropcap

[dropcap style="" icon="icon-name" figure="square"]Your text here[/dropcap]

Image Dropcap

[dropcap style="" icon="image URL" figure="square"]Your text here[/dropcap]

1.3. FontHere are the parameters of this shortcode:

font: Use any of the Google Font.h: h1, h2, h3, h4, h5 or h6. Default is h2.size: font size.align: text align such as left, right, center.

[font font="Google Font Name" h="h2" size="35" align="left"]Your text here[/font][font font="Google Font Name" h="h2" size="55" align="center"]Your text here[/font][font font="Google Font Name" h="h2" size="45" align="right"]Your text here[/font]

[font font="Lato" h="h2" size="45" align="right"]Your text here[/font][font font="Parisienne" tag="span" size="45"]Your text here[/font]

1.4. TypographyHere are the parameters of this shortcode:h: h1, h2, h3, h4, h5 or h6. Default is h2.icons: icon top, icon right, icon bottomposition: top, right, bottomtooltip title: the name/title of tooltip.

Tooltips

[tooltip title="This is Tooltip left" position="left"]Your text here[/tooltip][tooltip title="This is Tooltip left" position="right"]Your text here[/tooltip][tooltip title="This is Tooltip left" position="top"]Your text here[/tooltip][tooltip title="This is Tooltip left" position="bottom"]Your text here[/tooltip]Heading 1 and Heading 2

[heading h="h1" align="left" font="" icon_top="" icon_left="" icon_right="" icon_bottom="" subtitle="" link="" border="false" css=""]Heading 1[/heading][heading h="h2" align="left" font="" icon_top="" icon_left="" icon_right="" icon_bottom="" subtitle="" link="" border="false" css=""]Heading 2[/heading]Heading 3 and Heading 4

[heading h="h3" align="left" font="" icon_top="" icon_left="" icon_right="" icon_bottom="" subtitle="" link="" border="false" css=""]Heading 3[/heading][heading h="h4" align="left" font="" icon_top="" icon_left="" icon_right="" icon_bottom="" subtitle="" link="" border="false" css=""]Heading 4[/heading]Heading 5 and Heading 6

[heading h="h5" align="left" font="" icon_top="" icon_left="" icon_right="" icon_bottom="" subtitle="" link="" border="false" css=""]Heading 5[/heading][heading h="h6" align="left" font="" icon_top="" icon_left="" icon_right="" icon_bottom="" subtitle="" link="" border="false" css=""]Heading 6[/heading]Lists

[column size="1/2" last="false"] <li>Content Here</li> <li>Content Here</li> <li>Content Here</li> <li>Content Here</li> <li>Content Here</li> <li>Content Here</li>[/column]

Blockquote

<blockquote>Content Here<em>Author</em></blockquote>[pullquote align="left" author=""]Content Here[/pullquote][pullquote align="left" author=""]Content Here[/pullquote][pullquote align="right" author=""]Content Here[/pullquote][pullquote align="center" author=""]Content Here[/pullquote]Images

[caption id="attachment_160" align="alignleft" align="aligncenter" width="390"]CAPTION EXAMPLE[/caption]

Preformatted Text

[pre position="top"]Content Here[/pre]

Table

<table><tbody><tr><th>Employee</th><th>Salary</th><th>Something</th></tr><tr class="odd"><td>Alex Saddington</td><td>£ 125</td><td>Duis autem vel eum iriure dolor in hendrerit in vulputate velit ess.</td></tr><tr class="even"><td>Tom McFarlin</td><td>£450</td><td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td></tr><tr class="odd"><td>Jared Erickson</td><td>£1,200</td><td>Consectetuer adipiscing elit, sed diam nonummy nibh e.</td></tr><tr class="even"><td>Chris Ames</td><td>£10,000</td><td>Wauis autem vel eum iriure dolor in hendrerit in vu</td></tr></tbody></table>

1.5. ButtonHere are the parameters of this shortcode:

link: The URL that the button should link to.target:_self

to open the link in the same tab, _blank to open the link in a new tab. Default is _self.icon:choose an icon from the icon set.icon_positionleft or right. Default is right.color:button color. You can choose from the available colors like red, blue, orange,... or use acustom hexa code like #ff0000. Default is the primary color.hover_color: the color appears when you hover over the buttons. You can choose from theavailable colors like red, blue, orange,... or use a custom hexa code like #ff0000. Default is theprimary color.size: button size. You can choose among small, medium or large. Default is medium.align: left, center or right. Default is left.fullwidth: true or false. Set true if you want the button to be fullwidth. Otherwise, set false. Defaultis false.shape: square or pill. Default is square.transparent:true or false. Set true if you want the button to be tranparent. Otherwise, set false.Default is false.popover_title, popover_content, popover_width: Popover title, content and width.

Sample Colors

[button link="#" target="_self" icon="" icon_positon="right" subtitle="" color="Default" size="medium" align="left" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Your text here[/button][button link="#" target="_self" icon="" icon_positon="right" subtitle="" color="orange" size="medium" align="left" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Your text here[/button][button link="#" target="_self" icon="" icon_positon="right" subtitle="" color="blue" size="medium" align="left" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Your text here[/button]

Buttons With Icons

[button link="#" target="_self" icon="dribbble" icon_positon="right" subtitle="" color="#fdbcc7"" size="medium" align="left" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Your text here[/button][button link="#" target="_self" icon="paperplane" icon_positon="left" subtitle="" color="BB2C2C"" size="medium" align="left" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Your text here[/button]

Buttons With Sizes and Subtitles

[button link="#" target="_self" icon="thumbs-up" icon_positon="right" subtitle="" color=""" size="small" align="left" fullwidth="false" transparent="false" pill="false" popover_title="Your popover title" popover_image=""

[button link="#" target="_self" icon="" icon_positon="right" color="29991" hover_color="000000" size="medium" align="left" fullwidth="false" style="0" transparent="false" shape="square" popover_title="Your popover title" popover_content="Your popover content" popover_width="250"]Your text here[/button][button link="#" target="_self" icon="" icon_positon="right" color="29991" hover_color="000000" size="medium" align="center" fullwidth="false" style="0" transparent="false" shape="square" popover_title="Your popover title" popover_content="Your popover content" popover_width="250"]Your text here[/button][button link="#" target="_self" icon="" icon_positon="right" color="29991" hover_color="000000" size="medium" align="right" fullwidth="false" style="0" transparent="false" shape="square" popover_title="Your popover title" popover_content="Your popover content" popover_width="250"]Your text here[/button]

Fullwidth Buttons

[button link="#" target="_blank" icon="" icon_positon="right" subtitle="" color="" size="medium" align="left" fullwidth="true" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Your text here[/button]

Pill Buttons and Buttons With Tooltips

[button link="#" target="_self" icon="filter" icon_positon="right" subtitle="" color=""" size="small" align="left" fullwidth="false" transparent="false" pill="true" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Pill Small[/button][button link="#" target="_blank" icon="filter" icon_positon="right" subtitle="" color="" size="medium" align="left" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="Your popover content" popover_width="300"]Your text here[/button]

Button in a background

[button link="#" target="_self" icon="folder-open" icon_positon="right" subtitle="" color="" text_color="" size="large" align="left" fullwidth="false" transparent="true" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Your text here[/button][button link="#" target="_self" icon="cart" icon_positon="right" subtitle="" color="#fff" text_color="#52805F" size="medium" align="right" fullwidth="false" transparent="false" pill="false" popover_title="" popover_image="" popover_effect="fade" popover_theme="light" trigger="hover" popover_content="" popover_width="300"]Your text here[/button]1.6. Lists

Icon Lists:

[iconlist icon="checkmark" color="000000"][li icon="" color=""]This is a list item[/li][li icon="" color=""]This is a list item[/li][li icon="" color=""]This is a list item[/li][li icon="" color=""]This is a list item[/li][li icon="" color=""]This is a list item[/li][/iconlist]

Iconbox List:

[li icon="paperplane" title="Your title here"]Your text here[/li][li icon="users" title="Your title here"]Your text here[/li]

Here are the parameters of list shortcode:

list type: choose 1 of 4 types: star, plus, dot and minus.icon: an icon from the icon set.color: color of the icon. You can either choose a primary color like red, blue, green or enter acustom hexa code, e.g: #ff0000.

1.7. Column:Here are the parameters of columns shortcode:

border: true or false. Set false if you do not want any border exists between the columns.Otherwise, set false. Default is false.size: Choose the proportion of the column. It can be either 1/2, 1/3,... or any other proportion.padding: true or false. Set false if you do not want any padding exists between the columns.Otherwise, set false. Default is false.

[column size="1/2" last="false"]Your text here[/column][column size="1/2" last="true"]Your text here[/column][column size="1/3" last="false"]Your text here[/column][column size="1/3" last="false"]Your text here[/column][column size="1/3" last="true"]Your text here[/column]Columns with border:

[columns border="true"][col size="1/4" padding="true"]Your text here[/col][col size="1/2" padding="true"]Your text here[/col][col size="1/4" padding="true"]Your text here[/col][/columns]Columns with no padding:

[columns border="true"][col size="1/4" padding="false"]Your text here[/col][col size="1/2" padding="false"]Your text here[/col][col size="1/4" padding="true"]Your text here[/col][/columns]Here are the parameters of column shortcode:

size: Choose the proportion of the column. It can be either 1/2, 1/3,... or any other proportion.last: true or false. Set true you want this specific column to be the last one of the line. Otherwise,set false. Default is false.

1.8. Google MapHere are the parameters of this shortcode:

Maptype: The type of Google Maps: Roadmap, Satellite, Hybrid, Terrain.Address: The place you want to mark.Color map: You can choose any color.Zoom level: Between 0-20.Latitude: Line of latitude.Longitude: Parallel of longitude.Width: Default is 600.Height: Default is 400.Marker: Choose Yes or No. Yes to display marker.Marker Image URL: To change default Marker.

Draggable: Choose Yes or No.Show Info Map: Choose Yes or No. Yes to display info map.Content Info Map: Strong, br are accepted.Hide Control: Choose True or False. True to show control.Scroll wheel zooming: Choose True or False.Map Color: Check code color: http://colorpicker.com/.

Roadmap and Satellite

[google_map z="15" lat="0" lon="0" w="100%" h="400" maptype="Name of maptype" address="Your address" marker="yes" markerimage="" traffic="yes" draggable="true" infowindowdefault="yes" infowindow="" hidecontrols="false" scrollwheel="true" color=""/]Hybrid and Terrain

[google_map z="15" lat="0" lon="0" w="100%" h="400" maptype="Name of maptype" address="Your address" marker="yes" markerimage="" traffic="yes" draggable="true" infowindowdefault="yes" infowindow="" hidecontrols="false" scrollwheel="true" color=""/]<li><b>Custom Color</b></li>

<div class="full"><img src="http://docs.themelead.com/pi/assets/images/maps-custom-color.jpg"></div><textarea class="code">[google_map z="15" lat="0" lon="0" w="100%" h="400" maptype="Name of maptype" address="Your address" marker="yes" markerimage="" traffic="yes" draggable="true" infowindowdefault="yes" infowindow="" hidecontrols="false" scrollwheel="true" color="#4D98AD"/][column size="1/2" last="false"][google_map z="15" lat="0" lon="0" w="100%" h="400" maptype="Name of maptype" address="Your address" marker="yes" markerimage="" traffic="yes" draggable="true" infowindowdefault="yes" infowindow="" hidecontrols="false" scrollwheel="true" color="#F09D49"/][/column][column size="1/2" last="true"][google_map z="15" lat="0" lon="0" w="100%" h="400" maptype="Name of maptype" address="Your address" marker="yes" markerimage="" traffic="yes" draggable="true" infowindowdefault="yes" infowindow="" hidecontrols="false" scrollwheel="true" color="#3F53A3"/][/column]

Custom Maker Image

[google_map z="15" lat="0" lon="0" w="100%" h="400" maptype="Name of maptype" address="Your address" marker="yes" markerimage="Image URL" traffic="yes" draggable="true" infowindowdefault="yes" infowindow="" hidecontrols="false" scrollwheel="true" color="#4D98AD"/]Custom Info Window

[google_map z="15" lat="0" lon="0" w="100%" h="400" maptype="Name of maptype" address="Your address" marker="yes" markerimage="Image URL" traffic="yes" draggable="true" infowindowdefault="yes" infowindow="Your content" hidecontrols="false" scrollwheel="true" color="#4D98AD"/]

1.9. Image BoxHere are the parameters of this shortcode:

image: Your image URL.Image Position: position of image: left, right.Hover Effect: Silde or Fade.title: Your titletitle_pos: Title position. You can either choose below_image or above_image. Default isabove_image.link: The URL that the image should link to.target: _self to open link in the same tab, _blank to open link in a new tab. Default is _self.align: Your title align.CSS: Custom CSS.

Title Below or Above Image:

Using With Columns No Padding and Using Creatively

[imagebox image="image URL" title="Your title" title_pos="below_image" link="#" target="_self" align="left" css=""][imagebox image="image URL" title="Your title" title_pos="above_image" link="#" target="_self" align="left" css=""]Your Content Here[/imagebox]

1.10. BoxHere are the parameters of this shortcode:

Title: Title of the iconbox.Effect: None, Parallax or Zoom.Align: Left, Right or Center.White text: Choose Yes or No.Background Color: Basic color or color code.Background Image URL: Image URL.Overlay % Opacity: Numeric value only, between 1 - 100.Padding: Top padding, Bottom padding, Left Padding, Right Padding.layout: Select an icon from icon set. It can be an image URL as well.css: Custom css.

Basic Style

[box width="600" background_color="#4D98AD" background_image="" padding_top="40" padding_bottom="40" padding_left="" padding_right="" content_width="100" opacity="" overlay_color="" border="false" effect="none" align="center" textwhite="true" css=""]Content Here[/box][box width="400" background_color="#4D98AD" background_image="" padding_top="40" padding_bottom="40" padding_left="" padding_right="" content_width="100" opacity="" overlay_color="" border="false" effect="none" align="center" textwhite="true" css=""]Content Here[/box]

Background Image

[box width="1100" background_color="" background_image="Image URL" padding_top="100" padding_bottom="100" padding_left="30" padding_right="30" content_width="100" opacity="" overlay_color="" border="false" effect="parallax-1" align="center" textwhite="true" css=""]Content Here[/box]

1.11. Helper ShortcodesHighlights:

[highlight color="ff9" style="1"]CONTENT[/highlight][highlight color="299191" style="2"]CONTENT[/highlight]

Here are the parameters of this shortcode:

color: the color of your highlighted background. You can either pick an available primary color likered, green,... or enter the hexa code, e.g ff000.

style: 1 or 2. Default is 1.

Spacer:

[spacer height="90" /]

Hr:

[hr width="" margin_top="" margin_bottom="" style="1" /]

Image Shortcode

[column size="1/2" last="false"]Your text here[image link="" alt="" grayscale="false" /][/column][column size="1/2" last="true"]Your text here[image link="" alt="" grayscale="true" /][/column]

1.12. Toggle & AccordionHere are the parameters of toggle shortcode:

title: The toggle name/title.icon: An icon from icon set.open: true or false. It’s the initial state of toggle, close or open. Default is false.container: Set true if you want the toggle to have container. Otherwise, set false. Default is false.

Simple Cases

[toggle title="Your Title" icon="play" open="true" container="false"]CONTENT[/toggle][toggle title="Your Title" icon="play" open="false" container="false"][/toggle][accordion container="false"][toggle title="Your Title" icon="play" open="true"]CONTENT[/toggle][toggle title="Your Title" icon="play" open="false"]CONTENT[/toggle]Has Container

[toggle title="Your Title" icon="play" open="true" container="true"]CONTENT[/toggle][toggle title="Your Title" icon="play" open="false" container="true"][/toggle][accordion container="true"][toggle title="Your Title" icon="play" open="true"]CONTENT[/toggle][toggle title="Your Title" icon="play" open="false"]CONTENT[/toggle]W/Other Shortcodes

[toggle title="Your title here" icon="play" open="false" container="true"][/toggle]

Big ToogleHere are the parameters of big toggle shortcode:

title: The toggle name/title.subtitle: The toggle subtitle.icon: An icon from icon set.open: true or false. It’s the initial state of toggle, close or open. Default is false.container: Set true if you want the toggle to have container. Otherwise, set false. Default is false.

[big_toggle title="Your title here" subtitle="Your subtitle here" open="true" container="false"]CONTENT[/big_toggle][big_toggle title="Your title here" subtitle="Your subtitle here" open="false" container="false"]CONTENT[/big_toggle]

1.13. TabHere are the parameters of tab shortcode:

active the number of tabs that you want to use.mouse click or hover. Set click if you want to switch between tabs by clicking, hover if you want todo it by hovering on the tabs name. Default is click.animation: true or false. Set true if you choose hover in the mouse parameter. Otherwise, setfalse. Default is false.direction: horizontal or vertical. Default is horizontal.

Horizontal Tab:Here are the parameters of tab_element inside tab shortcode:

Title: Your tab name/title.Tab active: Tab order you want to open. Default is the first tab.Icon: An icon from the icon set. It can be an image URL as well.Mouse: Choose Click or Hover.Animation: Choose True or False.Direction: Choose Horizontal or Vertical.

[tab active="3" mouse="click" animation="false" direction="horizontal"][tab_element title="Your Title" icon="facebook"]CONTENT[/tab_element][/tab][tab active="3" mouse="click" animation="false" direction="horizontal"][tab_element title="Your Title" icon="facebook"]CONTENT[/tab_element][/tab]Vertical Tab:

[tab active="3" mouse="click" animation="false" direction="vertical"][tab_element title="Your Title" icon="facebook"]CONTENT[/tab_element][/tab][tab active="3" mouse="hover" animation="true" direction="vertical"][tab_element title="Your Title" icon="facebook"]CONTENT[/tab_element][/tab]Big Tab:Note: This shortcode uses the same parameters as tab shortcode.

[big_tab active="" mouse="click" animation="false" direction="horizontal"][tab_element title="Tab Title" icon=""]Content Here[/tab_element][tab_element title="Tab Title" icon=""]Content Here[/tab_element][tab_element title="Tab Title" icon=""]Content Here[/tab_element][/big_tab]

1.14. Pie ChartHere are the parameters of this shortcode:

percent: should be a number from 0 – 100.color: any color: red, blue, orange… or a custom color code such as #12dada. Default is theprimary color.trackcolor: color of the chart's tracking part. It can be any color: red, blue, orange… or a customcolor code such as #12dada. Default is the primary color.tex_color: text color. It can be any color: red, blue, orange… or a custom color code such as#12dada. Default is the primary color.title: chart title/name.text: the chart's content.icon: an icon from the icon set.thickness: the thickness of circle (in px). Default is 8.speed: tracking speed. Default is 600.delay: The time delay before the animation run in millisecond unit. Default is 0.size: Pie chart size, measured in px.linecap: butt, squareround. Default is butt.

Standard

[piechart percent="90" color="#4D98AD" trackcolor="#77B9CC" text_color="#4D98AD" title="Number + Percent" icon="" thickness="10" speed="1000" delay="0" size="150" linecap="butt"]Content Here[/piechart][piechart percent="100" color="#77B9CC" trackcolor="transparent" text_color="#4D98AD" title="Text" text="Pi" icon="" thickness="12" speed="1000" delay="300" size="150" linecap="butt"]Content Here[/piechart]

Sizes

[piechart percent="50" color="#c94e4e" trackcolor="transparent" text_color="#3F53A3" title="Size 60px" icon="" thickness="3" speed="2000" delay="0" size="60" linecap="butt"][/piechart][piechart percent="50" color="#77B9CC" trackcolor="#ddd" text_color="#3F53A3" title="Size 100px" icon="thumbs-up" thickness="10" speed="4000" delay="450" size="100" linecap="butt"]Content Here[/piechart]

[piechart percent="80" color="#fff" trackcolor="transparent" text_color="#fff" title="" icon="" text="we" thickness="15" speed="2000" delay="" size="200" linecap="round"][/piechart][piechart percent="100" color="#fff" trackcolor="transparent" text_color="#fff" title="" icon="heart" text="" thickness="15" speed="2000" delay="" size="200" linecap="round"][/piechart][piechart percent="100" color="#fff" trackcolor="transparent" text_color="#fff" title="" icon="" text="pi" thickness="15" speed="2000" delay="" size="200" linecap="round"][/piechart]1.15. Table of Content

Here are the parameters of this shortcode:toc name: The name of tableh: h2, h3align: left, right or centerauto: true or false. Default is true

[toc name="Table of contents" align="left" auto="true" /][toc name="Table of contents" align="left" auto="true" /][toc name="Table of contents" align="Center" auto="true" /][toc name="Table of contents" align="right" auto="true" /]

1.16. CarouselHere are the parameters of this shortcode:

Image URL: The URL that image should link.image_pos: The position of image.name: The name of member image.link: The link of social account.auto: False or true. Auto play the slideshow. Default is false.auto_time The time that auto play the slideshow. Default is 5000.speed: Tracking speed. Default is 500.navigation: True or false. Use the navigation or not. Default: true.pagination: True or false. Use the pager or not. Default: false.touch: True or false. Use the touch or not. Default: true.mousewheel: True or false. Use the mousewheel or not. Default: false.loop: True or false. Use the loop or not. Default: true.keyboard navigation: True or false. Use the keyboard or not. Default: false.

Carousel 3 Columns

[carousel column="3" auto="false" auto_time="5000" speed="500" pager="true" navi="true" touch="true" mousewheel="false" loop="true" keyboard="false"][carousel_item]YContent Here[/carousel_item][carousel_item]Content Here[/carousel_item][carousel_item]Content Here[/carousel_item]Carousel 4 Columns

[carousel column="4" auto="false" auto_time="5000" speed="500" pager="false" navi="false" touch="true" mousewheel="false" loop="true" keyboard="false"][carousel_item]YContent Here[/carousel_item][carousel_item]Content Here[/carousel_item][carousel_item]Content Here[/carousel_item][carousel_item]Content Here[/carousel_item]

Carousel Brand Title

[carousel column="5" auto="true" auto_time="5000" speed="300" pager="true" navi="false" touch="true" mousewheel="false" loop="true" keyboard="false"][carousel_item]YContent Here[/carousel_item][carousel_item]Content Here[/carousel_item][carousel_item]Content Here[/carousel_item][carousel_item]Content Here[/carousel_item][carousel_item]Content Here[/carousel_item]1.17. CountdownHere are the parameters of this shortcode:

Time: Please write exactly the moment you want to count down in this syntax: year-month-day-hour-minute-second. For example: 2015-11-6-17-12-56 will be the moment 17h12’56” of November06th, 2015. Use “-” to separate time units. It can lack later units, say, 2014-11 is fine. It’ll become0h0’0” of November 1st, 2014Year: The word “Years” in your language.Month: The word “Months” in your language.Day: The word “Days” in your language.Hour: The word “Hours” in your language.Minute: The word “Minutes” in your language.Second: The word “Seconds” in your language.

[countdown time="2015-11-6-17-12-56" year="Year(s)" month="Month(s)" day="Day(s)" hour="Hour(s)" minute="Minute(s)" second="Second(s)" fontsize="43" align="left" /][countdown time="2014-9-8-17-12-56" year="Year(s)" month="Month(s)" day="Day(s)" hour="Hour(s)" minute="Minute(s)" second="Second(s)" fontsize="43" align="right" /][countdown time="2014-11-8-17-12-56" year="Year(s)" month="Month(s)" day="Day(s)" hour="Hour(s)" minute="Minute(s)" second="Second(s)" fontsize="43" align="center" /]

[countdown time="2015-9-8-17-12-56" year="Year(s)" month="Month(s)" day="Day(s)" hour="Hour(s)" minute="Minute(s)" second="Second(s)" fontsize="24" align="left" /]

1.18. CounterHere are the parameters of this shortcode:

number: Any number from 0.delay: The time that counter delays before running in millisecond unit.align: You can choose either left, right or center

title: The name of counter.prefix: Prefixed words.suffix: Suffixed words.prefix icon: Prefixed icon.suffix icon: Suffixed icon.counter title: The name of counter.border: True or false. Just a description option. Set true if you want the map to have a border.Default is false.

Counter

[counter number="50" from="0" speed="2000" delay="0" align="center" prefix="" suffix="+" prefix_icon="magic" suffix_icon="" text_color="#515151" number_color="#515151" size="" title="Your title"]Content Here[/counter][counter number="100" from="0" speed="2000" delay="" align="center" prefix="" suffix="%" prefix_icon="desktop" suffix_icon="" text_color="" number_color="" size="" title="Your title"]Content Here[/counter]

Counter With Custom Color

[counter number="2466" from="0" speed="2000" delay="" align="center" prefix="" suffix="" prefix_icon="" suffix_icon="" text_color="" number_color="#4D98AD" size="" title="Your title"][/counter][counter number="100" from="0" speed="2000" delay="" align="center" prefix="" suffix="+" prefix_icon="" suffix_icon="" text_color="" number_color="#4D98AD" size="" title="Your title"][/counter]

Counter Custom Size

[counter number="300" from="0" speed="2000" delay="" align="left" prefix="" suffix="+" prefix_icon="" suffix_icon="" text_color="" number_color="" size="100" title="Your title"][/counter][counter number="20" from="0" speed="2000" delay="" align="left" prefix="" suffix="-" prefix_icon="" suffix_icon="" text_color="" number_color="" size="20" title="Your title"][/counter]

1.19. IconboxHere are the parameters of this shortcode:

icon: Select an icon from icon set. It can be an image URL as well.title: Name of the iconbox.link: The URL of “Learn more” button.link_text: Default is “Learn more”.layout: You can choose either 1, 2 or 3.align: left, right or center. Default is left.animation: True or false.css: Custom css.

Layout 1 and Layout 2

[iconbox title="Your title" layout="1" icon="home" link="#" link_text="Learn more" align="" animation="false" delay="" css=""]Content Here[/iconbox][iconbox title="Your title" layout="2" icon="home" link="#" link_text="Learn more" align="left" animation="false" delay="" css=""]Content Here[/iconbox]Layout 3

[iconbox title="Your title" layout="3" icon="home" link="#" link_text="Learn more" align="left" animation="false" delay="" css=""]Content Here[/iconbox]

Layout 1 and Layout 2 - Image

[iconbox title="Your title" layout="1" icon="button link" link="#" link_text="Learn more" align="left" animation="false" delay="" css=""]Content Here[/iconbox][iconbox title="Your title" layout="2" icon="button link" link="#" link_text="Learn more" align="left" animation="false" delay="" css=""]Content Here[/iconbox]

Layout 3 - Image

[iconbox title="Your title" layout="3" icon="button link" link="#" link_text="Learn more" align="left" animation="false" delay="" css=""]Content Here[/iconbox]Layout With Animation

[iconbox title="Your title" layout="2" icon="home" link="#" link_text="Learn more" align="left" animation="true" delay="200" css=""]Content Here[/iconbox]

1.20. MembersStandard

[member image="Image URL" full_image="" image_pos="top" name="Maria San" role="Model" facebook="#" twitter="#" instagram="#"]YOUR CONTENT[/member]

Image Bottom or Left-Right

[member image="Image URL" full_image="" image_pos="bottom" name="Maria San" role="Model" facebook="#" twitter="#" instagram="#"]YOUR CONTENT[/member]

Member Style 2 and Style 2 Left-Right

[member image="Image URL" full_image="" image_pos="top" name="John Doe" role="Web Coder" facebook="#" twitter="#" google_plus="#"]YOUR CONTENT[/member][member image="Image URL" full_image="" image_pos="right" name="John" role="Developer" style="2" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]YOUR CONTENT[/member][member image="Image URL" full_image="" image_pos="left" name="Christine" role="Developer" style="2" facebook="URL Facebook" twitter="URL Twitter" google_plus="URL Google Plus"]YOUR CONTENT[/member]

Here are the parameters of this shortcode:

Image URL:The link URL that image should link to.image_pos:the position of image. You can choose either right, left, top or bottom.name:the name of member image.

style:1 or 2.link:the link of social account.

1.21. PricingHere are the parameters of this shortcode:

title: The name/title of price.price: The new price.old_price: The old price.unit: the unit of price. For example $, VNDunit_position: The position of unit. You can choose left, right. Default is leftlink: The link URLlink_text: Default is "get the quote"featured: True or falsecolor: Its value can be any color: red, blue, orange… or a custom color codetarget: _self to open link in same tab, _blank to open link in a new tab. Default is _self.

Standard Table and Features List

[pricing separated="false"] [pricing_column title="Your title" price="29.9" old_price="35.5" unit="$" unit_position="left" link="#" link_text="Your text here" target="_self" featured="false" color=""] <li>Content here</li> <li>Content here</li> <li>Content here</li>[/pricing_column][/pricing]

[pricing separated="true"] [pricing_column title="Your title" price="29.9" old_price="35.5" unit="$" unit_position="left" link="#" link_text="Your text here" target="_self" featured="false" color=""] <li>Content here</li> <li>Content here</li> <li>Content here</li>[/pricing_column][/pricing]

5 Columns and 3 Columns

[pricing separated="false"] [pricing_column title="Your title" price="29.9" old_price="35.5" unit="$" unit_position="left" link="#" link_text="Your text here" target="_self" featured="false" color=""] <li>Content here</li> <li>Content here</li> <li>Content here</li>[/pricing_column][/pricing]

[pricing separated="true"] [pricing_column title="Your title" price="29.9" old_price="" unit="$" unit_position="left" link="#" link_text="Your text here" target="_self" featured="false" color=""] <li>Content here</li> <li>Content here</li> <li>Content here</li>[/pricing_column][/pricing]

Separated Pricing and Separated Pricing and Features List

[pricing separated="true"][pricing_column title="Your title" price="29.9" old_price="35.5" unit="$" unit_position="left" link="#" link_text="Your text here" target="_self" featured="false" color=""] <li>Content here</li> <li>Content here</li> <li>Content here</li>[/pricing_column][/pricing]

[pricing separated="true"] [pricing_column title="" price="" old_price="" unit="$" unit_position="left" link="" link_text="Your text here" target="_self" featured="false" features_list="true" color=""] <li>Content here</li> <li>Content here</li> <li>Content here</li>[/pricing_column][/pricing]

Using it With Layouts

[pricing separated="false"][pricing_column title="Your title" price="55.5" old_price="49" unit="" unit_position="left" link="#" link_text="Your text here" target="_self" featured="false" color=""] <li>Content here</li> <li>Content here</li> <li>Content here</li>[/pricing_column][/pricing]1.22. ProcessHere are the parameters of this shortcode:

title:the name/title of process.Image URL:the link that image should link to

Process

[process][step title="" image="" featured="false"]Content Here[/step][/process]

1.23. ProgressHere are the parameters of this shortcode:

percent: Should be a number from 0 – 100.color: Any color or it can be color code such as #958cd6text_color: You can use any color for text or color code such as #000000title: The name/titleheight: The height of progess bar. Default is 30style: Default is 2striped: True or falsespeed: Tracking speed. Default is 1000

Normal Style and Striped Style

[progress percent="70" color="" background_color="" text_color="" title="Your title" height="" striped="false" speed="" easing="easeOutExpo" /][progress percent="70" color="" background_color="" text_color="" title="Your title" height="" striped="true" speed="" easing="easeOutExpo" /]Multi-color Made For Your Needs

[progress percent="75" color="#2ecc71" background_color="" text_color="" title="Your title" height="" striped="true" speed="3000" easing="easeOutExpo"][/progress]

1.24. TestimonialHere are the parameters of this shortcode:

image URL: The link of imagename: The name of testimonial giverFrom: addressName URL: The link of nametarget: _blank to open the link in the new tab, _self to open the link in the same tab. Default is_blank

[testimonial image="" name="Alice" from="" link_name="" target="_blank"]Content Here[/testimonial]

[flexslider effect="slide" auto="true" auto_time="4000" speed="500" pager="true" navi="false"][slide][testimonial image="" name="Alice" from="" link_name="" target="_blank"]Content Here[/testimonial][/slide]

1.25. Video&AudioHere are the parameters of this shortcode:

width: The width of video. It can be 300, 500, 600...link: The link URL that video should link to.

Vimeo

[cy_embed width=""]Vimeo link[/cy_embed]

Youtube

[cy_embed width=""]Youtube link[/cy_embed][column size="1/2" last="false"][cy_embed width=""]Youtube link[/cy_embed][/column]SoundCloud

"[cy_embed width=""]SoundCloud link[/cy_embed]

1.26. AnimationHere are the parameters of this shortcode:

effect: Select one of these effects: bounce, pulse, swing, wobble.delay: The time that effect delays.

Let’s look at some animations in our huge collection

[animation effect="bounce" delay="1000"][/animation]

Ton of Features

[animation effect="flipInX" delay=""]Content Here[/animation][animation effect="fadeIn" delay="600"]Content Here[/animation]

[animation effect="fadeInDown"]Content Here[/animation]

1.27. BrandsHere are the parameters of this shortcode:

column: Number of columns you want your brands to display. Its value can be from 1 – 10.link: The URL that brand should link totarget:_self to open link in same tab, _blank to open link in a new tab. Default is _self.

Brands With 4 Columns and 5 Columns Padding and Grayscale

[brands column="4" padding="false" grayscale="false"][brand title="Brand title" tooltip="true" link="#" target="_self"]URL image here[/brand][brand title="Brand title" tooltip="true" link="#" target="_self"]URL image here[/brand]Brands in Slider

[content_slider auto="false" auto_time="5000" speed="500" pager="true" navi="false" touch="true" mousewheel="false" loop="true" keyboard="false"][slide][brands column="5" padding="false" grayscale="false"][brand title="Brand title" tooltip="true" link="#" target="_self"]URL image

1.28. Post & PortfolioHere are the parameters of this shortcode:

column: Number off columns to display . Its value can be from 1 – 10.filter: Choose true or false.style: Portfolio styles>.padding: Choose true or false.

4 Columns

[portfolio number="4" column="4" style="text-grid" filter="false" padding="true /]

5 Columns

[portfolio number="10" column="5" style="gallery-grid" filter="false" padding="true /]

Masonry

[portfolio number="9" column="3" style="gallery-masonry" filter="true" filter_style="2" padding="false /]

Recent Projects

[portfolio_carousel number="10" column="2" effect_3d="true" padding="true" navi="false" pager="true" auto="true" auto_time="" speed="" loop="true" touch="true" mousewheel="true" keyboard="true" /]

1.29. FullwidthHere are the parameters of this shortcode:

padding: Top, bottom, left, right.Background Color: Basic color or color code.Background Position: Left, right, top, bottom.Parallax: Choose true or false.Clipmask % Opacity: Between 1-100.Overlay Opacity: Between 1-100.White text: Choose true or false.Shadow: Choose true or false.

[fullwidth id="" padding_top="" padding_botom="" padding_left="" padding_right="" margin_top="" margin_bottom="" background_color="" background_image="" background_position="left top" parallax="false" overlay_color="" overlay_opacity="" text_color="" text_white="false" shadow="false" clipmask_opacity=""][/fullwidth]

1.30. IconHere are the parameters of this shortcode:

icon: name of icon.See full list of icons here:http://demo.themelead.com/pi/icon/Background Color: basic color or color code.link: icon link.target: _self to open link in same tab, _blank to open link in a new tab. Default is _self.

Icon Shortcode

[icon icon="twitter" color="" size="" link="#" target="_self" title="Your title" background_color="" /][icon icon="facebook" color="" size="" link="#" target="_self" title="Your title" background_color="" /]Simple Icon Shortcode

[i icon="twitter" color="" /]

Entypo Icon

[iconlist][li icon="icon title"]google-plus[/li][li icon="icon title"]facebook[/li][li icon="icon title"]twitter[/li]Awesome Icon

[iconlist][li icon="glass"]glass[/li][li icon="music"]music[/li][li icon="search"]search[/li][li icon="envelope-alt"]envelope-alt[/li][/iconlist]SHOP

How To Create Your Products Step 1: In the dashboard, Click on the Products sidebar menu and click on “Add Product” button. Enter aname for your product.

Step 2: Write the product description into the post content field, this will be all the product information.

Step 3: You enter the product information price, SKU, shipping, and more) into the “Product Data”.

Step 4: The “Product Short Description” permit you to write the short information about product.

Step 5: Set “Featured Image” in the right sidebar.

Step 6: When all manipulations are finished, click “Publish” to show on your main shop page.

The Product Page is Described Above.

How To Adjust WoocommerceStep 1: Click on the WooCommerce menu item.

Step 2: Click on “Product” tab. There is a “Product Listings, Product Data, Product Image Size &Downloadable Products”.

Step 3: The “Product Listings” is where you can select options to show products.

Step 3: In Product Image Size section, Catalog Image is for your images on the shop page and forshortcodes. Single Product Image is for your images on the single product pages. Product Thumbnails is foryour smaller product thumbnails for widgets.

Step 5: Set “Featured Image” in the right sidebar.

Step 6: When all manipulations are finished, click “Publish” to show on your main shop page.How To Customize Your Own Shop Page in Woocommerce

Layout fullwidth: Hover effect product-Slide (http://demo.themelead.com/pi/product-category/full-width/)layout with Sidebar: Hover effect product-Slide (http://demo.themelead.com/pi/product-category/with-sidebar/)

Layout fullwidth: Hover effect product-Fade (http://demo.themelead.com/pi/product-category/full-width/)layout with Sidebar: Hover effect product-Fade (http://demo.themelead.com/pi/product-category/with-sidebar/)

In Shop Archive Template, you can choose 3 template: Width Sidebar, No Sidebar or Fullwidth

For With Sidebar, you can choose Right Slidebar or Left Slidebar

Front-end setttings

Fullwidth (http://demo.themelead.com/pi/product-category/full-width/)With Sidebar (http://demo.themelead.com/pi/shop/)

In Single Product, you can customize your page with 3 templates : Width Sidebar, No Sidebar orFullwidth and 2 Sidebar position: Right sidebar or Left sidebar

Front-end setttings

Fullwidth (http://demo.themelead.com/pi/product/blue-shirt/)With Sidebar (http://demo.themelead.com/pi/product/blazer/)

On single product page, if you want to display the buttons to share your products on social networkssuch as facebook, twitter, pinterest, google+, tumblr, email, or display related products you only selectOn or Off. On if you want to display and Off is opposite.

In detail, there are options for you selecting such as number of related products to show, number ofrelated products items per row, number of up sell products to show, number of up sell products itemsper row.

SIDEBAR

To Create a New SidebarStep 1: Navigate to Appearance >>> Widgets, you will see your sidebars on the right side.

Step 2: To create a new sidebar, you click "Create a new sidebar" button, give it a name and save it.

Step 3: On the left side you can see all the widgets you can use.

Step 4: Make sure you click Save all changes.

1. Some options about sidebar in widget

Theme Sidebars

The main sidebar of your site can appear the right or left of posts or pages:

Search: You can find all posts

Tag Cloud: There are options in taxonomy: tags, portfolio categories, product categories, product tags,shipping classes

Recent Posts: To display latest posts, order descending or ascending, order title, date or random. Besides,you can choose show or hide for display thumbnail and display date.

Latest Tweets, Facebook, Google plus badge: Social networks, your URL

The shop sidebar is used for Woocommerce Plugin:

Footer 1: To display recent projects

Footer 2: To display recent posts

Footer 3: To display tag cloud

Footer 4: Used in the footer areaCustom Sidebars

Sticky Sidebar

Side Navigation

Sidebar Scroll

2. Customize the page sidebar width

To Adjust A Sidebar To a post/page:

Step 1: Edit or create a new Page or Post.

Step 2: In Page Layout section, you will see sidebar. Also choose page layout with sidebar (left or right),fullwidth, customize sidebar and adjust page sidebar width.

Step 3: On the right hand side you can see Sidebar section. Here you can replace the default sidebars. Simplyselect what sidebar you want to show for this post.

Step 4: Make sure you click Save all changes.

FEATURES

HeaderMain Header Setup

To setup Header, Follow the steps below

Step 1: Navigate to Appearance >> Theme Options >> Choose Header to display Header options.

Step 2: There are two Header Layouts for choosing. Header layout 1 will be selected by default, if you wantto select any of the 2 header layouts, you only need to click on the one. Check On to enable the sticky menu.Please note, the sticky menu will always use our header 1 design for technical reasons. Similarly, check On to

show search form

Front-end setttings

Adding the Logo

Pi requires that you upload your logo as an image file. The best size is 180x40px. Please use jpg, jpeg,png or gif image for best performance. Pi is also retina ready so there are additional options to upload a retina2x logo and specific instructions that need to be followed for it to display correctly on retina ready devices.

To Insert Your Logo, Follow The Steps Below.

Step 1: Navigate to Appearance >> Theme Options >> Choose Header to Setup.

Step 2: You will see three logo options, one is to use text logo, you turn ON if you want to use text logoinstead of image logo, the other is standard desktop and the final one is for retina logo. Click upload buttonand select your logo file..

Step 3: If you are using a regular logo, the best size is 180x40px. Please use jpg, jpeg, png or gif image forbest performance. If you are uploading a retina logo, it needs to be exactly 2X the size of the regular logo. Forexample, if the standard logo is 180x40px, the retina logo should be 360x80px. Click upload button and selectyour retina logo.

Step 4: There are also options to choose alignment of the logo, and adjust the left, right logo margins. Thisallows you to fine tune the placement of your logo.

Step 5: Click to Save all changes and see them on front-end.

Front-end setttings

Footer

Main Footer Setup

To setup Footer, Follow the steps below

Step 1: Navigate to Appearance >> Theme Options >> Choose Footer to display Footer options.

Step 2: There are seven Footer Sidebar Layout options for you selecting. See changes when you selectdifferent types of Footer Sidebar Layout at Front-end Settings Below.

Step 3: You can setup Footer background image by uploading an image file.

Step 4: To select Footer background color you click to Select Color, choose any color you want to.

Step 5: There are also options to choose Footer Background position(http://www.w3schools.com/cssref/pr_background-position.asp) (left, right, center, top or bottom), FooterBackground repeat (http://www.w3schools.com/cssref/pr_background-repeat.asp), Footer Background size(http://www.w3schools.com/cssref/css3_pr_background-size.asp).Front-end Settings

The Pi footer consists of the widget area and the copyright area. Both of these areas can be configured intheme options on the Footer tab. The widget area permit you to select to show 1, 2, 3 or 4 columns in thefooter sidebar layout option, you can see some changes when you select different types of footer sidebarlayouts.

Footer Bottom Setup

To setup Footer, Follow the steps below

Step 1: Navigate to Appearance >> Theme Options >> Choose Footer to display Footer options.

Step 2: Copyright area, you will enter information into Footer copyright text area such as product name,author, year.

Step 3: Selecting Footer menu. Menu 1 will be selected by default. Besides, there are options for selectingsuch as side navigation, side scroll, top menu, top menu scroll, top menu no scroll

Step 4: Footer Right Bottom area is to display social networks, by turning On to enable social networks youwant to display.

Front-end setttings

Slider

Pi includes 3 amazing sliders; Revolution Slider, FlexSlider, Touch Slider. Each slider can be used on any pageor post and offers its own set of unique options. The following sections will cover several different sections ofthe slider that are listed below.

Revolution Slider

To Create A New Revolution Slider, Follow The Steps Below.

Step 1: Click on the Revolution Slider sidebar item in your admin section, then click the Create New Sliderbutton.

Step 2: Then select the Slider Layout type, each type will have its own settings. Set the Grid and Responsivesettings here also. View the layout example diagram below this area to understand what each section is

Step 3: From the post editor insert the shortcode from the sliders table.

Step 4: Once you are done, click Create Slider and your new slider will be made.

To Add Slides To Your Slider, Follow The Steps Below.

Step 1: Click the first Edit Slides button in the Revolution Slider settings.

Step 2: You will see main slider settings and general settings that allow you to customize the slider.

Step 3: Click the second Edit Slides button in the Revolution Slider settings.

Step 4: When done, you will see a new slide box, click Edit Slide to open the slide editing section. This iswhere you add all your slide content..

Step 5: The slide editing section has many different sections that allow you to customize the slide. We cannotcover them all, but please do check out each one..

Step 6: When finished, click Update Slide to save it. Repeat process for more slides.

Edit Slide

Title Bar

To Set Different Settings Per Page/Post, Follow The Steps Below.

Step 1: Open an new page or post in your wordpress admin

Step 2: The Page Title Bar Options section, there are a lot of options that you can set to customize the pagetitle bar per page or post. You can show or hide the bar per page/post, select titlebar layout, enter Pagetitlebar font size, top padding, bottom padding, choose background image or color, style, enter custom titlebarcontent.

Step 3: When finished, make sure to save the page or post.

THEME OPTION

General

Step 1: Navigate to Appearance >>> Theme Options >>>General.

Step 2: General in Theme Options is where you can customize general options such as responsivelayout, header code, footer code or custom CSS and Icons.

Step 3: If you want your site on mobile devices to look the same as on the desktop screen, you check OFF inresponsive layout field. Check ON to enable debug options and show breadcrumb if you want to. Besides, youcan customize sidebar width

Step 4: For Header code, Footer Code, custom CSS you can load Google Font, fill Google Analytics trackingcode, or write your custom CSS.

Icons

There are numerous types of icon such as favicon, Iphone icon, Iphone retina icon, Ipad icon, Ipad retinaicon. You only need to upload icons as a image file

Favicon - Favicon is a small icon image at the topbar of your browser.

Iphone icon - The iPhone icon is a file used for a web page icon on the iPhone. When someone bookmarksyour web page or adds your web page to their home screen, this icon is used. If this file is not found, theseproducts will use the screen shot of the web page, which often looks like no more than a white square.

Iphone retina icon - The same as iPhone icon but for Retina iPhone.

Ipad icon - The same as iPhone icon but for iPad.

Ipad retina icon - The same as iPhone icon but for Retina iPad.

Icon Lists (http://demo.themelead.com/pi/icon/)

TopbarStep 1: Navigate to Appearance >>> Theme Options >>>Topbar.

Step 2: In Topbar Tab, you can check ON to show topbar. Topbar text permits you to write HTML,besides, you can also select menu styles in topbar menu.

Front-end setttings

LayoutStep 1: Navigate to Appearance >>> Theme Options >>>Layout.

Step 2: Layout tab in theme options is where you can customize content width. You can choose contentwidth in the range from 940px to 1200px.

Front-end setttings

Layout With Left Sidebar (http://demo.themelead.com/pi/this-is-page-title-4/)Layout With Right Sidebar (http://demo.themelead.com/pi/this-is-right-sidebar-page/)Layout With Fullwidth (http://demo.themelead.com/pi/this-is-page-title-2/)Layout No Sidebar (http://demo.themelead.com/pi/this-is-no-titlebar-page/)TitleBar

The Title Bar Options section, there are a lot of options that you can set to customize the page title barper page or post. You can show or hide the bar per page/post, select titlebar layout, enter Page titlebar fontsize, top padding, bottom padding, choose background image or color, style, enter custom titlebar content,choose background position, customize titlebar shadow opacity, titlebar overplay cpacity, titlebar clipmaskopacity according to percentage.

StylePrimary ColorStep 1: Navigate to Appearance >>> Theme Options >>>Style.

Step 2: Select color for site in primary color (main color) and select color for the background when youuse mouse to select text, elements in selection color.

Sample Color and Custom Color

Links

You can select color for link, link hover and choose link decoration or link hover decoration with styles ofunderline or none.

TypographyFont FamilyStep 1: Navigate to Appearance >>> Theme Options >>>Typography.

Step 2: You can choose a normal font or Google font for Navigation, Heading and Body.General Font Size

In this section, you can customize Font size for Heading types or Body.

Elements Font Size

You will customize Main navigation, Submenu of Main navigation, Titlebar title font size in elements fontsize section.

BlogBlog LayoutStep 1: Navigate to Appearance >>> Theme Options >>>Blog.

Step 2: Blog tab in theme options help you select blog style such Large, Medium, Grid, Masonry or Timeline,choose Blog Child Style: Large Side Date, Masonry 2, 3, 4 Columns or Masonry no isotope. Besides, you canalso select Blog Sidebar Position (right sidebar, left sidebar, no sidebar or fullwidth).

Front-end setttings

Blog Timeline (http://demo.themelead.com/pi/blog-timeline/)Blog Large Fullwidth (http://demo.themelead.com/pi/blog-large-fullwidth/)Blog Medium Fullwidth (http://demo.themelead.com/pi/blog-medium-fullwidth/)Blog Masonry Fullwidth 3 Columns (http://demo.themelead.com/pi/this-is-a-standard-post-2/)Standard Post ()

Blog Show/Hideing OptionsStep 1: Navigate to Appearance >>> Theme Options >>>Blog.

Step 2: There are options about content or excerpt. Select display post content or excerpt on the blog, adjustexcerpt length (words), choose true if you display infinite scroll. Especially, Blog Timeline permit you toupload image as a file.

Step 3: To display categories filter, title link, post date, number of comments, categories, author, excerpt,"Reamore" link, tags, social share you only need to turn On.Social Impact

Similarly, turn On to show social buttons and turn Off if you do not want to display them.

SingleSingle LayoutStep 1: Navigate to Appearance >>> Theme Options >>>Single.

Step 2: Select single layout such as right sidebar, left sidebar or no sidebar. Right sidebar will be selected bydefault.

Front-end setttings

Layout With Left Sidebar (http://demo.themelead.com/pi/this-is-page-title-4/)Layout With Right Sidebar (http://demo.themelead.com/pi/this-is-right-sidebar-page/)Layout No Sidebar (http://demo.themelead.com/pi/this-is-no-titlebar-page/)MetaStep 1: Navigate to Appearance >>> Theme Options >>>Single.

Step 2: Check On if you want to show categories, post date, post navigation links, post tags, author box,related post, comment form on single post. Check Off if you don't want to display them.

PortfolioSingle PortfolioStep 1: Navigate to Appearance >>> Theme Options >>>Portfolio.

Step 2: You can fill Portfolio slug, Related portfolio title, check On to show related post on single portfolio.Portfolio CategoryStep 1: Navigate to Appearance >>> Theme Options >>>Portfolio.

Step 2: You write Portfolio Category Slug, Sidebar name and choose Layout (left sidebar, right sidebar orfullwidth).

Step 3: Select style for your portfolio. There are options such as Gallery Masonry, Gallery Grid, Text Masonry,Text Grid.

Step 4: Child style includes Gallery Masonry free style and Gallery Grid no padding. You can choose either ofstyles.

Step 6: Select the number of columns for your portfolio: 2 columns, 3 columns, 4 columns and 5 columns.

Step 7: There are also options about title bar, Portfolio Infinite Scroll, Portfolio display filter. Check On toshow titlebar and portfolio display filter, check true to enable portfolio infinite scroll.

Front-end setttings

Gallery Grid 2 Columns (http://demo.themelead.com/pi/gallery-grid-2-columns/)Text Grid 2 Columns (http://demo.themelead.com/pi/text-grid-2-columns/)Gallery Masonry 2 Columns (http://demo.themelead.com/pi/portfolio-gallery-mansory-2-columns/)Text Masonry 2 Columns (http://demo.themelead.com/pi/text-masonry-2-columns/)Text Grid Portfolio Style: Text Grid 2 Columns, Text Grid 3 Columns, Text Grid 4 Columns, TextGrid 5 Columns and Text Grid W/Sidebar

404 Page

Social

Step 1: Navigate to Appearance >>> Theme Options >>>Social.

Step 2: Social Tab in Theme Options is where you will insert your custom social media links you want todisplay. If you want to display Facebook icon, Twitter icon or Google+ icon in header or footer you need toinsert the URL of your Facebook, Twitter, Google+ in the corresponding field.

Step 3: To display icon title when you hover icons, you only need to turn On in the icon title field.Social Icon Style Options

Backup Options

Step 1: Navigate to Appearance >>> Theme Options >>>Backup Options.

Step 2: In Backup Options tab you can use the two buttons backup options and restore options to backupyour current options, and then restore it back at a later time. This is useful if you want to experiment on theoptions but would like to keep the old settings in case you need back.

MEGA MENU

To Create A New Menu, Follow The Steps Below.

Step 1: Navigate to Appearance >>> Menus section.

Step 2: Click the “Create A New Menu” to make a new menu. Enter the name menu you want to create,then click the “Create Menu” button.

Step 3: To add a menu item, select one of your created pages on the left hand side and click “Add toMenu”. You can also add any posts from the left side.

Step 4: To add a custom menu item, enter a custom name and link into the “Links” box.

Step 5: Make sure you click the “Save” button.

The Mega Menu

Create A Mega Menu

Step 1: Navigate to Appearance >>> Menus section and select to create a new menu, or edit a currentmenu.

Step 2: First level items can enable the Mega Menu. Click the “arrow icon” next to any parent level menuitem to expand the option box. You will see an option to “Enable Fusion Mega Menu”, check the box.

Step 3: Select Yes to display the “Mega Menu Fullwidth”. Also choose "Mega Menu Position" such as Leftor Right.

Step 4: If using Mega menu background, click the “Upload Image” button to upload an image.

Step 5: Second level menu item will show the title text above each column. To add a second level iteminside the Mega Menu, select one of your pages on the left hand side and click “Add to Menu”.

Step 6: The Third level will be the smaller menu items in each column. To make it a third level, drag themenu item into place, below and to the right of the second level.

Step 7: Make sure you click the “Save” button.Descriptions of the menu section described above.