We would like to thank you for purchasing Flatter!

This documentation file helps you to understand the whole theme concept and how it works. You should read all sections of the file before start your work. Here have multiple detailed explain of elements, theme sections and included video tutorials.

If you have any questions that are beyond the scope of this help file, please check out Knowledge base and search for Forum page.

After that you still can't find the solution yet, please leave a ticket on Support system then support agents help your issue.

Surely you have already installed WordPress on your server. If you don't installed it yet and you are new to WP and have problems installing it, you might want to check out following tips.

About WordPress
Detailed instruction about WordPress
Installing Tutorials
Installation tutorial by WordPress
Instructional Video
Video lessons by Woo Themes
Getting Started
WordPress Tips for Beginners
WP101 Basix Training
Some great videos from WPTuts on WordPress

You need to download theme files after you've purchased the it. Following image describes downloads section of the item and you have 2 download choices.

Download Package


Downloading All Files gives you a all-files.zip file with all the content listed below

This is costumer's handbook. Obviously, If you can reading this file, you're open this file :)
Flatter (Zip)
You can use this file for install function of built in WordPress.
Flatter-Child (Zip)
Child theme file. This child theme helps you to keep your changes in it. You should read more details about child theme here.
Licencing (Folder)
This contains the licensing files.
PSD (Zip)
This contains all the layered PSD files for those developers or designers who want to customize the design further.
DummyData (Folder)
Contains XML files those keep demo site content. You should read about how to use it from Dummy Data part of this document.
Changelog (Text)
Contains changes history, date and modified files list.

Downloading the installalable WordPress theme only gives you the Flatter.zip file.

You can either choose to upload the theme to your server via WordPress upload function or your server via ftp.

1. Via WordPress theme uploader (recommended)

