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!

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 Position type Tutorial Positioning On Editor X, you can choose how elements and sections move to create unique scroll effects as visitors scroll through a site by setting different position types. The position types are default, sticky and pinned. LOADING... Article Exercise Transcript Setting the position type To change an element or section’s position, open the Inspector panel and go to the Position type dropdown. There, you can choose from Default , Sticky or Pinned . Elements and sections are automatically set to default, which means they move in or out of the viewport as visitors scroll. Sticky position To set elements to sticky position, open the dropdown under Position type and select Sticky . Sticky elements stick to the viewport as visitors scroll vertically through a container or section. Once visitors reach the bottom of the container or section, the elements stop sticking and scroll with their parent. Sections set to sticky stay in position at the top of the viewport as visitors scroll down. Top offset for sticky elements Set the distance between an element and the top of the viewport while visitors scroll by adding a Top offset . Setting the position type to pinned To set elements to pinned position, open the dropdown under Position type and select Pinned . Pinned elements stay in a fixed position as visitors scroll through a site or a section that has a scroll inside. Define where to pin After setting an element’s position type to pinned, define where to pin it from the Pin to dropdown. The options that appear depend on the element hierarchy. The possible options to pin to are: Container: Make the element visible as visitors scroll horizontally or vertically through a specific container. Section: Make the element visible as visitors scroll horizontally or vertically through the specific section. Page: Make the element visible as visitors scroll up and down the page. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Pinned position TUTORIAL Docking & margins Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

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

Home Library Layout & design Creating 3 different side-by-side designs Tutorial Layouter Follow along with product & design advisor Vicky Borges as she explains 3 different strategies for placing elements next to each other in side-by-side designs. What do you think about the course so far? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care → 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 side by side designs Open the editor to try it out → Before you get started In this example, we’ll explore 3 different strategies for creating side by side designs. To follow along, open up the template in the editor. Part 1: Container and grid From the Add panel , add a container and attach to the sectionFrom the Inspector panel remove the container color Add a 2x1 grid to the containerDrag the buttons to the container From the Inspector panel , reposition the buttons Still in the Inspector panel , under grid settings, remove row height, set to max content and add gaps of 20px Reposition the container to bottom center of section Select the container and buttons using shift, then select Stack from the floating action bar Set spacing to 60px Part 2: Grid and docking Add a 2x2 grid with columns set as 1fr each and rows as min and max From the Add panel , under Assets , add text to first cell, center align it and dock to left side and set docking as 60 px Again from Assets , add the stack to bottom 2 cells Set top docking and dock to right side with a 20% margin Part 3: Layouter From the Add panel , drag in a Layouter to the section From the Inspector panel , align the Layouter to the center and change its width to 80% Change the Layouter display type to bricks, add gaps Set alignment to center Select 1st item, then in Inspector panel set width 100% and remove the background color From Assets , add title and center it, then remove other items Remove color background, add a grid & a horizontal gap of 10 px to create space From Assets , add vector art and text Align all the elements to left and top Change both columns’ sizing to max content , remove min height , set row to max content Duplicate the items 3 times, then replace vector art and text for each item EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Docking & margins TUTORIAL How to build a full height section Go to library →

