Web Concepts
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.

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

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.

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.

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.

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.

Intro
TRY IT YOURSELF
Exercise on masters.
Open Academy X from desktop to complete this exercise.
{No.}
{Exercise Description}
{No.}
{Exercise Description}
Open Academy X from desktop to complete this exercise.
Did you find this resource helpful?
Thank you for your feedback!
Next lessons.

VIDEO LIBRARY
Title
Learn how to add new sections, rearrange them & flip them to vertical.
▶

LESSONS & EXERCISES
Title
Learn how to work with sections—the building blocks of your site.
▶

VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶

LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶
Related learning resources.

VIDEO LIBRARY
Title
Learn how to add new sections, rearrange them & flip them to vertical.
▶

LESSONS & EXERCISES
Title
Learn how to work with sections—the building blocks of your site.
▶

VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶

LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶

Ready to start creating?

Top searches
People are searching for
VIDEO LIBRARY
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
VIDEO LIBRARY
Getting Started
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.