LESSON 10

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 a site are automatically saved as Masters, and you can turn any section into a Master too. Right click on the section and select Set as Master. It’ll be added to the Masters panel on the left of your canvas.

Finding a Master.

When you create a Master, or show one on a new page, it’ll be indicated by a green outline and the Masters icon. This makes it easy to identify.

Showing on pages.

Masters can be shown on multiple pages of your site. Right click your Master and select Show on, then choose the pages you want. Alternatively, from the Masters panel on the left of your canvas, click the 3 dots beside a Master and select Show on.

Detaching Masters.

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

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.

TRY IT YOURSELF

Exercise on Masters.

​Open Academy X from desktop to complete this exercise.

01

Creating 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.

02

Showing 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.

03

Changing the design. Select the button on the homepage and make it blue. Now move to the other pages and see the change there too.

04

Detaching from Masters. On the About page, right click the Welcome section and select Detach from Masters. Now change the button color to red and see how the change doesn’t affect the Welcome section on other pages.

Watch related videos.