FlatMobile

Responsive WordPress Mobile Theme

• created: 03/10/2011
• latest update: 01/26/2016
• by: Mobius Studio
• email: info@mobius.studio

In this video I'll show you how to install FlatMobile WP theme installation. You can also follow written steps in this documentation to install the theme but this video is pretty neat.

In this video I'll show you how to create a new page with FlatMobile WP theme and Visual Composer.

Welcome to installation process of FlatMobile - Responsive WordPress Mobile Theme. This documentation will guide you to install the theme. If you don't know how to install WordPress itself you can check this offical page for documentation.

1. Open your WordPress Dashboard
2. Go to Appearance -> Themes from menu
3. Click Add New at the top
4. Click Upload Theme
5. Upload flatmobile.zip and flatmobile-child.zip
6. When you done uploading flatmobile-child.zip, Activate FlatMobile Child theme not the original one
7. WordPress will give you notices to install required plugins,
8. Install all required plugins
9. If you install the WooCommerce shop plugin, you will encounter a guide for setting up shopping variables, follow guide and complete it. You can do it later by going WooCommerce from menu

From now on FlatMobile is installed and ready to use, you can start creating your content.

If you want to install the demo content too please follow these steps

1. Go to Tools -> Import from menu
2. Click WordPress on the list
3. Install the WordPress Importer plugin from the window
4. Activate it start using
5. Upload and import the demo_content.xml file which is inside of the downloaded folders
6. While importer is working it will ask you to get demo content images, check the box and proceed
7. Wait importer to finish
8. Go to Settings -> Reading
9. Check "A static page (select below)"
10. Choose Home for Front page
11. Choose Blog for Posts page
12. Go to Appearance -> Menus
13. Check the Primary Menu down below

Testimonials and Filterable Portfolio will be missing on Home page at this point. To make them visible:

1. Go to Pages from menu
2. Edit the Home page
3. You will see the Visual Composer page builder here
4. Find Testimonials Carousel on the page, hover over it and click the pencil icon to edit
5. When you click it you will see a window come up, choose a category and save
6. Do the same thing for Filterable Portfolio below
7. Update the page when you done

Sadly, WordPress importer will not place widgets itself. We have to place them ourselves. I'll guide you to build widgets as like demo site.

1. Go to Appearance -> Widgets from menu
2. Put a Text Widget into Before Menu sidebar, fill inside with text
3. Put a Text Widget into After Menu sidebar, put the code below in it and replace fields you want without breaking markup.

4. <div class="contact-information">
       <p><i class="uiicon-home60"></i><span>Address: Lipsum Street Lorem Way PO 60009 Dolor/ALASKA</span></p>
       <p><i class="uiicon-smart1"></i><span>Phone: <a class="external" href="tel:+000000000">+1 234 56 78</a></span></p>
       <p><i class="uiicon-newspaper7"></i><span>Fax: +1 876 54 32</span></p>
       <p><i class="uiicon-globe14"></i><span>E-Mail: <a href="mailto:mymail@address.com">flatmobile@mail.com</a></span></p>
   </div>

5. Put another text widget into After Menu sidebar, put the code below in it and change links to you social pages

6. <a href="#" class="external tc-icon-ball socialicon-facebook43 color-facebook"></a>
   <a href="#" class="external tc-icon-ball socialicon-google109 color-google"></a>
   <a href="#" class="external tc-icon-ball socialicon-twitter34 color-twitter"></a>
   <a href="#" class="external tc-icon-ball socialicon-pinterest26 color-pinterest"></a>

7. Feel free to fill Right Panel with your own choice of widgets.

If you want to use demo slider, please follow these steps:

1. Go to Slider Revolution from menu
2. Click Import Slider
3. Upload the homeslider.zip file which comes within the downloaded package
4. Done!

In this video I'll show you how to integrate FlatMobile WP theme with your current desktop WP site.

FlatMobile has an easy and advanced customization panel which uses WordPress native customization panel. You will easily find everything you need and see your changes on the fly.

You can find customization at Appearance -> Customize from menu.

1. There you can enable/disable Apple Web Application options and upload images for startup
2. Favicon images can be set
3. Logo can be uploaded and height set
4. Typography options available
5. Navigation bar styling options available
6. Layout coloring is available
7. Left and Right panel styling is available
8. Menu styling is available
9. Loading Screen can be changed
10. Footer stylings can be made

FlatMobile uses Visual Composer plugin to build new pages. It makes life so much easier.

Create a new page and switch to Classic Mode or FrontEnd Editor.

Click the plus icon and choose any module you want.

When you add or edit any module you will be able to customize it's own options.

Modules with green background and white mobius icon on are custom made modules and others are plugins.

FlatMobile uses Contact Form 7 plugin to create working contact forms.

You can add or edit contact forms from Contact link on the admin menu.

When you create your Contact Form, you can go to Visual Composer page builder at edit/add page and when you click plus icon you will see a Contact Form 7 module there. You can choose between all contact forms you created.