Step 1
Login to your website
Step 2
Go to Appearance -> Themes
Step 3
Click on Install Themes tab
Step 4
Click on Upload link and Browse to the Flatter.zip file (it is located in the folder you've downloaded from ThemeForest).
Step 5
Click Install Now button
Step 6
Then you see Flatter settings page right side on Dashboard menu section.
Step 7
Now you are ready to go. Create your new site and control it.
Step 1

2. Via FTP client

Step 1
Login to your hosting via FTP client application (such as FileZilla and CuteFTP)
Step 2
Go to wp-content -> themes directory
Step 3
Upload Flatter folder (uncompressed) into this directory
Step 4
Refresh Appearance -> Themes of your dashboard and Activate the theme.

After the activation you see this notice at top of your dashboard. This theme requires those two plugins and you need to install it.

Please click on Begin insalling plugins.

Step 1
Envato Toolkit
The Envato WordPress Toolkit enables you to access your Envato WordPress purchases from within your WordPress Dashboard. It allows you to not only install themes, but also to receive update notifications and update automatically, just like regular WordPress themes.
Layer Slider
The most advanced Responsive WordPress Slider Plugin with the famous Parallax Effect and 3D Transitions! You can use LayerSlider to create a breathtaking Image Slideshow, Banner Rotator or Content Slider to your site!
Revloution Slider
This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

Please select all or desired plugins then select Install option on dropdown and click on Apply button.

Step 2

You will see this page after activated plugins.

Step 3

Configure Envato Toolkit Plugin

Envato Toolkit plugin requires MarketPlace username and API Key. You can get API key from your Settings tab of ThemeForest account. Lets provide those infomation and get theme update everytime and easily.

Step 4

One Click Demo Data Options

Theme had dedicated data option on Theme Options panel.

Demo data

You have to select your desired page and click on Import button.

LayerSlider data

LayerSlider content included on the theme and it will include automatically when you insert one of the demo data.

You can add multiple pages with multiple button clicks.

Full content Demo site setup

XML data imports only page and post content. Therefore we need to set following few simple options on your site again.

Set Main Menu

Please go to the Appearance => Menus and select your custom menu on Primary menu location.

Dummy data

Set Example Home page on Front of your site

Please go to the Setting => Reading and select your custom page as Front Page on Static pages section of FrontPageDisplays.

Dummy data

Please go to the Theme Options => Footer and enable Footer area and select your layout.

Dummy data

Then go to the Appearance => Widgets and include your widgets into Footer sidebar areas.

Dummy data


Please make sure you backup your existing theme folder before updating. Additionally we recommend performing the update on a development site before making it on your live site.

Via Envato Toolkit Plugin (recommended)

Hope you have provided your account information in Envato Toolkit plugin. If you go to the plugin page, you'll see similar to following image. Let's click on Update automatically link at right bottom. This is a most efficienat and easy way to integrate latest verion on your site.


After clicking to auto-update, you’ll see the confirmation that everything worked correctly.

Via WordPress theme uploader

Go to the Appearance => Themes and activate another theme than Flatter such as TwentyTwelve, TwentyThirteen or Flatter child theme. Delete the old version of the theme because folder name existing error comes up when we try to install it without deletion. Then install the theme again as you see early in this documentation.

Via FTP client application

Usually updating a theme means replacing the old files with the new ones. You can see changelog.txt file from the new download archive and you can get updated files list as modified/added and deleted. Upload and overwrite those files on your theme directory.

If theme changed lots of files and you really hard to collect changed files, there is a better way to do it when it comes to WordPress themes.

WordPress treats two version of the same theme as different themes. That is, if you have Flatter v1.2 and v1.3 in your wp-content/themes folder they are treated as two different themes independent of each other.

That means you can have multiple version of the same theme installed on your blog. So whenever there is a new version of your theme available, instead of replacing or deleting the files of the older version follow this procedure.

  1. Try to upload new theme archive to the site
  2. If the folder name of the new version clashes with the old version, rename the folder of new version.
  3. Upload the new version to your wp-content/themes folder via FTP or through the interface provided by your web host or by using the upload feature in WordPress.
  4. Activate the new version from your dashboard.

The main advantage of following the above procedure is you can quickly switch back to the old version of the theme if you find any problems with the new version or if it clashes with any plugins you are using.

Theme Options panel has many options those help you to control your site. You have to know only where your desired options exist and how to use them. Please take some time to navigate through each tab and read option's description.

Theme Options Panel

The theme has detailed color options which builtin WP Customize functions. Please click on Color Options link from the WordPress admin bar and use the dedicated color options for your specific parts.

Color Options

Activate Page Builder

Starting Page Builder

Add Element and Control buttons

Choose an Element. All elements are based on WP shortcode.

All elements have common controls such as Edit, Clone and Remove. Also you can order and arrange elements with Drag and Drop.

You can save current layout as a Template. Then you can apply it on another pages.

Short video about Page Builder

A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post.

Post Options

Flatter supports WP 3.6 post format and this style is inherited by 3.6. But it doesn't matter and works equally if you are using previous version of WordPress core.

  • aside - Typically styled without a title. Similar to a Facebook note update.
  • gallery - A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
  • link - A link to another site. Themes may wish to use the first <a href=""> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
  • image - A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
  • quote - A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
  • status - A short status update, similar to a Twitter status update.
  • video - A single video. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
  • audio - An audio file. Could be used for Podcasting.
  • chat - A chat transcript.

More about Post Format here http://codex.wordpress.org/Post_Formats

Page Options

You'll find Page options at bottom of your main editor. Then you can control your page with that. Please read the option name and description and use them :)

General Page Options General Page Options

One Page Options

Yeah, I hope you like One Page design already. Here you can see how to accept One Page with this theme. Prepare you pages as you want there and follow the steps in this image.

Page Options

You see background image moves different apparent position when you scroll you page down. That parallax effect can apply for background images of Page and Row element.

Page Parallax

Row Parallax

Video Background

Version 1.2 included Background video option on Row element. You can set up this beautiful option like following. Lets edit your Row element and set video options.

Most of themes provide portfolio single layouts. But we don't because our theme has Page Builder. You can build any custom layout and use it with Template for all of your portfolio items.

Add Portfolio Item

Video and Gallery portfolio items

You can show your portfolio items as Gallery and Video posts. Please use following options for your need.

Create Portfolio Page

You need to do following steps for your menu.

If you need to use your custom menu icons there, you should upload them on Icon field as above image. You need to resize and upload there proper image and control your image icons with this css selector.

img.nav-custom-icon { width:14px; height:12px; }

If you need sub menu treasures (only for sub elements of mega menu), you should make following changes on your sub menu elements.

Theme has 27 page builder elements. And all those elements can introduce by shortcodes.

Theme includes shotcode selector which provides simple shortcodes for your editor. But if you need all elements by shortcode, you should get it from following details.

Next 3 attributes are common in all shortcodes.

Animation element appears first. (Default value: none) [top-to-bottom, bottom-to-top, left-to-right, right-to-left, appear]
(Default value: none) Add here a class name then add your custom styles on Theme Options => Custom CSS tab
You can control your element with this Responsive Visibility option on any custom resolution. []

Row Element

Its based on Bootstrap grid system. Just like bootstrap "row" class. But it's improved row element.

(Default value: false) [true|false]
(Default value: transparent) hex code e.g #000 for background color of filled area in row
(Default value: none) the path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
[no-repeat | repeat | repeat-x | repeat-y | cover]
[top left/top center/top right/center left/center center/center right/bottom left/bottom center/bottom right]
width (column)
blox_column Column with [1/1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/6, 5/6]

[blox_row fullwidth="true" color="#2980b9" image="{image_url}" bg_repeat="cover" bg_position="top left" bg_attach="parallax" extra_class="{extra_class}"]
	[blox_column width="1/2"]content[/blox_column]
	[blox_column width="1/2"]content[/blox_column]

Text Element

Text Element is core element of PageBuilder. You can use anywhere.

It's title of element.
[blox_text title="title" animation="top-to-bottom" extra_class="extra_class"]content[/blox_text]

Accordion Element

This is an accordion element. It will only one section open at a time

It's title of element
It has 2 kind of appearances. (Default value:0) [0|1]
title (item)
blox_accordion_item It's title of section
icon (item)
blox_accordion_item It's icon of section
collapse (item)
blox_accordion_item If you check this option, it will opened when appear. [0|1]

[blox_accordion title="Accordion Title" animation="none" border="1"]
  [blox_accordion_item icon="icon-user" collapse="1" title="Section1"]content[/blox_accordion_item]
  [blox_accordion_item icon="icon-user" title="Section2"]content[/blox_accordion_item]
  [blox_accordion_item icon="icon-user" title="Section3"]content[/blox_accordion_item]

Audio Element

Audio player. It works 2 ways. Self hosted audio or audio embed code.

it's title of element. Your custom title.
It has 2 options. URL and Custom Embed
the path of the audio file. starting with http... If you checked url on target option, It will works.
embed code. (soundcloud etc...) if you checked custom embed on target option, It will works.
color of audio player. It will work if you checked url on target option
[blox_audio title="title" type="url" url="url" color="#27ae60" animation="none" extra_class=""]

Blog Element

Audio player. It works 2 ways. Self hosted audio or audio embed code.

it's title of element. Your custom title.
It has 11 kind of appears. [regular | grid2 | grid3 | grid4 | masonry2 | masonry3 | masonry4]
You can filter post by categories, tags and post formats. [all | categories | tags | format]
It's filters of categories option. Maybe if you filtering by categories, it will categories ids (1,2,3...)
It's post loops content types.
Your custom read more text.
Post count
Pager options. You can show pager and hide page.
Post filter options. You can show filters and hide it.
It will work when cursor on post image.
If you want to exclude some posts in post elements, it will works. Add post IDs with comma separator. Example: 125,1,65
You can order post loops. By date ascending and descending and most commented
[blox_blog title="title" style="regular" categories="categories" blog_filter="15" content="both" readmore="read_more_text" count="10" pager="1" filter="1" overlay="permalink" exclude="0,1" order="default"/]

Button Element

This is button. Button has too many options. You can build too many different buttons.

Button text
Action link. it's also starts http://...
Link target. [0|1]. If you check this option, it will open new window.
Button general style. [default | flat | metro | 3d]
Button border style. [none | bordered | circle | rectangle]
Button hex color code. #ffffff etc...
Icon of button. icon-user... It's fontawesome icons.
Button size. [small | medium | large | xlarge]
Button align [left | right | center]
[blox_button text="Button" link="#" target="1" style="flat" border="bordered" color="#2980b9" icon="icon-camera" size="medium" align="left" animation="top-to-bottom"/]

Callout Element

Callout has big title with description and call to action buttons. You can customize all options

Content title
It has 2 styles. [default | boxed | bordered]
It will only work with metro style. It's content background color.
It's content margin right size (pixel sizes)
[blox_callout title="title" box_style="blox_elem_callout_clean" bgcolor="#ffffff" margin="0" animation="" extra_class=""]content[/blox_callout]

Content Box Element

It's boxed content.

Element title
Content box title
Content box background color (hex color)
Content box icon (It's fontawesome icon)
[blox_contentbox title="ContentBoxTitle" color="#d35400" icon="icon-camera" widget_title="Element title" animation="" extra_class=""]content[/blox_contentbox]

It's post carousel. You can use all of post types.

Element title
Post type. [post | portfolio | product | ...]
Category [all | category id...]
Post count
[blox_carousel title="title" post_type="post" category="15" count="6" animation=""]

Divider Element

Divider element. It's like spacer

It has 11 styles. [style1 | style2 | ...]
Line color
Space height (Margin top, Margin bottom size)
[blox_divider style="style1" color="#2980b9" height="5" extra_class=""/]

Galleries. It has 6 styles.

Element title
Gallery images attachment IDs.
Gallery style. [1|2|...]
[blox_gallery title="title" images="295,235" layout="1" animation=""]

Google Map Element

Google Map Element. You can use google map 2 ways. Embed code or coordinates.

Google map embed or custom option
Map zoom size.
Map's width is 100%, Height is your choice. (pixel size)
Decimal Deg. Latitude
Decimal Deg. Longitude

[blox_gmap select="embed" type="ROADMAP" zoom="14" height="400"]embed code[/blox_gmap]
[blox_gmap select="custom" lat="0.0" long="0.0" type="ROADMAP" zoom="14" height="400"][/blox_gmap]

Image Element

It's simple image with caption

It has 2 styles. [blox_elem_image_frame_border | blox_elem_image_frame_colored]
Image source URL. it's also starts with http://...
Image caption
image hover background color
If you want image click to action, its action url.
[blox_image style="blox_elem_image_frame_border" image="{image_url}" caption="Image Caption" color="#27ae60" link="#" target="1" /]

Heading Element

Heading Element is big title with description text

Content title
Background or border color. (hex color #ffffff...)
Title icon (fontawesome icons)
Heading styles. It has 6 styles. [default | style1 | style2...]
[blox_heading title="title" color="#27ae60" icon="icon-camera-retro" style="default" animation="top-to-bottom"]description[/blox_heading]

Iconic List Element

Simple list with icons

Element title
Icon (fontawesome icons)
Icon color

[blox_list title="Title" icon="icon-camera-retro" color="#c0392b" animation="top-to-bottom"]
	<li>list item 1</li>
	<li>list item 2</li>

Message Box Element

It's like Notification box.

Message text
Icon (fontawesome icons)
Message Box background color
[blox_notification text="Message" icon="icon-ban-circle" color="#d35400" animation="top-to-bottom"]

Portfolio Element

Portfolio element. You can use 7 different portfolio layouts.

It's element title
Portfolio has 7 different layouts (masonry, grid, regular etc...) [masonry2 | masonry3 | ... | grid2 | grid3...]
If you want to show choosed categories posts, it will helps. You can insert categories ids. (0,1,2...)
Portfolio count
Image height size (pixel)
Pager show or hide option
Filter section show or hide option
Portfolio item overlay option
If you want to exclude some posts from loops. it will helps. Portfolio ids in here. (0,1,2...)
You can order portfolio loops by date or most reading...
[blox_portfolio title="element title" style="masonry2" categories="203,202" count="8" height="200" pager="no" filter="yes" overlay="both" exclude="0,1" order="default"/]

Progress Bar Element

Progress title
Progress value (min-val: 0, max-val:100) percent
It has 9 styles. [style1 | style2 | ...]
Progress bar color
Progress bar icon (fontawesome icons)
[blox_progress text="Progress 1" percent="40" style="style1" color="#2980b9" icon="icon-cloud-upload"]

Service Element

Service title
Icon (fontawesome icons) or custom image url
Icon color
Background color depends service layouts
It has 14 layouts. Awesome! :).
[blox_service title="Title" icon="icon-camera" color="#27ae60" bgcolor="#2980b9" layout="style1" animation="top-to-bottom"]description[/blox_service]

Share buttons Element

Facebook share button. If you set value 1, it will active.
Twitter tweet button. If you set value 1, it will active.
Google+ share button. If you set value 1, it will active.
Pinterest share button. If you set value 1, it will active.
[blox_social fbshare="1" tweet="1" gplus="1" pinterest="1" align="left" animation="none"]

Slider Element

Layerslider or Revolution slider's id.
[blox_slider slider="layerslider-1"/]

Table Element

Element Title
Button icon of Table button row
type (row)
blox_table_row - Row type [default | header | price | button]
type (column)
blox_table_cell - Column type [default | highlight | description | center]

[blox_table title="Element title" button_icon="icon-camera-retro" animation="top-to-bottom"]
	[blox_table_row type="header"]
		[blox_table_cell type="highlight"]row1-1[/blox_table_cell]
		[blox_table_cell type="default"]row1-2[/blox_table_cell]
	[blox_table_row type="default"]
		[blox_table_cell type="highlight"]row2-1[/blox_table_cell]
		[blox_table_cell type="default"]row2-2[/blox_table_cell]
	[blox_table_row type="button"]
		[blox_table_cell type="highlight"]row3-1[/blox_table_cell]
		[blox_table_cell type="default"]row3-2[/blox_table_cell]

Tab Element

Element Title
Tab has 2 layouts. Horizontal or Vertical
Tab has 2 styles. Bordered or none bordered [0|1]
icon (tab item)
blox_tab_item - Title icon of Tab item
title (tab item)
blox_tab_item - Title of Tab tem

[blox_tab title="Element title" vertical_tab="1" border="1" animation="top-to-bottom"]
	[blox_tab_item icon="" title="Item 1"]content[/blox_tab_item]
	[blox_tab_item icon="" title="Item 2"]content[/blox_tab_item]

Toggle Element

Toggle title
If you check this option (set value: 1), it will opened when appear. [0|1]

[blox_toggle title="Blox Toggle" toggle_state="1" animation="top-to-bottom"]

Team Member Element

Element title
It has 2 styles. Rectangle or Circle. [style1 | style2]
Team Member image url. It's also starts with http://...
Member name
Job Position
Border color
Social links. facebook, twitter, googleplus, dribbble, pinterest, linkedin...

[blox_team title="Title" style="style1" image="image_url" name="Name" position="Position" color="#27ae60" social="facebook:#,twitter:#" animation="top-to-bottom"]
	Bio text

Testimonial Slider Element

Element title
It has 2 styles. with border color or background color. [single_color | full_color]
Color. It depends type options. (Border color or Background color)
author (item)
blox_testimonial_item Author name
position (item)
blox_testimonial_item Author's Job position
company (item)
blox_testimonial_item Company name
image (item)
blox_testimonial_item Author's image url. starting with http://...

[blox_testimonial title="Element title" type="single_color" color="#2980b9" animation="top-to-bottom"]
	[blox_testimonial_item author="Author" position="Position" company="Company" image="image_url"]
	[blox_testimonial_item author="Author" position="Position" company="Company" image="image_url"]

Video Element

Element title
It has 2 types. Self hosted video or Embed video(youtube embed...) [url | embed]
It's only work with url type(self hosted). Video url. starts with http://...
It's only work with url type(self hosted). Video Poster url. (image url)
It's only work with url type(self hosted). Player color. (hex color code)
It's only work with embed type. Video embed code. (youtube, vimeo embed codes ...)

[blox_video title="Element title" type="url" url="video_url" poster="video_poster_url" color="#27ae60" /]
[blox_video title="Element title" type="embed" embed="embed%20code" /]

Woocommerce Element

Element title
It has 2 types. Recent Products and Featured Products [recent_products | featured_products]
Post count for per page
Column count for appear
If you check this option (set value:1), it will order by date.

[blox_woo title="Element title" type="recent_products" per_page="12" columns="4" orderby="1"]

Sidebar Element

Sidebar name. It not a title.
[blox_sidebar sidebar="post-sidebar" /]

Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t even need to leave your web browser. To do an automatic install of WooCommerce log in to your WordPress admin panel and go to: Plugins > Add New.

In the search field type “WooCommerce” and click Search Plugins. Once you’ve found the plugin you can view details about it such as the the point release, rating and description. Most importantly of course, you can install it by simply clicking Install Now. After clicking that link you will be asked if you’re sure you want to install the plugin. Click “yes” and WordPress will automatically complete the installation.

It’s possible at this stage that you will be taken to a page requesting the FTP details of your webserver. This will be the case if you’ve not installed a plugin on this particular installation of WordPress before. If so, simply fill in your details to complete the installation.

Manual installation

The manual installation involves downloading the plugin and uploading it to your webserver via your favourite FTP application.

  1. Download the plugin to your computer.
  2. Unzip the file.
  3. Using an FTP program, or your hosting control panel, upload the unzipped plugin folder to your WordPress installation’s wp-content/plugins directory.
  4. Activate the plugin from the Plugins menu within the WordPress admin.

After you’ve installed and activated the plugin, be sure to select ‘Install WooCommerce Pages‘ to get started.

More details of WooCommerce setup

If you need more detailed documentation of WooCommerce usage, you should visit this link and get your information.

WooCommerce options (builtin the theme)

Download Package

Very first we need to select Footer layout on Theme Options => Footer.

Then we need to add widgets into Footer Sidebar area on Appearance => Widgets.

Thank you all of you guys for your amazing works. We always appreciated for you!

Open source projects

Licensed projects

jQuery & Plugins

Demo Graphics from Photodune site (didn't included in download)

If you have question beyond scope of this documentation, you can ask that on support forum.

Support forum