Back to Support Content and Media Blocks Embed Blocks Presentation Shortcode

Presentation Shortcode

On, you can embed presentations from many popular platforms including Google Slides, Slideshare, and Microsoft Powerpoint. You can also use shortcodes to build a slide presentation directly in the editor. This guide will show you how.

This feature is available on sites with the Business or Commerce plan. If your site has one of our legacy plans, it is available on the Pro plan.

With presentation shortcodes, you can:

Create the Shortcode

You can add a shortcode to any page or post using a shortcode block.

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.

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


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"]


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.


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.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!