Library Interactions & effects Find out how to bring websites to life with engaging effects and interactions. 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 Background scroll effects Scroll effects TUTORIAL Creating a changing gradient background on scroll Scroll effects Structure TUTORIAL Applying hover interactions to Repeater items Interactions Repeater TUTORIAL Creating an overlapping sticky gallery Scroll effects TUTORIAL Combining sticky position & animations Scroll effects TUTORIAL Click & hover interactions Interactions TUTORIAL Creating a sticky text scroll effect Scroll effects Grid TUTORIAL Creating a full page sticky scroll effect Scroll effects Grid TUTORIAL Designing 3 creative header scroll effects Scroll effects TUTORIAL Overflow Scroll effects No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Webinars Web design industry The new OFFF Barcelona website: How we built it WEBINAR Inspiration Join Liat and Olena for a deep dive into the new OFFF site. Get to know the visual research process behind the site creation, follow a live product demo and try out some of the designs on the Editor X workspace. LOADING... EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it WEBINAR 2021 Trends: How we built it WEBINAR Our new Editor X homepage: How we built it WEBINAR Tabula Rasa #1: Web creation on the fly Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Webinars Web design industry The new GROW website: How we built it WEBINAR Inspiration Join design expert Iryna for a live demo of the creation process behind GROW’s website . Learn about the entire design approach, and get inspired to use Editor X features in new creative ways. LOADING... EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it WEBINAR 2021 Trends: How we built it WEBINAR The new OFFF Barcelona website: How we built it WEBINAR Our new Editor X homepage: How we built it Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Elements & components Lottie animations Tutorial Images & media Lottie animations are vector-based files you can use to add high-quality animations without weighing down your site. By importing Lottie animations you can create unique, engaging pages that look great on any screen size. LOADING... Article Exercise Transcript Adding a Lottie animation Find the Lottie animation element in the Add panel under Embed & Social , and drag it onto the canvas. Change the animation The Lottie element loads a default animation. You can click Change Animation from the floating menu to replace it with the one you want. To add a different animation, first copy the URL for the animation you want from lottiefiles.com . You’ll need to have a LottieFiles account to do this (which you can create for free). Paste the new link in the Lottie Settings panel. The new animation appears instantly. Play animation in a loop From the settings panel you can toggle on Plays in a loop , or switch it off if you want to play the animation once. Add more customizations with code You can turn on Dev Mode and add code to adjust Lottie animation settings such as speed, or to get them to play, pause and stop based on different conditions. Find out more here . EXPLORE MORE TUTORIALS TUTORIAL Intro to Velo TUTORIAL Video & decorative TUTORIAL Click & hover interactions 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 →

