On WordPress.com, 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 WordPress.com editor. This guide will show you how.
With presentation shortcodes, you can:
- Select different slide transitions
- Rotate and scale slides
- Choose colors or images for slide backgrounds
- Set transition durations and sizes
You can add a shortcode to any page or post using a shortcode block.
To create a presentation, use:
[presentation]
To create a slide, use:
[slide]
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.
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!
Related Guides
Your site, built for you
Sit back as our Built by WordPress.com team of experts builds a site you'll fall in love with. From single page sites to full stores, they'll help you make it happen.
Check our guides
Find and follow step-by-step guides for every WordPress.com question.
Questions? Contact our Happiness Engineers.
Self-hosted WordPress site? Find support here.
New to WordPress.com? Find your perfect-fit plan here.
Get the latest learning in your inbox:
Your information will be used in accordance with WordPress.com privacy policy.
