Formatting & Advanced

[header style=”” type=”h3″]Spacing Shortcode[/header]

If yo uever find yourself in need of adding some spacing in between two elements on your page you can easily do so by using the “padding” shortcode.

The Padding shortcode will take any size value that you wish. The size attribute will add that amount of spacing in pixels. Here are a few examples

[plain][[padding size=”10″]] [[padding size=”25″]] [[padding size=”40″]] [[padding size=”100″]][/plain] [divider_top text=””] [header style=”” type=”h3″]Dividers[/header]

To add dividers on your pages you can easily do so with the shortcode “divider_top”. This shortcode also lets you add any text you want next to it (usually “top”) so the user can click and return to top. Here are a few examples:

[divider_top text=””] [plain][[divider_top text=””]][/plain] [padding size=”30″] [divider_top text=””] [plain][[divider_top text=””]][/plain] [padding size=”30″] [divider_top text=”go to top”] [plain][[divider_top text=”go to top”]][/plain] [divider_top text=””] [header style=”” type=”h3″]Image Preloaders[/header]

When inserting images on your pages, if you know the width and height of your image you can easily add a preloader for it. Preloaders pretty much add a loading style before your image appears, giving a more aesthetically page.

[image_preload width=”580″ height=”200″]http://cl.ly/E2oR/preload.jpg[/image_preload] [padding size=”15″]

Here’s the very same code we used to display the image above:

[get_the_code][plain][column size="one-third"]

[image_frame style=”4″ caption=”My Image Caption” width=”177″ height=”120″]

[image_hover style=”go”]

[image_preload width=”177″ height=”120″]http://cl.ly/E45P/hover.jpg[/image_preload]

[/image_hover]

[/image_frame] [/column] [column size="two-thirds" last="true"]

[image_frame style=”3″ caption=”My Image Caption”]

[image_hover style=”zoom”]

[image_preload width=”340″ height=”120″]http://cl.ly/E2Ug/hover.jpg[/image_preload]

[/image_hover]

[/image_frame] [/column][/plain][/get_the_code] [divider_top text=””] [header style=”” type=”h3″]Lightbox[/header]

To add the lightbox on your page, by using the “lightbox” shortcode you automatically add a lightbox efent on the element wrapped around it. You can use two attributes, link and id as follows:

• link: The URL lightbox will open. REQUIRED
• id: an unique ID in case you want to create a lightbox gallery (adds next/prev buttons in the lightbox).

[padding size=”15″] [clear] [padding size=”5″] [get_the_code][plain][column size="one-third"]

[header style=”fancy1″ type=”h6″]Image[/header] [lightbox link="http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/lightbox-full.jpg" id="gall1"]

[image_hover style=”zoom”]
[/image_hover]

[/lightbox] [/column] [column size="one-third"]

[header style=”fancy1″ type=”h6″]Youtube Video[/header] [lightbox link="http://www.youtube.com/watch?v=rHm5-av1Uks" id="gall1"]

[image_hover style=”zoom”]
[/image_hover]

[/lightbox] [/column] [column size="one-third" last="last"]

[header style=”fancy1″ type=”h6″]Vimeo Video[/header] [lightbox link="http://vimeo.com/35557633" id="gall1"]

[image_hover style=”zoom”]
[/image_hover]

[/lightbox] [/column][/plain][/get_the_code]