Introduction

If you are here, it means you have just downloaded or purchased Minimable. Now you are the coolest boy/girl in the World!

Now, it's very important to read these docs, for using Minimable Free and Premium as best as possible!

Let's go!

Minimable Free and Premium 3.0 is out!

For premium users there are three video tutorials: general settings, how to create a product page and how to add video backgrounds.

Enjoy!

Installation (video tutorial)

Installation of Wordpress

I think you don't need about that, but if you don't know how to install Wordpress, go to this link. http://codex.wordpress.org/Installing_WordPress

Install Minimable

You can install Minimable in two ways: the first is to unzip minimable.zip and put the folder into themes directory in your Wordpress installation. The second way is to upload directly minimable.zip in your Wordpress Admin Area, by going in Appereance - Themes and click "Add new".

Activation

Activate Minimable, in Appereance - Themes.

Install Contact Form Plugin

For the contact section, install Contact Form 7 Plugin. http://wordpress.org/extend/plugins/contact-form-7/

Demo content

For the free version and premium version you can import a xml file.

The file is placed in the theme folder. It's name is: demo-content.xml

The steps for using this file are:

When you are done, go to to Settings - Reading, select "A static page" option and in the "Front page" field select "Main Page".

The last step is to go in Appereance - Menu and set the "Menu Demo" as primary navigation.

Video Tutorial - Installation Minimable and demo content



Important

After importing the demo content, remember to turn on the Home Nav Links checkbox, in the home section.

Warning message

If you have warning messages, please contact your hosting provider. These are caused by an old php hosting version, or because external connections are not allowed.

Start

There are few things you have to know before inserting the content.

The Main Page

The first thing to do is to create a page which will be the static front page. So when you are creating it, give the name you prefer and in the Page Attributes select "Main Template".

Then go to Settings - Reading, select "A static page" option and in the "Front page" field select the page you created.

How many pages do you want?

Go to the Minimable Options, and in "Genaral Settings" set the number of pages you want (max 20).

Here you can also upload your logo, select the main color of your site and many other stuff.

The Slug Name

When you create a new page, it's important you set a specific slug name. You can set it only in this way: page-#number, like this: page-1, page-2, page-3 etc. Not page-1-2, page-2-3 etc. Not works.

Example of slug name

The slug field is placed at the page bottom. If you don't see it you have to activate it by clicking the "Screen options" label on the top right and check the Slug field.

Activate Slug Option

The link page

At the bottom of each page you find an area called "Page link for the menu". This takes the page title and appears when you saved the page.

This link it's important for the Menu and for the Bubbles in the Home Page.

Back to top

Multiple Single Pages (premium)

With the premium version, you can build as many single pages as you want.

Once you've selected the "Main template", it's important to se the page name, and then, for each section set the slug with that name.

Main Page Template Premium

For example if you put the name "sample", then you have to put the slug for each section with the page name you chose (sample) plus the number, like sample-1, sample-2, etc.

Pages

Bubbles Section - one page

Select the page template "One page - Template Bubbles" in the Page Attributes, on the right. Here you have two areas, "Big titles" and "Bubbles".

Bubbles Metabox

Big titles

Here you can write three big sentences (or one, or two). You can Use the [color] shortcode to change the color of one or more words in the title.

For example: I am [color]Minimable[/color]. I am is written in black, Minimable in the color you set in the Minimable Options.

Bubbles

For the bubbles, you can write the label link you prefer and add the link you find at the bottom of each page you created. I advise you to not write long labels.

Back to top

Staff section - one page

Select in the Page Attributes "One Page - Template Staff".

If you want a bi-color Title, use the [color] shortcode like we have seen before.

In staff content write the title for the left column and the text.

The team

For the team staff, in the left side go to Team - Add New.

In the title field put the member’s name, in the text area write some cool stuff about him/her and in featured image field, select the image.

Back to top

Portfolio section - one page

Select in the Page Attributes "One Page - Template Portfolio".

If you want a bi-color Title, use the [color] shortcode like we have seen before.

For the single portfolio item, go to the left side in Portfolio - Add New.

In the title field put the name of the work, in the text area write something about it and in featured image field, select the image of the work.

Portfolio page (premium)

In the premium version you can select also another page template, "One Page - Template Portfolio Thumb"

For both page templates (Template Portfolio and Template Portfolio Thumb) you can set several things, like the category of items to show, the items order and other settings.

Portfolio General Settings Premium Version

Then, for each item you can add different type of content, like carousel, videos or soundcloud items

Portfolio Single Item Settings Premium Version

Note: if you are using the Template Portfolio (not with thumb), use the Excerpt field for insert the short description of the item.

