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

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!

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

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 →

Home Library Basics Workspace Tutorial Workspace The Editor X canvas is wide and flexible. Panels appear as you need them, and you can move elements around freely using smooth drag and drop. LOADING... Article Exercise Transcript Canvas Your canvas is divided into horizontal sections. By default, you have a header, a footer and a large section in the middle. You can move them around and add as many sections and pages as you want. Use the resize handles at the side of your canvas to adjust the width. This lets you see and design your site at every viewport. Add panel Drag any kind of element onto your canvas, from simple shapes and text, to social bars and fully designed sections. Action bar Select any element on your canvas to open this floating action bar. From here, you can choose an animation, insert links, add comments and more. Inspector panel This is where you can control the properties of a selected element. Jump through the tabs to see what’s possible—from adjusting the size and position to changing the design and adding interactions. Layers Use the Layers panel to view the hierarchy and parenting relationships between elements on each page. Rename each layer to stay organized and select or edit specific elements using the 3 dots. Masters Masters are sections of content that can show on multiple site pages. Changes you make to one will affect this Master everywhere it appears on your site. Breakpoints The breakpoints navigator at the top of your canvas lets you jump between 3 preset breakpoints—desktop, tablet and mobile. Click the 3 dots to customize breakpoints and add more. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Inspector panel TUTORIAL Site structure 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 Grid Tutorial Grid Grid is an advanced layouting tool that lets you precisely position elements within a 2-dimensional framework of columns and rows. You can adjust the grid in any section or container, and rearrange the layout at each breakpoint to achieve intricate, responsive designs that look great on any screen size. LOADING... Article Exercise Transcript Adjusting the grid layout Each section and container you add has a 1x1 grid by default. To change the layout, select the section or container and from the floating menu choose a preset layout or create a custom grid. You can also adjust the grid layout from the Inspector panel under Display . Adjusting the grid from the Inspector panel Under Display in the Inspector panel , use the plus icons to add a column to the right or row to the bottom of your grid. Click the dropdown arrows to adjust the column and row measurements. Each one has 3 dots next to it where you can delete the row or column, or add a new one on either side. You can also set gaps between rows or columns. Note: Changes you make to the grid from the Inspector panel affect the size and positioning of the content inside.. Adjusting the grid on the canvas From the floating action menu, choose Customize grid on canvas. Changes you make in this mode don’t affect the content in the grid. In this mode you can drag to adjust existing grid lines, or drag from the left or top to add new ones. Click Done when you’re finished editing. Docking When you add an element to a grid cell, it automatically docks to the nearest vertical and horizontal gridlines. Dock elements to control their position and prevent overlap at smaller screen sizes. Learn more about docking and margins here. Stretching across cells Stretch elements such as images and containers across one or more grid cells to fill an entire area. Positioning elements You can drag and drop, or position elements using the Inspector panel under Location in grid cells . Select the element you want to position. You can see which grid cell it’s placed in, and click on the box that corresponds with the cell you want to move it to. Position elements in more than one cell by holding down shift while you select the cells. You’ll see the column and row numbers update according to the element’s new position. Grid measurements Go to View to toggle the Grid Measurements on or off. When they’re toggled on, you can see the measurements next to each row and column. Click the measurements to adjust them. Between the grid measurements, you can click on the plus icons to add additional rows and columns. Grid offers different units of measurement that affect how your content responds to changes in viewport width. Learn more about measurements here . EXPLORE MORE TUTORIALS WEBINAR Working with grid: When, why & how TUTORIAL Choosing a layout tool TUTORIAL Layouter 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 Dev & code Learn how to extend website functionality with custom code. 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 WEBINAR How to add code to Editor X sites with Velo Velo TUTORIAL Creating a sliding menu using Velo Velo TUTORIAL Intro to Velo Velo TUTORIAL Creating infinite scrolling text with Velo Velo WEBINAR Going deeper into Velo Velo No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

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. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Layouter TUTORIAL Repeater 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 Interactions & effects Creating a full page sticky scroll effect Tutorial Scroll effects UX designer Dolev Brosh guides you through the steps to design a creative effect using sticky position and stack. 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 → Dolev Brosh UX/UI Designer I'm a UX designer for Editor X and I studied UX/UI Design at Sapir College. I’m a big fan of anime, rap music and I’ll never say no to a delicious burger. Go create on Editor X → LOADING... Guide Transcript Follow these steps in the editor Part 1 1. On a blank canvas, select the main section and open the Inspector panel 2. Under Size , set Min Height to 2344px 3. Select the section 4. Open the floating action bar select Apply Grid 5. Select Custom and create a grid with 2 Columns and 4 Rows 6. Select the section again 7. From the floating action bar select Adjust Grid then Edit Grid 8. Set the right column to 0.6fr 9. Set the Min of the rows from top to bottom as follows : 18vw, 48vw, 22vw, 42vw See full website → Watch Dolev recreate this effect → Part 2 1. Drag an image from the Add panel into the section 2. Go to Grid Area in the Inspector panel 3. Set the image to column: start 2, end 3; row: start 1, end 2 4. In the top right of the image click the Stretch icon 5. Under Position in the Inspector panel, set the Top margin to -122px (or the size of your header) 6. Drag in 3 more images to the right column, one below the other 7. Go to Grid Area in the Inspector panel 8. Set the 2nd image to column: start 2 , end 3 ; row: start 2 , end 3 9. Set the 3rd image to column: start 2 , end 3 ; row: start 3 , end 4 10. Set the 4th image to column: start 2 , end 3 ; row: start 4 , end 5 11. Stretch each of the images so they fill a grid cell Part 3 1. Drag in another image to the section 2. Go to Grid Area in the Inspector panel 3. Set the image to column: start 1 , end 2 ; row: start 1 , end 4 4. In the top right of the image click on the Stretch icon 5. Under Position in the Inspector panel, set the Top Margin to -122px (or the size of your header) 6. Go to SCROLL in the Inspector panel 7. Beside Scroll Effect, choose Sticky Part 4 1. Drag a title into the section 2. Drag in a paragraph and place it under the title 3. Select them both by pressing on them while holding the Shift key 4. In the floating action bar choose Stack Part 5 1. Go to Grid Area in the Inspector panel 2. Set the stack to column: start 1, end 2 , row: start 2, end 3 3. Go to SCROLL in the Inspector panel 4. Beside Scroll Effect , choose Sticky 5. Set the Top offset to 300px 6. Set the Bottom margin of the stack to 200px Result : In preview, as you scroll, the left column image will stick to the page until it reaches the bottom of the section and then it will reveal the rest of the image. The right column images scroll up. EXPLORE MORE TUTORIALS TUTORIAL Pinned position TUTORIAL Combining sticky position & animations TUTORIAL Placing sticky scrolling elements over a video Go to library →

