We are going to create a social networking menu like we see in the live demo site.
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:
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:
Info boxes adds a block of content such as a message to your page like this demo:
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:
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:
Buttons are going to be easy to create with shortcodes, but this is what we will be making:
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.
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:
If you need to make tables, you have some built-in styling for you to make nice looking tables.