Back to top

Contact section - one page

Select in the Page Attributes "One Page - Template Contact".

If you want a bi-color Title, use the [color] shortcode like we have seen before.

Here you have a number of fields to fill, for example address, phone number and so on.

For Contact Form, click the Contact Field on the left, and then put the field you need, in this way:

Example of Right Way to put Field in Contact Form

It's important that you add the span8 class and the watermark attribute, as was done in the screenshot above.

Then you have to copy the short code, so go to the Contact Page and paste it in the Contact Form field. That's it!

Back to top

Products page - one page (premium)

Select in the Page Attributes "One Page - Template Product".

If you want a bi-color Title, use the [color] shortcode like we have seen before.

This section is suitable if you want to promote a single product.

Product settings - Premium Back to top

Blog page (premium)

For the creation of the blog, create a page and assigned it the template page "Blog Template".

Then start to write posts ;)

For each post you can choose to insert or not the fields such as the author, the date, tags etc. by going in the Minimable Options, under Blog section.

You have also 3 different sidebar: one for the blog with all posts, on for the single post and the last one for the footer.

Important: don't set the blog page as "Posts page" in Settings - Reading.

Back to top

Default page

You also add normal pages by using the "Default page" template or the "Template External Page". There are no differences between them.

For each page you can use all the shortcodes mentioned in the Shortcode section of the documentation.

Back to top

Customizations (premium)

For each section you can customize almost everything: colors, add video backgrounds, particles, sliders, parallax effect etc.

General Settings

In "General Settings" you can:

Section General Settings Back to top

Background Settings

In "Background Settings" you can:

Background settings

Here you can set the background to put on the section

Video background

You can add a video background from your computer or from YouTube

Video Background

In the first case, you have to upload your video in the "Media Library" in 2 different format, .webm and .mp4.

Then you have to copy and paste the url of each video format in the 2 dedicated fields.

For the YouTube video you just need to copy and paste the video URL in the dedicated field.

Important

It's important to set a featured image (for example a screenshot taken from the video), because of mobile website version. On mobile devices video backgronds don't work and they are replaced by the featured image.

Particles background

You can add particles background and you can set:

Particles Background

Particles can be placed also over a background image.

Slider background

You can add a slider as background and set several aspects:

Slider Background

Add images to the slider is a piece of cake :). And you can also drag and drop each item to change the order.

Back to top

Theme Options

In Minimable Options you can manage several aspects of the theme.

General Settings

In Genaral Settings tab you can:

Preloader Settings

In Preloader Settings tab you can:

Header Settings

Here you can upload the logo, set the height of the menu bar and logo

Colors Settings

In color Settings tab you can set the main colors of the website

Typography Settings

You can select the font you prefer from Google Fonts repository, in Typography Options. You can set the font for headings (the titles of each section), the font for the slogan and the bubbles the body and headings font

Blog settings

You can decide to show or not date, author, category, tags, etc. for each single post.

Footer settings

In this section you can add the footer title, a little description which will appear on the left side and a text for the copyright.

Shortcodes

Shortcodes allow you to insert videos, maps, icons, tabs, your latest posts, icons, buttons and create the layout you prefer.

Layout shortcode (premium)

With Minimable 3.0 you can create the layout you prefer in a very easy way, thanks to the layout button placed in the wp editor.

Layout Button

These are the layout shortcodes you can fill into the editor:

  • [one_half]: 6 columns
  • [one_third]: 4 columns
  • [two_third]: 8 columns
  • [one_fourth]: 3 columns
  • [three_fourth] 9 columns
  • [one_sixth]: 2 columns
  • [five_sixth]: 10 columns

You have always to start with a row and within insert the number of columns you desiderd

The columns are 12 in total

So if you want a row dived in 3 parts the structure must be like this

[start_row]
[one_third]
[/one_third]
[one_third]
[/one_third]
[one_third]
[/one_third]
[end_row]

You can also add 6 different predefined layouts, in particular:

  • The Original - We Think Different
  • The Original - More Information
  • Particles - Icons Layout
  • Minishop - Sophisticad Style
  • Shop - Single Product Description 1
  • Shop - Single Product Description 2
Predefined Layouts Back to top

Tabs Shortcode (premium)

You can insert tabs content where you want, by using these shortcodes.

[tabgroup n="3" name="group-one"]
[tab title="Tab 1"]
Tab content
[/tab]
[tab title="Tab 2"]
Tab content
[/tab]
[/tabgroup]

The tabgroup has two options:

  • n: the number of tabs you want. It's important for the active tab (default 3).
  • name: if you want to add more than one tabgroup you have to specify a name for each one. The name must be written without spaces and any special chars.
