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!

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 Dynamic content Content manager part 2 WEBINAR Content manager Developer advocate Joshua Alphonse continues the deep dive into Editor X’s content manager. Learn about filtering your site content, URL structuring, collecting and presenting content from site visitors—plus discover more about dynamic pages. LOADING... EXPLORE MORE TUTORIALS WEBINAR How to add code to Editor X sites with Velo TUTORIAL Dynamic pages WEBINAR Content manager part 1 TUTORIAL Datasets Go to library → 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 →

Home Library Collaboration tools Live comments Tutorial Working together Communicate with fellow creators in real time while you design on Editor X. Create element-specific comments, assign them to collaborators and filter comments to see what’s relevant to you. LOADING... Article Exercise Transcript Adding a comment Select an element on the canvas, and from the floating action bar, click Comment . This opens the Comments panel on the right. Type your comment in the text box at the bottom and hit the send icon. To create a general comment, unrelated to a specific element, just open the Comments panel directly and start typing. Assigning a comment Type @ in the text box to see a list of all the collaborators and teammates who have access to this site. Select the person you want to tag in your comment. In case they’re not currently on the site, they’ll get a notification email to let them know you’ve reached out. Editing & deleting Once you’ve posted a comment, use the 3 dots beside it to Edit or Delete . Mentioned elements Comments are page specific, so you’ll see a separate list of comments depending on the page you’re on. Above each comment, you’ll see the name of the element it relates to—and when you click on a comment, the relevant element will be highlighted on the canvas. Resolving & replying Hit Reply to respond to a comment, and click Resolve when you’re done. Resolving a comment won’t delete it entirely. You can still retrieve it using the filter function. Filtering comments You can choose which comments to display in the Comments panel. By default, you’ll see all Open comments. From the dropdown menu, you can decide to show only comments that have been Resolved , or My Comments —those are the ones that you’re tagged in, or have replied to. EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together TUTORIAL Concurrent editing TUTORIAL Design libraries 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 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!

Library Collaboration tools Explore how to streamline your workflow and drive collaboration with design libraries, concurrent editing 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 35 Results Basics Topics Format type All formats Sort by Featured Filters 35 Results TUTORIAL Working effectively with clients on Editor X Working together WEBINAR Rethinking how web design teams work together Working together Team management Freelance & business TUTORIAL Live comments Working together TUTORIAL Roles & permissions Team management TUTORIAL Concurrent editing Working together TUTORIAL Team accounts Team management TUTORIAL Design libraries Working together WEBINAR Design libraries Working together No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Elements & components Creating a unique custom menu at each breakpoint Tutorial Menus & navigation Follow Josh from our Customer Care team as he presents the steps for creating a unique custom menu at each breakpoint. 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 → Joshua Sotomayor Customer Care - Editor X My name is Josh and I’m on the Editor X Customer Care team. I’ve got a passion for helping other creatives realize their website ideas and dreams. Aside from enjoying getting creative with web design on Editor X, I love playing music, camping and paddleboarding, and exploring different restaurants around the world. Go create on Editor X → LOADING... Guide Transcript How to create a unique custom menu at each breakpoint Open the editor to try it out → Before you get started. In this example, we’ll create a custom menu for each breakpoint, ideal for the layout and space available. To follow along, open up the template in the editor. Part 1: Setting up the menu on desktop From the Add panel , drag a horizontal menu into the header and attach it Select Menu Layout from the floating action bar, align the text and menu items to the left In the Inspector panel , under Design , adjust text font and size to 17 Move drag handles of the menu to resize it In the Inspector panel , under Layouts , change sizing to Fixed In docking, change menu to pixels From the floating action bar, select add Manage Menu then select Add new item then select Site Pages Select relevant items to become submenu items then select Apply Create submenu items by moving items slightly to the right underneath menu item Right click on the three dots in the floating bar and select Duplicate Check submenu design color matches site themes by opening to Design in the Inspector panel Open Layers panel , rename duplicated menu as Tablet Menu then hide it so it doesn’t show Part 2: Setting up a menu on tablet In the Layers panel , show tablet menu and hide desktop menu On the canvas, move the CTA button to right of the menu Open the Inspector panel and change right docking position to 0 Select tablet menu and align it using the tool in Inspector panel to vertical center and horizontal center Open Manage Menu, then Manage Site Menus from the dropdown, name it as Tablet Menu and select Add a New Menu Add new items to the site pages: Product, Company, Careers and Knowledge , then remove Homepage Select Layout from the floating action bar and center everything in the Inspector panel, under Design change text to 16 Under Layout, change width to 385 Part 3: Setting up a menu on mobile In the Layers panel , select Don’t Display to hide tablet menu From the Add panel , add a hamburger menu, attach to right, align to vertical and center Select the Open Menu tab and assign a different menu to this one Select Manage Menu , then Manage Site Menus , select Add New Menu and rename as Mobile Menu Assign pages in correct order: Product, Company, Careers etc Drag ‘Knowledge’ between ‘Company’ and ‘Careers’ to reorder Assign submenu items beneath ‘Careers’ menu item In the Inspector panel , change vertical menu width to 100% Result: Each breakpoint has a unique menu that fits its design: desktop has a dropdown menu, tablet has a reduced number of menu items displayed and mobile has a hamburger menu with a dropdown. EXPLORE MORE TUTORIALS TUTORIAL Custom menus TUTORIAL Creating a sticky text scroll effect TUTORIAL Designing a Brick Layouter with max content Go to library →

Home Webinars Web design industry Our new Editor X homepage: How we built it WEBINAR Inspiration Join design and marketing experts, Ido and Maria, for a deep dive into creating a powerful homepage. Explore the process from concept to build and see how we use features like interactions and scroll effects to reflect our brand message. 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 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 →

Library Team management Learn how to set up and manage team accounts with custom roles and permissions so each collaborator gets a tailored editing experience. 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 WEBINAR Rethinking how web design teams work together Working together Team management Freelance & business TUTORIAL Roles & permissions Team management TUTORIAL Team accounts Team management No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Dynamic content Dynamic pages Tutorial Content manager Dynamic pages are site pages that display different content while keeping the same design and layout. Any dynamic page that you add is connected to a collection in your Content Manager. You can design the page once and automatically create as many additional pages as you want by adding content to the collection. LOADING... Article Exercise Transcript Adding dynamic pages First, make sure you’ve set up a collection in the Content Manager. You can create dynamic pages by choosing Add New Page from the Pages panel , or by opening the Content Manager panel and clicking on the Collections tab. Choose the 3 dots beside the collection you want to create dynamic pages for. You’ll see 3 options for creating dynamic pages: A blank dynamic page page : this creates a blank page that you design from scratch to display content from your collection. It appears in your Pages panel as "Collection Name" (First Field Name). A dynamic item page : this option comes with some preset design elements. The content each item page displays corresponds to an item in your collection. It appears on your site's Pages panel as "Collection Name" (First Field Name). A dynamic list page : this type of page lists all of your collection items as a menu where visitors can navigate to each item page. It appears on your site's Pages panel as "Collection Name" (All). Designing a dynamic page When you add dynamic pages, you only need to design the page once. Dynamic pages have the same design and layout, but display different content from each item in your collection. When you design a blank or dynamic item page, think of each element you add as a placeholder for a corresponding field in your collection. For example, you'll probably need a text element to display the title field, an image element to display the image, etc. Navigating between dynamic pages When you have a dynamic page open, a dropdown bar appears at the top where you can navigate between item pages. One page is created for each item in the collection. They’ll have the same design, but different content. If you add another item to the collection a new page is automatically created. Connecting elements to a collection When you add a dynamic page, a dynamic page dataset is automatically created that’s connected to your collection. Dynamic page datasets create a unique URL for each item in a collection, and can only access one item per page. If you use a preset, the elements will be connected automatically once the page is added. If you use a blank dynamic page, you have to connect each element to the relevant field. To do this, select the element and from the floating action bar choose Connect to Data . Choose the dynamic page dataset from the Connect a dataset dropdown, then under Connection Options connect the element to the corresponding field from the collection. For both blank dynamic pages or dynamic item pages, you’ll need to connect any new element you add to the collection using the dataset. Linking to a dynamic page When you add a dynamic page and a unique URL is created for each item, these are stored as a new field in your collection. The URL tells the dynamic page dataset which content to retrieve. To link to dynamic pages from somewhere else on your site—like from the home page, a menu or a dynamic list page—select the element you want visitors to click on and connect it to the dynamic page. Using multiple datasets When you create a dynamic item page, a dynamic page dataset is automatically added and only retrieves the content from one collection item per page. It can’t access content from the rest of the collection. If you want to display certain content from other items in the collection, or content from a different collection, you can add another dataset to a dynamic page. To add another dataset, select the element you want to connect. Click on Connect to Data , then create a new dataset. Select the properties you want and connect the elements to the relevant field. Note : when you have multiple datasets on a page, you can filter one dataset based on the other dataset. For example, filter to show only the items with the same field type from both datasets. Learn more about how to do that here . On a dynamic page there is a section showing related projects displayed in the repeater. There are two datasets on the page. The dataset settings for one of them is open, showing that there are two filters applied to it EXPLORE MORE TUTORIALS WEBINAR Content manager part 2 WEBINAR Content manager part 1 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 →