Library Menus & navigation Discover how to set up, manage and customize site menus, and create advanced menu designs. 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 Anchors Menus & navigation TUTORIAL Creating a unique custom menu at each breakpoint Menus & navigation TUTORIAL Custom menus Menus & navigation No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Elements & components Building a custom badge using a Multi-state box Tutorial Interactive components Follow along with Technical Designer Ido Hershkovits as he explains how to create a custom badge for an Editor X product page using a Multi-state box. 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 to create custom badges using a Multi-state box Open the editor to try it out → Before you get started For this example, we’ll be working on an Editor X online store. In this case, a flower shop. To follow the steps we’ve provided for this site, simply open the template in the editor from the link provided above. Part 1: Prepare the product page To display the product badge in a position relative to the product page, make these adjustments: Navigate to the product page from the pages dropdown Select the section that contains the product, then open the Inspector panel Change the section’s padding to 120px on the top, left and right Click Apply Grid in the floating action bar and add a 3 column grid Click Advanced Mode , then click the top bar of the middle grid column Change the middle column’s width property to min/max Set the maximum width to 1440px and the minimum to auto Click Done Select the product element and open the Inspector panel again Under Location in grid cells , click the middle cell Scroll down in the Inspector panel and change all margins to zero Part 2: Create the first state Click Dev Mode at the top of the editor, then Turn on Dev Mode Close the IDE by clicking the minimize icon in the top right of the panel Open the Add panel , click Layout tools and drag the Multi-state box option onto the canvas Delete one of the states by clicking Manage States . Then select one of the states, click the three dots beside it and hit Delete Select the Multi-state box , open the Inspector panel and change its width to 160px Select the state itself and change its height to 160px Click on the design tab icon in the Inspector panel and remove the box’s background color by setting the background opacity to zero Select the Multi-state box from the breadcrumbs and repeat step 7 to remove the background color of the box Dock the Multi-state box to the top and left and set the top and left margins to -80px From the Media menu in the Add panel, drag the “out of stock” vector image into the Multi-state box container From the Inspector panel, center the image and set its width to 100% Part 3: Create the remaining states. Select the Multi-state box Click Manage States Select the existing state, and click the Duplicate State button twice to create two more states with the properties you created in Part 2 Select the second state in the list of states Change the vector image to the “on sale” image Select the third state in the list Delete the vector from this state in order to add dynamic content to this state Select the state container and open the Inspector panel Change its background color to black from the design tab and create a circle by changing its corner sizes to 999px each From the Assets menu, drag the stack into the state container Open the Adjust section at the bottom of the Inspector panel and change the container’s rotation to -25% Part 4: Customize the state IDs Click Manage States Click on the first state, click the three dots beside it and click Rename Change its name to “outofstock” and click Done Repeat step 2 for the second state Change its name to “onsale” and click Done Repeat step 2 for the third state Change its name to “xleft” and click Done Select the text element containing the X on the final state Click the Properties and Events icon at the bottom of the screen to open the IDE From this panel, rename the text element ID “quantity” Part 5: Add conditions via code Select the Product Page from the pages dropdown Paste the following code into the code panel, after the onReady function: $w(‘#productpage1’).getProduct().then((product)=>{ if (!product.InStock){ $w(‘#multistatebox1’).changeState(‘outofstock’); $w(‘#multistatebox1’).expand(); }else if (product.quantityInStock < 6){ $w(‘quantity’).text = product.quantityInStock.toString(); $w(‘#multistatebox1’).changeState(‘xleft’); $w(‘#multistatebox1’).expand(); } else if (product.discountedPrice < product.price){ $w(‘#multistatebox1’).changeState(‘onsale’); $w(‘#multistatebox1’).expand(); Hit Publish in the top right of the editor to apply this code to the site Part 6: Test the setup using your dashboard Click Site in the top bar of the editor, then Dashboard Click Store Products , then Products Click on the Bliss Tulip product Scroll down to the Manage variants section and click Edit For both the large and small variants, click the Status dropdown and choose Out of stock Click Apply , then click Save in the top right Visit the live version of the product page to confirm that the “out of stock” badge is now displayed EXPLORE MORE TUTORIALS WEBINAR How to add code to Editor X sites with Velo WEBINAR Going deeper into Velo TUTORIAL Intro to Velo Go to library →

Home Library Basics Finding & fixing issues using the Site Checker Tutorial Workspace Explore how to quickly find and fix site issues using the Site Checker to create a seamless web experience. 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 How to check your site using the Site Checker Open the editor to try it out → What is the Site Checker? The Site Checker is a smart tool that scans your site to identify problems and recommend fixes related to breakpoints, page structure, content and more. How to use it You can find the Site Checker under Tools in the top bar. Once you click Check Page , the Site Checker scans the page you’re currently editing on all breakpoints and you’ll see a list of issues detected. It also scans the full site for potential security concerns. You can use the tabs to switch between page issues and site issues. Click on any item to navigate directly to the source, or select Learn More to understand more about the issue. Once you make the suggested fixes, click Check Again , and the issue will be removed from the list. If a suggested fix isn’t relevant, click on the breadcrumbs to the right of the item and select Ignore. You can always revisit it by selecting Ignored Issues from the dropdown. Types of issues detected Once the scan is done, you’ll see a list of suggested fixes related to: Private data visible in content collections Hidden elements Missing header sections Low image quality Small fonts Missing links Default content that hasn’t been changed Overflowing content Content not adapted to all breakpoints Missing or multiple H1 tags Learn more about any of the issues listed above here . When to use the Site Checker. You can check your site at any time during the creation process, as many times as you need. It’s best to scan before going live, or after changing or building a new page. EXPLORE MORE TUTORIALS TUTORIAL Overflow TUTORIAL Measurements TUTORIAL Inspector panel Go to library →

Home Library Elements & components How to make a gallery that plays on infinite loop Tutorial Images & media Follow along with Maya as she explains how to create a design using a slider Pro Gallery to display images that slide and loop automatically. You’ll also learn how to link the Pro Gallery to a content collection to easily update the images without affecting the design. 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 → Mayara Volpe Product Specialist I’m a product specialist for Editor X. Currently, I'm studying UX/UI Design, and I have a background in graphic and web design. My hobbies include biking, outdoor adventures, reading, and traveling. Go create on Editor X → LOADING... Guide Transcript How to create a Pro Gallery with an infinite loop Open the editor to try it out → Part 1: Set up the section. Set the header to 15vh and the section to 85vh so the two combined are 100vh Apply a 2X1 grid to the section Go to Advanced mode and adjust the left grid column to 40%, and the right grid column to 60% Adjust the row height to 85vh Add content such as a title, text and button to the left side of the grid and set to stack Center the content vertically Dock it to the left and right with 10% margins, and to the top with a 55px margin Add an arrow basic shape to the left side of the grid. You can find arrows in the Add panel under Decorative , then Arrows Part 2: Add and adjust the Pro Gallery. From the Add panel , under Media then Pro Galleries , drag the last slider gallery into the right grid column The gallery will automatically stretch to fill the column. Click the icon in the top right corner to unstretch it Set the width to 100% Set the height to 85% Dock the gallery to the left and right with margins of zero Dock the gallery to the bottom with a 50px margin With the Pro Gallery selected, go to settings from the floating action bar From the Layout tab, choose Customize Layout Under Slideshow Settings , turn on Loop Also switch on Slide automatically , and change the slideshow to Continuous Finally, switch it to Pause on hover Under the Settings tab, change the setting for When clicking an item to Nothing happens Turn off the Heart icon so it doesn’t display Under the design tab, go to Navigation Arrows and switch them off Drag the arrow basic shape to align with the bottom of the gallery. Dock it to the right and bottom Part 3: Change layout for tablet and mobile breakpoints. 1. At the tablet breakpoint, edit the grid so the left column in 60% and the right column is 40% 2. Move to the mobile breakpoint 3. Adjust the grid layout from 2X1 to 1X2 Note: When we make this change, we will need to adjust the Pro Gallery settings. From the Inspector panel , make sure it’s still located in the bottom grid cell. 4. Change the height of the Pro Gallery to 85vh Part 4: Connect to the Content Manager. Click on the Content Manager icon and add it to the site. More on how to do that here When setting up the content selection, we recommend adding each image as a different field to make it easier to manage Select the Pro Gallery From the floating action bar, select Connect to Data Choose the dataset with the images you want to display Connect the image source to the image field inside the dataset collection EXPLORE MORE TUTORIALS TUTORIAL Overflow TUTORIAL Single images TUTORIAL Video & decorative Go to library →

Home Webinars Dev & code Going deeper into Velo WEBINAR Velo Get a closer look at Velo, Editor X’s full stack development platform, with dev advocates, Meredith & Joshua. Learn how to build custom user experiences and control how features appear on product pages. Plus, get all your questions answered about stores and dynamic pages. LOADING... EXPLORE MORE TUTORIALS WEBINAR How to add code to Editor X sites with Velo TUTORIAL Building a custom badge using a Multi-state box TUTORIAL Creating infinite scrolling text with Velo TUTORIAL Creating a sliding menu using Velo Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →