Create a presentation

This guide walks through creating a slide deck with Zorto. The example uses a reveal.js template, but the content model also works with native HTML/CSS/JS deck templates.

1. Create the presentation template #

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

The template iterates section.pages and wraps each page’s content in a <section> element. It can map page.extra fields to CSS classes, data attributes, backgrounds, keyboard behavior, or whatever the deck runtime expects.

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 your presentation template
• sort_by = "weight": orders slides by their weight field
• render_pages = false: slides only exist in the assembled deck
• [extra]: passes deck-level settings to the template

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: keep notes beside the slide source. Speaker-view behavior depends on the template:

{% 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

Navigation depends on the template. The zorto.dev native deck supports arrow keys, space, and fullscreen.