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]
[plain][divider_top text=""][/plain]
[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.jpgHere’s the very same code we used to display the image above:
Get The Code
[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).
Get The Code
[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"]
<img src="http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/lightbox-small.jpg" alt="" />
[/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"]
<img src="http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/lightbox-small1.jpg" alt="" />
[/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"]
<img src="http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/lightbox-small2.jpg" alt="" />
[/image_hover]
[/lightbox]
[/column][/plain]