Documentation

simpleMetro

by simpleTechs –simpletechs.net

 

General documentation and how-to guide for setting up and customizing  simpleMetro

Version 1.0

 

This documentation covers the installation and the use of the simpleMetro theme for WordPress.

It should be read and revised carefully as it contains help to a lot of common questions and issues.

If you have any question regarding simpleMetro, need help beyond the scope of this document or just want to get to know about our work, do not hesitate to contact us at themeforest.com at the Theme page.

Thank you!

 


  1.  Getting started

1.1  Installation
1.2  Setting up the website

 

  1. Overview – the new features

 

  1. Organizing the front-page – simpleMetrosection

3.1  Structure of the menu
3.2  Home Settings
3.3  Head Section
   3.3.1 Navigation
3.4  Footer Section
3.5  Page and Blog
3.6  Team Section
3.7  Social Section
3.8  Initial Demo Setup

 

  1. Changes in Posts section

 


 

  1. Getting started

1.1  Installation

To install simpleMetro on your WordPress, you have to upload the files you downloaded from themeforrest. There are two ways to do so:

-  WordPress upload: Navigate to Appearance > Themes > Add new > Upload New, choose the zipped folder from simpleMetro and click Install now. The theme gets uploaded and installed automatically.

-  FTP upload: Go to your FTP program and upload the unzipped (!) folder into the  /wp-content/themes folder of your WordPress installation. Once uploaded, you can just activate simpleMetro on Appearance > Themes.

1.2  Setting up the website

simpleMetro is best suitable for websites consisting of a clutch of posts. These posts are arranged in the typical Windows 8 tile design on the front-page of the website. So the construction of the basic frame is quite simple: write your posts and afterwards organize the tile structure.

We will explain every single step of this in the following. You should have a basic knowledge of how to use WordPress. If you never worked with WordPress before, we recommend reading common how-tos like on wordpress.org or in topic-related forums.
To work with the tile structure on the front-page of your website, you have to create a posts category called Frontpage, which includes subordinate categories in which all the posts to be shown at the front-page are sorted in.

  1. Overview: new features

The additional features simpleMetro provides can be found in three sections at your dashboard: at Posts, Appearance > Widgets and simpleMetro. The typical tile structure of simpleMetro is to be set up at simpleMetro (can be found at the end of the sections at the left side of the dashboard), while we have added some settings to adapt the posts to the tiles under Posts.
Furthermore, there are some new widgets coming with simpleMetro, you can use.

  1. Organizing the front-page – simpleMetro section

3.1  Structure of the menu The simpleMetro section is basically structured similar to the structure of the front-page of a simpleMetro website. The sections below the Home Settings easily follow the structure of the webpage top-down:

Sections simpleMetro

The Head section contains all settings and the content for the top of the page, the Footer section offers the same for the bottom. Using the Page and Blog section, social buttons under posts can be turned on or off. On the Team section you can add a short contact and presentation section for your team members at the bottom of the page.
Ditto for the Social section with social widgets like Facebook or Twitter. While editing the sections, every time you can reset either the section you are currently working on or all sections at once, setting all preferences back to the initial state. The buttons Reset Section and Reset all are always in the upper right corner of the page.

3.2  Home Settings

From the Home Settings you can control the general appearance of the front-page. You can adapt the background colors of the whole page, the slider and the head title. If you wish to use a picture for the background instead of a single color, you can check use background image and either upload one or insert an online link.

Home section - background settings

There is furthermore the possibility to set a favicon, the default text color, the color for links and hover effects and the color for the category title. Every color can also be set to transparent.

Home section - other settings

3.3  Head section

The Headsection and the Footer section include the crucial settings for simpleMetro’s tile design: adjusting the look and feel of the embedded posts. The head of the front-page is the first visitors see of your website and therefore an important part of the setup.

By default, the header is always on the top of every page, for example also on blog articles. In the Head Section you have the opportunity to build up the header with its hovering sliders, the descriptive text of your site and a contact tile.
On the very top of the header there is the header text, in another words the title of your website. This might be your company’s name or the name of your blog. As the header is on every page on the website, you can always go back to the front-page by clicking on the header text.

Head section - header text

