One-Half

[one_half]Content[/one_half] [one_half_last]Content[/one_half_last]

One-Third

[one_third]Content[/one_third] [one_third]Content[/one_third] [one_third_last]Content[/one_third_last]

Two-Third

[two_third]Content[/two_third] [one_third_last]Content[/one_third_last]

[one_third]Content[/one_third] [two_third_last]Content[/two_third_last] 

One-Fourth

[one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth_last]Content[/one_fourth_last] 

[one_half]Content[/one_half] [one_fourth]Content[/one_fourth] [one_fourth_last]Content[/one_fourth_last] 

[one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_half_last]Content[/one_half_last] 

[one_fourth]Content[/one_fourth] [one_half]Content[/one_half] [one_fourth_last]Content[/one_fourth_last] 

One-Fifth

[one_fifth]Content[/one_fifth] [one_fifth]Content[/one_fifth] [one_fifth]Content[/one_fifth] [one_fifth]Content[/one_fifth] [one_fifth_last]Content[/one_fifth_last] 

Two-Fifth & Three-Fifth

[three_fifth]Content[/three_fifth] [two_fifth_last]Content[/two_fifth_last] 

Dropcap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis, risus vitae scelerisque dignissim, eros augue eleifend arcu, augue quis elit.ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis, risus vitae scelerisque dignissim, eros augue eleifend arc.

Highlight

Special notes can be highlighted using the ‘highlight’ shortcode. Use from a pre-existing set of colors (Black, Gray, White, Blue, Yellow, Red, Orange, Green, Pink, Purple) or set your own background color and text color.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[highlight color="gray"]Some Text[/highlight]

[highlight bg_color="#aa0000" text_color="#ffffff"]Some Text[/highlight]

Buttons

Buttons come in 3 sizes – small, medium and large. Once again, you can choose from pre-existing color sets (Black, Gray, White, Blue, Yellow, Red, Orange, Green, Pink, Purple), or set your own background color and text color.

Lorem Ipsum Lorem ipsum dolor sit amet, risus vitae scelerisque dignissim, eros consectetur lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis, risus vitae scelerisque dignissim, eros. Lorem Ipsum Lorem ipsum dolor sit amet, risus vitae scelerisque dignissim, eros consectetur lorem ipsum dolor sit amet.

[button href="URL" align="left" color="orange" size="smallbutton"]text[/button] [clear]

[button href="URL" align="left" bg_color="#aa0000" text_color="#ffffff" size="smallbutton"]text[/button] [clear]

Break & Top

Use break for creating sections and top for going to the top of the page.

[break]

[top]

Google Maps

Fill in the coordinates, and you have yourself a Google Map

 [map width="540" height="300" lat="38.26" long="-85.62" zoom="8"] 

Align – Left, Right & Center

[align_center]Content[/align_center] 

Frame – Left, Right & Center

Left Frame

[frame_center src="IMAGE-URL" href="LINK-URL"] Some text [/frame_center] 

Styled Boxes

Styled Boxes come with pre-existing color sets (Black, Gray, White, Blue, Yellow, Red, Orange, Green, Pink, Purple), or set your own background color and text color.

[styled_box title="Some title" color="white"]Content[/styled_box] [linebreak]

Alert Boxes

Alert Boxes are special boxes which can be used for specific purposes. There are 8 type of Alert Boxes available. These are Alert, Check, Cross, Info, Plus, Document, Note, Chat.

[alert_box type="TYPE"]Content[/alert_box]

Simple Message Boxes

Once again, you can choose from pre-existing color sets (Black, Gray, White, Blue, Yellow, Red, Orange, Green, Pink, Purple), or set your own background color and text color.

[message color="white"]Content[/message] 

[message msg_bg_color="#ff0000" msg_text_color="#ffffff"]Content[/message] 

Custom Lists

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.

[star_list]Pellentesque a tortor felis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis vitae urna tristique mauris aliquet egestas non et ipsum.[/star_list]

Toggles

Toggle boxes are great for organizing content into neat collapsible units. And they are super easy to implement in your posts as well!

[togglebox title="Some Title"]Toggle Box Content[ /togglebox] 

Tabs

Tab Sets automatically pick up their colors (from the background and the accent colors you choose in the Metrolo backend Settings Panel).

[tabset tab1="Title1" tab2="Title2"] [tab] Content1 [/tab] [tab] Content2 [/tab] [/tabset]

Nivo Slider

Nivo slider is one of the most popular sliders, and you can use it within your posts to display a slideshow of images. This shortcode is flexible to accommodate various settings such as height, width, navigation display, arrows (next/prev) display, transition effects and pause time.

[nivoslide width="540" height="300" navigation="true" arrows="true" effect="random" pauseTime="3.5"]Image-URL-1

Image-URL-2

Image-URL-3

Image-URL-4[/nivoslide] 

Lightbox

Metrolo uses the nifty prettyPhoto to display Images, Videos and External sites in a lightbox.

Or, you can have Lightbox link as simple text.

• Opens an image in the lightbox
• You can also have a Youtube Video open in the lightbox
• Or how about a Vimeo Video
• And even a Dailymotion video
• Open any external/internal site in the lightbox

[lightbox type="image" title="Lightbox Image Title" href="Image URL"]Some text[/lightbox]

[lightbox type="youtube" title="Lightbox Video Title" youtube_id="Video ID"]Some text[/lightbox]

[lightbox type="vimeo" title="Lightbox Video Title" vimeo_id="Video ID"]Some text[/lightbox]

[lightbox type="dailymotion" title="Lightbox Video Title" dailymotion_id="Video ID"]Some text[/lightbox]

[lightbox type="external" href="Site URL"]Some text[/lightbox]

Videos

Adding videos to your post just became easy. Whats more? You can also control the width/height of these videos.

Youtube Video

Vimeo Video

Dailymotion Video

HTML5 Video

[youtube width="540" height="337" video_id="Video ID"]

[vimeo width="540" height="304" video_id="Video ID"]

[dailymotion width="540" height="236" video_id="Video ID"]

[html5video width="540" height="222" poster="png URL" mp4="mp4 URL" webm="webm URL" ogg="ogg URL"]

Fonts & Typography

Metrolo uses 3 different font spaces – Primary body copy font, Headings font, and a Logo font (for plain text logo – if you are not using an image logo).

One of the best things about Metrolo Font Control is that line-heights are automatically adjusted to the font-sizes. Often overlooked, this enables you to use fonts in any size. Apart from the Font-type, you can select font-colors and font-sizes for 14 different text elements.

Bold, Italics, Underline, Links, Text Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum. In hac habitasse platea dictumst.

Lists

This is an ordered list:

1. Pellentesque a tortor felis.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Duis vitae urna tristique mauris aliquet egestas non et ipsum.
4. In hac habitasse platea dictumst.
5. Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate.

This is an unordered list

• Pellentesque a tortor felis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis vitae urna tristique mauris aliquet egestas non et ipsum.
• In hac habitasse platea dictumst.
• Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate.

Quotes, Code, Pre

This text is in quotes – Pellentesque a tortor felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum. In hac habitasse platea dictumst. Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate. Fusce tempus lectus vitae justo eleifend a pretium ipsum auctor. Fusce luctus massa eu lacus aliquet convallis.

This text is in code - Pellentesque a tortor felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum. In hac habitasse platea dictumst. Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate. Fusce tempus lectus vitae justo eleifend a pretium ipsum auctor. Fusce luctus massa eu lacus aliquet convallis.

This text is in pre - Pellentesque a tortor felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum. In hac habitasse platea dictumst. Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate. Fusce tempus lectus vitae justo eleifend a pretium ipsum auctor. Fusce luctus massa eu lacus aliquet convallis.

Image Alignments

Left Align ImageLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum. In hac habitasse platea dictumst. Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate. Fusce tempus lectus vitae justo eleifend a pretium ipsum auctor. Fusce luctus massa eu lacus aliquet convallis. Vivamus porttitor suscipit magna non tempor. Pellentesque a tortor felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum. In hac habitasse platea dictumst. Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate.

Right Align ImageLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum. In hac habitasse platea dictumst. Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate. Fusce tempus lectus vitae justo eleifend a pretium ipsum auctor. Fusce luctus massa eu lacus aliquet convallis. Vivamus porttitor suscipit magna non tempor. Pellentesque a tortor felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum. In hac habitasse platea dictumst. Mauris lobortis mi vitae dui vehicula ac iaculis sem vulputate.

Headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum.

This is Heading1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum.

This is Heading2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum.

This is Heading3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum.

This is Heading4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum.

This is Heading5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum.

This is Heading6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae urna tristique mauris aliquet egestas non et ipsum.

This is Heading1

This is Heading2

This is Heading3

This is Heading4

This is Heading5

This is Heading6

• Custom Home page Layout
• Unlimited Page Layouts
• Widgetized Footer (multi-column)

Custom Home page Layout

Homepage is the most important page in any website. It’s your way of creating your first impression. Metrolo makes managing your homepage a snap!

Default Section Layout

This acts as the ‘default’ layout for the rest of the blog. Unless specifically mentioned for a page, this is the ‘default’ layout.

Unlimited Page Layout

Each page can have a custom layout which will Override the default layout mentioned above.

Widgetized Footer (multi-column)

Footer is a highly flexible 3 column widgetized area. What this basically means is that you can mould it pretty much any way you want. Here are a few layout examples with sample widgets.

• Inbuilt Shortcode Generator
• Extensive Options
• Helpful & Clutterfree Backend

Inbuilt Shortcode Generator

Every Shortcode has a ‘Preview’ window in the Generator – to showcase different ways a shortcode can be displayed in the front-end.

Extensive Options

Metrolo backend has more than 242 options (197+45) neatly laid down in organized sections for easy tweaking.

Helpful Backend

Metrolo has helpful hints spread all over. Some of these are inline content, while others are bubble texts (blue and red). It has screenshots almost everywhere.

Clutterfree Backend

With so many options, backends can often get confusing. That is why Metrolo uses jQuery to intuitively hide inactive and unnecessary options.

Eaxmple1:  Take ‘Content Background’ for example. Sections are shown based on what you choose.

Eaxmple2:  Another example is the Layout options. Sections are hidden/shown depending on which modules are active.