Home Library Layout & design Docking & margins Tutorial Positioning Control the positioning of elements at every viewport size. LOADING... Article Exercise Transcript Docking elements Editor X has a smart docking system. When you drag an element into a container, it automatically docks to the closest edges. You can override this and manually set your docking from the Inspector panel . Adding margins Use margins to maintain a set distance between an element and the edges of the container it’s docked to. From the Inspector panel , under Margins , choose your desired value in pixels (px) or percent (%). You can also add margins to the sides of an element that isn’t docked. These margins act like a buffer between the element and the container or gridlines around it. EXPLORE MORE TUTORIALS TUTORIAL Stack TUTORIAL Position type TUTORIAL Creating a full page sticky scroll effect 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 Breakpoints Discover how breakpoints work in responsive design and create websites that look perfect on any screen size. 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 Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL How to hide & display elements per breakpoint Breakpoints WEBINAR Thinking responsive-first design Breakpoints Structure Sizing & units TUTORIAL Diving into the cascading rule on Editor X Breakpoints TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Breakpoints part 2 Breakpoints No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Basics Best practices from a technical designer Tutorial Workspace Matanya shares his essential tips for designing on Editor X. Check out the must-knows from a designer who knows the platform inside out. 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 → Matanya Dayfani Technical Design Lead I'm a web designer and front-end developer and I build the Editor X pages. I studied visual communication at Ashkelon College and web development through online courses. My passion is to build things, of any kind. I love watching MotoGP, NFL and Messi. I love listening to indie music and my favorite band is Kings of Leon. Go create on Editor X → LOADING... Guide Transcript Think responsively The fact is that you don’t know which device is being used when someone visits your site—so right from the start you should be thinking about the behavior of elements on different screens. You want to ensure your finished creation looks great at all breakpoints. Cascading When you style an element at one breakpoint, changes cascade down to all the smaller breakpoints. If you adjust the position or design of an element at a smaller breakpoint, the connection at larger breakpoints is broken. This means that larger breakpoints won’t be affected by your changes—but they'll still cascade down to all smaller breakpoints. Note: If you take an element out of its container at one breakpoint, this affects the hierarchy of the site and therefore affects all breakpoints—both large and small. Docking Editor X has a smart docking system. This means that when you drag an element into a container, it docks it to the closest edge. You can also change the docking manually from the Inspector panel. Docking is not only responsible for the placement of an element within its container, but also for how the element behaves at different screen sizes. For example, when you dock an element to the top left of a container, the position of that element will always be relative to the top left of that container. If you dock an element to the left and right of a container, the element becomes fluid, so as the container’s width changes the element's width will too. Master the grid Grid is a sophisticated CSS tool, offering you tons of ways to build creative layouts. From my experience, in most cases a grid is the perfect solution for any design. You can place elements precisely in their own grid cells and dock them to different grid lines. This helps create responsive relationships between them. You can apply a grid to any section or container and you can also redefine the grid layout at any breakpoint. Work with stack Stack is a great solution for creating a vertical connection between 2 or more elements. It keeps elements at a set distance from each other, and functions across all breakpoints to prevent overlap. You can stack together any kind of element. Using margins in the Inspector panel, you can control the distances between the stack elements. Get Repeater power Repeater is an amazing tool that can be used to create a uniformly styled, multi-box layout. With the Repeater, you can change the order of the boxes, rearrange their layout at each breakpoint, add a horizontal or vertical scroll and more. You can also connect your Repeater to a database to display tons of content that you update regularly from your site dashboard. Head to the layers panel A website is made up of many elements and sometimes it’s difficult to find the element you are looking for—the more complex your site, the more layers you'll have. The Layers panel is a simple and fast way to view the order of all the elements you have on the site and select the one you need. You can always change the default name of an element to make it easier for you to find. Accessibility: Checking that the order of the elements in the DOM is the same as the natural flow of the site is part of the process for making your site accessible. By looking at the Layers panel, you can see if the elements are in the right order. To rearrange, simply drag an element in the Layers panel to its correct position. Use the Theme Manager Using the Theme Manager can save you a lot of time and make your job much easier. Find it in the creation bar next to the pages icon. You can predefine the styles for headings and paragraphs, and create a custom color palette for each site. Changes you make in the Theme Manager will affect all the elements currently using that theme. Learn from the best Join our webinars to see our experts presenting live site building demos and feature focused deep dives to really help you learn the platform inside out. You can also submit questions that will be answered live. Stuck? Ask for help It's always fun to learn something new but it can be challenging. If you have a problem or you don’t understand something, we have many resources that can help. Join our forum to connect with our community of designers. Share questions and contribute answers, use their knowledge and experience. You can also connect with in-house designers, like me. We’re also active in the forum. For direct help, you can send us your questions via Help in the topbar of the editor. Continue to check out the rest of Academy X where you’ll find tons more info about everything I talked about here. There are how-to videos , lessons & exercises and more to help you understand everything in a simple and clear way. You can also reach the team directly at hi@editorx.com . EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together WEBINAR Our new Editor X homepage: How we built it TUTORIAL Working effectively with clients on Editor X Go to library →