Home Library Basics Masters Tutorial Structure 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. LOADING... Article Exercise Transcript 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. EXPLORE MORE TUTORIALS TUTORIAL Inspector panel TUTORIAL Design libraries TUTORIAL Designed sections Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Layout & design Creating 3 different side-by-side designs Tutorial Layouter Follow along with product & design advisor Vicky Borges as she explains 3 different strategies for placing elements next to each other in side-by-side designs. What do you think about the course so far? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care → Vicky Borges Product & Design Advisor I’m a Product and Design Advisor at Editor X. I have a Bachelor’s Degree in Graphic Design from PUC-RIO and I’m passionate about conceptual design, arts and photography. During my free time I enjoy surfing at Prainha and cooking up an authentic Brazilian barbecue for friends and family. Go create on Editor X → LOADING... Guide Transcript How to create side by side designs Open the editor to try it out → Before you get started In this example, we’ll explore 3 different strategies for creating side by side designs. To follow along, open up the template in the editor. Part 1: Container and grid From the Add panel , add a container and attach to the sectionFrom the Inspector panel remove the container color Add a 2x1 grid to the containerDrag the buttons to the container From the Inspector panel , reposition the buttons Still in the Inspector panel , under grid settings, remove row height, set to max content and add gaps of 20px Reposition the container to bottom center of section Select the container and buttons using shift, then select Stack from the floating action bar Set spacing to 60px Part 2: Grid and docking Add a 2x2 grid with columns set as 1fr each and rows as min and max From the Add panel , under Assets , add text to first cell, center align it and dock to left side and set docking as 60 px Again from Assets , add the stack to bottom 2 cells Set top docking and dock to right side with a 20% margin Part 3: Layouter From the Add panel , drag in a Layouter to the section From the Inspector panel , align the Layouter to the center and change its width to 80% Change the Layouter display type to bricks, add gaps Set alignment to center Select 1st item, then in Inspector panel set width 100% and remove the background color From Assets , add title and center it, then remove other items Remove color background, add a grid & a horizontal gap of 10 px to create space From Assets , add vector art and text Align all the elements to left and top Change both columns’ sizing to max content , remove min height , set row to max content Duplicate the items 3 times, then replace vector art and text for each item EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Docking & margins TUTORIAL How to build a full height section Go to library →

Home Webinars Layout & design Working with Layouters: When, why & how WEBINAR Layouter Join the Editor X product team for the latest event in our site structure series: a deep dive into Layouters. Take part in a live demo on using Layouters to let content seamlessly adjust to every screen size. Plus, get advice on choosing the right layouting tool for every project. LOADING... EXPLORE MORE TUTORIALS TUTORIAL Pinned position TUTORIAL Sizing TUTORIAL Repeater TUTORIAL Single images Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Basics Designed sections Tutorial Structure Discover fully designed sections and wireframes, all with built-in responsive behavior. Add them to any site to accelerate your creation flow, or use them as blueprints to learn how they were built. LOADING... Article Exercise Transcript Discover fully designed sections and wireframes, all with built-in responsive behavior. Add them to any site to accelerate your creation flow, or use them as blueprints to learn how they were built. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace WEBINAR Our new Editor X homepage: How we built it WEBINAR Digital design in 2022: How to grow as a creator Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Library Content manager Learn how to create, manage and customize unlimited collections of dynamic content, then connect them to your web design—no code needed. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 7 Results Basics Topics Format type All formats Sort by Featured Filters 7 Results TUTORIAL Content manager Content manager TUTORIAL Dynamic pages Content manager TUTORIAL Datasets Content manager TUTORIAL How to make a gallery that plays on infinite loop Content manager Images & media WEBINAR Content manager part 2 Content manager Repeater WEBINAR Content manager part 1 Content manager Repeater TUTORIAL Flexbox Layouter Content manager Repeater No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Basics Site structure Tutorial Structure Learn how to structure a website on Editor X using pages, sections and containers. Add as many pages and sections as you need, rearrange them and navigate between them using layers and breadcrumbs. LOADING... Article Exercise Transcript Learn how to structure a website on Editor X using pages, sections and containers. Add as many pages and sections as you need, rearrange them and navigate between them using layers and breadcrumbs. EXPLORE MORE TUTORIALS TUTORIAL Breakpoints part 1 TUTORIAL Element hierarchy TUTORIAL Containers Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Library Working together Explore how to co-create in real time with your team and individual collaborators on the Editor X canvas. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 7 Results Basics Topics Format type All formats Sort by Featured Filters 7 Results WEBINAR The ultimate workflow for creating client sites with Michael Janda Working together Freelance & business TUTORIAL Working effectively with clients on Editor X Working together WEBINAR Rethinking how web design teams work together Working together Team management Freelance & business TUTORIAL Live comments Working together TUTORIAL Concurrent editing Working together TUTORIAL Design libraries Working together WEBINAR Design libraries Working together No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Library Elements & components Explore how to work with key elements and components like text, navigation and media. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 35 Results Basics Topics Format type All formats Sort by Featured Filters 35 Results TUTORIAL Anchors Menus & navigation TUTORIAL Forms Interactive components TUTORIAL Multi-state box Velo Interactive components TUTORIAL Lottie animations Interactions Images & media TUTORIAL How to make a gallery that plays on infinite loop Content manager Images & media TUTORIAL Creating a unique custom menu at each breakpoint Menus & navigation TUTORIAL Building a custom badge using a Multi-state box Interactive components Velo TUTORIAL Placing sticky scrolling elements over a video Images & media Scroll effects TUTORIAL Single images Images & media TUTORIAL Custom menus Menus & navigation TUTORIAL Video & decorative Images & media No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Webinars Layout & design Working with grid: When, why & how WEBINAR Grid To create a successful responsive site, you need to build the right structure. Learn how to do that in part one of our site structure webinar series, starting with grid. Editor X product manager Liron gives a detailed breakdown of the revamped grid features on Editor X and explains how to use them to make structuring a site seamless—whether you create layout or content-first. LOADING... EXPLORE MORE TUTORIALS WEBINAR Working with Layouters: When, why & how TUTORIAL Choosing a layout tool TUTORIAL How to create a split section using grid Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Library Grid Explore how to create intricate layouts using grid. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 12 Results Basics Topics Format type All formats Sort by Featured Filters 12 Results WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Grid Grid Sizing & units TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL How to create a split section using grid Grid TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Creating a sticky text scroll effect Scroll effects Grid TUTORIAL Creating a full page sticky scroll effect Scroll effects Grid WEBINAR The new OFFF Barcelona website: How we built it Interactions Repeater Grid Scroll effects Inspiration WEBINAR 2021 Trends: How we built it Interactions Scroll effects Grid Inspiration No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Elements & components Video & decorative Tutorial Images & media Explore how to add and edit Transparent Videos, VideoBox and Vector Art. LOADING... Article Exercise Transcript Bring your boldest creations to life with video tools and decorative elements on Editor X. Learn how to add and edit Transparent Videos, VideoBox and Vector Art to create exceptional web experiences. EXPLORE MORE TUTORIALS TUTORIAL Lottie animations TUTORIAL Single images TUTORIAL Background scroll effects Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Webinars Web design industry Digital design in 2022: How to grow as a creator WEBINAR Freelance & business Gain insight into what it takes to succeed as a creator in 2022 and beyond. Hear from accomplished experts as they discuss the skills and tools that are key for progressing as a designer. Plus, get practical advice on executing next-level sites on Editor X. Access presentation materials from the session here . LOADING... EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together WEBINAR Thinking responsive-first design WEBINAR The ultimate workflow for creating client sites with Michael Janda Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →