Create a presentation

This guide walks through creating a slide deck with Zorto and reveal.js.

1. Create the presentation template #

Add a presentation.html template to your site’s templates/ directory. This template assembles slides into a reveal.js deck. See the zorto.dev source for a working example.

The template iterates section.pages and wraps each page’s content in a <section> element. It maps page.extra fields to reveal.js data-* attributes for backgrounds and transitions.

2. Create the section #

Create a directory for your presentation with an _index.md:

content/presentations/my-talk/_index.md

+++
title = "My Talk"
description = "A presentation about something interesting."
template = "presentation.html"
sort_by = "weight"
render_pages = false

[extra]
width = 1050
height = 700
transition = "slide"
reveal_theme = "black"
+++

Key settings:

• template = "presentation.html" — uses the reveal.js template
• sort_by = "weight" — orders slides by their weight field
• render_pages = false — slides only exist in the assembled deck
• [extra] — configures reveal.js (dimensions, default transition, theme)

3. Add slides #

Each slide is a markdown file in the presentation directory. Use weight to control order:

+++
title = "Welcome"
weight = 10

[extra]
layout = "center"
background_color = "#1a1a2e"
+++

# Welcome to my talk

*A subtitle goes here*

Increment weights by 10 to leave room for inserting slides later.

4. Use layouts and backgrounds #

Control slide appearance via [extra] frontmatter:

5. Use presentation shortcodes #

Progressive reveal — content appears on each click:

{% fragment(style="fade-in") %}
This appears first.
{% end %}

{% fragment(style="fade-in") %}
This appears second.
{% end %}

Multi-column layout:

{% columns() %}
Left column content

<!-- column -->

Right column content
{% end %}

With custom widths: columns(widths="60%|40%").

Speaker notes — press S to open speaker view:

{% speaker_notes() %}
Remember to mention the key point here.
{% end %}

Positioned images — place images at arbitrary coordinates:

{{ slide_image(src="logo.png", top="10%", right="5%", width="200px") }}

6. Build and preview #

zorto preview --open

Navigate slides with arrow keys. Press F for fullscreen, S for speaker notes, O for overview.