Library Velo Get to know Velo, a full-stack development solution that allows you to add custom code to an Editor X 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 8 Results Basics Topics Format type All formats Sort by Featured Filters 8 Results WEBINAR How to add code to Editor X sites with Velo Velo TUTORIAL Multi-state box Velo Interactive components TUTORIAL Building a slider using a Layouter Velo TUTORIAL Building a custom badge using a Multi-state box Interactive components Velo TUTORIAL Creating a sliding menu using Velo Velo TUTORIAL Intro to Velo Velo TUTORIAL Creating infinite scrolling text with Velo Velo WEBINAR Going deeper into Velo Velo No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Layout & design Repeater Tutorial Repeater Display dynamic content using this multi-box layouting tool. Repeaters on Editor X are built using flexbox technology, so your layout automatically adjusts to every screen size. An ideal use case could be a team page where you display unique profiles with uniform styling. LOADING... Article Exercise Transcript Adding a Repeater To add a Repeater, choose from the selection of Repeaters available in the Add panel under Layout tools and drag one onto the canvas. Choosing a display type To choose your preferred Repeater layout, select the Repeater and, from the floating action bar or the Inspector panel, choose an option from the Display type dropdown. You’ll see options for Cards, List, Slider and Grid Cells. You can also make a different layout choice for each breakpoint. Managing items In the Inspector panel, click on the 3 dots next to Manage items to enter the Manage items panel. From there you can add, duplicate, rename and delete items. Customizing items If you add or remove elements or make any design, position or layout changes to one Repeater item, these will affect all the other items in the Repeater. You can display multiple different elements in each Repeater item by adding them to one item from the Add panel . You can also adjust the grid of one item, which will affect each item. Populating your Repeater You can populate a Repeater by manually adding data to each item, or you can sync data with the Repeater behind the scenes using the built-in Editor X CMS. EXPLORE MORE TUTORIALS TUTORIAL Choosing a layout tool TUTORIAL Layouter TUTORIAL Datasets 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 Placing sticky scrolling elements over a video Tutorial Images & media Follow along with product and design advisor Vicky Borges to add a video and scroll elements on top of it with 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 → Vicky Borges Product & Design Advisor I’m a Product and Design Advisor at Editor X. I have a Bachelor’s Degree in Graphic Design from PUC-RIO and I’m passionate about conceptual design, arts and photography. During my free time I enjoy surfing at Prainha and cooking up an authentic Brazilian barbecue for friends and family. Go create on Editor X → LOADING... Guide Transcript How to create a video background with sticky elements Open the editor to try it out → Before you get started In this example, we’ll create a crypto wallet site with a video and several sticky elements to create an interactive scroll effect. To follow along, open up the template in the editor and save each component to your site assets. These include the background video, the headline text, the phone background container, the wallet and total balance container, the three cards with different currencies, the green button and the services stack. Then add a new page to re-create this design as you follow along. Part 1: Set up your site Make sure the page header is set to Pinned and Overlap next section is selected In the next section, add a 1X8 grid Set the grid’s column width to 1fr Adjust all 8 rows of the grid to 100vh Part 2: Add the video and headline Add the video to the first row of the grid Stretch it to fill the cell Change the video’s position type in the Inspector panel to Sticky Keep the top offset at zero Add the headline text over the video in the first row of the grid Use the alignment tab in the Inspector to center the headline in the section Part 3: Add and align the sticky elements To add our sticky elements precisely, we’ll add them all together in the second grid row first. Once we have the position settings right, we’ll move each one into its own grid row. Start by adding the components we need: the phone background, the wallet and total balance, 3 cards and the green button in grid row 2 Center align the phone background element in the grid cell Dock it to the top Make sure the top margin units are in viewport height Set the element to sticky position Copy the value of the top margin, 12.5vh, and set that as the Top offset Now we’ll repeat these steps with the rest of the elements. Make sure they’re all centered horizontally and docked to the top with the top margin in vh. Set each one to sticky position, and use the top margin value as each element’s top offset. The top margin/top offset values for the remaining elements are: Wallet and total balance stack: 21vh First currency card element: 45vh Second currency card element: 55vh Third currency card element: 65vh Green button: 75vh Note: Best practice here is to position elements by selecting them and using the Inspector panel. If you drag and drop you might unintentionally re-parent an element. Part 4: Reposition elements in separate grid rows When all the elements are positioned and have the correct settings in the second grid row, we’ll move each one to separate grid rows, but with the same position. The phone background stays in grid row 2 From the Inspector panel, move the wallet and total balance container into row 3 The first currency container moves to row 4 The second one to row 5 The third one to row 6 Add the green button to grid row 7 Drag in the services stack and place it into grid row 8 Center align it in the cell Part 5: Adjust the services container When we preview the site, the services container scrolls up to cover the sticky elements. We don’t want this behavior, so we’ll go in and add bottom margins on each sticky element to prevent it. Start by using the Inspector panel to help calculate the distance we need for the bottom margin. Select the phone background container We already know the top margin is 12.5vh. Because this element is aligned to the center, we know the bottom margin will be the same on top and bottom Add a bottom margin of 12.5vh plus 100vh (the size of the last grid row), so 112.5vh Select the wallet and total balance container In the Inspector, dock it to the bottom of the grid cell Change the bottom margin units to vh Make a note of the value—in this case 58vh Click undo twice to undo those last two changes Add a bottom margin with that value plus 100vh, so 158vh Repeat steps 4 to 9 for the remaining containers and button Preview one more time Result: The video remains in place as a background and when you scroll the different elements move up into view and then stick in place. 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 →

Add a Title Add a Title Add a Title

