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 →

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 →

Library Working together Explore how to co-create in real time with your team and individual collaborators on the Editor X canvas. 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 ultimate workflow for creating client sites with Michael Janda Working together Freelance & business 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 Concurrent editing Working together 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 Elements & components Explore how to work with key elements and components like text, navigation and media. 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 Anchors Menus & navigation TUTORIAL Forms Interactive components TUTORIAL Multi-state box Velo Interactive components TUTORIAL Lottie animations Interactions Images & media TUTORIAL How to make a gallery that plays on infinite loop Content manager Images & media TUTORIAL Creating a unique custom menu at each breakpoint Menus & navigation TUTORIAL Building a custom badge using a Multi-state box Interactive components Velo TUTORIAL Placing sticky scrolling elements over a video Images & media Scroll effects TUTORIAL Single images Images & media TUTORIAL Custom menus Menus & navigation 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 The new OFFF Barcelona website: How we built it WEBINAR Inspiration Join Liat and Olena for a deep dive into the new OFFF site. Get to know the visual research process behind the site creation, follow a live product demo and try out some of the designs on the Editor X workspace. LOADING... EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it WEBINAR 2021 Trends: How we built it WEBINAR Our new Editor X homepage: How we built it WEBINAR Tabula Rasa #1: Web creation on the fly Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

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

Home Library Elements & components Lottie animations Tutorial Images & media Lottie animations are vector-based files you can use to add high-quality animations without weighing down your site. By importing Lottie animations you can create unique, engaging pages that look great on any screen size. LOADING... Article Exercise Transcript Adding a Lottie animation Find the Lottie animation element in the Add panel under Embed & Social , and drag it onto the canvas. Change the animation The Lottie element loads a default animation. You can click Change Animation from the floating menu to replace it with the one you want. To add a different animation, first copy the URL for the animation you want from lottiefiles.com . You’ll need to have a LottieFiles account to do this (which you can create for free). Paste the new link in the Lottie Settings panel. The new animation appears instantly. Play animation in a loop From the settings panel you can toggle on Plays in a loop , or switch it off if you want to play the animation once. Add more customizations with code You can turn on Dev Mode and add code to adjust Lottie animation settings such as speed, or to get them to play, pause and stop based on different conditions. Find out more here . EXPLORE MORE TUTORIALS TUTORIAL Intro to Velo TUTORIAL Video & decorative TUTORIAL Click & hover interactions Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Elements & components Forms Tutorial Interactive components Forms allow you to collect all of the information you need from site visitors including contact info, subscriptions and payment details. Forms can also be fully customized to match the aesthetic of any site. LOADING... Article Exercise Transcript Adding a form Scroll through the list of available options and select the form that best suits your needs. Every form comes with a preset design and fields that you can customize. You can also add new fields, and remove any that aren't relevant. Editing fields Click on the form, then the field you want to edit. Next, click Edit Field to access the panel where you can make adjustments. Each field type has slightly different settings. However, for all fields, you can change the field title or mark the field as required. Adding a field Select the form on the canvas and click Add New Field . You can choose a new field type from 4 categories: contact fields, basic fields, advanced fields and anti-spam. Designing the form Select the form and click the design icon. From there, you can choose an existing design, or customize one. If you choose to customize your form, you’ll have the options to design the input fields, the submit button and the form background. You can also style the fields—as well as the submission message. Reviewing submissions Before you publish the site, check that a submission table was created by heading to your site dashboard. If no submission table is available, go to Form Settings -> Main and add a new one from there. You can access the submission table directly from the form settings or from your site dashboard. There you can review and manage submissions. EXPLORE MORE TUTORIALS TUTORIAL Breakpoints part 1 TUTORIAL Grid TUTORIAL Content manager 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 Dev & code Creating a sliding menu using Velo Tutorial Velo Follow along with Product Manager Jonathan Tsodikovitch as he takes you through the steps to create a sliding navigation menu using Velo. In this tutorial, the menu we create slides out from the right side of the page when users click the icon. 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 → Jonathan Tsodikovitch Product Manager I’m a Product Manager for Editor X. I have a Bachelor’s Degree in Instructional Technology from HIT. During my free time, I enjoy hiking, camping, and snowboarding. I live by the motto “coffee on workdays, tea on weekends." Go create on Editor X → LOADING... Guide Transcript How to create a sliding navigation Open the editor to try it out → Part 1: Create the section or page. Set up your section or page. In this example, we’re using a simple, two-column section with a Stack containing text on the left and a transparent video on the right. Part 2: Set up the menu and button. 1. Drag in a container from the Add panel 2. Set the background color 3. Dock the container to the top of the section 4. Set the top margin to 0px so the container is touching the top edge of the section 5. Change the container’s Position type to Pinned 6. Pin the container to Page 7. In addition to the docking to the top, dock the container to left and right with margins of 0px on either side 8. Set the container’s height to 100vh and make sure the minimum height is set to None 9. Apply a 2X1 grid to the container so there are 2 columns 10. Change the Column Width of the left column from 1fr to 5% Note: In this example, we want the sliding panel to appear on the right side of the screen. If you want it to appear on the left, then change the column width of the right column instead. Then continue with the following steps on the opposite side to the one we’ve said. 11. Add your menu items to the right column. In this case we used 3 buttons and stacked them 12. With the Stack selected, set the size to 100% width 13. Make sure the margins are set to 0 14. Add a container to the left grid column and stretch it to fill 15. Add the clickable element that will work as the button to expand and collapse the sliding menu. In this example, we’re using a two line menu and rotating it 90 degrees to be vertical 16. Resize and align the shape to the middle 17. Select the container that has the two-column grid and undock it from the left side 18. Make sure the width is 100vw 19. Add a margin to the right of -95% so the right grid column moves off the canvas, but the left column with the button is still visible Part 3: Rename elements in Velo. It’s a good idea at this point to rename elements by setting up element IDs in Velo. Turn on Dev Mode Change the main container’s element ID. We’ll call it nav Change the button’s element ID. For this one we’ll use navOpen Note: Before moving on, check that the navigation bar looks the way you want it to at each breakpoint. Part 4: Create the sliding navigation with Velo. 1. Copy and paste the following code snippet: import wixAnimations from 'wix-animations'; import wixWindow from 'wix-window'; let navTimeline; let screenSizeInterval; $w.onReady( function () { let open = false ; $w('#navOpen').onClick(() => { if (open == false ) { screenSize(); screenSizeInterval = setInterval(screenSize, 500) open = true ; } else { clearInterval(screenSizeInterval); navTimeline = wixAnimations.timeline().add($w('#nav'), { x: 0, duration: 300, easing: 'easeInOutCubic' }).play(); open = false ; } }) function screenSize() { wixWindow.getBoundingRect() .then((windowSizeInfo) => { let windowWidth = windowSizeInfo.window.width; navTimeline = wixAnimations.timeline().add($w('#nav'), { x: -(windowWidth * 0.95), duration: 300, easing: 'easeInOutCubic' }).play(); }); } }); 2. If you used element IDs other than nav and navOpen, don’t forget to adjust them in the code snippet A closer look at what’s happening in Velo: For a more in-depth look at Velo and the APIs being used in this tutorial, click here. Result: In preview mode, when you click on the menu icon, the navigation menu will pop out from the left. When you click the icon again, the menu will slide back to the right and close. Note: You can change the duration and easing to suit your design. Also remember that if you change the container size, you need to readjust the negative margin and adjust the windowWidth in Velo. EXPLORE MORE TUTORIALS WEBINAR Going deeper into Velo TUTORIAL Multi-state box TUTORIAL How to build a full height section Go to library →

