Join Justin Seeley for an in-depth discussion in this video Setting up your master pages, part of Muse Essential Training (2015).
- Most of the time when you're adding content to a website, you're going to be adding a one off piece of content, meaning the content goes onto the page, only that page, and that page alone. But there may be a time when you want something to persist across the entire website, such as a navigation bar, a set of social media links, or even an image or a header and a footer. So, in this movie, what I'm going to do is show you how to populate your entire website with information using a master page. Now, if you've used master pages in other applications like Adobe InDesign, what you're about to see is going to be very familiar to you.
If you've never used InDesign before, that's okay too. This is actually a pretty easy process to start. So, what we're going to do is open up this A-Master page down here at the bottom. All you have to do is double-click on it. When you double-click on it, it takes you into Design view for that particular master page. What I'm going to do first is I'm going to center everything inside of the document, and I'm going to do that by pressing the Command key on the Mac, the Control key on the PC. And then pressing the number zero on my keyboard. That just zooms everything out, so I can see it on screen.
And it centers it up nicely for me. Once I do that, let's take a look at some of the things that we have available to us inside of this window. Check out these little arrows that line the side over here on the left. When I hover over this first one, it says Top of the Page, drag to adjust the padding above the page. So, basically, if you were to click on this little arrow and drag it down, you can see that you can start to add a little bit of white space at the top of the page, giving it a little bit of breathing room, so that when you stick something inside of the header for instance, it's not right up against the top of the browser window.
The reason I set zero padding initially is because I don't know how much space I need up here, not until I get in and actually start designing it. Because only then will I know how much room something needs to breathe. If it's something small, it's not gonna need as much room to breathe because your going to be able to see it pretty easily. If it's something that's large, it's going to need a lot of room to breathe, so that you can really take in exactly what it is. So, in this case, if I were to use a big chunky logo, I would probably give it a little bit more space at the top than if I were just using a small horizontal logo for instance.
This is all going to be on a case by case, project by project, basis. But just know that this little slider here will allow you to drag up and down in order to give yourself some space. Now, you can be precise with this if you want. You'll notice as I drag, over on the far right hand side over by the panels, do you see that little white overlay that says Top of Page? And as I'm dragging, the number is actually changing. That's the number of pixels I am away from the top. So, right now, when I have it at the very top, it's set to zero. When I drag this down to about 15 that means I've created 15 pixels of space.
So, what I'm going to do now is release my mouse, and that's going to give me that 15 pixel cushion at the very top. Now, if I want to adjust the size of the header, you can see here drag to adjust the position, items in the header, up here at the top of the page above the content. So, if I were to take this and click and drag it, you can see here that it also registers with a little info panel over there on the right, indicating how far away it is from the previous ruler that we were dragging around. So, in this case, I'm going to drag this down until it's about 75 pixels tall.
So, that means I have a 75 pixel tall header. I also have 15 pixels of extra space, giving the entire header 90 pixels of total space. Now, I can do the same thing with the footer if I wanted to. In this case, I could drag this up to increase the size of the footer. You'll notice that when I go down to the bottom, it's all the way to the 500 pixel mark. Remember 500 pixels is our initial minimum height. So, if I want to just go backwards from that, I can calculate exactly how tall the footer is. So, if I want to go to about 450 pixels that means right now my footer is about 50 pixels tall.
Now, if I want to give it some breathing room at the bottom, I can do so here as well. Here's the bottom of the browser, and then right next to it is the bottom of the page. If I drag both of those together, they both move in unison. I can undo that with Command or Control + Z. If I want to just adjust one, I'll click on this one right here. And by the way, this is the bottom of the browser, so you have to drag the bottom of the browser to give some breathing room here. So, it's 50 pixels. If I want to give it 15 pixels, I'll drag it down 15. And there we go. So, we get a little bit of room down there.
But, in this case, I want the footer to set flat against there because the footer is going to be a different color. So, I'm just going to close that up just like so. So, now, we've pretty much got all of the setup done for our headers and footers. But now, we need to start adding some things to it. So, we're going to cover this in depth a little bit later on when we start talking about adding elements to pages. But what I want to do first is zoom out just a little bit, so Command or Control + minus. That's going to zoom me out. And I'll go over here and grab a rectangle. And the rectangle tool, I'm just going to come out here, and I'm going to click and drag a rectangle out.
And what I want to do is I want to drag it out and see how the little thing tells me how wide it is. I want to drag it out until it snaps and says 100%. If you do not see 100%, go back and adjust the other side to make sure it snaps to the edge as well. What you're doing right now is drawing a rectangle around the entire header portion of the website. And once I'm done with that, I'm going to then make some adjustments to it. The only thing that I really want is I want a small line to go all the way across the entire page, separating the header from the body of the document.
So, in order to do that, I have to add a stroke just the same way as I would add a stroke in Illustrator on a vector shape or in Photoshop on a shape layer. So, I'm going to go up here to Stroke, and we'll add a color first. So, let's just do kind of a 50% gray. And then, you can align the stroke to different areas if you want to. In this case, I'm going to align it to the inside. And then, down here I can control the Weight. And the Weight is controlled based on side, so I can add it to the top, to the bottom, to the left, and to the right.
I'm going to break the link here, and I'm going to remove the stroke from every area except for the bottom. That's just going to give me one solid line all the way across. Now, how do I know that this works? I need to preview it. So, let's go over here to the Preview section. And when I preview it, I should see a line that goes all the way across. Now, if you want to see what this looks like in a browser, all you have to do is go to the file menu and choose Preview Site in Browser. What that is then going to do is it's going to launch.
And you're going to see your line go all the way across. But the problem is it's not going all the way across like I want it to. It's only going across the entire webpage, not the entire width of the browser. So, let's go back and make a change. Go back into Muse. Close the Preview. And let's make sure that this is indeed lined up exactly the way I want it to be. 100%, there we go. And now let's go back to the File menu. There we go. When I preview it this time, now, it's all the way across.
Now we'll talk a little bit more about 100% width objects in a minute, but, for now, just know that that is 100% width of the browser. If I were to change the size of this, you can see that it just kind of grows and shrinks with me, goes all the way across, ready for me now to add content, like a logo, or a menu, or what have you. Now, let's go back into Muse, and at the bottom, let's add a rectangle that goes all the way 100% width of the browser, again. And this time, we're going to fill this with a color. So, drop down the fill, and add black.
Then, grab your selection tool. And you just want to make sure that when you have your selection tool selected, you drag this out until it reads 100% width. So, see there when I drag out, it says 1,008 pixels. But when I finally snap it, it goes to 100% width. And to test this, I'll go into Preview mode. And I should see nothing but black across the bottom and one single line across the top. That's exactly what I want. So, now, let's close the Preview mode, and we're ready to go. So, hopefully, now you have a better understanding of exactly what a master page is all about and how to start to set up your header and footer areas.
When you close your master page, you'll notice that everything that you've done populates across all of the pages that have that particular master applied to them. So, now we have the header with the single line. We have the footer with the black bar going across every single one of the pages in my design, making it super easy for you to distribute assets all the way across your website only you're doing it one time instead of five or six times.
Remember, these Muse tutorials cover just the basics. For more information, see our full selection of Muse training.
- Creating a new Muse website
- Adding pages to your website
- Setting up master pages
- Working with layers
- Placing graphics
- Formatting text
- Creating and using color themes
- Building site navigation
- Working with widgets: menu, composition, panel, slideshow, and social widgets
- Making your Muse website responsive
- Adding a contact form
- Publishing a website with Muse