MENU CONTENT

User Documentation

Intro

Banner_Header_Eng

Thank you for purchasing Mino WordPress theme!

Mino is very unique theme, it will help you managing your content at the WordPress sites and create stunning layouts in few minutes without coding. Mino theme comes bundled with simple yet powerful page builder to help you create complex layout with ease. This doc is intended to help you get up and running with Mino page builder with no time.

Getting Started

Theme Installation

To install Mino theme is very easy :

1. Buy and download the theme from tonjoostudio : https://tonjoostudio.com/product/mino-clean-responsive-wordpress-theme/

28

2. Go to admin dashboard >> appreance >> theme >> add new >> upload

29

30

3. Go to your admin dashboard >> appreance >> theme

4. Activate Mino theme

5. Done!

Building a Page

I’m assuming you’ve already read the getting started guide. This guide will help you with the more advanced concepts of building a page using Page Builder.

 

Adding a Row

Rows form the overall structure of your page layout. These are the first things you will add to your page. To add a row, click on “Add Row.”

1

An “Add New Row” dialog will appear.

2

 

Row Options

Row consists of three options, layout, column size and delete. These three options can help you to manage your rows easily.

3

 

A. Layout

You can choose one from six different layout for your row. This is the basic setting for your row. The default layout is full width.

4

 

B. Column Size

Column size is really depend on layout. If your layout is grid based, more than 2 grid, then column size will follow its settings

5

 

C. Delete

It’s for deleting your row. Please make sure you check your row before deleting it. You cannot undo the action.

Adding a Component

components are the main features of the page builder. Component function almost like widgets on the theme. Mino’s Page Builder consists of 12 components that you can use for your layout. I will explain one by one the components contained in the Mino theme.

 

6

Component - Image

31

7

With this component, you can add static image to your layout. The image is full-width by default, but you can also set the width and height manually.

  • A. Image : You can upload your image, set the size and link to it.
  • B. Title : Type your component title and sub-title
  • C. Position and Size : Set your image position and size. The default size is full-width.

Component - Image Button

32

Almost like the Image, but in this component you can add a button on your image. The other settings is just remain same with image:

8

Component - Text

33

Text allows you to insert rich text and media objects in your page with no hassle. Use text component if you want to display text or paragraph, with complete WordPress editor.

1

Component - Sangar Slider

34

Sangar slider is part of the mino theme bundle. Sangar slider is one of our premium plugin that can help you to make powerful and beautiful slider easily. Before using this component, you must create a slider on the sangar slider first, and choose the slider from the component.  You can find sangar slider tutorial here : http://pustaka.tonjoostudio.com/plugins/sangar-slider-codex/

10

Component - Glyphicon

35

You can add a component of glyphicon icon from twitter bootstrap. Just choose the icon you want to use from icon dropdown menu, and set the title, subtitle, and content to fit your needs

11

Component - Font Awesome Icon

36

If you are not a fan of default bootstrap icon (glyphcon) and prefer Font Awesome more, then we provide you are in a good hand. Font Awesome is the most popular font icon with many userbase. We provide the font awesome icon component for you. The settings is just like glyphicon, but the icon is font awesome instead.

 

12

Component - HTML

37

If you need more power and controll of your component, you can always use HTML. Mino theme provide HTML component for “techies” to take controll of their component, as they wish. Just type your HTML in the editor, and you good to go

14

Component - Post List

38

Post list is a component for displaying your post/blog list. The list display is depend on your row columns setting (already mentioned before at the begining of doc).

15

 

  • A. Title & Subtitle : Type your component title and sub-title
  • B. Advanced Query : Select YES if you want to display post list based on certain category or tags
  • C. Post Type : Select the post type you want to display

 

16

 

  • D. Categories or Tags : Choose what post list you want to display based on its category or tags
  • E. Display Child Taxonomy : Select YES if you want to display child taxonomy/category
  • F. Post Number : How many posts you want to display? Set it in Post number
  • G. Order by : Choose to order the post list by date, title, modified date and comment count
  • H. Order : Set the order decending or acending

17

  • I. Display Date : Display post date
  • J. Custom Date Format : Choose to set custom date format
  • K. Date Format : Type in your date format, if you choose to using Custom Date Format

Component - Product List

39

Product List is similar to Post List, but it’s Products instead. You can display all of your products to make it like live catalog. Please note that you need WooCommerce plugin installed to make this component working. You can download WooCommerce plugin from its official web page

18

  • A. Title & Subtitle : Type your component title and sub-title
  • B. Advance Query : Select YES if you want to display post list based on certain category or tags
  • 19
  • D. Product Categories : Choose what products you want to display based on its category or tags
  • E. Display Child Taxonomy : Select YES if you want to display child taxonomy/category
  • F. Post Number : How many posts you want to display? Set it in Post number
  • G. Order by : Choose to order the post list by date, title, modified date and comment count
  • H. Order : Set the order decending or acending

Component - Section Tittle

40

Use section title component if you want to create large heading text for your section. Section title option is very simple and straightforward, and very easy to understand

20

  • A. Title : Type your text title
  • B. Title Type : Choose your title heading size/type
  • C. Subtitle : Type your subtitle

Component - Spacer

Spacer is a functionality to create vertical spacing (padding) between your component. Spacer using pixels as a measure.

2

Columns Settings

Column Setting is a set of features that allows you to setting your columns, such as class name, design, responsive options. With these feature, you will have more controll over your columns. I will explain one-by-one of its features. To add column setting, just add a component, and you will see column setting icon in top left of row component box :

3

Columns Settings - General

In General tab, you will see Extra Classname option. Use this option if you want add your own extra CSS class name in your column, for more controll over its style. Style particular content element differently – add a class name and refer to it in custom CSS.

4

Columns Settings - Design Options

screenshot-localhost 2016-08-09 11-46-55

Design controll is fullset options and control for your column. You can customize its border, background, even padding and margin.

  • Border Color : Change and set column border’s color
  • Border Style : Set your column border style such as dahsed, solid, dotted, etc
  • Border Radius : Set your column border radius
  • Background Color : Didn’t like column default color? Change that to fit your need with Background Color
  • Background Image : You can even add image to as a background to your column
  • Background Pharalax : Tick if you want to set your Background Image as pharalax
  • Box Control : Set your padding and margin control in pixel. And tick equal size if you want to set equal number and size for all padding/margin in your column.

Columns Settings - Responsive Options

Use responsive options if you want more control over your columns reponsivenes. You can set individual width of your columns from 1 to 12, and hide certain with tick its width :

6

Tutorial

How to create Multiple Column component

It’s very easy to create multiple columns or grid based component. Please follow these steps :

1. Click add Component, choose what component you want to use. At this example, we will use Image component

2. Fill in all settings form to fit your needs :

21

3. After that, click “Layout” and layout dialog will pop up. And choose your desired layout. At this example, we wil use 3 column layout/

22

23

 

4. Don’t forget to set the column size/grid, to make our component become more orderly and neat.

24

25

5. And this is our final result :

26

27