Home Library Dev & code Intro to Velo Tutorial Velo Velo is a full-stack development solution that allows you to extend the functionality of your Editor X sites by adding code. Create your desired UI, then add custom functionality using JavaScript and Velo APIs in both the frontend and backend. With Velo you can create anything from small interactions to complete websites. LOADING... Article Exercise Transcript Enabling dev mode To start using Velo, click on Dev Mode in the top menu, then click Turn On Dev Mode . Changing an element’s ID Change an element’s ID by clicking on the element and giving it a unique identifier in the Properties and Events Panel . Setting default values Set an element’s default state when the page loads by navigating to the Properties and Events Panel and clicking on the checkbox beside the state you want to set. Adding event handlers Add an event handler by clicking on the element that you want to add it to, then click on Event Handler in the Properties and Event Panel and click on the plus symbol beside it. Adding your code Begin adding code to your Editor X site by using the Code Panel. Here you can write JavaScript and use Velo’s APIs. To learn about all the features and tools you can use to customize your Editor X site, click here . EXPLORE MORE TUTORIALS WEBINAR How to add code to Editor X sites with Velo WEBINAR Going deeper into Velo TUTORIAL Multi-state box 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 Dev & code Going deeper into Velo WEBINAR Velo Get a closer look at Velo, Editor X’s full stack development platform, with dev advocates, Meredith & Joshua. Learn how to build custom user experiences and control how features appear on product pages. Plus, get all your questions answered about stores and dynamic pages. LOADING... EXPLORE MORE TUTORIALS WEBINAR How to add code to Editor X sites with Velo TUTORIAL Building a custom badge using a Multi-state box TUTORIAL Creating infinite scrolling text with Velo TUTORIAL Creating a sliding menu using Velo Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

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 →

Library Basics Review key responsive design concepts and explore the Editor X workspace. 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 How scale text works Sizing & units Text & buttons WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL Element hierarchy Workspace Structure TUTORIAL How to hide & display elements per breakpoint Breakpoints WEBINAR Thinking responsive-first design Breakpoints Structure Sizing & units TUTORIAL Finding & fixing issues using the Site Checker Workspace TUTORIAL Diving into the cascading rule on Editor X Breakpoints TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Best practices from a technical designer Workspace TUTORIAL Designed sections Structure 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!

