Typography & Shortcode Reference Guide

Those who preserve their integrity remain unshaken by the storms of daily life.

Headline 1 is the largest one

This is your headline reference area. Always use an actual headline when possible (as opposed to simply making your text bold, large or another color). This will keep your website looking clean and professional… and the site will gain “extra credit” with the search engines for any words in the headlines. Use a headline from 1 (largest) to 6 (smallest) by selecting the text you want to change with your cursor, and then changing the drop down menu above from “paragraph” to one of the headlines.

Heading 2 – just a bit smaller

This is your headline reference area. Always use a headline when possible to gain “extra credit” with the search engines.

Heading 3 is even smaller & generally another color

H 4 is the funky, accent one. Use sparingly!


Heading 5 is easy to read, all caps and comes with the underline.

That makes it great for being a subheader that breaks text into sections.

Heading 6 is the last and final headline option. It is small, discreet, easy to read. Great for side notes or captions.

Other elements

Standard Image, Right Aligned

This is a standard image, right-aligned.

The image is right-aligned. You can play around with things here and see how they respond. This is what a link looks like. Hover it to make it change.

Short Codes

The funny looking text items that you see with the [hard brackets] around it – that is a shortcode. Your site uses them as a way of allowing you to do some fancy schmancy stuff, like drop caps or fancy bullet lists or icons, without needing to know HTML code. You don’t even need to know the [short code] – because there us a short code generator included.

Oh what a great drop cap! Drop caps are just one of many great “enhancements” you can add to your layout easily with the shortcode generator, found right below this content area box. Place your cursor anywhere in this content area and then scroll down to the shortcode generator and give it a whirl. You can’t hurt anything with it so play around a little and you are sure to learn a lot.

Also check here: http://mysitemyway.com/docs/index.php/Main_Page#Shortcodes for full explanations of all of the available shortcodes, demos and ideas.

Bullet Lists

  • Bullet List
  • Checkmark List Item
  • Another Check-Bullet
  • Bullet List
  • Circle Arrow List Item
  • Another Bullet in BLUE
  • Stars are great for Bullet Lists
  • Red Stars List Item
  • Another Check-Bullet


This column is 2/3 of the content area wide.

This is a Fancy, Colored Box
This is a Fancy, Colored Box. It can contain anything you want to – as a call out item. Fancy, huh? It can be any color you like.


This table has no borders. It’s minimal.

100 200 300
400 500 600

Combine the effects!

More columns, combined with icons, make for awesome page layouts.

Life Preservers are Great!

They hint as “help!” so use them to link to your support area. You can say anything you like here, in an organized layout.

Help me out!

Icon Teasers are Great!

You can say anything you like here, in an organized layout.

Click for more info

We are great for the Environment!

Leaves always mean trees, and trees always mean environmental happiness. You can say anything you like here, in an organized layout.

Save the Earth!

Recruiting the Best for the Best...