Readers often come to a web page in search of a specific piece of information. Anchor links are great for allowing your visitors to move to certain spots on a page and find sought-after information effortlessly. That is why understanding anchor links in Muse and how to write and place them is so important. Learn the step-by-step process for creating anchor links in this online video.
- View Offline
In addition to regular hyperlinks, you may also want to use something called an Anchor link inside of Muse. And in this movie, I'll show you exactly how to do that. But before we actually get started doing it, let's explore exactly what an Anchor link actually is. So if I double click on this home page, you can see that this is a simple one page. Layout. Meaning that the navigation of the page is essentially just all on one page. And what you want to do is you want to be able to just click something like services and have the page scroll down to show you these areas like this.
This is a popular technique in one page websites and what we're going to use is something called an Anchor tag in order to accomplish this. But the first thing we have to do, is we have to establish all of the anchor points and you can do that, with this little anchor tool, right here. And so once I click this, it's called the Anchor In Place gun, and once I click on that, it loads up an anchor. And I can just come here and I can create an anchor point, just by clicking right here in this top corner. And when I do that, I can name the anchor. It's very important how you name the anchor, and it's also very important how you spell it, and the capitalization method that you use.
So in this case, I'm just going to call this top, because I want to be able to go back to the top. And hit OK. Now I'll scroll down a bit, and I'm going to create an anchor tag somewhere down in here that links to this area. And so we'll create an anchor, and somewhere about like this, we have to account for the fact that there's going to be about a 75 pixel gap that we have to deal with because of the fact the header is sticky. So what I'm going to do is just go up about midway through this board right here. And place it and we'll call this services and I'm keeping this all lower case to make it easier, and then I'll scroll down a bit, grab another anchor, right about midway up to this paragraph I'll create another anchor over on the left and I'm just going to call this one Work for the portfolio pieces.
And then down here we'll create another anchor. Again, just a little bit farther up then it probably needs to be, but you could actually put this right on this section if you wanted to, the only difference is the scroll wouldn't be as clean and I'll show you what I mean by that a little bit later on, so in this case we'll do team, hit OK, [SOUND] and we'll scroll down here and this will be the last one, we'll just do this one as. Contact, and I'll move it up a little bit. Somewhere, right around there. And we'll do contact, there we go, hit OK, okay.
Now once we have our anchors in place, it's time to actually make our links. So in order to do that, what I'm going to do, is go back to my plan view. Double click on the master page, and we're going to work with this menu up here at the top. And so I'm just going to click this once. Click again to select this object right here and then what we're going to do is we're going to give this a hyperlink. And so in order to give this a hyperlink I'm just going to come right up here and all the anchors will show. And so home, that needs to be taken back to the top. And then the second one right here, services. This one is going to be work.
And this one is going to be the team, and then of course the final one will be Contact. And so once we have all of that in place, let's close this and go back into the home page, and then let's just preview this. And once I preview that, it's going to take me here, and then if I click Services. It scrolls down. Now, you'll notice it doesn't scroll cleanly all the way down so that's something I need to fix. Work, close but not quite. Team, again close. Contact.
So, it seems like they're all a little on the high side. That's okay. Just go back, close this up. And move 'em down a bit. So this one right here, contact, let's just move that down a couple of clicks with our mouse. And then, let's do the same thing up here. And we'll do the same thing here. And then this one needed to be moved down a little bit more than those. And let's preview it one more time. And this is essentially the process you go through to make sure that these all go to the right place. That one looks good now. That one, that one's good, and that one's good. So, I kind of got lucky there, but you can just play around with this and get it until it scrolls exactly where it's supposed to and you can see it.
It works going forward. Or backward, and you can reveal all of these different areas, of your design which is really cool. And you do this through anchor links, it's not hyperlinks, because hyperlinks take you to another page, somewhere within the same site. These are just anchor links indicating that there's a certain point within this given page, that you want to navigate to. And you don't have to use a navigation menu to do that either, you could link just a bit of text to an anchor point, or whatever the case may be, it doesn't matter. Just as long as you have an anchor point defined somewhere on the page, and then you have a link that takes you to it, then Muse will automatically do all the hard work in between and create the scrolling effects and all that good stuff to make sure that everything looks its best to your end user.
- Becoming familiar with the Muse interface
- Creating a sitemap
- Setting up master pages
- Working with headers and footers
- Importing and embedding graphics
- Scaling, rotating, and aligning page objects
- Wrapping text around images
- Working with web-safe and Typekit fonts
- Creating links
- Adding menus for navigation
- Inserting an interactive map
- Adding a Facebook Like button
- Building a Business Catalyst form
- Exporting the site to HTML