Home Library Layout & design Slides Layouter Tutorial Layouter Use a Layouter set to the slides display type to lay out your content as slides that users can scroll or click through. This option works well for presenting galleries with navigation arrows, displaying products or testimonials and more. LOADING... Article Exercise Transcript Adding a Layouter Find Layouters in the Add panel under Layout Tools . To begin, drag one onto the canvas. Setting the slides display type Select the Layouter, and from the floating menu choose the Slides display option from the dropdown. The display type can be also set from the Inspector panel under Display type . Choose the slides direction You can set the slides to move from left to right or from top to bottom. From the dropdown under Direction in the Inspector panel, choose which way you want the slides to move. Setting the number of items per slide Change the number of items per slide to control how many are in view at once. Adding navigation Under Display in the Inspector, you can add arrows, buttons or text for navigation. The position type for these elements is automatically set to be pinned to the Layouter. They stay in view as users click from one slide to another. You can customize these items to change their size, position, design and more. Scrollbar Toggle the Show scrollbar option on or off to choose whether or not to display it in the Layouter. EXPLORE MORE TUTORIALS TUTORIAL Layouter TUTORIAL Creating infinite scrolling text with Velo TUTORIAL Building a slider using a Layouter 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 Element hierarchy Tutorial Structure Hierarchy in web design refers to the structure of elements—like pages, sections and images—and the parenting model determines how the elements interact with each other. At the top of the hierarchy is the page and within that you have sections. Containers are added to sections along with elements like images and text. LOADING... Article Exercise Transcript Parenting and children Elements with other elements inside them are referred to as parents. The elements inside the parent are referred to as children. An element can be a child of one element but a parent to another. Attaching & detaching You can attach any element to a parent container. An attached element becomes the child of that container. You can detach it anytime by dragging it outside. This reparents the element. For example, if you drag an element outside of a container, it could attach to the section itself and become the child of the section. Note: You can’t change the hierarchy of elements per breakpoint. If you change the hierarchy at one breakpoint, it changes the hierarchy for all breakpoints. Resizing You can set how a parent container and its children resize across all breakpoints. The size of a parent element can affect its child elements. If, for example, you size a parent to %, the elements inside will resize relative to it. Breadcrumbs Breadcrumbs let you climb up in the hierarchy to navigate between, and select different elements on the canvas. For example, if you select a button, you can use breadcrumbs to grab the container it’s placed in. When an element is stretched, it can be tricky to grab the parent beneath it, so the breadcrumbs come in handy here. Note: Elements on the same level of the hierarchy—like a button and paragraph text within the same container—will not appear in the same breadcrumbs thread. Layers panel You can view the hierarchy of each section in the Layers panel. Each parent container appears like a folder and the children appear as subitems underneath. Here, you can rearrange elements within their parent container using drag and drop. Click the 3 dots beside an element to hide it at a certain breakpoint. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Breakpoints part 1 TUTORIAL Sizing 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 →