Download WordPress Flat Theme – HTML5 & Responsive – Free Bootstrap Framework – Beautiful Website Template
Download WordPress Flat Theme – HTML5 & Responsive – Free Bootstrap Framework – Beautiful Website Template
 |
| Preview WordPress Flat Theme – HTML5 & Responsive – Free Bootstrap Framework – Beautiful Website Template |
Flat Theme is a very beautiful, Multipurpose and Responsive HTML5 website template built using Twitter Bootstrap 3.0 Framework. It is one of the powerful and Responsive Web Designed template developed by ShapeBootstrap.
 |
| About Us Page Demo |
 |
| Mobile View |
 |
| Shows how Tags and Comments are used in Blog Page |
 |
| This is what we do or services page style |
 |
| Footer that displays in each page |
There are tons of custom post type for Accordion, Tab, Alert, Slider, Columns, Icons, Services and many more. Theme Options: Flat Theme is the first ever free responsive WordPress theme that comes with tons of theme options which allows to change the logo and favicon. Options to change header background color, text color, link color and link hover color is also available. Fonts can be changed from the Google fonts list. There are some more options available like contact page settings, change admin logo, Google analytics and so on.
“Flat Theme” Documentation
Installation
Download “Flat Theme” and save it to your local computer.
Install the theme from your WordPress Dashboard. Or, extract and copy the “flat-theme” folder to the wp-content/themes folder.
Now go to “Themes” from your WordPress dashboard and activate the “Flat Theme”.
Important Informations
Flat Theme Features
- 100% Search Engine Optimized Premium Quality Theme
- Fully Responsive Layout-Desktop,Tablet,Phone etc.
- Built with Bootstrap 3.0
- Fit for Blogging, Portfolio and Business
- Custom Post Type Carousel Slider, Portfolio, Pricing Table, FAQ, Services, Tabs, Accordions,
- Testimonials added.
- Language Translation Supports
- Shortcodes- Font awesome Icons, Buttons, Accordion, Columns, Button, Alert, Blocknumber, Block, Dropcap, Testimonial, Tabs and much more.
- Valid XHTML and CSS with jQuery.
- Isotope Portfolio Filter
- Rich typography
- Theme Options for changing site layout and different settings.
Importing The Demo Template Data
1. The sample-data.xml file is included within the Download package which will be used to import the content.
2. Navigate to WP Admin -> Tools -> Import.
3. Select and install WordPress importer.
4. Select the sample-data.xml file and upload it. It will in few minutes install and upload all content with images.
 |
| Importing The Demo Template Data |
5. Now navigate to WP Admin -> Appearance -> Menus page and select the newly created menu and assign it to “Main Navigation” location.
6. Import the sample-data.xml file from Tools>>Import>>Check the “Download and Import Data”.
 |
| Widget Settings Import |
7. Import the widgets.json file from Tools>>Widget Settings Import for import the theme default widget settings. A plugin is required named “Widget Data – Setting Import/Export Plugin” to import widget settings.
We have included the XML file from our demo named sample-data.xml, this allows you to quickly set up your “Flat Theme” as same way our demo is set up. Please note, the XML file includes all images and the slider data. Instructions on how to do this are below.
8. Default Theme Option settings are saved on theme-options.txt file. Copy and paste the theme-options.txt data and go to Appearance>>Theme Options>>Backup Options now click Import Options.
#sp-backup”>
Homepage Settings
Navigate to Menu Settings -> Reading and set “Frontpage” template from the dropdown menu as Front page.
#sp-home” style=”margin-left: auto; margin-right: auto;”> |
WordPress Reading Setting
Slider Settings
 |
| Slider Menu |
Developer have created few Post Types for this theme.To set up a Slider Go to WP Admin Dashboard. See a Menu named “Slider” is a post type, click Add New. Post Type “Slider” supports- Title, Editor, Thumbnail.
 |
