Formatting & Advanced

Spacing Shortcode

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]

Dividers

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:

[plain][divider_top text=""][/plain]

go to top

[plain][divider_top text="go to top"][/plain]

Image Preloaders

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.

http://cl.ly/E2oR/preload.jpg

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]

Lightbox

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).