Frontend - header text arrow

Instead of a header text, you can also use an image, for example your logo. Simply select activate header image. The optimal size here is width x height 256 x 70 pixels.

Head section - header image

Frontend - header logo arrow

The second (most important) part of the header are the sliders. In this you can use as many slides (which are simple pictures) as you wish. Just add new slides. The optimal size for an image is width x length 950 x 300 pixels. The pictures can be uploaded from the standard WordPress upload library, where there are also all the images, you have uploaded before somewhere else to your Dashboard. If you wish a click on the slide leads the users to another webpage, you can add the URL below.

Head section - slider

Frontend - header slider arrow

For the short descriptive text about the website, the so called Header Text, you can either type in a text or choose an icon to be displayed (click Add Media).

Head section - header text 2

Frontend - header II arrow

The last but not least part of the header is the contact tile. Here you can set an icon as well as a text and a link that leads to your contact form.

Header section - contact tile

Frontend - header contact arrow

3.3.1  Navigation

To adjust the navigation and order the items manually you can use the inbuilt menu option WordPress offers.
To create perma-links from every page to the blog- and the frontpage (called Home) of your website, simply carry out the following instructions:

Insert  two pages named Home and Blog at Pages > Add New at the WordPress main menu. There is no need for content at this pages. Next go to Settings > Reading and set Frontpage displays to A static page. For this choose the two recently created pages Home and Blog as Front page and Posts page.

Front page displays

Now go to Appearance > Menus and generate your navigation menu as to be seen in the following picture:

Menu Structure

You may adjust the order of the pages displayed by drag and drop. Adding the both pages Home and Blog to the menu, you will notice their appearance as normal pages, but they will link the user to their respective content (Front page/Posts page).

3.4  Footer section

The footer is equally to the header very important, as it can also be displayed on every page of the website. In the Footer section you can adjust all parts of the footer: the contact form, an address field, social buttons and text lines on the very bottom of the website. You can replace all these sections with widgets that can be set up at Appearance > Widgets.
We have predefined the widgets Social Icons and simpleMetro Recent Posts for your use. simpleMetro Recent Posts differs from the widget Recent Posts with including all posts, except the ones from the front-page. To set an example, we will explain how to replace the map module with a widget. Check Replace map module with widget?, save the changes and you can see a new unlocked area at Appearance > Widgets the Footer Widget area.
There you can just place the widget you wish via drag-and-drop in and it appears instead of the map module in the footer area. It works the same way for every other area, that can be replaced at the Footer section.

You can furthermore set the headlines for the footer at a whole and every field on its own (contact section, social section and address section). There are some settings to the address section, like your address and all properties of a Google Maps picture if you wish to use one.

Footer section - Google Maps

Frontend - footer Google Maps arrow

Below these options you find the button to set whether the footer gets displayed also on blog pages or only on the front page. At the end of the Footer Section, you can add some further text lines to the bottom of the page.
There is the possibility for an automatically generated copyright information with the current year and the name of your website as well as for an additional line you can write on your own.

Footer section - additional lines

Frontend - footer bottom arrow

3.5  Page and Blog

In this section, you can adapt the appearance of single blog pages. There is the option to show the social share icons below every page and you can add a title to this section.
This is especially important, if you wish your users to be able to share single content of your website, for example single blog articles.

Page and blog section

Frontend - sample post social arrow

3.6  Team  section

The team section is basically to show your visitors who is responsible for this site – your team.

For every team member (you can add as many as you wish) there is space for a photo (optimal size is 700 x 700 pixels), the name, a phone number, an email-address and a short text about them, their position or a funny anecdote, whatever you wish.

Team section - team members

Team section - one member

Frontend - team section

3.7  Social section

In this section you can control your social profiles that shall be displayed on your website, like Facebook, Twitter or YouTube. These settings then apply to all of the pages and the social icons there.

You can easily just create an item and set the headline of it, an icon, a color and the link to your profile. Here again you can add as many as you want to (we recommend 3-4 items).

Social section - Facebook

Frontend - footer social section

3.8  Initial Demo Setup