Back to top

Video shortcode

For the videos insert this shortcode

[vid site="youtube" id="43sYSMHYf-Q" w="853" h="480"]
  • site: the site from which to take video. It can be: youtube, vimeo, dailymotion, yahoo, bliptv, veoh, viddles.
  • id: the id of the video.
  • w: the width of the video.
  • h: the height of the video.
Back to top

Google map shortcode (premium)

For the map insert this code:

[googlemap width="940" height="600" src="map url"]

The map url must be taken from the "src" attribute in the embeded map tab.

Back to top

Latest posts shortcode (premium)

You can show the latest posts, with many options.

[recent-posts posts="3" cat="1" orientation="hor" excerpt="on" thumb="on"]
  • posts: number of posts to show.
  • cat: the category id from which you take the posts.
  • orientation: you can display the posts horizontally (hor) or vertically (ver).
  • excerpt: it can be "on" or "off" and it show the excerpt if you want.
  • thumb: it can be "on" or "off" and it shows the thumbs if you want.
Back to top

Icon shortcode (premium)

You can insert all the icons (585) from the Font Awesome web site.

[icon type="umbrella" size="2x" pull="left" rotate="90" flip="vertical" title="Title with icon"]
  • type: the icon you want.
  • size: it can be 2x,3x,4x.
  • pull: you can place the icons on the left of the text, on the right or in the middle and place the text at the bottom.
  • rotate: it can be 90, 180, 270.
  • flip: it can be vertical or horizontal
  • title: you can add a title next to the icon

I suggest you to refer to Font Awesome web site, specially for the type option

Back to top

Button shortcode

You can add your custom buttons where you want.

[link to="http://minimable.fedeweb.net" width="300" pull="center" target="_blank"]Minimable[/link]
  • to: the page you want to link.
  • width: the width of the button.
  • pull: you can place the button on the left, on the right or in the middle.
  • target: you can decide to open the link in the same tab or in a new one (_blank).

The width parameter is optional. If you don't set any width it takes the 100% of the container width.

Back to top

Soundcloud Shortcode

Before using the soundcloud shortcode (you can take it from the soundcloud website), install the Soundcloud plugin shortcode.

Back to top

Menu

For creating the menu, go to Appereance - Menu.

First of all, open the Screen Option on the top right and check the CSS Classes option.

Activate Class Option for Menu

Then go on the left in the Links (or Custom Links) area and for each page you have to add custom link, with the Navigation Label you like and the URL you find at the bottom of each page (see the Page section). For example #our-gallery or #get-in-touch-with-us and so on.

Moreover, for the first link add the class "active". If it is the home link, add also the "home-link" class, separated by a space from "active" class.

When you finish to set up the menu, the final result should be like this.

Active Class for First Link

For the blog link instead, you can add it from the Pages area on the left and add the class "custom-link" to it. The blog is a premium feature.

Updates

For every new version of Minimable you will receive a notification in your WP Admin panel.

Easy update

The easiest way to update the theme, is to delete the old one and install the new one, in Appereance - Themes. You won't loose any type of content, but only changes to theme files.

If you made any changes to theme files, it's important you back up them before deleting the theme.

Important

If you are a premium user and you want to make changes to the theme files, it's highly recommended to use the child theme. If you don't know how to use it, you can find all that you need here.

By using the child theme, you won't loose any changes, because the updates involve only the main theme and not the child one.

Not so easy update

The other way to update the theme is to use a client ftp, like Filezilla and replaced all the old theme files with the new one.

FAQ

  1. When I activate Minimable Theme, I have a blank page. Why?

    This is a normal behavior. Follow the documentation and everything works well!

  2. I've created the pages, but I still have a blank page

    This happens because you didn't set the slug name in the right way. The slug name must be page-1, page-2 etc.

  3. How can I change the favicon, logo, etc? in editor? css?

    Go to the Minimable Options and set them in General section.

  4. The name of the pages (our stunning work, our staff, etc.) doesn't show for me in the bubbles. How can I show theme?

    You have to fill in the dedicated fields, in the bubbles page template.

  5. The menu bar doesn't appear and the smooth scrolling not works. Why?

    You don't set the correct classes in the menu. So give to the first link (the Home link) the classes “active” and "home-link" and to the custom page the class "custom-link". If you have any special chars in the page link, write your custom one, without the "#" char

  6. When I install the premium theme it says the style.css file is missing. Why?

    You have to unzip the file and put the two folders inside the folder "themes" in your Wordpress installation.

  7. When I update the theme to a new version the menu doesn't work.

    You have to set the menu navigation as primary navigation.