Home Library Basics Getting started on Editor X Tutorial Workspace Get familiar with the workspace and learn the basics of creating a site on Editor X. LOADING... Article Exercise Transcript Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace WEBINAR Thinking responsive-first design 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 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 →

Library Workspace Discover your workspace and get to know the tools and features 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 6 Results Basics Topics Format type All formats Sort by Featured Filters 6 Results WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Element hierarchy Workspace Structure TUTORIAL Finding & fixing issues using the Site Checker Workspace TUTORIAL Best practices from a technical designer Workspace TUTORIAL Inspector panel Workspace TUTORIAL Workspace Workspace 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 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 →

Home Library Collaboration tools Roles & permissions Tutorial Team management Give every teammate and collaborator a custom role on each site. Set and manage granular permissions for each role, so everyone—from designers to developers and SEO specialists—has a tailored editing experience. Controlling specific permissions means some actions on the dashboard and inside the editor will be disabled. This makes sure everyone can focus on just those tasks that are authorized by their role. LOADING... Article Exercise Transcript Finding site-level roles To define and manage roles for collaborators on one particular site, go to the site dashboard and from the sidebar, click Settings . Scroll down and select Roles & permissions , then click Manage Roles in the top right. Finding team roles To define and manage roles for your team, go to the Partners Dashboard and select Settings in the sidebar. This opens the Team Management tab. In the top right, click More Actions , then Manage Roles . Predefined roles For any collaborator or teammate, you can assign predefined roles which were created for you based on common use cases. They range from general roles—like Website Manager and Website Designer—to roles relating to the solutions you have on the site, like billings and blogs. To see the exact permissions of a predefined role, click View over on the right. Assigning a role To assign a role to a collaborator or teammate, click the 3 dots beside it, then select Invite People . You can then type in a single email address or multiple emails separated by a comma. When you’re ready, click Send Invite . Creating a custom role To create a new custom role, select + Create New Role in the top right, then give your role a title and description. Next, select Editor X to open the dropdown. Here you’ll see a comprehensive list of permissions. Select the permissions you want, and click Save . You can then use the 3 dots to assign this new role to one, or multiple collaborators. Inviting collaborators To invite someone to join you on just one site, go to that specific site dashboard, then under Site Actions , click Invite People . You’ll be prompted to enter an email address and choose a role for this new collaborator. Note: You can also invite collaborators to join your site from inside the editor. Under Site in the topbar, select Invite People to Site . Inviting a new teammate To invite someone to join your team, go to the Team Management tab on your Partners Dashboard and from the top right, select + Invite People . You’ll then be prompted to enter an email address and choose a default role for this new teammate across all sites. Multiple roles You can customize a teammate’s role across different sites and folders in your team account. From the invite flow, once you’ve chosen the role & permissions you want, scroll to the bottom to select whether they’ll apply to All sites in your account, or Specific sites only. If you select Specific sites , you can choose which sites they apply to. You can then assign this same teammate a different role on other sites in your account. Roles inside the editor When you’re working on a site, hover over your avatar in the top left to see your current role. Custom experiences When you’re working on a site, hover over your avatar in the top left to see your current role. EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together WEBINAR The ultimate workflow for creating client sites with Michael Janda TUTORIAL Concurrent editing 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 Text & buttons Explore how to add, style and edit text and buttons. 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 3 Results Basics Topics Format type All formats Sort by Featured Filters 3 Results TUTORIAL How scale text works Sizing & units Text & buttons TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons TUTORIAL Stack Positioning Structure Text & buttons No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Library Sizing & units Discover how sizing properties and units affect how elements behave when the viewport changes. 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 grid: When, why & how Grid Positioning Sizing & units TUTORIAL How scale text works Sizing & units Text & buttons WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Grid Grid Sizing & units WEBINAR Thinking responsive-first design Breakpoints Structure Sizing & units TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons TUTORIAL Layouter Layouter Sizing & units TUTORIAL Measurements Sizing & units TUTORIAL Sizing Sizing & units No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Layout & design Pinned position Tutorial Positioning Use Pinned position to lock elements in place as users scroll through an element’s parent or the page. LOADING... Article Exercise Transcript Setting the position type to pinned To change an element’s position, open the inspector panel and click the dropdown under Position type , then select Pinned. Defining what the element is pinned to To define where you want to pin an element, click the Pin to dropdown. The options that will appear are dependent on whether the element’s parent is a container or a section. Select one of the options to set your desired behavior: Container: Make the element visible as visitors scroll through a specific container. Section: Make the element visible as visitors scroll through a specific section. Page: Make the element visible as visitors scroll up and down the page. Depending on what your element is pinned to, it will behave differently in relation to how the user scrolls through your design. If an element is pinned to the page, the position of that element will be set relative to the viewport, meaning the element will always be fixed in that position regardless of how the site sections scroll. You may be familiar with this position as the CSS property Fixed. If an element is pinned to a parent section or container, the element’s position will be set relative to its parent. When an element is pinned to a section or a container, the element will only stay in place as a user scrolls through that section or container*. Once its parent moves out of the viewport, the pinned element will move with it and will no longer be visible. Note that pinned elements are not affected by parent overflow. For example, whether the overflow is set to hidden, scroll or show, the pinned element will still be displayed. *To find out how to create scrollable containers visit our overflow article. Changing from Pin to page to Pin to section Click the Position type dropdown and choose one of the other options—Default or Sticky—to remove the existing Pinned position. Then, click on the Position type dropdown again, choose Pinned and select Section under Pin to. EXPLORE MORE TUTORIALS TUTORIAL Overflow TUTORIAL Position type TUTORIAL Combining sticky position & animations 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 Webinars Layout & design Working with grid: When, why & how WEBINAR Grid To create a successful responsive site, you need to build the right structure. Learn how to do that in part one of our site structure webinar series, starting with grid. Editor X product manager Liron gives a detailed breakdown of the revamped grid features on Editor X and explains how to use them to make structuring a site seamless—whether you create layout or content-first. LOADING... EXPLORE MORE TUTORIALS WEBINAR Working with Layouters: When, why & how TUTORIAL Choosing a layout tool TUTORIAL How to create a split section using grid Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

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!