There are two more settings left at the simpleMetro section, Initial Demo Setup and  Import/Export. If you want to train yourself and test all the new features of simpleMetro before you take the effort setting up your own website, you can load some demonstration settings at Initial Demo Setup.

If you do so, there are some example blog articles added, some images, a front-page design and social links. You can mess around with this example and get used to all the settings.

Initial Demo Setup

If you have put a lot of effort into a great setup and want to use it for another website as well or give it to a friend or colleague, you can use the import/export function to save all your settings either offline or as a link and later import it again.
Be aware that importing a file overwrites all your settings done yet!

To export your setup locally is also a great possibility to save your work from server failures or technical problems.

Import-Export

  1. Changes in Posts Section

To arrange the posts in the tile design of simpleMetro, we have extended the settings for New posts by some new preferences, you can see under Posts > an existing post or Add new in the main menu of WordPress.
You can write a blog article normally as under WordPress and then just adjust the settings to fit the article’s tile into the front-page of your website.

All this is solely relevant, if the post is sorted to one of the front-page categories which are subordinate to the category Frontpage. If this is not the case, all the following settings will not be displayed.
There are some settings to be adapted and we will go through them in the following. The first options are Tile Headline, Tile Content and Bar Content.

Tile heading etc

We think, the names are self-explanatory and the corresponding parts of the tile can be seen on the Preview at the very end of the settings.

Preview

Below, in the section Design, you have the opportunity to choose a Background image. If you do so, the Tile Headline and Tile Content get obsolete, as they are not longer to be seen. The size of the picture you want to add has to be equal to the size of the tile, for a square tile 150 x 150 pixels and for a wide tile width x height 310 x 150 pixels.

Without a background image, these are the texts to be displayed in the tile, as you can see above. Instead of text or an image, you can also choose to display a Cover Icon in the tile. Therefore we have predefined tons of icons to choose.

Background image - icon tile

Icon:

Bar icon - preview icon

Image:

Bar icon - preview image

Summed up, you can fill the tiles of your blog articles either with text, an image or an icon.

In the bar section of the tile, you can choose to display a Bar icon at the front of the Bar Content text. Here the same icons are eligible as for the Cover icon.

Bar icon

Preview

One of the most important settings is the size of the tile on the front page. There you have the opportunities of a square (150 x 150 pixels) or a wide tile (width x height 310 x 150 pixels).

Furthermore, you can set, whether clicking on a tile shall lead the user to the blog article behind (anchor tag).

Tile size - anchor tag

In the Design section, you can set some more preferences according the appearance of the tile, such as a Color Scheme, the Tile Color (the background color, if there is text to be displayed), the Font Color and also, if there shall be a Transparent Bar.

Design settings

As you can see, we have added the possibility, to choose a template which includes all the other settings. These templates can be created manually at the WordPress main menu Tools > Tile Templates.
There you can set all the values you wish for this template and save it.

Tile template

The Animation part finally includes all settings regarding the movement and change of the tile’s appearance on the front-page. The change takes place between the three display types, the texts, the background image and an icon if applicable. The first to show is the icon, followed by the background image and the texts at the end.

For this can be adjusted: the way the movement goes (Easing), the Duration of one change and the Interval of changes from never to very often.

Animation

Especially in this section we think it is the best to just try out all the possibilities and see what you like the most and what fits the best into your website and your content. To find a structure in the tiles on your front-page, you can set Categories, to create subdivisions with separate headlines on the front-page.

Be aware, that these newly created categories are subordinate to the Frontpage category.

Categories

Skills - category

Within one category, you can also sort the tiles according you preference. To do so, after you installed the plugin ReOrder Posts, go to Settings > ReOrder Posts within category in WordPress main menu and choose the categories you wish to be able to order. Afterwards, go to WordPress main menu at Posts > Reorder.

There you choose a category (has to be activated before) and for this just sort the posts however you wish, or decline manual sorting and let them be sorted automatically.

Sorting posts


 

Thank you for using simpleMetro, if you have any questions left, we are more than happy to help you! Just contact us at themeforest.com.
We wish you a lot of fun and great success working with the new template!


Contact

Wanna say hello?
Drop us a line!

You'll find us here

1 Microsoft Way, Redmond, WA 98052, United States