icon RevealJS
Created by HolisticWare

How to prepare your page for an HTML5 presentation

To turn your CMS Page into a presentation, you can:

  • either create or modify the HTML of your page manually using a few elements recognized by the RevealJS Presentation Framework,
  • or make a presentation with a third party tool

Modifying the HTML content manually

Each slide in the presentation is represented by HTML content within a <section/> element. When you place a <section/> within another <section/> element (two-level), you thus make nested slides that the user can view by pressing the up and down buttons.

The <section/> elements should be placed in the <div class="slides"> element, which, in turn, - in <div class="reveal">.

  1. In the "Content" perspective, edit a page, the content of which you want to turn into a presentation.
  2. Change its layout template to "HolisticWare.Layout.Presentations.RevealJS".
  3. Switch to Code mode.
  4. Split the HTML content into slides by wrapping them with <section/> elements. Nest <section> elements in other <section/> elements where necessary.
  5. Wrap all the content split by <section/> elements with <div class="reveal"><div class="slides"></div></div>.
  6. Save and publish the page.

See the HTML code example at the bottom of this page.

Using a third-party tool to create presentations

You can use the tool by http://slid.es  to create your presentation, then export it and paste on a page.

Note: The presentation you create at http://slid.es is public. To make it private, you should purchase their "Pro" version. Alternatively, you can make your presentation manually as described above.

  1. Go to http://slid.es and log in. You can use your Google or Facebook account.
  2. Create a deck and add slides to it. (The '+' button to the right adds another "horizontal" slide, the '+' button at the bottom adds another "vertical" slide.) 
  3. Save your presentation on the http://slid.es server.
  4. Export the presentation and copy the markup from the edit box. Please note that the original markup is not XHTML but HTML-based. You may need to correct that by using <br/> instead of <br> etc.

Now in the CMS Console:

  1. In the "Content" perspective, create a page.
  2. Change its layout template to "HolisticWare.Layout.Presentations.
  3. Switch to Code mode.
  4. Within <body></body>, add <div class="reveal"></div>.
  5. Then within <div class="reveal"></div>, add the presentation's markup exported from http://slid.es.
  6. Save and publish the page.

Now you can view the presentation in your browser.

HTML code example

Expand code