Layout & Design

Adding Links in Framer (Fundamentals Lesson 15)

Joseph

10:30

65K views

Jan 21, 2025

About this lesson

At the beginning of this course, we looked at how to add multiple pages to our site. Now it's time to link those pages together and turn them into an experience that a visitor can navigate.

https://www.youtube.com/watch?v=cEamHEJYflI&t=0s Intro

https://www.youtube.com/watch?v=cEamHEJYflI&t=13s Linking navigation buttons to pages

https://www.youtube.com/watch?v=cEamHEJYflI&t=81s Creating and styling link styles

https://www.youtube.com/watch?v=cEamHEJYflI&t=177s Linking to page sections with smooth scroll

https://www.youtube.com/watch?v=cEamHEJYflI&t=286s Linking text ranges

https://www.youtube.com/watch?v=cEamHEJYflI&t=357s Linking buttons to external pages

https://www.youtube.com/watch?v=cEamHEJYflI&t=556s Link conflicts and best practices

https://www.youtube.com/watch?v=cEamHEJYflI&t=606s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00at the beginning of this course we 0:01looked at how to add multiple pages to 0:03our site now it's time to link those 0:05pages together and turn them into an 0:07experience that a visitor can 0:10[Music]0:12navigate all right to get us started 0:14I've created a little sample website 0:16that has a few pages on it that we can 0:18actually link to so we'll start with the 0:21homepage and we'll start with these 0:22navigation buttons in the homepage in 0:25fact they're not navigation buttons at 0:27all right now they're just regular old 0:29text boxes so to turn one of these into 0:31a link all we need to do is Select it 0:33and then at the very top of the 0:35properties panel you'll see link with a 0:37little plus sign now you can either 0:39click here or as long as you have an 0:41element selected and not a range of text 0:44you can also just press the letter L on 0:46the keyboard and pressing L will add a 0:48link and it'll focus the link to field 0:51where you can either paste in the URL of 0:53an external site or you can start typing 0:55the name of one of your own pages so for 0:58example we want pricing link to pricing 1:01I could just select it from the drop 1:02down menu we don't have that many pages 1:04on this site but let's say that we did 1:07let's say that I wanted to type pricing 1:09as soon as I start typing it's going to 1:11filter down to show things that match 1:13which includes the pricing page itself 1:15but because the pricing page also has 1:17some sub Pages within it those show up 1:20as well if I want to see only the sub 1:23pages I can type pricing followed by a 1:25slash and that slash actually kind of 1:27simplifies this drop down and and 1:30doesn't show things that aren't children 1:32of the pricing page but since this is 1:35the main pricing page I want to link to 1:36I'm going to go back and with pricing 1:38highlighted I'll just hit return and 1:40boom now we are linking to the pricing 1:43page you'll notice below there are a 1:45couple of settings here we have the new 1:47tab option which means do we want this 1:49to open in a new browser tab when 1:51someone clicks on it when linking to 1:53Pages within your own site typically 1:55you'd want the answer to be no you don't 1:57want to be opening tabs and windows on 1:59the visitor computer every time they 2:00click on a link so I'm going to leave 2:02that set to know and the next property 2:05is something called style now style 2:07shows up because the layer that I'm 2:08linking from here is a text layer and I 2:11also want to point out you can highlight 2:12a range of text and create a link from 2:14that in this case it's an entire text 2:17layer that just has one word in it and 2:19that's fine too but anytime you're 2:20linking from text you're going to get 2:22this style property here and when you 2:24click on it you get this little modal 2:26where you can manage your link Styles so 2:29the idea a is that rather than styling 2:31each link one at a time and having to 2:33redo that work over and over again we 2:36instead create what's called a link 2:37style and then we choose which link 2:39style we want to apply each time we 2:41create a new text link so here it's 2:43created a default style for us we can 2:45either edit this or we can just create a 2:47new style here I think what I'm going to 2:50do here is create a new style because I 2:52like this blue type of hyperlink I like 2:54that within the context of a paragraph 2:56but for our navbar I would like to do 2:59something a little bit different I kind 3:00of want it to look more the way it did 3:02before I added this link with the dark 3:04text so I'm going to click new style and 3:07then here link to I can rightclick on 3:09this and choose to rename it and I can 3:11name this nav link so that I don't get 3:14confused later and then when I Mouse 3:15over it I can choose the edit button and 3:18here this is what link styles are all 3:19about we're going to choose a style for 3:22the default state of the link the link 3:24when it's just sitting there not doing 3:25anything then we're going to choose a 3:27style for how the link appears when the 3:29visitor mouses their cursor over it 3:31which is called hover and then we have a 3:33style called current which is for when 3:35the link links to the page that we're 3:37currently looking at so that we can let 3:40visitors know hey this is where you are 3:42right now so for this I'm actually going 3:45to change the default color I'm going to 3:47switch this to the 666 hex code that it 3:50was before and I'm going to go back and 3:53let's leave the hover color on Blue so 3:57that we can actually see something 3:58happening when we hover over it 4:00another thing that we can do because by 4:01default this switch from the default 4:03State over to the hover state is going 4:05to be instantaneous we can also click 4:07here to add a transition and have it 4:09kind of ease in and out and that has its 4:12own little dialogue here where we can 4:13play with the timing and the delay of 4:15things um I'm actually going to bring 4:17the time down a little bit 0. 2 or3 4:20seconds keeps it nice and snappy but 4:22because it's animated it's got a little 4:24extra smoothness to it I'm going to go 4:26back here and for the current color this 4:28is really Deb atable and subjective but 4:31I'm going to set this to the color we 4:33had before our default color and I'm 4:36going to go back and I'm going to leave 4:38the decoration set to underline so even 4:40if we decide not to change the color we 4:43can still use an underline as some sort 4:45of signifier that this link is special 4:49cool and all the choices I've made here 4:51aren't just for this link but for this 4:53link style which I can now go apply to 4:56the other links now there are a couple 4:58of items in my Navar that actually 5:00aren't meant to link to other pages of 5:02this site I want them to link to 5:04corresponding sections that are on this 5:07current page that are on the homepage if 5:09I scroll down we have a little feature 5:11section here and if I scroll even 5:13further we have what our users say and 5:15other words testimonials so back up at 5:18the top in my nav bar sure enough I have 5:20an item here for features and I have an 5:22item here for testimonials to link to a 5:24section of a web page we just have one 5:27little bit of setup to do we've got a 5:29find the frame that represents the 5:31section or at least that represents the 5:33top of the section here I do have a 5:36frame for my entire feature section and 5:39with that selected I'm going to go down 5:41to the bottom of the properties panel 5:42and I'm going to add a scroll section we 5:45can give this scroll section A name I'm 5:47going to leave the name at features and 5:49then we also have the option to create 5:51an offset and again when you link to a 5:54scroll section the top of that section 5:56is going to align with the top of the 5:58browser it's going to slide up and it's 6:00going to stop when it reaches the top of 6:01the browser so using offset y we can say 6:05stop a little bit lower or stop a little 6:07bit higher so that way we can compensate 6:09for design elements that are getting cut 6:11off or perhaps you have a fixed nav bar 6:13and you want this to scoot down out of 6:15the way of that nav bar I'm going to 6:17leave my offset Y at zero because we 6:20don't have anything like that going on 6:22and now when I select features I can 6:25create a link that links to home that's 6:28the page that we're currently on that's 6:29the page where this section exists and 6:32once I've selected that page I now get 6:34an option called section and from the 6:37section drop down I can choose features 6:40now when you link to a section you get 6:42an extra property here called scroll and 6:44that lets us choose between jumping 6:46instantly to the section or instead 6:49having a smooth scroll effect that 6:51Scrolls the viewer down past all the 6:54things that are in between and stops at 6:56the section let me fix my link style 6:59here real quick and now let's take a 7:01look at how that works in the preview 7:03window so I hover over features it turns 7:06blue it gets underlined which is exactly 7:08what was dictated in our link style and 7:10when I click boom there's that smooth 7:11scroll effect and the top of the section 7:13stops when it reaches the top of the 7:15browser here pretty cool so all these 7:18links so far have been applied to entire 7:20text layers but like I mentioned earlier 7:22you can also highlight just a range of 7:25text within a paragraph and you can add 7:28a link to that as well so by clicking on 7:30link here and in this case you don't 7:32want to use the keyboard shortcut if I 7:33press the letter L it's going to replace 7:35the highlighted text with the letter L 7:38don't want to do that so in this case I 7:39definitely want to click to add the link 7:41here on the properties panel now let's 7:44say we want this to link to a particular 7:46blog post if I type blog especially if I 7:49type blog slash which is where my posts 7:52live we see here something called a slug 7:55this is what you'll see if you're 7:56linking to a CMS entry if you're linking 7:59to a page that's created by the CMS so 8:03if we choose slug here we can then 8:04choose in the next dropdown which 8:07specific blog post we want this to link 8:09to so I'll choose styling elements here 8:11for example cool so again everything 8:15that we've done so far has been with 8:16text let's take a look at adding a link 8:19to something that isn't a text layer I'm 8:21going to click on get started here now 8:24the default selection mechanics mean 8:26that when I click in framer I'm going to 8:27get the most deeply nested layer under 8:29my cursor so in this case I actually 8:31grabed the text layer but what I'd 8:33really like is that whole button frame 8:35so what I'm going to do is press the 8:37Escape key to go up one level in the 8:38hierarchy and now that I've got the 8:40whole button selected I'll click to add 8:43my link now one thing we haven't done 8:45here yet is linked to an external page 8:47so I'll do that I'll just type 8:50https colon slf framer docomo go and 8:56copy this from the browser so I don't 8:57have to type quite so much or if I'm not 8:59sure if it's an https or if it's HTTP 9:03it's always safest to just copy and 9:05paste from a page that you've pulled up 9:07in the browser cuz you know if you 9:08pulled it up in your browser that it's 9:10correct and when I hit return to lock 9:12that in again we get the option to open 9:14in a new tab or not the last thing I 9:17want to point out is that if we look 9:18over on the layers panel there is a 9:20little tiny link icon that shows which 9:23layers have links applied to them so 9:25here you can see it's the button that 9:28has the link it's not the Tex layer 9:29within it and another thing I want to 9:31point out is that you can't have an 9:32element with a link applied to it within 9:35another element that has a link applied 9:36to it that's a conflict because where's 9:38it going to take you when you click on 9:39the link even if they link to the same 9:41place it's still technically a conflict 9:44so if I try to add a link to the child 9:47of this Frame that already has a link we 9:49get a little message that says hey the 9:51parent already has a link applied to it 9:53so we can decide whether or not we want 9:55to leave it alone or if we want to go to 9:57the parent and remove the parent link 9:59and instead put it on the child layer 10:01but that is completely up to us and 10:04that's it now you know how to add links 10:06how to style them how to link to other 10:08pages of your site how to link to 10:09external Pages as well as how to get 10:12that smooth scrolling effect to link to 10:14different sections of your site that's 10:16it for this one I'll see you in the next 10:18one

TeachesLinks

Also coversCustom Cursors Frames Hover & Press Keyboard Shortcuts Plans & Pricing Sizing Transitions & Easing

Watch on YouTube ↗

‹ Build Smarter with These Free Framer Plugins

Framer Update: OpenType for 1400+ Fonts ›