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!

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. 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

Home Library Layout & design Lightboxes Tutorial Interactive components Lightboxes are attention-grabbing popups that appear in front of all or some of the content on a page and highlight a message for site visitors. They’re useful for promoting discounts or new products, getting newsletter signups and more. You can customize a lightbox across breakpoints so it’s effective on any screen size. LOADING... Article Exercise Transcript Adding a lightbox Find the lightboxes in the Add panel under Layout tools . Choose one from the designed options and click on it to add it to the page. Editing a lightbox From the Pages panel, you can access and manage your site's lightboxes. Click on the 3 dots next to a lightbox to rename it, duplicate it, or delete it. To edit a lightbox, select the one you want from the panel and it appears on the canvas in editing mode. Then you can set it up, design it and add more elements, just as you would with any other container. If your lightbox doesn’t cover the entire screen, you’ll see an overlay behind it that dims the page content. To change the overlay’s color and opacity select it and adjust the page background settings from the Inspector panel. Setting up a lightbox trigger Lightboxes can either appear automatically after a visitor lands on a page, or when they click a certain link or button. To choose how the lightbox appears, select it and click Set Triggers . Under the settings, you can choose whether or not to display the lightbox automatically. If you choose yes : You can control which pages it will appear on, and drag the Delay slider to choose how many seconds it takes for the lightbox to appear after the page loads. If you choose no : With this option the lightbox doesn’t appear automatically. Instead you can set up a button or link to trigger it. Note: From here, you can also choose whether visitors can close the lightbox with an X icon or a Close button. Triggering a lightbox with a link You can link site elements such as buttons to trigger a lightbox. Select the element and choose the Link icon from the floating action bar. Click the lightbox options, and choose which one you want to appear from the dropdown. 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 Dynamic content Datasets Tutorial Content manager Use datasets to display content from a collection in the Content Manager on a site, and update the content without touching the design. You can use datasets to allow multiple pages to retrieve content from the same collection but change how it’s displayed from one page to another. LOADING... Article Exercise Transcript Adding a dataset Once you’ve added a collection and created your design with corresponding elements, you can add a dataset. Select the element you want to connect to your collection—a Repeater for example–and click the Connect to Data icon. In the panel that opens, choose Create Dataset and select the collection you want to connect to. You can also name the dataset. When that’s done, click Create . The dataset will appear as an icon on the canvas with the name you assigned it. Connect elements to your collection Select your desired elements and connect them to the corresponding field in your collection. You can only connect elements to their corresponding field type: images to an image field, text to a text field, etc. If you’re connecting a Repeater, select the Repeater and connect each component from the panel. You only need to do this once, and all of the other Repeater items will update to display the content from your collection. Setting the dataset mode settings Click on the dataset and choose Settings. In the setting panel, you can choose from 3 modes: Read-only , Write-only and Read & Write . The dataset mode determines how visitors can interact with the collection on your live site. Read-only : Elements can read and display content from your collection, so site visitors can view it. Write-only : Visitors can interact with user input elements and a submit button on your live site to add content to your collections. You can’t display collection content. Read & Write : Page elements can display content from the collection and visitors can interact with user input elements and a submit button on your live site to add or edit content in a collection. Setting the number of items to display Control how many items from the collection are displayed in a Repeater or gallery by entering the value under Number of items to display . Filtering content Create filters to display content based on a set of conditions that you apply. Select the dataset icon and open the settings panel. Click Add Filter . From the Field dropdown, choose which field from your collection you want to use to filter your content. Use the Condition dropdown to choose which criteria to filter by. For the Value source choose between: Manual entry: filter by a specific value or text you enter Another dataset: filter this dataset based on another one User input element: let site visitors filter page content by selecting an option from an input element such as a dropdown Sorting content Set up content to display in the order you want by adding sort criteria. Open the Dataset Settings panel, and under Sort choose Add Sort . Choose which field to sort by and under the Order dropdown select how you want the field to be sorted. Editing sort and filter settings You can adjust or remove filters and sorting properties from the Dataset Settings panel. Find the property you set, click on the 3 dots next to it and choose to either Edit or Delete it. EXPLORE MORE TUTORIALS TUTORIAL Content manager TUTORIAL Dynamic pages WEBINAR Content manager part 2 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 Elements & components Anchors Tutorial Menus & navigation Anchors can be added to any element on your site so that you can link directly to them. You can link elements such as buttons to anchors so visitors are redirected to another location on a site, or create anchor menus to help users navigate longer pages. LOADING... Article Exercise Transcript Adding an anchor You can add an anchor to any element on a site, including sections and containers. Start by selecting the element you want to add an anchor to. From the Inspector panel under Anchor , turn the toggle on. Once it’s enabled, name the anchor so you can identify it. Linking to an anchor Once you’ve added an anchor, you can link elements such as buttons, images or text to it. When visitors click on the linked element, they’re redirected to where the relevant anchor is on the site. To link an element to an anchor, select it and choose the Link option from the floating action bar. Choose the anchor option from the list. Then select which page the anchor is on from the dropdown. In the second dropdown that appears, find the name of the anchor you created and select it. Note: You can link elements on one page to anchors on a different one. Adding an anchor menu Anchors can be displayed in an anchor menu that remains fixed in view as visitors scroll down a page. If you have a particularly long page with a lot of sections, anchor menus are useful for helping visitors navigate more easily. You can add an anchor menu from the Add panel. Choose from several pre-designed options under Menu & Search , and drag one onto the canvas. Note that the Position type of the anchor menu is automatically set to Pinned , so it remains in the viewport as you scroll through the page. Managing an anchor menu With the anchor menu selected, choose Manage Menu from the floating action bar. From there you can control which anchors to display in the menu, and rename them as needed. There’s also a pre-made option to link to the top of the page. Designing an anchor menu You can control the menu’s appearance from the Design tab in the Inspector panel. From there you can adjust the style, color, fonts and more of the menu items in both the regular and clicked states. Change the text alignment by clicking on the Layout icon from the floating menu while the menu is selected. EXPLORE MORE TUTORIALS TUTORIAL Custom menus TUTORIAL Creating a unique custom menu at each breakpoint TUTORIAL Creating a sliding menu using Velo 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 Basics Finding & fixing issues using the Site Checker Tutorial Workspace Explore how to quickly find and fix site issues using the Site Checker to create a seamless web experience. 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 → Sebi Vidret Product Marketing Manager I am an Editor X Product Marketing Manager, focused on the planning & execution of the Editor X education initiatives. Being obsessed with website development, I built my first site at 13 years old. Now I teach these skill to other aspiring creators. When I'm not designing on Editor X, you can find me making asado, playing soccer, and drinking mate with friends. Go create on Editor X → LOADING... Guide Transcript How to check your site using the Site Checker Open the editor to try it out → What is the Site Checker? The Site Checker is a smart tool that scans your site to identify problems and recommend fixes related to breakpoints, page structure, content and more. How to use it You can find the Site Checker under Tools in the top bar. Once you click Check Page , the Site Checker scans the page you’re currently editing on all breakpoints and you’ll see a list of issues detected. It also scans the full site for potential security concerns. You can use the tabs to switch between page issues and site issues. Click on any item to navigate directly to the source, or select Learn More to understand more about the issue. Once you make the suggested fixes, click Check Again , and the issue will be removed from the list. If a suggested fix isn’t relevant, click on the breadcrumbs to the right of the item and select Ignore. You can always revisit it by selecting Ignored Issues from the dropdown. Types of issues detected Once the scan is done, you’ll see a list of suggested fixes related to: Private data visible in content collections Hidden elements Missing header sections Low image quality Small fonts Missing links Default content that hasn’t been changed Overflowing content Content not adapted to all breakpoints Missing or multiple H1 tags Learn more about any of the issues listed above here . When to use the Site Checker. You can check your site at any time during the creation process, as many times as you need. It’s best to scan before going live, or after changing or building a new page. EXPLORE MORE TUTORIALS TUTORIAL Overflow TUTORIAL Measurements TUTORIAL Inspector panel Go to library →

