Linking elements to external url

Introduction to linking external URL

Hello and welcome to lesson 17 of the MakeStories 101 course. In this course, we are going to learn how you can link an element, one external URL using MakeStories.

Suppose we have this particular text element and we want to link it to an external URL. So web stories work in two different ways. First, we will try to understand what these two ways of linking are.

What are the two ways of linking?

The first way is called a one-click link. The second option is two-click links.

Anything that goes into the below 20% of your webstory will go into the one-click link and anything up in above 80% will be two-click links.

Now we will show you an example of this to make it more clear. How to link is something that we will see later. Right now we will quickly give you a quick overview of what is one click and two click URLs.

Now you can see that we have linked this particular URL to this particular text element to an external URL. We will try to preview this.

Here We can see that the moment we hover the cursor on this text element it changes to a hand.

This means that this particular text element is linked to an external URL.

Now when we clock that text element you can see that there is a tooltip, and when you click the tooltip, it will open the URL that you want the story to go to. So this is called a two-click link.

Now, this is a two-click link because it is in the top 80%. Google or the AMP development team calls this as a tooltip.

If you are searching online for documentation on linking your element in a web story, you will probably find it under the tooltip.

The second option that they have is called call-to-action buttons. We will link this to the action button from CTA settings.

Now you can see that this particular call to action button is in the bottom 20%. So now. If you click the CTA button, it will directly go to the URL that you want.

Now, if you have understood, what is the difference between two clicks and one click, we will proceed with the ways of doing that in MakeStories.

Different ways of linking external URL in MakeStories

Now, let's say we have this element. We have added another text element and we will say, visit. www. Youtube. com and we will center align this.

Now, all we want to do is whenever someone clicks this, we want them to go to YouTube.

Now, depending on where you want this text, you will be keeping it as a two-click link or a one-click link.

Since this particular text element is in their top 80%, it will be a two-click link now to make it easier for our users, what we have done is irrespective of where you place the text element or element in the MakeStories canvas, We will automatically change it to two clicks or one click.

Right now we can see that this particular text element is in the top 80%. Now irrespective of whether it is in the top 80 or below 20%, If you are linking any element, all you have to do is to open this tab over here, which says on click.

Here you will find an option that says open link. And here you will enter the URL that you want it to be linked to.

Now we will write visit Youtube.com and we will just click on save changes and we will preview it.

Now, when we click this, you can see that there is this Favicon, MakeStories automatically fetches this favicon from the website, if it is there. If it's not there, then you will have to enter, select the icon.

Suppose we end you to select that you will have to click this thumbnail and the media library will open and you have to select the icon that you want. And you can use that. Now, what we will do is we will drag the element into the bottom 20%.

Now, if you want to understand what is it, where does the bottom 20% start from? In that case, we will say that our canvas sizes 600 pixels, so 600 pixels into 20%, which is 120 pixels.

We will deduct 120 pixels from 600, which comes to 480 pixels. Somewhere over here, we have 480 pixels. Now we have this area over here. Anything that was from here to here will be converted into a one-click link automatically.

Now we have saved this and previewed it. You can see that Now when we click this, it directly opens the URL. We don't have to wait for the tooltip to appear and then click it.

Now to answer another question that we receive a lot, which elements can be linked? From now on, you can link any element. It can be an image, It can be a text element, It can be a group.

Let's say let's try to form a group of an image and a text element. So we have this image over here. We will resize it and form a group. Now we select them together and click on the create group, So the group has been created.

Now we click the group and we will click open and we will link this to makestories.io. So here you can see that the makestories.io favicon has been automatically fetched by the MakeStories UI.

Now we will click on save changes and preview this. You can see when we click this, it shows me the URL where we have to go. Now This is done and we will even ungroup this.

How to add buttons like websites in your web stories using MakeStories?

Here you can link any element that you want, but what if you want to have buttons like you have on the website. To do that, you have to go into the layers tab.

Over there, you will find an option that says, add a call to action or CTA button. You will click this and here you will have an option that says click here.

This is a predefined button that MakeStories adds to the UI for you.

You can edit this by clicking, double-clicking this. Here we will write visit www.makestories.io. We have two options on the right, that is CTA settings and another one that says CTA designs.

We will first look into CTA designs.

Here we have various CTA actions that are prebuilt. You can use one of these buttons, or if you want to change the appearance, then you can go to the Appearance tab, and you can change the colors as you wish.

This is the color for the text. The name here, the background as the name suggests is for changing the background of your call-to-action button.

Again, you can control the radius, Border radius, using the border radius element. You can change this to 30 pixels to make it circular, and then you can add a border, or you can apply all these options.

The other option that you have is CTA settings. So suppose if you have added a call to action button, and now you want to link it, the good thing about the call to action button is that you have two options.

You can link to an external URL. If you want to do that, all you have to do is enter the link of the website in this particular text box and it will link to that particular URL.

Now Suppose if you want to do an interlinking. Let's say our web story has nine slides. What we will do is whenever someone clicks on this CTA button, we want to take them to visit slide seven.

Then Over here, we will select the option of slide seven and save this. Now, when you preview this, you will see that it says slide seven.

When we click on this, it takes us to slide seven.

The good thing about this is that now when you click back, It won't go to slide six. It will go to slide number three from where the user was taken.

This is a good option that amp stories or web stories come with.

These are the ways you can link your element to an external URL inside MakeStories.