Masters.

Explore the Masters panel on Editor X. Learn how to turn any section into a Master, so you can save and reuse your designs.

Explore the Masters panel on Editor X. Learn how to turn any section into a Master, so you can save and reuse your designs.

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.

NEXT VIDEOS

Video about how to create, manage and share design libraries on Editor X

Learn how to create, manage and share design libraries with your team.

Play icon
Video about how to set up a team account on Editor X.

Learn how to set up a team account.

Play icon
Video about how to assign and manage Roles & Permissions on Editor X.

Discover how to assign and manage roles & permissions.

Play icon
Video about how to communicate in real time on the Editor X canvas.

Learn how to communicate live on the Editor X canvas.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Thumbnail indicating masters. Pale blue background with a blue workspace over it and a white icon in the middle.

LESSONS & EXERCISES

Masters

Find out how to save & reuse your designs to streamline your workflow.

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
ACADEMY MENU ▶
Search 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.