Browse the full collection of Editor X tutorials and webinars, covering responsive design basics, feature breakdowns and hands-on exercises. Library Tutorial library Browse the full collection of tutorials, exercises and more. 89 Results Basics Format type All formats Sort by Featured Topics Filters WEBINAR Working with Layouters: When, why & how Layouter WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL How scale text works Sizing & units Text & buttons WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints WEBINAR How to add code to Editor X sites with Velo Velo TUTORIAL Content manager Content manager TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL Element hierarchy Workspace Structure TUTORIAL Grid Grid Sizing & units WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration TUTORIAL Dynamic pages Content manager WEBINAR Tabula Rasa #2: Web creation on the fly Inspiration TUTORIAL Anchors Menus & navigation TUTORIAL Lightboxes Interactive components WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning WEBINAR How to get a full book of web design clients Freelance & business Topics All Topics Close menu 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 89 Results

Choose from courses, video tutorials, exercises and webinars to match your learning style and get started building extraordinary websites on Editor X. Learn and enhance your web design skills Choose from courses, video tutorials, exercises and webinars to match your learning style and start building extraordinary websites on Editor X. Learn by topic: Basics Sizing & units Positioning Dev & code Breakpoints Interactions See all topics Get started with the 101 course 24 Lessons 8 Challenges 1 Project site Learn the essentials of responsive web design and how to create on Editor X. Follow along at your own pace with a curriculum of in-depth lessons and challenges. Start course Key chapters GETTING STARTED 4 lessons | 1 challenge RESPONSIVE WEB DESIGN 5 lessons | 1 challenge ADDING CONTENT 4 lessons | 1 challenge LAYOUTING 4 lessons | 2 challenges View all → Explore tutorials from the essentials to the advanced Dive into key responsive design concepts, individual feature tutorials and hands-on exercises to gain the skills you need to bring your designs to life. Learn key concepts of responsive design TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL Sections Structure TUTORIAL Containers Structure TUTORIAL Breakpoints part 2 Breakpoints Explore the basics → Sharpen your layout skills TUTORIAL Measurements Sizing & units TUTORIAL Grid Grid Sizing & units WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL Choosing a layout tool Grid Repeater Layouter Explore layout tutorials → Create engaging interactions TUTORIAL Click & hover interactions Interactions TUTORIAL Applying hover interactions to Repeater items Interactions Repeater TUTORIAL Lottie animations Interactions Images & media WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration Explore interaction tutorials → Looking for something in particular? Browse by topic → Webinars Go in-depth with interactive sessions covering web design trends, best practices, live demos and more. Join us live MONTHLY INTRO WEBINAR Mar 29, 3:00 PM Save Your Spot Live intro webinar with product manager Jonathan See all upcoming webinars → Watch on demand WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration WEBINAR How to get a full book of web design clients Freelance & business Discover more → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care → Editor X is transitioning to Wix Studio , our new platform for agencies and freelancers. Learn more

