+ Pure HTML Slide
+ Surround slides in a section
tag with a data-noprocess
attribute to write them in HTML.
+
diff --git a/exampleSite/content/home/shortcodes/section.md b/exampleSite/content/home/shortcodes/section.md
new file mode 100644
index 0000000..595729f
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/section.md
@@ -0,0 +1,39 @@
++++
+weight = 32
++++
+
+{{% section %}}
+
+## Section shortcode
+
+The `section` shortcode groups slides into a vertical display.
+
+**To continue, use the down arrow or swipe down.**
+
+---
+
+Put the shortcode around the slides you want to group together.
+
+```markdown
+{{%/* section */%}}
+
+## Section slide 1
+
+---
+
+## Section slide 2
+
+{{%/* /section */%}}
+```
+
+Keep scrolling down.
+
+---
+
+## That's it!
+
+Use the right arrow or swipe right to continue.
+
+{{% /section %}}
+
+
diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md
new file mode 100644
index 0000000..7843322
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/slide.md
@@ -0,0 +1,38 @@
++++
+weight = 34
++++
+
+## Slide shortcode
+
+Used to customize the parameters of individual slides like background color and transition.
+
+[See all parameters](https://github.com/hakimel/reveal.js#slide-backgrounds)
+
+---
+
+{{% slide transition="zoom" %}}
+
+## Custom slide 2
+
+```
+{{%/* slide transition="zoom" */%}}
+## Custom slide 1
+{{%/* /slide */%}}
+```
+
+{{% /slide %}}
+
+---
+
+{{% slide background-color="white" %}}
+
+## Custom slide 2
+
+```
+{{%/* slide background-color="white" */%}}
+## Custom slide 2
+{{%/* /slide */%}}
+```
+
+{{% /slide %}}
+
diff --git a/exampleSite/content/home/usage-shortcodes.md b/exampleSite/content/home/usage-shortcodes.md
deleted file mode 100644
index 8704a0e..0000000
--- a/exampleSite/content/home/usage-shortcodes.md
+++ /dev/null
@@ -1,97 +0,0 @@
-+++
-weight = 30
-+++
-
-# Shortcodes
-
----
-
-### Fragment shortcode
-
-The `fragment` shortcode makes content appear incrementally.
-
-```
-{{%/* fragment */%}} One {{%/* /fragment */%}}
-{{%/* fragment */%}} Two {{%/* /fragment */%}}
-{{%/* fragment */%}} Three {{%/* /fragment */%}}
-```
-
-{{% fragment %}} One {{% /fragment %}}
-{{% fragment %}} Two {{% /fragment %}}
-{{% fragment %}} Three {{% /fragment %}}
-
----
-
-### Frag shortcode
-
-The `frag` shortcode is like `fragment` but more terse. It accepts the content as the `c` attribute.
-
-```
-{{* frag c="One" */>}}
-{{* frag c="Two" */>}}
-{{* frag c="Three" */>}}
-```
-
-{{< frag c="One" >}}
-{{< frag c="Two" >}}
-{{< frag c="Three" >}}
-
----
-
-Both `fragment` and `frag` accept two additional parameters:
-
-- `class`: sets the class of the wrapping `span` element
-- `index`: controls the order in which sections will appear
-
----
-
-{{% section %}}
-
-### Section shortcode
-
-The `section` shortcode groups slides into a vertical display.
-
-**To continue, use the down arrow or swipe down.**
-
----
-
-Put the shortcode around the slides you want to group together.
-
-```markdown
-{{%/* section */%}}
-
-## Section slide 1
-
----
-
-## Section slide 2
-
-{{%/* /section */%}}
-```
-
-Keep scrolling down.
-
----
-
-## That's it!
-
-Use the right arrow or swipe right to continue.
-
-{{% /section %}}
-
----
-
-### Note shortcode
-
-Add speaker notes to your presentation.
-
-```markdown
-{{%/* note */%}}
-Type 's' to see this slide's speaker notes.
-{{%/* /note */%}}
-```
-
-{{% note %}}
-You found the speaker notes!
-{{% /note %}}
-
diff --git a/exampleSite/content/home/usage.md b/exampleSite/content/home/usage.md
index 4ba5893..5dc21d3 100644
--- a/exampleSite/content/home/usage.md
+++ b/exampleSite/content/home/usage.md
@@ -19,7 +19,7 @@ isHTML = true
---
-## Make a presentation for `/`
+## Presentation for `/`
In `content/_index.md`:
@@ -51,12 +51,12 @@ weight = 10
# Slide 4
```
-Use `weight` to specify the order
+Use `weight` to specify the order relative to other files.
---
-## Make a presentation for any Hugo section
+## For any Hugo section
In `content/{section}/_index.md`:
@@ -89,4 +89,4 @@ weight = 10
# Slide 4
```
-Use `weight` to specify the order
+Use `weight` to specify the order relative to other files.
diff --git a/layouts/_default/baseof.reveal.html b/layouts/_default/baseof.reveal.html
index fbacff4..a406b90 100644
--- a/layouts/_default/baseof.reveal.html
+++ b/layouts/_default/baseof.reveal.html
@@ -38,6 +38,9 @@
+
\ No newline at end of file
diff --git a/layouts/shortcodes/slide.html b/layouts/shortcodes/slide.html
new file mode 100644
index 0000000..6d35a32
--- /dev/null
+++ b/layouts/shortcodes/slide.html
@@ -0,0 +1,9 @@
+{{ $attributes := slice "background-color" "background-image" "background-size" "background-position" "background-repeat" "transition" "background-iframe" "background-interactive" "background-video" "background-video-loop" "background-video-muted" "background-size" }}
+{{ $params := . }}
+