Masters

Masters are sections of a site that you can save and show on multiple pages, like headers, footers and sidebars. Changes you make to one, apply to this Master on every page it’s in use.

Creating a Master

The headers and footers of each site are automatically saved as Masters, and you can turn any section into a Master too. Right click the section and select Set as Master, then tag it as either a Header, Section or Footer. It’ll be added to the Masters panel on the left of your canvas.

The element is right clicked to show more options. In this menu Set as Master option is hovered over to show Master options.

Finding a Master

You can identify Masters by a green outline that appears on hover.

The section is now green to indicate that it is set as a Master.

Multiple headers & footers

If you like, you can use different headers and footers on each page or breakpoint. For example, on one page, you may want a horizontal header, but on another, a vertical sidebar works best. To set this up, create a new header, right click it and select Set As Master. In the Masters panel, you’ll now see 2 headers saved. Use the 3 dots to select one of them as Default. Your default header will be the one that automatically shows on each new page.

The top left Site Masters panel is expanded to show more options.

Showing on pages

Masters can be shown on multiple pages of your site. From the Masters panel, click the 3 dots beside a Master, then choose Show on to choose the pages you want. Alternatively, you can right click your Master directly on the canvas and from the floating action bar, select Show on.

The Site Masters panel is expanded and the Header sub-menu has been opened. The cursor is hovering over the Show on… button.

Detaching Masters

You can detach a section from the other Masters at any time. Right click the section and from the floating action bar, select Detach from Masters. Now you can make changes to this section without affecting the other duplicates on the site.

The right-click menu is open. The Detach from Masters button is highlighted by the cursor.

Breakpoints for Masters

Masters have their own breakpoints—highlighted in green at the top of the canvas. This means that if you make a change to your page breakpoints, you won’t see the change on your Masters and vice versa. For example, if you’re designing a header—which is by default a Master— you could add 3 extra breakpoints and style your header differently at each one. When you move to a different section on the page, you won’t see these extra breakpoints.

The header is selected as the Master and the breakpoint indicator is set to desktop.

Follow these steps in the editor

Open exercise template →

Create a Master. Right click the Welcome section, then select Set as Master. You’ll notice the section is now outlined in green when you hover over it.
Show on pages. Right click on your section and select Show on. Check the box next to the About and Contact pages. Now from the top bar, select the Pages icon and navigate to each page. You’ll see that the Welcome section appears on each.
Change the design. Select the button on the homepage and make it blue. Now move to the other pages and see the change there too.
Detach from Masters. On the About page, right click the Welcome section and select Detach from Master. Now change the button color to red and see how the change doesn’t affect the Welcome section on other pages.

Transcript

Let’s explore how to use Masters to streamline your creation flow.

Masters are sections of a site that can be designed once and reused on any site page. You can identify Masters by these green highlights.

By default, the header and footer of each site are saved as Masters — even when you start from a blank canvas.

So however you design this default header and footer, they’ll automatically repeat on every new page.

Here in the Masters panel, you’ll find all your site Masters. This header is connected to all the other headers on your site, so changes you make to it are reflected everywhere it’s in use.

If you want to make unique changes to a header on one page, without affecting it in other places, right click select Detach from Masters.

Now this header is disconnected from the others, so changes we make here, won’t affect the original Master. For example, if we delete the text on this page, you’ll see it’s still there on the About page.

By default, you’ll have 1 header and 1 footer saved for each site, but you can create more than one of each, since you might not want to use the same one on each page or even breakpoint. Let’s look closer at how this works.

OK, so on this page, on desktop, we want to focus on this bold typography headline — and to do this we’ll create a vertical sidebar to replace our horizontal header.

Now we’ll add our logo by copy pasting it, and then add in a vertical menu from the Add panel, and we’ll adjust the positioning to get it in place.

We don’t need the horizontal header, so we’ll select it, right click and choose Don’t Display, which hides it.

Note: We’re not deleting it since we may want to use it on another page or breakpoint.

Next, we’ll set our sidebar as a Master and we need to make sure to tag it as a new header. This is an important step for site accessibility.

In our Masters panel, you’ll see we now have 2 headers saved, which can be re-used on any page or breakpoint.

Let’s set the vertical header as the default one — so this is the one that gets automatically duplicated on every new page.

On smaller screens, we have a little less space to work with. So on tablet, we’ll use our horizontal header design. From the Layers panel, we’ll choose to display it again — and then we’ll hide the vertical header.

You can save any section as a Master. Let’s move to the ALPHA page and select the All Projects section. We want this section to appear on more than one page, so right click and choose Set as Master, then Section, since it’s not a header or footer.

From the Masters panel, select the 3 dots next to your new Master to choose which pages you want to display it on. We’ll select all the pages apart from the Contact page.

Now as it’s a Master, this section is highlighted in green. And we can move it up or down on each page depending on the position we want.

It’s important to remember that Masters have their own set of breakpoints. Page breakpoints are marked in blue — but when you’re working on a Master, the breakpoint icon is marked green. This lets you know that changes you make to your page breakpoints will not affect your Masters — and vice versa.

So don’t forget that if you make a new breakpoint for your page, you won’t see it while you’re working on a Master.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.