Setup Tutorials for Flat Responsive

Welcome to the Setup Tutorials for Flat Responsive. These are the standard guidelines to help you install, configure, and customize your newly downloaded theme. If you have any requests for additional tutorials relating to this theme, please contact me and I will review your suggestions. These tutorials are also based on the assumption you have a basic understanding of how WordPress works.

Page Templates

In this tutorial, we will be guiding to the page templates that flat responsive provides. Default Template This template is default and it shows right column along with content. 404 page templates This template shows 404 pages. Landing Page Templates This template is especially for products/showcase that will be display without menus Page Builder Templates This template is especially for those who are using page builder Page Full Width This Templates Displays the Content full on the screen Page Left and Right Column This Templates Displays the Content along with left and right sidebar. Page Left Column This Templates Displays the Content along with left sidebar.   How to change the page templates http://codex.wordpress.org/Page_Templates#Selecting_a_Page_Template

How to Create 3 Levels Submenu as in the Demo Page

In this tutorial we will be guiding you to make a submenu with 3 list-items. Generally, WordPress doesn’t offer this in default but flat responsive theme has come with this styles which will enable you to create a 3 levels submenu if your menu items are long enough. Below is the step by step process to make a 3 level list-items. Go to Appereance-> Menus  Click on the link of the parent menu on which you want to apply the 3 level submenu. In the example image shown right, we want features menu submenu to be 3 level so, we should click the features link. After you click on the navmenu you will get a Options CSS CLASSES(optional) on that field put the class nav_columns3 If you do not find the CSS Classes in the links field you can get it by clicking in the screen options at the top…    read more 

Changing the Navmenu Styles

In this tutorial we will show you how to change the navmenu styling and colors. Flat Responsive Comes with 5 Navmenu Styling Options. How to change the layout of Header Style 1 Primary Menu:- Customize Title Description How to Change : Change the Navmenu Style You can change the Navmenu Styling of the theme as we have offered 5 different styles for navmenus. Remember Navmenu styles will only affect if you choose header styles 1. Apperance-> Customize-> Header Settings-> Header Settings-> Choose Navigation Style Change the Navmenu Colors You can change the color of the navmenu by using the customizer and choosing the colors as your choice. You can play with colors and make many styles and combination of color. Apperance-> Customize-> Header Settings-> Header Color Settings -> Navigation Colors

Managing Header Options

In this tutorial, we will be showing managing the header options for the flat responsive themes as it comes with two header styles.  Here is the screenshot of the header styles that flat responsive provides:  Header Styles 1: The menu will be in the right hand side of the logo in header styles 1, you will get a number of 5 menus styles for this header style. Header Styles 2: The menu will be in the middle of the container below logo and the logo will be centered too, you will get a only one navmenu styling for this header styles. How to manage and change the Settings for Header Settings:- Customize Title Description How to Change : Change the Header Style You can change the header styles for your websites as per your choice from the navigation panel. Apperance-> Customize-> Header Settings-> Header Style  Change the Header Background You…    read more 

How to Create a Faq Page

Flat Responsive comes with Custom Post type Features Enabled for Frequently Asked Questions.  How to Create a New FAQ? 1) Go to WordPress Dashboard. 2) Click on FAQ and click New 3) Now Fill up the details as shown in the screenshot. 4) Save the Post. How to Display the Frequently Asked Questions On the Frontend? Shortcodes Method: 1) In the Content Paste the following shortcodes: [style_faq total=”6″] where total is the number of Faq that you want to show with the help of shortcodes.    

Create a Testimonials Page

Flat Responsive comes with Custom Post type Features Enabled for Testomonials Page.  How to Create a New Testomonials? 1) Go to WordPress Dashboard. 2) Click on Testomonials and click New 3) Now Fill up the details as shown in the screenshot. 4) Save the Post. How to Display the Testomonials On the Frontend? Page Templates Method: You can display the Testomonials with the help of page templates to do so: 1) Create a page to Display Testomonials. 2) Select that page templates to Testomonials Page Templates. Shortcodes Method: If you are willing to show testomonials in a content of page or footer rather than making the testomonials extra page. You can use the shortcodes method. 1) In the Content Paste the following shortcodes: [style_testomonials total=”6″ columns=”3] where total is the number of testomonials that you want to show with the help of shortcodes and columns represents the layout of the…    read more 

How to Display/Hide the Search Icon

Flat Responsive has options to display Search bar on the top with the menu as well as you can use the search widget on widgets postion to display the Search Form. Customize Title Description How to Change : Hide the Search Icon You can Display/Hide the Top bar from the Customize Panel. In Default it is set to be shown. Apperance-> Customize-> Header Settings-> Search Icon -> Check the Search Icon Hide Change the Search Icon Color You can change the search icon color Apperance-> Customize-> Header Settings-> Search Icon -> Search Icon Color Change the Search Form Background You can change the search form background Apperance-> Customize-> Header Settings-> Search Icon -> Search background Change the Search Form Line Color You can change the search form line background Apperance-> Customize-> Header Settings-> Search Icon -> Search Icon line Change the Search Form Height You can change the search form…    read more 

Creating a Menu

In this tutorial, we will be showing you how to create a menu and access it’s options in Flat Responsive If you are completely new to the WordPress and Creating Menu you can follow the link to know how to create a menu in WordPress: http://codex.wordpress.org/WordPress_Menu_User_Guide Flat Responsive Comes with 2 Menu Positions:- Primary menu Primary Menu is displayed in the top of the site along with the logo  Footer menu Footer Menu is displayed in the bottom of the site along with the copyright symbol.  

Displaying Top Bar

Flat Responsive Has Options to Display the Top Bar on the top of the page. You can get option to display a short description/Announcement and bunch of social icons on the top. You will get the options to change the settings for the top bar, Settings and their configuration are displayed below in the table. Customize Title Description How to Change : Hide the Top Bar You can Display/Hide the Top bar from the Customize Panel. In Default it is set to be shown. Apperance-> Customize->Header Top Bar->Top Bar Display -> Hide Top Bar. Hide Announcement/Small Details You can hide the announcement and show only social icons Apperance-> Customize->Header Top Bar->Top Bar Display -> Hide Announcement. Hide Social Icons You can hide the social icons and show only Announcement/Small Description Apperance-> Customize->Header Top Bar->Top Bar Display -> Hide Social Icons. Announcement Content You can add your content to Announcement/Small Description…    read more 

Installing/Updating Flat Responsive

In this tutorial we will be showing you how to install as well as update the WordPress Theme. If you are experienced with WordPress, or know how to install/update themes, you can skip this tutorial. However, if you are new or a beginner, this tutorial is for you. Lets Begin…. First, download the theme package from styled themes. You can download the theme from the styledthemes.com/downloads section after you log in to the site. Go to the Downloaded Folder You Find a Zip File Name flat-responsive-package.zip, as this name will differ if you are using another themes. Now, extract the Zip File. The Unzip File Looks Like the Screenshot. The flat-responsive and flat-responsive-child are the theme file that you need to install not the whole package. Now Log In to WordPress Admin Panel. Go To Appereance-> Themes. Now Click on Add New. Since you are uploading theme from your downloaded folder…    read more