This tutorial will show how to create columns inside your page content. This uses the same classes and structure as Twitter’s Bootstrap front-end framework that creates grid layouts-which is what this theme uses. The grid layout is based on 12-columns side-by-side. So a full width page will use a class of col-md-12 which means use all 12 columns for our page. Later in this tutorial, we will make a 2-column layout, but here is an example where I used this inside a page to add 2 Image Boxes using shortcode:
Setup Shaped Pixels
Shortcodes - Image Boxes
Image boxes are flexible and can be used right in your main content or in a text widget. They can have a title only, content, or a title with content. Here is a demo screenshot of one style:
Shortcodes - Info Boxes
Info boxes adds a block of content such as a message to your page like this demo:
Shortcodes - Lead Paragraph
Normally a lead paragraph is the first paragraph of your page and works great if you have it under a page title to give it a two-heading style:
Shortcodes - Progress Bars
Progress bars for this theme look like the screenshots you see further below. Your shortcode elements are listed below but the only one you do not have to use is the colour attribute…the default colour is aqua green:
Shortcodes - Buttons
Buttons are going to be easy to create with shortcodes, but this is what we will be making:
Shortcodes - Dividers
Dividers will allow you to separate content in your page or post with one of three styles. The first is simply a horizontal rule function on your editor (common with editors). This adds a line to your content, and depending on the style, you can get different looks.
An introduction to shortcodes
This theme package comes with a shortcodes an installable plugin should you decide to use the shortcodes. This also works great if you ever decide to change themes and have active shortcodes in your content. Current shortcodes available for this theme are:
Table Styling
If you need to make tables, you have some built-in styling for you to make nice looking tables.
Front Page Project Portfolio
Dedicated to the front page template, you get to showcase a portfolio projects gallery. However you setup each portfolio item is going to be up to you, but basically each portfolio project thumbnail is a link to a post with a featured image. I would recommend creating a blog category that is used soley for your portfolio so that when you setup your front page, you will be selecting the category to display.