Library Scroll effects Explore how to create interesting, dynamic behaviors as visitors scroll through a site. 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 13 Results Basics Topics Format type All formats Sort by Featured Filters 13 Results WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning TUTORIAL Background scroll effects Scroll effects TUTORIAL Creating a changing gradient background on scroll Scroll effects Structure TUTORIAL Placing sticky scrolling elements over a video Images & media Scroll effects TUTORIAL Creating an overlapping sticky gallery Scroll effects TUTORIAL Combining sticky position & animations Scroll effects 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 TUTORIAL Designing 3 creative header scroll effects Scroll effects 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 Layout & design Sizing Tutorial Sizing & units You can set the sizing properties of each element to control how they respond to changes in the viewport width. LOADING... Article Exercise Transcript Sizing options Select an element on the canvas and open the Inspector panel to control how it resizes. Choose from Fixed , Fluid or Scale proportionally . Fixed Use Fixed sizing to keep the width of the element the same across all viewport sizes. Fixed elements are generally measured in pixels ( px ). Fluid Fluid sizing adjusts the width—and sometimes the height—of elements depending on the screen size. With fluid sizing, elements are measured in proportional units like percent ( % ), viewport height ( vh ) and viewport width ( vw ). Scale proportionally When elements are scaled proportionally, their height and width maintain a balanced ratio when resized. Note: Scale proportionally is only available for media and decorative elements. One more thing You can set different sizing options for your elements at each breakpoint. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL How scale text works TUTORIAL Measurements 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 Containers Tutorial Structure A container is a layouting tool that helps you structure the content on your site. You can attach elements to a container like text, images and grids. LOADING... Article Exercise Transcript Adding a container You can drag any type of container onto your canvas from the Add panel. Under Layout Tools , you'll see Empty Boxes , Grids , Layouters , Repeaters , Lightboxes and Multi-State Boxes . The most basic type is an empty box. Attaching elements Drag elements into your container to attach them. Now when you move the container, all of the elements inside will move with it. Selecting your container If you've attached a few elements to your container, you can still select the container itself using the breadcrumbs model. Click anywhere on the container and hover over the blue text box. Select the word Container , then use the floating action bar to animate, add a comment and more. To adjust the design of your container, use the Design tab in the Inspector panel. Setting sizing options From the Inspector panel, under Sizing options , you can control the way your container—and the elements attached to it—resize in relation to each other, and to changes in the screen size. Applying a grid Apply a grid to your container to help structure the content inside it, and control the exact positioning of elements during resizing. Overflow behavior Decide how the container behaves in the case of content overflow . Select your container, then from the Inspector panel, under Overflow content , you can choose whether it will show all the content, hide some of it or scroll to reveal more. Media fill Fill your entire container with a stretched image. Drag the image inside the container to attach it, then click the Stretch icon in the top right. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Grid 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 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 Inspector panel Tutorial Workspace Take a tour of the Inspector panel on Editor X, where you control the size, position and behavior of all elements on your canvas. LOADING... Article Exercise Transcript Take a tour of the Inspector panel where you control size, position and behavior of all elements on your website. This is an overview of all the properties and dropdown options on the panel. EXPLORE MORE TUTORIALS TUTORIAL Element hierarchy TUTORIAL Measurements 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 Designing a Brick Layouter with max content Tutorial Layouter Learn how to create a layout that wraps and scales responsively according to the content inside. We’ll use a bricks Layouter and max content to achieve this design. 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 create a layout using a bricks Layouter and max content Open the editor to try it out → About max content: Max content is an advanced width sizing unit. Elements set to max content will get their size from the maximum width of their child element. Find out more here . About Layouter bricks: Use a Layouter with the Bricks display type to customize the width of each item so they will wrap perfectly at any breakpoint. Find out more here . Part 1: Set up the Layouter. Add a Layouter to your section. Change the Layouter display type from Mosaic to Bricks . Center the Layouter in the section. Set the Layouter width to 70%. Part 2: Add your text elements. Add your first text element into the first Layouter item. Align the text to the top and left. Set the background of the Layouter item to transparent. Set the width of the text element to 100%. Select the Layouter item containing the text, and change its width from 40% to Max Content . Now the layouter item’s width is determined by the content inside. Delete the remaining items from the Layouter. With the Layouter selected, set the minimum height to None . Select the text item and also set the minimum height to None . Duplicate the text item and change the text to the next word–”I’m”. Repeat step 9 with the remaining words on the top line of text until you reach the width of the layouter (ending with the word “an”). Part 3: Add the buttons and remaining content. Duplicate the last item on the first line of the Layouter. It should appear on the second line. Add a button to the item. Make sure that from the Layers panel you remove the text from the item. Add the next text item, followed by the second button. Continue to duplicate items and adjust the text word-by-word until all of the content is in the Layouter. Part 4: Adjust spacing. Under Display in the Inspector panel , set the item alignment to center. You can adjust the spacing between items by setting Horizontal margins . In this case the horizontal margin is at 1%. By setting Vertical margins , we can change the spacing above and below the items–in this case 15px. Result: As the screen size changes, the layout will wrap and scale across breakpoints based on the size of the text and icons we placed in the Layouter. EXPLORE MORE TUTORIALS WEBINAR Working with Layouters: When, why & how TUTORIAL Layouter TUTORIAL Measurements Go to library →

Home Library Basics Sections Tutorial Structure Sections are large containers that act as the building blocks of each page. By default, they span the width of the browser, and you can set the height as you wish. LOADING... Article Exercise Transcript Adding sections You can have as many sections as you want on each page. Add an empty section by selecting a section and clicking the + icon. You can also choose from tons of pre-designed sections inside the Add panel. Moving sections To reorder sections, select a section and from the 3 dots on the floating action bar, choose Move Up or Move Down. You can also reorder sections from the Layers panel. Background colors From the Inspector panel, choose the Design tab to change the background color of your section. Duplicating sections You can duplicate a section to use the same design somewhere else on the page. Select the section, then from the floating action bar, click the 3 dots and choose Duplicate. Flipping to vertical You can turn any horizontal section into a vertical section. Select the section, then from the floating action bar, click the 3 dots and choose Flip to Vertical. Creating vertical sections Add a full length vertical section by selecting Page from the breadcrumbs, and clicking the + icon on either side. EXPLORE MORE TUTORIALS TUTORIAL Element hierarchy TUTORIAL Site structure 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 Webinars Collaboration tools Design libraries WEBINAR Working together Product manager, Dana Karp explains how to create design libraries by adding and customizing typography, color themes and design assets. Learn how to manage and share design libraries with your team to streamline your workflow and drive collaboration. LOADING... EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together TUTORIAL Live comments TUTORIAL Roles & permissions TUTORIAL Team accounts Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →