Home Library Interactions & effects Click & hover interactions Tutorial Interactions Create engaging interactions triggered when visitors click or hover on site elements. Learn how to fully customize their behavior and how to tailor them for every breakpoint. LOADING... Article Exercise Transcript Adding triggers To add a trigger, click Interactions in the Inspector panel. Then, from the triggers tab, click Add a Trigger . Finally, choose Click or Hover .Note: On mobile and tablet breakpoints, interactions are converted to on tap interactions. Setting up an affected element Choose the element you’d like to add a click or hover interaction to. The element can be the same as the trigger element or it can be any other element on the canvas. Setting up an action type From the Action type dropdown, you can choose what happens when a visitor clicks or hovers on the triggered element. Setting up an interaction’s effect Choose which effect you’d like to apply to the target element. You can choose between the preset effects or create a new, custom effect. Using a preset effect From the dropdown menu, you can choose between preset effects including Grow, Shrink, Float and more. Then, you can set its duration by adding start and end points. You can also choose the effect’s easing type. Designing a custom effect To create a custom effect, choose Custom from the Effect dropdown. Name the effect and hit Start Designing . Navigating between initial state and effect design From the dropdown, you can navigate between the element’s initial state—the way it will look when the page loads— and the element’s effect in order to choose which one you want to design. Adjusting & designing the element Under Adjust , you can edit the element’s appearance and its transform properties. You can change the element’s opacity, rotate it, and set the scale, skew, and translate values in their relevant units of measure. Depending on the type of element you select, you can also edit the fill color & opacity, border, corners, shadow, text and spacing. Timing the effect When editing an effect from the floating menu, you can set its duration by adding start and end points and choosing its easing type. Click Done to complete the setup. Removing and editing interactions To remove an interaction, click on the trash icon next to the trigger’s name. If you would like to edit it, click on the name of the interaction. EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it TUTORIAL Combining sticky position & animations TUTORIAL Creating a changing gradient background on scroll 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 Breakpoints part 1 Tutorial Breakpoints A breakpoint is where you can adjust a website’s layout or style for different viewport sizes. Each breakpoint has a starting point, an end point and a range in between. Editor X has 3 default breakpoints at common device sizes: desktop, tablet and mobile. Jump between breakpoints, customize them and add new ones using the breakpoint navigator above your canvas. LOADING... Article Exercise Transcript Structure vs style The structure, (hierarchy) and data, (text, media etc.) of your site always stay the same, but at every breakpoint you can customize the layout and style of your content. The cascading rule Changes you make to a site’s layout or style always trickle down to smaller breakpoints. For example, if you make a change on desktop, you’ll see it on mobile—but if you make a change on mobile, the desktop design won’t be affected. Changes per breakpoint When you’re working at a smaller breakpoint and you make a layout or style change, this automatically overrides any changes that cascaded down. For example, if you change a button’s color on tablet, you override all the changes you made to that button on desktop—but because tablet is larger than mobile, your new change will still trickle down to mobile. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Breakpoints part 2 TUTORIAL How to hide & display elements per breakpoint 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 How scale text works Tutorial Text & buttons Scale text lets us set the text size to scale in proportion to the size of the viewport. Follow along with technical designer Ido Hershkovits as he explains how scale text works and how to use it on your sites. 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 → Ido Hershkovits Technical Designer I’m a web developer and Editor X specialist based in Tel Aviv. I work closely alongside the Editor X marketing team as a coding and responsive design expert. In my spare time, I’m a passionate musician and producer. Go create on Editor X → LOADING... Guide Transcript How scale text works Open the editor to try it out → What is scale text? When we create websites on Editor X, we can set the text to scale in proportion to the size of the viewport. This means that when you move to a larger viewport, the text grows in size and shrinks when you move to a smaller viewport. For more control, you can also set a custom upper and lower value so the text will not grow larger or shrink smaller than the values set. When we don't want text to scale, we can set the text to be a fixed value, so that the font size will remain the same across all viewport widths and breakpoints. The cascading rule applies here so design changes in smaller breakpoints don't affect large breakpoints. This means that a new scale text in tablet view will affect mobile only—desktop will be unaffected. When does scale text apply? Let’s say we’re at the largest breakpoint of 1920px and we set the scale text at 60 font size. When we move to a smaller breakpoint of 320px, the font size reduces to 28. On tablet view, if we want to make the text larger, we’ll set an upper value of 56, which will override the scale text set on desktop. The upper value refers to the font size at the highest point in the tablet range, which is 1000px in this case. What happens in extra large displays? Above 1920px, text continues to scale up as the viewport widens. To avoid this, add a custom breakpoint at 1920px and set a fixed font size at that breakpoint. EXPLORE MORE TUTORIALS WEBINAR Thinking responsive-first design TUTORIAL Measurements TUTORIAL Sizing Go to library →

