Library Grid Explore how to create intricate layouts using grid. 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 12 Results Basics Topics Format type All formats Sort by Featured Filters 12 Results WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Grid Grid Sizing & units TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL How to create a split section using grid Grid TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter 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 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 Collaboration tools Working effectively with clients on Editor X Tutorial Working together Sebi shares an in-depth workflow on Editor X that helps creators and their clients work together more effectively. 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 Follow these steps in the editor Easily import client content Importing from a cloud drive. Open the site you want to work on from My Sites Open the Add panel Navigate to Media Click on My Uploads Click the Upload Media button From here you can import media from a range of cloud storage platforms, including Dropbox and Google Drive. Anyone you give access to can upload content to Site Files and use assets as needed. Edit sites side by side When your client needs to get involved with the creation process, whether by adding content, uploading products or making any other edits, you don’t need to worry about pausing your work. Editor X allows concurrent editing, letting you share the workspace with your clients. Here’s how to invite them to collaborate with you: From the top bar of the editor, click Invite In the sidebar that opens, under Site Team enter the email address of the person you want to invite Select their role from the dropdown Click Send Invite Roles and permissions Not every stakeholder needs to access the full capabilities of Editor X, so you can set customized roles and permissions that restrict what individuals can edit to make sure your designs don’t get disrupted. From the top bar of the editor, click Invite Click Manage Roles & Permissions Click Manage Roles You can create a customized role by clicking Create New Role . You can learn more about this in our dedicated lesson on Roles & Permissions . Once a user has a new role, you can select which pages they can edit. From the top bar of the editor, click Site Click Page Editing Permissions Select the pages you want to give them edit access to You can learn more about Page Editing Permissions here . Streamline feedback and approval Throughout the creation process, feedback is an essential tool for delivering a final product your clients love, so let’s look at some ways you and your clients can communicate on Editor X. Comment directly in the editor Editor X allows any stakeholder to leave comments on any site element. These comments are displayed in real time and can be responded to and resolved directly in the editor. To add a new comment: Select any element on the canvas Click the comment icon Type your comment in the textbox and hit the send icon You can read more about live comments here . Get feedback via a link If you’d prefer to send a link to the latest version of your site, you can use the Get Feedback tool. Any stakeholder will then be able to leave feedback, even if they don’t have an Editor X account. To generate this link: Click Invite in the top bar of the editor Click Share a preview link to this site Enter the email you’d like to send the link to and, optionally, add a message Hit Send You can also copy the link to send it another way if you’d prefer. Automate your billing process. You can also take care of client finances on Editor X with tools to help you manage client accounts, as well as proposals and invoices. Invoices can be fulfilled online, through a payment provider of your choice, and funds will be sent directly to your bank account. You can find more details about these features here . Complete handovers online Once your client site is ready to go live, make every handover a smooth process. Giving full site access to your client is the best choice if you don’t plan on working on the site in the future. To transfer the site to your client, follow these steps. From your site dashboard , click on the Site Actions dropdown Click Transfer Site Enter the new site owner’s email address under Who will be the new site owner? Uncheck the box beside Keep my role as Website Manager of this site after the transfer Click Next Click Transfer Ownership If you plan to update the site going forward, simply invite your client with a defined role. You can visit our dedicated article about managing roles to learn more about this process. For more details about how Editor X facilitates efficient client workflows, check out the additional collaboration resources available on Academy X. EXPLORE MORE TUTORIALS WEBINAR The ultimate workflow for creating client sites with Michael Janda WEBINAR Design libraries Go to library →

