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.

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.

Intro

Anchor

TRY IT YOURSELF

Exercise on masters.

Open Academy X from desktop to complete this exercise.

{No.}

{Exercise Description}

Open advanced exercise on the editor →

{No.}

{Exercise Description}

Open Academy X from desktop to complete this exercise.

Did you find this resource helpful?

Yes thanks
Not really
Submit Feedback

Thank you for your feedback!

Next lessons.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Start lesson

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Start lesson

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start lesson

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

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 introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

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.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

ACADEMY MENU ▶
Search icon