Home Library Interactions & effects Combining sticky position & animations Tutorial Scroll effects Follow along with Product Designer Yanay Nir to create a unique effect as the user scrolls down the page with a combination of sticky position and animations. We use basic shapes to demonstrate the effect the combination creates, but you can get creative in how you apply it to your 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 → Yanay Nir Product Designer I'm an Editor X product designer. My team is responsible for all designed content including the Compositions, and almost everything suggested in the Add panel. We work closely with the Editor X product team, advising them on definitions and behaviors. I love design, spicy food, oldies music (like 60’s garage & psych) and the people I work with. Go create on Editor X → LOADING... Guide Transcript How to combine sticky position and animations in your designs Open the editor to try it out → Part 1: Set up your section 1. Add a blank section. 2. Set the minimum height to 300vh. 3. Apply a 3x3 grid. 4. From the Add panel , drag in a Container . 5. Add a container in each grid cell of the first row and stretch them to fill. 6. Set the background of the middle container to black. 7. Set the backgrounds of the left and right containers to white. 8. From the Add panel under Decorative , drag a circle element to the left container. 9. Set the circle size to 60% width. 10. Align it to the center and middle and set the fill color to black. 11. Add a triangle element to the middle container. 12 .Adjust the size and orientation the same way as above. Set the fill color to white. 13 .Drag a square element into the right container. 14. Set the square size to 54% width. 15. Align the square to the center and middle and set the fill color to black. 16. Copy and paste the container with the circle 17. Move it to the grid cell below it and stretch it to fill the cell. 18. Invert the element colors so the container background is black and the circle is white. 19. Select the circle and from the Inspector panel select Align to top . 20. Set a 50px margin from the top of the container. 21. Copy and paste the container with the white circle and stretch it to fill the bottom left grid cell. 22. Align the circle to the middle. 23. Copy and paste the container with the triangle to the bottom middle grid cell. 24. Stretch it to fill and invert the container and triangle colors. 25. Copy and paste the container with the square to the bottom right grid cell. 26. Stretch it and invert the container and square colors. Part 2: Add sticky position and animations 27. Select the container in the top middle grid cell that contains the triangle. From the Inspector panel set the Position type to Sticky . 28. Select the container in the bottom middle grid cell and click the breadcrumbs on the floating action bar. 29. Go to Arrange and select Bring to Front . 30. Select the white circle element in the left middle grid cell and set the position to sticky with a top offset of 50px. 31. Select the container in the top middle grid cell and select Animation from the floating action bar. 32. Set the Fade In animation. 33. Select the center left container that contains the top aligned circle. 34. Set the animation to Glide In . 35. Customize so the direction is from the left and set the distance to 300px. 36. Select the bottom right container that has the white square. 37. Set the Glide In animation. 38. Customize the direction to 90 degrees so it enters from the right. 39. Set the distance to 300px. 40. Select the bottom middle container that has the triangle and set the animation to Fade In with a delay of 1 second. 41. Select the bottom left container with the circle and animate it to Fade In with a 2 second delay. Result: As you scroll down the page in Preview, the triangle sticks in the middle column until you reach the bottom while the shapes to the left and right animate into the viewport creating a fluid, engaging effect. EXPLORE MORE TUTORIALS TUTORIAL Position type TUTORIAL Single images TUTORIAL Creating a full page sticky scroll effect Go to library →

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 →