Home Webinars Web design industry Digital design in 2022: How to grow as a creator WEBINAR Freelance & business Gain insight into what it takes to succeed as a creator in 2022 and beyond. Hear from accomplished experts as they discuss the skills and tools that are key for progressing as a designer. Plus, get practical advice on executing next-level sites on Editor X. Access presentation materials from the session here . LOADING... EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together WEBINAR Thinking responsive-first design WEBINAR The ultimate workflow for creating client sites with Michael Janda Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Layout & design Position type Tutorial Positioning On Editor X, you can choose how elements and sections move to create unique scroll effects as visitors scroll through a site by setting different position types. The position types are default, sticky and pinned. LOADING... Article Exercise Transcript Setting the position type To change an element or section’s position, open the Inspector panel and go to the Position type dropdown. There, you can choose from Default , Sticky or Pinned . Elements and sections are automatically set to default, which means they move in or out of the viewport as visitors scroll. Sticky position To set elements to sticky position, open the dropdown under Position type and select Sticky . Sticky elements stick to the viewport as visitors scroll vertically through a container or section. Once visitors reach the bottom of the container or section, the elements stop sticking and scroll with their parent. Sections set to sticky stay in position at the top of the viewport as visitors scroll down. Top offset for sticky elements Set the distance between an element and the top of the viewport while visitors scroll by adding a Top offset . Setting the position type to pinned To set elements to pinned position, open the dropdown under Position type and select Pinned . Pinned elements stay in a fixed position as visitors scroll through a site or a section that has a scroll inside. Define where to pin After setting an element’s position type to pinned, define where to pin it from the Pin to dropdown. The options that appear depend on the element hierarchy. The possible options to pin to are: Container: Make the element visible as visitors scroll horizontally or vertically through a specific container. Section: Make the element visible as visitors scroll horizontally or vertically through the specific section. Page: Make the element visible as visitors scroll up and down the page. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Pinned position TUTORIAL Docking & margins 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 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 Basics Discover the Editor X workspace WEBINAR Workspace Join Sebi Vidret from the Editor X team as he walks you through a live site building demo. This webinar introduces the workspace and shows how to structure a site for different screen sizes using vertical sections, CSS grid and flex layouts. LOADING... EXPLORE MORE TUTORIALS TUTORIAL Choosing a layout tool TUTORIAL Site structure TUTORIAL How to build a full height section TUTORIAL How to hide & display elements per breakpoint Go to library → 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!

Library Layout & design Learn how to size and position elements, and work with key layouting tools. 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 Working with Layouters: When, why & how Layouter WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL Grid Grid Sizing & units TUTORIAL Lightboxes Interactive components TUTORIAL Slides Layouter Layouter Images & media TUTORIAL Position type Positioning TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL Building a slider using a Layouter Velo TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL Designing a Brick Layouter with max content Layouter TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Basics Diving into the cascading rule on Editor X Tutorial Breakpoints Technical Designer Ido Hershkovits offers an in-depth look at the cascading rule on Editor X. Learn when it applies–and when it doesn’t–and what to pay attention to when designing across breakpoints. 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 The cascading rule explained Open the editor to try it out → What is the cascading rule on Editor X? When we build a responsive website on Editor X, we can change the layout and design for different screen sizes using breakpoints. The cascading rule means layout or style changes made on a specific breakpoint trickle down to smaller breakpoints, but will not affect any breakpoints above. When does the cascading rule apply? The cascading rule applies to style changes such as: Font style, alignment or size Image crop or opacity Container styles such as color It also applies to layout changes including: Adding or adjusting a grid Size, margins, padding and docking properties of an element Certain changes apply to all breakpoints. It’s important to pay attention to two types of property changes that don’t follow the cascading rule: 1. Data: changing or deleting page content such as text, media or images will apply to every breakpoint Note : If you don’t want an element to display at a certain breakpoint, select the element and click the three dots on the floating action bar. Choose Don’t Display from the dropdown. This will hide the element at that breakpoint. 2. Structure: When you re-parent an element or remove an element from a Stack, it changes the page hierarchy. You will see structural changes reflected across all breakpoints EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Building a proportionally scaling design TUTORIAL How to build a full height section Go to library →

Library Images & media Learn about adding and customizing images, videos, audio 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 7 Results Basics Topics Format type All formats Sort by Featured Filters 7 Results WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning TUTORIAL Slides Layouter Layouter Images & media TUTORIAL Lottie animations Interactions Images & media TUTORIAL How to make a gallery that plays on infinite loop Content manager Images & media TUTORIAL Placing sticky scrolling elements over a video Images & media Scroll effects TUTORIAL Single images Images & media TUTORIAL Video & decorative Images & media No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

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 →