Home Webinars Dev & code How to add code to Editor X sites with Velo WEBINAR Velo Get to know the basics of Velo, the full stack development platform of Editor X. Join dev advocates, Meredith & Joshua to learn how to switch on dev mode, access page code and optimize features and apps. LOADING... EXPLORE MORE TUTORIALS WEBINAR Going deeper into Velo WEBINAR Content manager part 1 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 →

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

Library Repeater Explore how to use the Repeater, a flex layouting tool used to display dynamic content in multiple boxes with uniform styling. 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 Choosing a layout tool Grid Repeater Layouter TUTORIAL Applying hover interactions to Repeater items Interactions Repeater WEBINAR The new OFFF Barcelona website: How we built it Interactions Repeater Grid Scroll effects Inspiration WEBINAR Content manager part 2 Content manager Repeater WEBINAR Content manager part 1 Content manager Repeater TUTORIAL Repeater Repeater TUTORIAL Flexbox Layouter Content manager Repeater No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Elements & components Forms Tutorial Interactive components Forms allow you to collect all of the information you need from site visitors including contact info, subscriptions and payment details. Forms can also be fully customized to match the aesthetic of any site. LOADING... Article Exercise Transcript Adding a form Scroll through the list of available options and select the form that best suits your needs. Every form comes with a preset design and fields that you can customize. You can also add new fields, and remove any that aren't relevant. Editing fields Click on the form, then the field you want to edit. Next, click Edit Field to access the panel where you can make adjustments. Each field type has slightly different settings. However, for all fields, you can change the field title or mark the field as required. Adding a field Select the form on the canvas and click Add New Field . You can choose a new field type from 4 categories: contact fields, basic fields, advanced fields and anti-spam. Designing the form Select the form and click the design icon. From there, you can choose an existing design, or customize one. If you choose to customize your form, you’ll have the options to design the input fields, the submit button and the form background. You can also style the fields—as well as the submission message. Reviewing submissions Before you publish the site, check that a submission table was created by heading to your site dashboard. If no submission table is available, go to Form Settings -> Main and add a new one from there. You can access the submission table directly from the form settings or from your site dashboard. There you can review and manage submissions. EXPLORE MORE TUTORIALS TUTORIAL Breakpoints part 1 TUTORIAL Grid TUTORIAL Content manager 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 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 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 →

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 Interactions & effects Creating an overlapping sticky gallery Tutorial Scroll effects Technical designer Anastasia Logacheva walks you through the steps to create a cool gallery pile up effect using sticky position. 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 → Anastasia Logacheva Technical Designer I’m a technical designer for Editor X. I studied industrial design at college and have completed courses in graphic, web and UX design. I’m a keen Scuba diver and mother to a golden retriever named Shirley. Go create on Editor X → LOADING... Guide Transcript Recreate this effect in the editor Open the editor to try it out → Part 1 See full website→ 1. Apply a 1x3 grid to your section (1 column x the number of rows you want to add images to) 2. Select Adjust Grid, then Edit Grid 3. Set each row height to 100vh 4. Drag in a container from the Add panel to each grid row 5. Stretch each container to fill the row 6. Select your first container again 7. Select the Design icon in the Inspector Panel 8. Select your background-color 9. Repeat this action for every container Part 2 10. Drag in an image from the Add panel to the first container and make sure it’s attached 11. Select the image and open the Inspector panel 12. Dock the image to the centre 13. Drag in images to all other containers and dock to center 14. Select the container and open the Inspector panel 15. Go to Position in the Inspector panel 16. Beside Position Type , choose Sticky 17. Set all other containers to Sticky Result: In preview, as you scroll, the pictures will overlap one on top of the other until they are all stacked. Notes: Make sure that each of the containers are in the correct grid row and do not cross grid lines. You can also rotate the images slightly to give a cool, messy pile up effect. EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it TUTORIAL Video & decorative TUTORIAL Creating a sticky text scroll effect Go to library →