| Slider Settings |
Slider has few settings with Background image, Button Text, Button URL, Boxed Styling, Positons-left or right. You can set Videos (Youtube, Vimeo) also. Developer have done some special works with the Slider. See the output of the slider:
#spsliders” style=”margin-left: auto; margin-right: auto;”> |
Output – After Using Slider
Slider Controllers automatically increased with the number of Slider Posts.
Blog Page Settings
If you are running a blog and wants to show in a separate navigation menu instead of showing in the Homepage. Then create a new page, named it Blog (whatever you want). Then go to Appearance->Menus-> Select the page where you want to show your Blog Navigation.
 |
| A Blog Page |
About Us / Our Team Page Settings
Create a new page with default template and name it About Us/ Team page. If you are downloading our Theme package then you will be found all demo texts and Data in a package. We have build this WordPress Theme based on Twitter Bootstrap Framework. If you want to get some extra features like Our Team in Demo. Then place these codes in your Editor in Text mode. You should some basic knowledge on Twitter Bootstrap. If not then please download our Quickstart Pack and edit the texts and images.
Our Team Example Page
Team section will be created by “Team” Post type. You can see Team Post Type from above.
#teamadmin” style=”margin-left: auto; margin-right: auto;”> |
Creating a Team Page
From above we are seeing that there are four team members. This “Team” post type, we have exported by shortcodes. Now, go to your Team page and see in the Editor there is a Shortcode button. Click this and select the Team from Post Types.
 |
| Starter Shortcodes |
Pricing Page Setting
Create a new page named it “Pricing”, leave it in default template.
Pricing Tables Post Type: Create a Item and name your pricing table column. Pricings settings will be like below:
 |
| Price Settings |
Setting up Pricing Table is similar like Team Page. Select the shortcode button from the editor in your Pricing Page.
Menus
Flat Theme supports custom WordPress menu with two level or three level dropdown menu support.
To setup the menus, navigate to Apperance > Menus page. Enter a name for your menu and add links to the menu by using the options given on the left sidebar. You can manage your menus using the drag and drop functionality. After setting up your menu, select the menu you just created from the theme locations dropdown box and hit the “Save” button.
#menu” style=”margin-left: auto; margin-right: auto;”> |
WordPress Menus
Select the menu location from Manage Locations.
#menu-settings” style=”margin-left: auto; margin-right: auto;”> |
Manage Locations
General Settings
In general section we have given options like- Favicon upload, Your own Logo Upload (Logo Hide/show option), Apple Icon and Theme layout- Full width or Boxed layout.
#general” style=”margin-left: auto; margin-right: auto;”> |
General Settings
Header and Footer
You can change your header background color. In the footer section you can show or hide your own copyrights. Google analytics section has been given by default.
#headerfooter” style=”margin-left: auto; margin-right: auto;”> |
Header and Footer
Blog
You can show Breadcrumbs Title and subtitle from Blog section. Author BIO can be show/hide from single post. From page, comments can be show or hide. Also excerpt length can be set.
#blog” style=”margin-left: auto; margin-right: auto;”> |
Blog Title
Styling
Link color and Link hover color can be changed from Styling Options. You can also change Body Background color, Body font color, font style and Heading Font.
#styling” style=”margin-left: auto; margin-right: auto;”> |
Styling Options
Contact
Contact section is more dynamic as you want. You have to insert your Location (City/State and Country). You can also customize the height of your Google map location. Finally insert your email address. All the E-mail functionality done in back-end.
Create a Page and named it “Contact US” and choose “Contact Form” template. That’s it.
#contact” style=”margin-left: auto; margin-right: auto;”> |
Contact
Advanced Settings
Advanced section can do some advanced features like- Exclude Pages from Search, Breadcrumbs, Allow comments on Pages and WP Admin Logo Login.
 |
| Advanced Settings |
Post Thumbnails
Flat Theme uses the WordPress Post Thumbnails function, this way you can upload one image and WordPress will automatically re-size it to all the different thumbnail sizes.To set a post thumbnail for your post, go to Posts > Add New > Set Featured Image > the normal upload box will now appear, upload your image and click “Use as featured image”.
Sources and Credits
This Flat Theme uses the following images, icons or other files as listed.
- Twitter Bootstrap – Twitter Bootstrap
- jQuery – http://jquery.com/
- Font-Awesome – Font-Awesome
- Options Framework – Options Framework
