Home Library Interactions & effects Creating a full page sticky scroll effect Tutorial Scroll effects UX designer Dolev Brosh guides you through the steps to design a creative effect using sticky position and stack. What do you think about the course so far? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care → Dolev Brosh UX/UI Designer I'm a UX designer for Editor X and I studied UX/UI Design at Sapir College. I’m a big fan of anime, rap music and I’ll never say no to a delicious burger. Go create on Editor X → LOADING... Guide Transcript Follow these steps in the editor Part 1 1. On a blank canvas, select the main section and open the Inspector panel 2. Under Size , set Min Height to 2344px 3. Select the section 4. Open the floating action bar select Apply Grid 5. Select Custom and create a grid with 2 Columns and 4 Rows 6. Select the section again 7. From the floating action bar select Adjust Grid then Edit Grid 8. Set the right column to 0.6fr 9. Set the Min of the rows from top to bottom as follows : 18vw, 48vw, 22vw, 42vw See full website → Watch Dolev recreate this effect → Part 2 1. Drag an image from the Add panel into the section 2. Go to Grid Area in the Inspector panel 3. Set the image to column: start 2, end 3; row: start 1, end 2 4. In the top right of the image click the Stretch icon 5. Under Position in the Inspector panel, set the Top margin to -122px (or the size of your header) 6. Drag in 3 more images to the right column, one below the other 7. Go to Grid Area in the Inspector panel 8. Set the 2nd image to column: start 2 , end 3 ; row: start 2 , end 3 9. Set the 3rd image to column: start 2 , end 3 ; row: start 3 , end 4 10. Set the 4th image to column: start 2 , end 3 ; row: start 4 , end 5 11. Stretch each of the images so they fill a grid cell Part 3 1. Drag in another image to the section 2. Go to Grid Area in the Inspector panel 3. Set the image to column: start 1 , end 2 ; row: start 1 , end 4 4. In the top right of the image click on the Stretch icon 5. Under Position in the Inspector panel, set the Top Margin to -122px (or the size of your header) 6. Go to SCROLL in the Inspector panel 7. Beside Scroll Effect, choose Sticky Part 4 1. Drag a title into the section 2. Drag in a paragraph and place it under the title 3. Select them both by pressing on them while holding the Shift key 4. In the floating action bar choose Stack Part 5 1. Go to Grid Area in the Inspector panel 2. Set the stack to column: start 1, end 2 , row: start 2, end 3 3. Go to SCROLL in the Inspector panel 4. Beside Scroll Effect , choose Sticky 5. Set the Top offset to 300px 6. Set the Bottom margin of the stack to 200px Result : In preview, as you scroll, the left column image will stick to the page until it reaches the bottom of the section and then it will reveal the rest of the image. The right column images scroll up. EXPLORE MORE TUTORIALS TUTORIAL Pinned position TUTORIAL Combining sticky position & animations TUTORIAL Placing sticky scrolling elements over a video Go to library →