Home Editor X 101 course Editor X 101 course 25 Lessons | 8 Challenges | 1 Project site Master the fundamentals of responsive web design and build a complete site on Editor X with this comprehensive online course. Loading Video GETTING STARTED | 4 LESSONS, 1 CHALLENGE ​ Introducing Editor X 101 03:20 3 minutes and 20 seconds Get to know the workspace 07:52 7 minutes and 52 seconds Site structure 06:35 6 minutes and 35 seconds Setting site styles 06:58 6 minutes and 58 seconds Challenge 1 - Setting the ground 12:03 12 minutes and 3 seconds RESPONSIVE WEB DESIGN | 5 LESSONS, 1 CHALLENGE ​ Why responsive web design? 05:35 5 minutes and 35 seconds Working with element hierarchy 06:04 6 minutes and 4 seconds Understanding measurement units 10:54 10 minutes 54 seconds Controlling the position of elements 10:03 10 minutes 3 seconds How to use breakpoints 06:15 6 minutes and 15 seconds Challenge 2 - Practice your responsive design skills 11:23 11 minutes and 23 seconds ADDING CONTENT | 5 LESSONS, 1 CHALLENGE ​ Using text & text scale 06:49 6 minutes and 49 seconds Adding media & decorative elements 08:49 8 minutes and 49 seconds Adding menus & buttons 15:02 15 minutes and 2 seconds How to use stack 04:30 4 minutes and 30 seconds Challenge 3 - Add content to your site 11:15 11 minutes and 15 seconds LAYOUTING | 4 LESSONS, 2 CHALLENGES ​ Intro to layouting 04:27 4 minutes and 27 seconds Working with grid 10:49 10 minutes and 49 seconds Challenge 4 - Apply a grid to lay out your design 07:11 7 minutes and 11 seconds Working with a Layouter 08:38 8 minutes and 38 seconds Working with a Repeater 08:23 8 minutes and 23 seconds Challenge 5 - Layouting with the Repeater 03:59 3 minutes and 59 seconds DESIGN & EFFECTS | 2 LESSONS, 2 CHALLENGES ​ Position types 08:01 8 minutes and 1 seconds Challenge 6 - Apply sticky position to a grid 05:28 5 minutes and 28 seconds Applying interactions 13:02 13 minutes and 2 seconds Challenge 7 - Apply interactions to a Repeater 02:25 2 minutes and 25 seconds CMS | 1 LESSON ​ Intro to the content manager 03:04 3 minutes and 4 seconds PUBLISH | 5 LESSONS, 1 CHALLENGE ​ Find & fix issues with the Site Checker 06:08 6 minutes and 8 seconds How to publish sites 04:30 4 minutes and 30 seconds How to choose the right premium plan 02:17 2 minutes and 17 seconds Connecting a domain 03:43 3 minutes and 43 seconds Get to know the dashboard 02:51 2 minutes and 51 seconds Challenge 8 - Let's finalize this site 13:48 13 minutes and 48 seconds About In this lesson Transcript FAQ About the course Learn how to transform your designs into fully responsive sites. Dive in at your own pace, in your own time, with this free, all-inclusive course. Follow video tutorials and hands-on exercises guided by web designer, Brad Hussey. Brad Hussey Web Designer Brad’s been a web designer since 2009 and, in that time, he’s catered for clients large and small. He creates content and courses that empower designers to express creativity in ways that bring them flexibility, joy and fulfilment. LinkedIn YouTube 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! More ways to get started Don’t have time for a full course right now? Get info about specific Editor X features with these resources. Explore all tutorials → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

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 Team management Learn how to set up and manage team accounts with custom roles and permissions so each collaborator gets a tailored editing experience. 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 WEBINAR Rethinking how web design teams work together Working together Team management Freelance & business TUTORIAL Roles & permissions Team management TUTORIAL Team accounts Team management No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!