Browse the full collection of Editor X tutorials and webinars, covering responsive design basics, feature breakdowns and hands-on exercises. Library Tutorial library Browse the full collection of tutorials, exercises and more. 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 89 results Basics Topics Format type All formats Sort by Featured Filters 89 results WEBINAR Working with Layouters: When, why & how Layouter WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL How scale text works Sizing & units Text & buttons WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints WEBINAR How to add code to Editor X sites with Velo Velo TUTORIAL Content manager Content manager TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL Element hierarchy Workspace Structure TUTORIAL Grid Grid Sizing & units WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration TUTORIAL Dynamic pages Content manager WEBINAR Tabula Rasa #2: Web creation on the fly Inspiration TUTORIAL Anchors Menus & navigation TUTORIAL Lightboxes Interactive components WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning WEBINAR How to get a full book of web design clients Freelance & business No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Tune into expert-led sessions to learn Editor X, sharpen your design and business skills, refine your creation process and fuel your ideas. Join live web design webinars Tune into expert-led sessions to learn Editor X, sharpen your design and business skills, refine your creation process and fuel your ideas. Upcoming webinars All times are local MONTHLY Discover the Editor X workspace Learn the fundamentals of creating responsive sites on Editor X. Watch a step-by-step build and ask questions live. See dates Mar {day} 3:00 PM Live intro webinar with product manager Jonathan RSVP Don’t want to wait? Watch on demand Recorded webinars Missed something? Want to watch a rerun? Find past webinars in our library. Browse all → What do you want to learn next? Submit Thank you for submitting! Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Library Layouter Explore how to use the Layouter, a smart flex tool that’s made up of responsive containers. 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 10 Results Basics Topics Format type All formats Sort by Featured Filters 10 Results WEBINAR Working with Layouters: When, why & how Layouter WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning TUTORIAL Slides Layouter Layouter Images & media TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL Designing a Brick Layouter with max content Layouter TUTORIAL Creating a scroll snap effect with a Layouter Layouter TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Layouter Layouter Sizing & units 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!

