After exporting a Slides template, you can still add slides to it. The easiest way would be to go back to the Slides generator, find a slide that is similar to what you want, add it to your project, customize it and redownload the template. You could also just use the Copy HTML control that is at the bottom of all slides and paste the markup in your downloaded template.
You might also prefer to write a slide’s markup yourself from scratch (perhaps none of the predefined slides meet your needs or you may not have access to a preferred slide). This article will detail a few fundamentals that you should be aware of when adding a slide to the template. We will only cover the basic things that you will need to know to add a typical slide. For further customizations on your slide that aren’t covered here, check the documentation.
Structure
We’ll start by looking at the structure of a typical slide.
Slides should be placed in the root of your site inside the body element. The order of slides on the site will depend on their order in code. When you add a slide to the template, the number of navigation indicators will automatically increment (if the indicators had been activated on the template).
Here is the markup of an example slide.
<section class="slide">
<div class="content">
<div class="container">
<div class="wrap">
<!-- Place your Slide content here -->
</div>
</div>
</div>
</section>
You should place your slide content in a .slide element. Using a div would be okay, but we use sections, so you should probably use that for consistency. The slide class makes each slide occupy the entire browser viewport, among other styles that it adds.
Starting with the markup snippet shown above, you should place the content of your slide insie the .wrap div. By default, all content is centered on the x and y-axis. You can change this position by adding top, bottom, left and right classes to .wrap:
<section class="slide">
<div class="content">
<div class="container">
<div class="wrap left bottom">
<!-- Place your Slide content here -->
</div>
</div>
</div>
</section>
There are different predefined classes that you can use to size and position the content of a slide.
You can use a Flexbox grid that allows you to split the content into as many as 12 columns and lets you set a specific position for elements on the page.
<!-- 12 column flex -->
<ul class="flex">
<li class="col-3-12">Col 1</li>
<li class="col-3-12">Col 2</li>
<li class="col-3-12">Col 3</li>
<li class="col-3-12">Col 4</li>
</ul>
<!-- 10 column flex -->
<ul class="flex">
<li class="col-2-10">Column #1</li>
<li class="col-2-10">Column #2</li>
<li class="col-2-10">Column #3</li>
<li class="col-2-10">Column #4</li>
</ul>
You can also use the fix-X-X classes for fixed width content. fix-1-12 has a max-width of 80px, fix-2-12 of 180px. The max-width value increments in steps of 100 as you go up the classes until you get to fix-12-12 which has a max-width of 1180px.
You can also place your content in a fixed container inside flex columns.
<ul class="flex">
<li class="col-4-12">
<div class="fix-3-12">Smaller than 4</div>
</li>
<li class="col-4-12">
<div class="fix-3-12">Smaller than 4</div>
</li>
<li class="col-4-12">
<div class="fix-3-12">Smaller than 4</div>
</li>
</ul>
Take a look at the manual if you need further explanation of the available classes.
Slide Background
You might want to add a background to the slide that you just added. We have guides written that cover the different backgrounds that you might want for your slide, please refer to them.
- Using a video for a slide background
- Using an image for a slide background
- Using multiple images for a slide background
- Using a color for a slide background
- Using gradients for a slide background
Animations
When you add a slide to the template, it will have the same effect on slide change as the other slides. The slide effect is set on the body and applies to all slides. You can, however, animate the appearance of elements on each individual slide.
You can set the order of appearance by setting an ae-X number. The higher the number, the later the element will appear. You can use up to 10 animated elements. The speed of occurrence of elements depends on the main speed (you can use the classes slow or fast to change the speed from the default).
<section class="slide">
<div class="content">
<div class="container">
<div class="wrap">
<h1 class="ae-1">Appears first</h1>
<p class="ae-2">Appears second</p>
<button class="ae-3">Appears third</button>
</div>
</div>
</div>
</section>
By default, all elements are shown from the bottom up. You can change this by adding suitable classes: fromLeft, fromTop, fromRight, fromBottom, fromCenter, fromBlur and fromAbove.
<section class="slide">
<div class="content">
<div class="container">
<div class="wrap">
<h1 class="ae-1 fromTop">Appears from the top</h1>
<p class="ae-2 fromLeft">Appears from the left</p>
<button class="ae-3 fromCenter">Appears from the center</button>
</div>
</div>
</div>
</section>
You can change this for all animated elements at once by adding the desired direction class on the .slide element or even on <body>, which will apply to animation direction on all sections and slides on a page.
<section class="slide fromLeft">
<div class="content">
<div class="container">
<div class="wrap">
<h1 class="ae-1">Appears from the left</h1>
<p class="ae-2">Appears from the left</p>
<button class="ae-3 fromBottom">Appears from the bottom</button>
</div>
</div>
</div>
</section>
Excluding a Slide from Navigation
If you ever need to exclude one of your slides from the navigation, you can do so by adding an exclude class on the .slide element. The slide will still be shown on the page, but it won’t have a corresponding navigation control on the navigation menu.
<!-- Slide will be shown but ignored from side menu navigation -->
<section class="slide exclude">
<div class="content">
<div class="container">
<div class="wrap">
<!-- Slide content -->
</div>
</div>
</div>
</section>
You can group excluded slides together by assigning them to a parent slide. Add the data-slide-id="unique-id" attribute to a parent slide element and data-parent-slide-id="unique-id" to link them together.
<!-- Parent slide -->
<section class="slide" data-slide-id="unique-id">
<div class="content">
<div class="container">
<div class="wrap">
<!-- Slide content -->
</div>
</div>
</div>
</section>
<!-- Excluded from navigation -->
<section class="slide exclude" data-parent-slide-id="unique-id">
<div class="content">
<div class="container">
<div class="wrap">
<!-- Slide content -->
</div>
</div>
</div>
</section>