On, you can use shortcodes to build a slide presentation and display it on your site.

To summarize, with various presentation shortcodes you can:

  • Select different slide transitions
  • Rotate and scale slides
  • Choose colors or images for slide backgrounds
  • Set transition durations and sizes


To create a presentation, use:

To create a slide, use:

All the [slide] shortcodes must be wrapped by a [presentation] shortcode — otherwise, the slides won’t show up.

Presentation-wide settings such as height, width, and transition duration (in seconds) can all be set using the respective attributes in the [presentation] shortcode.

For example:

To create a presentation that’s 600×375 in size (like the example below), use:
[presentation width=600 height=375]

To set the transition duration for each slide to 5 seconds, use:
[presentation duration=5]


Here’s a list of transition shortcodes:

To create a transition that moves down (the default transition), use:
[slide transition="down"]

To create a transition that moves right, use:
[slide transition="right"]

To create a transition that moves up, use:
[slide transition="up"]

To create a transition that moves left, use:
[slide transition="left"]

To set no transition, use:
[slide transition="none"]

Setting no transition works when fading is enabled — see below.

↑ Table of Contents ↑

Rotation and Scaling

You can rotate and scale slides to create different effects. To rotate a slide, use:

[slide rotate=]

The value after the = is in degrees. For example: [slide rotate=45].

To scale a slide for emphasis, use:

[slide scale=]

The value after the = can be any scalar value, including decimals. For example: [slide scale=5] or [slide scale=1.75].

↑ Table of Contents ↑


Fading between slides is enabled by default. To disable fading, use:

[slide fade="off"] or [slide fade="false"]

To re-enable fading, use:

[slide fade="on"] or [slide fade="true"]

↑ Table of Contents ↑


You can dress up a slide with a background color or custom image. To set a solid color, use:

[slide bgcolor=]

The value after the = is a valid HTML color. For example: [slide bgcolor=#d3e7f8].

To set an image, use:

[slide bgimg=]

The value after the = is a valid image URL. The image will stretch to fit the slide.

Tip: Any option that can be set on a [slide] can also be set in the [presentation], which will set it as the default setting for the presentation.

↑ Table of Contents ↑


You can view a presentation in full-screen by clicking the four-arrow icon on the lower right of the slideshow. Hitting ESC on your keyboard will also exit full-screen mode.

To navigate, use the onscreen arrows (or keyboard arrow keys). You can also use tab or space to move the slideshow forward.

See these shortcodes in action in this sample presentation:

This slideshow could not be started. Try refreshing the page or viewing it in another browser.



Transitions are specified using [slide transition=].
The following options are available:


The default transition!




Or none!

Which only really works when fading is enabled.


Slides can be rotated using [slide rotate=] where the value is in degrees.


Emphasize your big ideas or explain the tiny details using [slide scale=].


Solid color backgrounds can be set using [slide bgcolor=] where the value can be any valid HTML color.

Alternatively [slide bgimg=] with a valid image url will set it as the background, stretching the image to fill the slide.


Fading between is enabled by default. It can easily be disabled via [slide fade=] with a value of “off” or “false”.


When you start to miss it re-enable it anytime with “on” or “true”.


Presentation-wide settings such as height, width, and transition duration (in seconds) can all be set using the respective attributes in the [presentation] shortcode.

Also, any valid [slide] attribute can be placed in the [presentation] shortcode, and it will apply to every slide unless explicitly overridden.

Enjoy making your own presentations :)


Not quite what you're looking for?

Get Help