Home Library Collaboration tools Concurrent editing Tutorial Working together Create side-by-side in real time with all your collaborators and teammates—from designers to content writers and developers. LOADING... Article Exercise Transcript Active collaborators The avatars at the top of your canvas indicate who’s inside the editor with you. Click on an avatar to show the collaborator’s email address and what page they’re currently working on. Inactive collaborators When a collaborator leaves the site, their avatar will fade. Clicking their avatar will show you when they were last active. Collaborators in Dev Mode Once a collaborator turns Dev Mode on, you’ll see these brackets appear beside their name. Multiple collaborators can open Dev Mode together, but only one person can edit the site code at one time. All others who enter Dev Mode afterwards, will be in Read Only mode. Locating a collaborator From the Pages panel , you can see which page others are working on. Following a collaborator Clicking an avatar at the top of your canvas will take you to the page and element this person is currently working on. The element will be highlighted according to the color of their avatar and their name will appear in the bottom left. Live changes All changes that happen in the editor are visible in real time to everyone working on the site. If someone makes a drastic change that affects the page, section or element you’re working on, you’ll see an on-screen notification in the bottom left. Undoing actions In general, clicking Undo or typing Ctrl Z will undo only your own previous actions on the site. Restoring site versions In general, clicking Undo or typing Ctrl Z will undo only your own previous actions on the site. EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together TUTORIAL Live comments TUTORIAL Roles & permissions 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 sticky text scroll effect Tutorial Scroll effects Technical designer Anastasia Logacheva shows you how to create this dynamic effect using sticky position and grid. 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 Follow these steps in the editor Open the editor to try it out → Part 1: Create the grid 1. Apply a 1x2 grid to the main section (1 column, 2 rows) 2. Select Adjust Grid then Edit Grid 3. Set the top Row Height to min/max , Min to 3000 px and Max to max-content 4. Set the bottom Row Height to min/max , Min to 100 vh and Max to max-content Part 2: Sticky Position 1. Drag in a title from the Add panel to the top grid cell 2. Open the Inspector panel 3. Change the Width to 100% 4. Go to Edit Text in the floating action bar and align the text line to the center 5. Change the font size to 200 6. Duplicate the text 3 times, so you have 4 rows of text 7. Align each line of text to the center using the alignment tools in the top of the Inspector panel 8. Select the 1st title and go to the Inspector panel 9. Set the Top Margin to 0px 10. Select the 2nd title 11. Set the Top Margin to 800px 12. Select the 3rd title 13. Set the Top Margin to 1600px 14. Select the 4th title 15. Set the Top Margin to 2400px 16. Select the 1st title again 17. Open the Inspector panel 18. Set Position Type to Sticky 19. Set the Top offset to 0px 20. Select the 2nd title 21. Open the Inspector panel 22. Set Position Type to Sticky 23. Set the Top offset to 180px 24. Select the 3rd title 25. Open the Inspector panel 26. Set Position Type to Sticky 27. Set the Top offset to 360px 28. Select the 4th title 29. Open the Inspector panel 30. Set Position Type to Sticky 31. Set the Top offset to 540px Part 3: Set to full height 1. Drag in a container to the bottom grid cell 2. Open the Inspector panel 3. Set the Width of the container to 100 vw , the Height to 100% 4. Align it to the Center and to the Middle 5. Design it as you want Result: In preview, as you scroll, the text lines will gather one under the other until the container scrolls up. Note: Make sure that the container is above the text lines in the Layers panel. EXPLORE MORE TUTORIALS TUTORIAL Combining sticky position & animations TUTORIAL Creating a full page sticky scroll effect TUTORIAL Placing sticky scrolling elements over a video Go to library →

Home Library Basics Breakpoints part 2 Tutorial Breakpoints The cascading rule saves you time when you’re designing. Any layout or style changes you make at larger breakpoints automatically trickle down to all smaller breakpoints. This doesn’t mean you need to keep the same design for every screen size. You can still make custom changes at each breakpoint. LOADING... Article Exercise Transcript Don’t display To hide an element on a specific breakpoint, go to that breakpoint, right click the element and select Don’t Display . Alternatively, go to the Layers panel from that same breakpoint, select the 3 dots next to the element and click Don’t Display . This change will only affect your current breakpoint and any smaller ones. To re-display your element, go back to the Layers panel, find the element and click the eye icon. Copying from breakpoints You can copy all of an element’s layout and style properties from one breakpoint to another. For example, you might like the way you styled an element on mobile, and want to use this same styling on tablet. To do this, go to tablet, select the element and click Copy from Breakpoint . You’ll then see a preview of how this element appears at each breakpoint. Hover on the mobile breakpoint—where you have the styling you want—and click Apply . The mobile styling of this element will now be applied on tablet. Using on all breakpoints To use the same styling of an element on all breakpoints, right click the element and select Use on All Breakpoints . Removing overrides All changes that cascade down are inherited changes from larger breakpoints. You can override an inherited change by customizing an element at a specific, smaller breakpoint. An element that has overrides no longer inherits other changes from larger breakpoints. Remove overrides from an element by right clicking it and selecting Remove Overrides. EXPLORE MORE TUTORIALS WEBINAR Working with grid: When, why & how WEBINAR Discover the Editor X workspace 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 →