Hi! This is Lindsay and in this tutorial we're going to take a look at how to use Genial.ly's online app

to create some interactive infographics.

In this tutorial we're particularly going to be  looking at how to create an interactive timeline.

In this tutorial, we'll cover adding content to your template

and adding interactivity to the timeline.  Let's get started.

Adding content to the template

So let's take a look at how we add content to our timeline.

You can see that were first brought to the pages tab.

It shows me that my graphic is comprised of a single page.

You can see that were first brought to the pages tab.

It shows me that my graphic is comprised of a single page.

So, I won't need to work in this pages tab.

For this timeline today, I'm going to be creating a timeline of the events that happened with the NHL backup goalie Dave Ayres who made

his historic debut in the NHL. So I already have my text and a bunch of my links and the graphics and things that I want to add here.

So we'll start working with with those. So, let's begin by giving our project a name.

So, I've given it a name and you can see that my project automatically saves itself here, so you don't have to worry too

much about hitting the save button. Next, let's give it a title.

To do that, I'll just double click in the title field here

and I'll paste that in.

And I've also got a subtitle.

OK, next I want to add a customized background in here. I don't want it to be just white. I've prepared an image that I want to sit in the background.

I'll come over to the background tab

I'll come over to the background tab

and the base tab here, refers to everything in this slightly gray area. If you wanna change

what appears in the white area here, within the hatch marks, you're going to want to click on the canvas tab.

Now, you have an option from using something from their library, from Pixabays free images,

you can also choose just a color or you could upload an image from your computer.

That's what I'd like to do.

So, clicking on upload, I can now drag images or browse my computer to find them.

So, I have a folder of tutorial content and I'm going to select my background image.

You'll see that it uploads and I can double click to add it in. So, now you can see we've got some issues with our

fonts here. The colours aren't really great for the background that I selected.

You can customize any of these settings by clicking on the area that you want to change. I'm going to select all the text and up here in the

toolbar, I can choose colour, font, font size and some of the other formatting options.

So, we're going to change our text to white

and we're going to go with

Lato as our font. We'll do the same thing here for subtitle and select our font. Next, I'd like to  start customizing

some of the items on my timeline. So, again these are all going to need formatting in terms of colour and fonts that I've used

You can do that by, again clicking on the
item, and selecting options from the timeline above.

You'll need to click on all the various items that you want change the colour of

and you can see that some of these

are in different pieces here.

So, it might be a little time consuming to change these but it's a pretty simple process.

Next, I'd like to add some text into the point here.

So, I'm just copying from my other document

and I'm going to select everything in this box

and replace it with the text that I have. You can see that it's a little bit big for the box.

Let's go with my Lato font. And we're going to change it to white again

and now I can grab on the handles to make the text box a little bit bigger, if I would like. I also need to change the date here

and the font for that date.

You'll see that Genially offers a number of other options for inserting things like YouTube and  Vimeo, you can add audio,

it also has smartblocks which are these pre-created little elements that you can add on to  any one of your interactives. It also has

interactive buttons. There's markers, there're social networks symbols. There's also a resources tab which gives you access to things

like icons.You

have shapes,lines

and arrows, etc. There's a full image panel which will show you things that are built into the Genially

library which you can use.Pixabay which offers you access to

copyright free images as well as

Giphy. Finally, there's also a text tab which gives you some options for preformatted titles and

different text blocks if you would like. These can always be customized once they're dropped onto your timeline.

Adding Interactivity to your timeline

Next, we're going to take a look at how to add interactivity to some of our elements.

We have a little info

button down here

and this info button is where interactivity actually occurs. So the visitor can come to the timeline and click on info to get more information.

To customize that, you'll click on the little pointer button here. You can see that it brings up a window that gives you some different options

for interactivity. You can have a tooltip, so when somebody rolls over that item they would get a

little bit of text or whenever you added in this field, a window will create a popup window.

You've got options for customizing that as well. The go to page button is used when you have multiple pages in your info graphic.

when you have
multiple pages in your timeline I only have one page so we won't be using not here you can also choose to click on linked to linked to an

I only have one page so we won't be using that here. You could also choose to click on link

to link to an external page. In our case, we're going to go with window and we've got some more text to add in here.

So, I'll copy my text

and paste it in here. I'd also like to add an image to go with this that'll appear in the popup window.

To do that, I'll click on the insert image button

but as you could see you can also choose to insert a video and now we can browse the computer again for this image. I have

one here of Dave and it'll drop that in. Instead of going with a medium size window and ago with the small window

and we'll click save. Now, I'm going to customize the info button to say learn more

and I'll change that again to white and Lato for my font.

So now, let's preview this to see what that looks like.

You can see my timeline animates in here and if I click on the learn more button

I get a little popup window with the information that we just put in. Coming back to our editing panel.

So you may have noticed when we previewed it, that many of our elements animated in. Clicking on any element and then clicking on

the icon here bring up the animation panel and you can take a look at how things animate in. So here you'll see on our text we have an

entrance animation  which is indicated by this little purple dot and you can see that it has our text fade in.

You can also hover over any of these other options to see what it would look like

if you tried one of the other animations.

We'll leave ours that the basic fade in. And that's what's involved in creating a timeline and adding some interactivity.

Thanks for watching.