Home Library Layout & design Grid Tutorial Grid Grid is an advanced layouting tool that lets you precisely position elements within a 2-dimensional framework of columns and rows. You can adjust the grid in any section or container, and rearrange the layout at each breakpoint to achieve intricate, responsive designs that look great on any screen size. LOADING... Article Exercise Transcript Adjusting the grid layout Each section and container you add has a 1x1 grid by default. To change the layout, select the section or container and from the floating menu choose a preset layout or create a custom grid. You can also adjust the grid layout from the Inspector panel under Display . Adjusting the grid from the Inspector panel Under Display in the Inspector panel , use the plus icons to add a column to the right or row to the bottom of your grid. Click the dropdown arrows to adjust the column and row measurements. Each one has 3 dots next to it where you can delete the row or column, or add a new one on either side. You can also set gaps between rows or columns. Note: Changes you make to the grid from the Inspector panel affect the size and positioning of the content inside.. Adjusting the grid on the canvas From the floating action menu, choose Customize grid on canvas. Changes you make in this mode don’t affect the content in the grid. In this mode you can drag to adjust existing grid lines, or drag from the left or top to add new ones. Click Done when you’re finished editing. Docking When you add an element to a grid cell, it automatically docks to the nearest vertical and horizontal gridlines. Dock elements to control their position and prevent overlap at smaller screen sizes. Learn more about docking and margins here. Stretching across cells Stretch elements such as images and containers across one or more grid cells to fill an entire area. Positioning elements You can drag and drop, or position elements using the Inspector panel under Location in grid cells . Select the element you want to position. You can see which grid cell it’s placed in, and click on the box that corresponds with the cell you want to move it to. Position elements in more than one cell by holding down shift while you select the cells. You’ll see the column and row numbers update according to the element’s new position. Grid measurements Go to View to toggle the Grid Measurements on or off. When they’re toggled on, you can see the measurements next to each row and column. Click the measurements to adjust them. Between the grid measurements, you can click on the plus icons to add additional rows and columns. Grid offers different units of measurement that affect how your content responds to changes in viewport width. Learn more about measurements here . EXPLORE MORE TUTORIALS WEBINAR Working with grid: When, why & how TUTORIAL Layouter TUTORIAL Choosing a layout tool 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 Dynamic content Create, manage and customize unlimited collections of dynamic content, then connect them to your web design—no code needed. 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 Content manager Content manager TUTORIAL Dynamic pages Content manager TUTORIAL Datasets Content manager WEBINAR Content manager part 2 Content manager Repeater WEBINAR Content manager part 1 Content manager Repeater No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Library Layout & design Learn how to size and position elements, and work with key layouting tools. 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 WEBINAR Working with Layouters: When, why & how Layouter WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL Grid Grid Sizing & units TUTORIAL Lightboxes Interactive components TUTORIAL Slides Layouter Layouter Images & media TUTORIAL Position type Positioning TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL Building a slider using a Layouter Velo TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL Designing a Brick Layouter with max content Layouter TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

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 Creating an overlapping sticky gallery TUTORIAL Placing sticky scrolling elements over a video TUTORIAL Combining sticky position & animations Go to library →

Home Library Layout & design Designing a Brick Layouter with max content Tutorial Layouter Learn how to create a layout that wraps and scales responsively according to the content inside. We’ll use a bricks Layouter and max content to achieve this 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 → Yanay Nir Product Designer I'm an Editor X product designer. My team is responsible for all designed content including the Compositions, and almost everything suggested in the Add panel. We work closely with the Editor X product team, advising them on definitions and behaviors. I love design, spicy food, oldies music (like 60’s garage & psych) and the people I work with. Go create on Editor X → LOADING... Guide Transcript How to create a layout using a bricks Layouter and max content Open the editor to try it out → About max content: Max content is an advanced width sizing unit. Elements set to max content will get their size from the maximum width of their child element. Find out more here . About Layouter bricks: Use a Layouter with the Bricks display type to customize the width of each item so they will wrap perfectly at any breakpoint. Find out more here . Part 1: Set up the Layouter. Add a Layouter to your section. Change the Layouter display type from Mosaic to Bricks . Center the Layouter in the section. Set the Layouter width to 70%. Part 2: Add your text elements. Add your first text element into the first Layouter item. Align the text to the top and left. Set the background of the Layouter item to transparent. Set the width of the text element to 100%. Select the Layouter item containing the text, and change its width from 40% to Max Content . Now the layouter item’s width is determined by the content inside. Delete the remaining items from the Layouter. With the Layouter selected, set the minimum height to None . Select the text item and also set the minimum height to None . Duplicate the text item and change the text to the next word–”I’m”. Repeat step 9 with the remaining words on the top line of text until you reach the width of the layouter (ending with the word “an”). Part 3: Add the buttons and remaining content. Duplicate the last item on the first line of the Layouter. It should appear on the second line. Add a button to the item. Make sure that from the Layers panel you remove the text from the item. Add the next text item, followed by the second button. Continue to duplicate items and adjust the text word-by-word until all of the content is in the Layouter. Part 4: Adjust spacing. Under Display in the Inspector panel , set the item alignment to center. You can adjust the spacing between items by setting Horizontal margins . In this case the horizontal margin is at 1%. By setting Vertical margins , we can change the spacing above and below the items–in this case 15px. Result: As the screen size changes, the layout will wrap and scale across breakpoints based on the size of the text and icons we placed in the Layouter. EXPLORE MORE TUTORIALS WEBINAR Working with Layouters: When, why & how TUTORIAL Measurements TUTORIAL Layouter Go to library →

