Library Interactions Discover how to create click and hover interactions on Editor X. 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 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 Lottie animations Interactions Images & media TUTORIAL Applying hover interactions to Repeater items Interactions Repeater TUTORIAL Click & hover interactions Interactions WEBINAR The new OFFF Barcelona website: How we built it Interactions Repeater Grid Scroll effects Inspiration WEBINAR Our new Editor X homepage: How we built it Inspiration Interactions 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 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 Webinars Web design industry 2021 Trends: How we built it WEBINAR Inspiration Watch our in-focus webinar for a behind-the-scenes look at how we built our award-winning 2021 web design trends report on Editor X. Learn how to use advanced tools like code-free interactions, overflow, sticky position and grid. LOADING... EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it WEBINAR The new OFFF Barcelona website: 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 Library Interactions & effects Background scroll effects Tutorial Scroll effects Explore the different options for adding scroll effects to section backgrounds on Editor X. LOADING... Article Exercise Transcript Applying an effect to a block color or gradient section background Click on any section with a solid color or gradient background. Click the Background Scroll Effects icon and, under Choose Scroll Effect , select either Fade in or Fade out . You can preview either effect by hovering over their respective thumbnails. Applying an effect to a media section background When an image or video is set as a section’s background, you can choose from a wide range of effects. To apply one of these, click on the section, click the Background Scroll Effects icon and choose from the effects that appear. Note: Any background scroll effect that is applied to a section will cascade down to smaller breakpoints. EXPLORE MORE TUTORIALS TUTORIAL Sections TUTORIAL Creating a sticky text scroll effect TUTORIAL Creating a full page sticky scroll effect Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

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 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 Library Dynamic content Datasets Tutorial Content manager Use datasets to display content from a collection in the Content Manager on a site, and update the content without touching the design. You can use datasets to allow multiple pages to retrieve content from the same collection but change how it’s displayed from one page to another. LOADING... Article Exercise Transcript Adding a dataset Once you’ve added a collection and created your design with corresponding elements, you can add a dataset. Select the element you want to connect to your collection—a Repeater for example–and click the Connect to Data icon. In the panel that opens, choose Create Dataset and select the collection you want to connect to. You can also name the dataset. When that’s done, click Create . The dataset will appear as an icon on the canvas with the name you assigned it. Connect elements to your collection Select your desired elements and connect them to the corresponding field in your collection. You can only connect elements to their corresponding field type: images to an image field, text to a text field, etc. If you’re connecting a Repeater, select the Repeater and connect each component from the panel. You only need to do this once, and all of the other Repeater items will update to display the content from your collection. Setting the dataset mode settings Click on the dataset and choose Settings. In the setting panel, you can choose from 3 modes: Read-only , Write-only and Read & Write . The dataset mode determines how visitors can interact with the collection on your live site. Read-only : Elements can read and display content from your collection, so site visitors can view it. Write-only : Visitors can interact with user input elements and a submit button on your live site to add content to your collections. You can’t display collection content. Read & Write : Page elements can display content from the collection and visitors can interact with user input elements and a submit button on your live site to add or edit content in a collection. Setting the number of items to display Control how many items from the collection are displayed in a Repeater or gallery by entering the value under Number of items to display . Filtering content Create filters to display content based on a set of conditions that you apply. Select the dataset icon and open the settings panel. Click Add Filter . From the Field dropdown, choose which field from your collection you want to use to filter your content. Use the Condition dropdown to choose which criteria to filter by. For the Value source choose between: Manual entry: filter by a specific value or text you enter Another dataset: filter this dataset based on another one User input element: let site visitors filter page content by selecting an option from an input element such as a dropdown Sorting content Set up content to display in the order you want by adding sort criteria. Open the Dataset Settings panel, and under Sort choose Add Sort . Choose which field to sort by and under the Order dropdown select how you want the field to be sorted. Editing sort and filter settings You can adjust or remove filters and sorting properties from the Dataset Settings panel. Find the property you set, click on the 3 dots next to it and choose to either Edit or Delete it. EXPLORE MORE TUTORIALS TUTORIAL Content manager TUTORIAL Dynamic pages WEBINAR Content manager part 2 Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Elements & components Video & decorative Tutorial Images & media Explore how to add and edit Transparent Videos, VideoBox and Vector Art. LOADING... Article Exercise Transcript Bring your boldest creations to life with video tools and decorative elements on Editor X. Learn how to add and edit Transparent Videos, VideoBox and Vector Art to create exceptional web experiences. EXPLORE MORE TUTORIALS TUTORIAL Lottie animations TUTORIAL Single images TUTORIAL Background scroll effects 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 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 →

Library Layouter Explore how to use the Layouter, a smart flex tool that’s made up of responsive containers. 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 10 Results Basics Topics Format type All formats Sort by Featured Filters 10 Results WEBINAR Working with Layouters: When, why & how Layouter WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning TUTORIAL Slides Layouter Layouter Images & media TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL Designing a Brick Layouter with max content Layouter TUTORIAL Creating a scroll snap effect with a Layouter Layouter TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Layouter Layouter Sizing & units 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 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 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 →