How to Add a Slide to an Exported Slides Template

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 cthe ode. 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.

<code><section>   <div>     <div>       <div>         <!-- 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 section , 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 inside the .wrap  div . By default, all content is centered on the x and y-axis. You can change this position by adding topbottomleft  and right  classes to .wrap :

<code><section>   <div>     <div>       <div>         <!-- 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.

<code><!-- 12 column flex --> <ul>   <li>Col 1</li>   <li>Col 2</li>   <li>Col 3</li>   <li>Col 4</li> </ul>  <!-- 10 column flex --> <ul>   <li>Column #1</li>   <li>Column #2</li>   <li>Column #3</li>   <li>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 80pxfix-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.

<code><ul>   <li>     <div>Smaller than 4</div>   </li>   <li>     <div>Smaller than 4</div>   </li>   <li>     <div>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.

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).

<code><section>   <div>     <div>       <div>         <h1>Appears first</h1>         <p>Appears second</p>         <button>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: fromLeftfromTopfromRightfromBottomfromCenterfromBlur and fromAbove .

<code><section>   <div>     <div>       <div>         <h1>Appears from the top</h1>         <p>Appears from the left</p>         <button>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.

<code><section>   <div>     <div>       <div>         <h1>Appears from the left</h1>         <p>Appears from the left</p>         <button>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.

<code><!-- Slide will be shown but ignored from side menu navigation --> <section>   <div>     <div>       <div>         <!-- 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.

<code><!-- Parent slide --> <section data-slide-id="unique-id">   <div>     <div>       <div>         <!-- Slide content -->       </div>     </div>   </div> </section>  <!-- Excluded from navigation --> <section data-parent-slide-id="unique-id">   <div>     <div>       <div>         <!-- Slide content -->       </div>     </div>   </div> </section>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us