Home Library Elements & components Multi-state box Tutorial Interactive components Display different pieces of content, one state at a time using a Multi-state box. Use this to reveal content when site visitors hover or click, or based on specific conditions. LOADING... Article Exercise Transcript Enabling dev mode To add a Multi-state box to a site, first you have to enable dev mode since you’ll use code to define how and when each state will be displayed. Adding the Multi-state box Simply drag the Multi-state box from the Layout tools section of the Add panel into the section where you want it to display. Managing states To access the Manage states panel, click on the Multi-state box and select Manage States . Here you can navigate between states and add, delete and duplicate them. Edit ID You can also change each state’s ID from the Manage States panel. To refer to the state that you want to trigger in the code, you need to use the ID for the state. Each state comes with a default ID, but you can change it by clicking on the 3 dots beside the state and Edit ID . Delete state To delete a state, click on the 3 dots beside it and hit Delete . Duplicate states In some cases it might be useful to duplicate a state, such as when you’ve designed a state and need another state with the same layout, but different content. To duplicate a state, simply click on the Duplicate State button once the state is selected. Adding states If you need more states, click on Add New State in the manage states panel. Adding code To define which state you want to display and when each will be displayed, add the required code to the code panel. For more information about the code related to this element, click here . EXPLORE MORE TUTORIALS TUTORIAL Creating infinite scrolling text with Velo TUTORIAL Building a custom badge using a Multi-state box TUTORIAL Intro to Velo 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 Dev & code Learn how to extend website functionality with custom code. 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 WEBINAR How to add code to Editor X sites with Velo Velo TUTORIAL Creating a sliding menu using Velo Velo TUTORIAL Intro to Velo Velo TUTORIAL Creating infinite scrolling text with Velo Velo WEBINAR Going deeper into Velo Velo 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 Webinars Dynamic content Content manager part 1 WEBINAR Content manager Developer advocate, Joshua Alphonse shows you how to create and manage dynamic site content behind the scenes of a site using the Editor X content manager. Discover how to create content collections, collect user-generated content and display content in Repeaters & dynamic pages. LOADING... EXPLORE MORE TUTORIALS WEBINAR How to add code to Editor X sites with Velo TUTORIAL Dynamic pages TUTORIAL Datasets WEBINAR Content manager part 2 Go to library → 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!

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 Designing 3 creative header scroll effects TUTORIAL Working effectively with clients on Editor X TUTORIAL Designing a Brick Layouter with max content Go to library →

Home Library Interactions & effects Designing 3 creative header scroll effects Tutorial Scroll effects Follow Yanay's 3 how-tos to create interesting header scroll effects that can be added to any site. 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 → Yanay Nir Product Designer I'm an Editor X product designer. My team is responsible for all designed content including the Compositions, and almost everything suggested in the Add panel. We work closely with the Editor X product team, advising them on definitions and behaviors. I love design, spicy food, oldies music (like 60’s garage & psych) and the people I work with. Go create on Editor X → LOADING... Guide Transcript Follow these steps in the editor Open exercise template → Fade See live result → Steps: Select your header Open the Inspector panel Set Position Type to Pinned Toggle on Transition Select Fade Result: In preview, the header will fade as you scroll (about 250px down the page), and appear again as you scroll back. Note: Play with the Duration from the Inspector panel to fine-tune the effect. Color Change See live result → Steps: Select your header Open the Inspector panel Set Position Type to Pinned Check Overlap Next Section Check Fill Color > Select secondary color Result: In preview, the secondary background color will appear as you start scrolling and you will see the default only when you get back to the top of the page. Move See live result → Layout: Select your header Apply a 1x2 grid (1 column, 2 rows) Select Adjust Grid then Edit Grid Set the top row Min to 80px Set the bottom row Min to 40px Select your header Open the Inspector panel Change the Min Height to None Add a container to your header Stretch the container to cover the 2nd row of the grid Select the container in the 2nd row From the Inspector panel, choose the Design tab Change the background color Select the top row of the grid Choose a different background color Transition: Select your header Open the Inspector panel Set Position Type to Pinned Check Overlap Next Section Choose Transition > Toggle on Set the Distance to 80px (height of the first row in the header) Result: In preview, as you scroll, the header will move down the page (about 400px) and then, as you continue to scroll, the top row of the grid will disappear to leave only the bottom row visible. Notes: Make sure you have enough page to scroll down—one section isn’t enough. Play with Duration & Ease in the Inspector panel for fine tuning of the animation. EXPLORE MORE TUTORIALS TUTORIAL Creating a changing gradient background on scroll TUTORIAL Click & hover interactions TUTORIAL Masters Go to library →