Timelines with Sutori

Sutori is a broader learning platform that lets you build presentations with a wide range of options and creativity. It might take a bit more effort than Timeline JS but you will have a lot more control over the final product.

Creating an Account

Dashboard

  • Your dashboard holds all your Stories.
  • Click Create story.
    • There is a timeline template in the Math & Science section. Click on that to begin.

Creating Your Timeline

  • Sutori works by editing the sample entries, deleting what you don’t want and then eventually adding your own.
  • You can edit the graphic at the top of the timeline by clicking on it and then clicking the icon in the upper right. You may need to edit the image to get it to fit well in the space.
sutori-1.JPG

As you scroll down the template you will see The Timeline Template

  • Add the title for your timeline here
  • Add a brief  description
sutori2.JPG

Adding Events

  • With Sutori you do need to manually enter your events in order. You can insert more as you go.
  • Change the first header to the first year or date that you want to include. You can edit the text, include videos, images, and links.
sutori-3.JPG
  • Add each event — using either an image, video, link or text to provide the details. You can divide the timeline by years, or create a multimedia presentation for each event.
  • Delete any of the template entries that you don’t need/want.
sutori-4.JPG

Sharing and Embedding Your Timeline in a WordPress Site

Just below the image for your timeline is a Share button.

To embed your timeline in your web page, use the same Share button, but click on Embed.

  • Copy the embed code. It should look something like this:  <script src=”https://assets.sutori.com/frontend-assets/assets/iframeResizer.js”></script><iframe src=”https://www.sutori.com/story/jane-addams-and-the-international-congress-of-women–D8H4gVkKXVye82JdQvBrp4Ti/embed” width=”100%” height=”600″ frameborder=”0″ allowfullscreen></iframe><script src=”https://assets.sutori.com/frontend-assets/assets/iframeResizer.executer.js”></script>
  • Open the page or post on your WordPress Site where you want to place the timeline. Use the Text editing tab for this task.
WP-textview.JPG

Paste the text into the page.

wp-sutori.JPG

Then click on the Visual Editor tab to see what it looks like.

WP-sutori0embed.JPG

Then Preview the page to see what it will look like on your website. It may take a second to load and does carry Sutori branding. But it works!

wp-timelineembeded.JPG

If you need to edit the timeline, work in Sutori, and all edits should be automatically updated.