Library Positioning Understand how to give site elements structure and context, and control how they behave with positioning. 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 8 Results Basics Topics Format type All formats Sort by Featured Filters 8 Results WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning TUTORIAL Position type Positioning TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL Pinned position Positioning TUTORIAL Stack Positioning Structure Text & buttons TUTORIAL Docking & margins Positioning No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

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. Follow these steps in the editor Open exercise template → Create 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. Show 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. Change the design. Select the button on the homepage and make it blue. Now move to the other pages and see the change there too. Detach from Masters. On the About page, right click the Welcome section and select Detach from Master . Now change the button color to red and see how the change doesn’t affect the Welcome section on other pages. Transcript 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. EXPLORE MORE TUTORIALS TUTORIAL Designed sections TUTORIAL Inspector panel TUTORIAL Designing 3 creative header 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 Library Layout & design Choosing a layout tool Tutorial Grid Layouting tools provide an efficient way to arrange, align and distribute space among elements in responsive design. Grid, Layouter and Repeater are all examples of layouting tools you can use to display content on your sites. In this lesson, you’ll understand the responsive behaviors and benefits of each layout tool so you’ll know which one to use for your next design. LOADING... Article Exercise Transcript When should you use a Repeater? Repeaters are ideal for designs that include multiple items with the same design and layout, but different content. You can find more information about repeaters here . When should you use a Layouter? Go with Layouters for items with unique designs that may adjust in size and position as the viewport changes. With layouter and repeater you can also set the layout to interactive layouts like sliders. Items may wrap automatically as the screen size changes and this happens even without moving to a new breakpoint. For more information about Layouters click here . When should you use a grid? The grid is a layout tool that allows you to build precise, pixel-perfect designs. It lets you build individual column and row definitions using units of measurement to control the grid structure at each breakpoint and position the elements accordingly. You can learn more about the grid here . Note : In some cases you may also want to combine these layouting tools. For example, if you’re using a Layouter or a Repeater, you can choose to adjust the grid inside any of their items. By doing this, you can align elements inside individual Layouter or Repeater items according to the grid’s cells. This gives you more precise control over how your content is distributed. Transcript Editor X offers a range of layout tools that provide an efficient way to arrange, align and distribute space among elements in responsive design. In this tutorial we'll explore the benefits and responsive behaviors of the Layouter, grid, and Repeater to better understand when it's best to use each tool. Layouters and Repeaters are based on flexbox technology which allows content to logically adjust as the screen size changes. In a flexbox , items align separately on each row, regardless of how items are positioned on other rows. This means items may not line up, as the red lines here show. Items in a flexbox automatically arrange based on screen size and content within the flexbox may also affect the row arrangement. Grids are based on a 2-dimensional framework made up of columns and rows. These columns and rows control the content that is placed inside the grid areas. Next we’ll explore some use cases for each of these layouting tools, beginning with Layouters . If your site requires many responsive items with unique content and designs, a Layouter may be the best option. Conveniently, Layouters automatically adjust items depending on the visitor’s screen size. Within a Layouter, you can add different content to each item and choose how these items are displayed in relation to each other at each breakpoint. You can also choose from a variety of display types such as mosaics, columns, sliders and more. Now let’s consider when you could use a grid . A grid is usually the best option for creating precise, pixel-perfect layouts… …because you can create individual row and column definitions to control exactly how the grid is structured. You can also set grid properties using different units of measurement, as shown here. When you want to create a section that contains items with the same design and layout, but different content, you should use a Repeater . Keep in mind that changes to the design of any item in a Repeater affect all other items within the Repeater, which isn’t the case for grids and Layouters. As we mentioned earlier, similar to Layouters, Repeaters are based on flexbox technology meaning that they can automatically wrap at different viewports. To learn more about this tool, explore our dedicated Repeater tutorial. Of course, you can always use a combination of these different layout tools. For example, you can place a grid inside a Repeater or a Layouter. In this section we'll consider two other factors that can help you choose between using a grid or Layouter , beginning with the layouting approach of the tools. The Layouter is based on flexbox technology and uses a content-first logical approach . This content-first approach means each item's size and position influences other items within the Layouter, as well as the container. As you can see here, changing the size properties of an item in a Layouter—or the elements within an item—may affect the dimensions of items adjacent to it. For more information, you can check out our full Layouter tutorial on Academy X. The grid , however, uses a layout-first logical approach meaning its layout is defined by the columns and rows that make up the grid, and not necessarily the content within it. Here we’re customizing the grid by adding an extra row and setting its minimum height, but you can define properties for the grid that best suit your design. You can learn more about this in our video covering all aspects of the grid. . After setting the grid’s properties, you can choose how you want to position your elements according to the grid cells. In a grid , elements can also occupy overlapping areas, giving you endless possibilities to work with. The other difference to consider when choosing a layout tool is their behavior between breakpoints . In a Layouter , items automatically adjust when the screen size changes. Even if the breakpoint remains the same, items may wrap depending on how much space is left. This example shows how items can adjust to fit any viewport. You can also change the display type of your Layouter for each breakpoint. With a grid , you can set different grid properties to create different layouts per breakpoint. Using this tool, your layout will not change until you reach a new breakpoint. To sum up what we’ve covered, these are some typical use cases for each layout option: Repeaters are best for multiple items with the same design and different content. Layouters are best for items with unique designs that may adjust in size and position as the viewport changes. And, finally, grids are the best choice for precise, pixel-perfect designs with distinct layouts at each breakpoint. Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Layouter TUTORIAL How to create a split section using grid 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 Webinars Web design industry The ultimate workflow for creating client sites with Michael Janda WEBINAR Freelance & business Optimize your approach to creating client sites with this hands-on workshop, brought to you by Dribbble, Editor X and acclaimed agency founder, Michael Janda. Discover how to execute profitable website projects that delight your clients every step of the way. Plus, learn how to apply these new skills on Editor X. Download supporting materials for the webinar here . LOADING... EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Diving into the cascading rule on Editor X WEBINAR Rethinking how web design teams work together Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Library Freelance & business Learn essential skills to run and grow a thriving freelance business or agency. 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 4 Results Basics Topics Format type All formats Sort by Featured Filters 4 Results WEBINAR How to get a full book of web design clients Freelance & business WEBINAR The ultimate workflow for creating client sites with Michael Janda Working together Freelance & business WEBINAR Digital design in 2022: How to grow as a creator Freelance & business WEBINAR Rethinking how web design teams work together Working together Team management Freelance & business No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Library Text & buttons Explore how to add, style and edit text and buttons. 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 3 Results Basics Topics Format type All formats Sort by Featured Filters 3 Results TUTORIAL How scale text works Sizing & units Text & buttons TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons TUTORIAL Stack Positioning Structure Text & buttons No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!