Home Library Dev & code Intro to Velo Tutorial Velo Velo is a full-stack development solution that allows you to extend the functionality of your Editor X sites by adding code. Create your desired UI, then add custom functionality using JavaScript and Velo APIs in both the frontend and backend. With Velo you can create anything from small interactions to complete websites. LOADING... Article Exercise Transcript Enabling dev mode To start using Velo, click on Dev Mode in the top menu, then click Turn On Dev Mode . Changing an element’s ID Change an element’s ID by clicking on the element and giving it a unique identifier in the Properties and Events Panel . Setting default values Set an element’s default state when the page loads by navigating to the Properties and Events Panel and clicking on the checkbox beside the state you want to set. Adding event handlers Add an event handler by clicking on the element that you want to add it to, then click on Event Handler in the Properties and Event Panel and click on the plus symbol beside it. Adding your code Begin adding code to your Editor X site by using the Code Panel. Here you can write JavaScript and use Velo’s APIs. To learn about all the features and tools you can use to customize your Editor X site, click here . EXPLORE MORE TUTORIALS WEBINAR How to add code to Editor X sites with Velo WEBINAR Going deeper into Velo TUTORIAL Multi-state box 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 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 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 Positioning Understand how to give site elements structure and context, and control how they behave with positioning. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 8 Results Basics Topics Format type All formats Sort by Featured Filters 8 Results WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning TUTORIAL Position type Positioning TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL Pinned position Positioning TUTORIAL Stack Positioning Structure Text & buttons TUTORIAL Docking & margins Positioning No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

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 Images & media Learn about adding and customizing images, videos, audio and more. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 7 Results Basics Topics Format type All formats Sort by Featured Filters 7 Results WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning TUTORIAL Slides Layouter Layouter Images & media TUTORIAL Lottie animations Interactions Images & media TUTORIAL How to make a gallery that plays on infinite loop Content manager Images & media TUTORIAL Placing sticky scrolling elements over a video Images & media Scroll effects TUTORIAL Single images Images & media TUTORIAL Video & decorative Images & media No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home 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 Library Layout & design Measurements Tutorial Sizing & units In responsive design, you’re no longer confined to just the pixel. You can use a variety of different CSS units, functions and values to set the width and height of elements. Knowing when to use the right unit gives you control over the way elements resize as the viewport width changes. You can find these units of measure under Sizing options in the Inspector panel. LOADING... Article Exercise Transcript Px The pixel is the most straightforward unit. Choosing px makes sure the element's size is always the same regardless of the screen size. % The % unit is a very useful fluid unit. When setting width in % , the size is determined by a percentage of the parent container’s width. Alternatively, if the height is set to % the size is taken from the parent container’s height. Vw Vw stands for viewport width. Viewport is the size of the browser in which the site is displayed. 1vw equals 1% of the viewport’s width. Setting the width of an element to 100vw will make sure it takes up the full width of the viewport. Vh Vh is short for viewport height. 1vh equals 1% of the viewport’s height. Setting the height of an element to 100vh ensures it always takes up the full height of the viewport. Auto When a property is set to Auto , its size is determined by other factors and results may vary in the context of what else is being used. For example, the height and width of a stretched image is always set to Auto , as it simply fills up the available space. Min & Max While using fluid units of measure you can add a minimum or maximum to the width and, or height of an element. For instance if you set an element’s width to 50% it will remain half the size of its parent. You can then set a min width of 400px, so the element never gets smaller than that. None If a property is set to None , it means there is no value set for it. None can only be applied to min and max properties. Fr Fr is a fractional unit used for sizing columns and rows in a grid . 1fr represents 1 fraction of the available space. Sizing with fr is only available in Edit Grid mode. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Sizing TUTORIAL Building a proportionally scaling 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 →

Library Repeater Explore how to use the Repeater, a flex layouting tool used to display dynamic content in multiple boxes with uniform styling. 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 TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Applying hover interactions to Repeater items Interactions Repeater WEBINAR The new OFFF Barcelona website: How we built it Interactions Repeater Grid Scroll effects Inspiration WEBINAR Content manager part 2 Content manager Repeater WEBINAR Content manager part 1 Content manager Repeater TUTORIAL Repeater Repeater TUTORIAL Flexbox Layouter Content manager Repeater No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Layout & design Stack Tutorial Positioning Stacking is a way to control the relationship between elements that are arranged above and below each other on your canvas. Stack automatically puts elements inside a flex container which prevents overlap when the viewport changes size. LOADING... Article Exercise Transcript Creating a stack Multi-select elements using Shift on your keyboard, then click Stack . Remember, you can only stack elements that are arranged above and below each other on your canvas. Vertical margins In a stack, the elements are separated by vertical margins, indicated by blue strips. To control the size of these margins, open the Inspector panel and under Margins , enter your desired values in px or %. Note : in a stack, you’re addressing only the Top and Bottom margins between elements. Reordering elements You can manually switch the order of stacked elements using drag and drop. The margins will automatically adjust to accommodate the new layout. Attaching & detaching You’re free to drag elements in and out of a stack. Note: These actions result in reparenting which changes the hierarchy of your site and affects all breakpoints. Unstacking elements You can break up a stack to release elements from their flex container. Click anywhere in your stack, select Stack from the blue breadcrumbs and click Unstack . You can also unstack elements using the Layers panel. Note : These actions result in reparenting which changes the hierarchy of your site and affects all breakpoints. EXPLORE MORE TUTORIALS TUTORIAL How scale text works TUTORIAL Layouter 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 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 →