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 Structure Understand how to structure a site in responsive web design. 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 TUTORIAL Element hierarchy Workspace Structure WEBINAR Thinking responsive-first design Breakpoints Structure Sizing & units TUTORIAL Creating a changing gradient background on scroll Scroll effects Structure TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Designed sections Structure TUTORIAL Masters Structure TUTORIAL Stack Positioning Structure Text & buttons TUTORIAL Containers Structure TUTORIAL Site structure Structure TUTORIAL Sections Structure No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

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!

Library Breakpoints Discover how breakpoints work in responsive design and create websites that look perfect on any screen size. 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 Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL How to hide & display elements per breakpoint Breakpoints WEBINAR Thinking responsive-first design Breakpoints Structure Sizing & units TUTORIAL Diving into the cascading rule on Editor X Breakpoints TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Breakpoints part 2 Breakpoints No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Layout & design Lightboxes Tutorial Interactive components Lightboxes are attention-grabbing popups that appear in front of all or some of the content on a page and highlight a message for site visitors. They’re useful for promoting discounts or new products, getting newsletter signups and more. You can customize a lightbox across breakpoints so it’s effective on any screen size. LOADING... Article Exercise Transcript Adding a lightbox Find the lightboxes in the Add panel under Layout tools . Choose one from the designed options and click on it to add it to the page. Editing a lightbox From the Pages panel, you can access and manage your site's lightboxes. Click on the 3 dots next to a lightbox to rename it, duplicate it, or delete it. To edit a lightbox, select the one you want from the panel and it appears on the canvas in editing mode. Then you can set it up, design it and add more elements, just as you would with any other container. If your lightbox doesn’t cover the entire screen, you’ll see an overlay behind it that dims the page content. To change the overlay’s color and opacity select it and adjust the page background settings from the Inspector panel. Setting up a lightbox trigger Lightboxes can either appear automatically after a visitor lands on a page, or when they click a certain link or button. To choose how the lightbox appears, select it and click Set Triggers . Under the settings, you can choose whether or not to display the lightbox automatically. If you choose yes : You can control which pages it will appear on, and drag the Delay slider to choose how many seconds it takes for the lightbox to appear after the page loads. If you choose no : With this option the lightbox doesn’t appear automatically. Instead you can set up a button or link to trigger it. Note: From here, you can also choose whether visitors can close the lightbox with an X icon or a Close button. Triggering a lightbox with a link You can link site elements such as buttons to trigger a lightbox. Select the element and choose the Link icon from the floating action bar. Click the lightbox options, and choose which one you want to appear from the dropdown. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Layouter TUTORIAL Repeater 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 Layout & design How to create a split section using grid Tutorial Grid Follow Product Marketing Manager Sebi Vidret's step-by-step guide on how to create a split section using grid, and how to adjust the design for 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 → 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 create a split section using grid Open the editor to try it out → Desktop layout 1. Apply a 2X1 grid to a blank section. 2. Add a container to the left column and stretch it by clicking on the “Stretch” button. The container will serve as the background of that column. 3. Apply a color to the container. 4. Add the content to the left column by dragging it to the container. You can add different elements or use a design asset, if you’ve created it. In this design example, we see a paragraph with a text scale property and a button that have been stacked. 5. Align the stack to the middle. Then, dock it to the left as well as the right and set the margins from the left & right. 6. Add an image to the right column and stretch it to fill the entire cell. If the image has a different ratio then the actual column, you can simply adjust the focal point. 7. Add another element to the right column, over the added image. Dock it to the left and the bottom of the container. Apply a margin of 50px from the bottom. All the other margins should be set to 0%. 8. To set the section height to be dependent on it’s relevant content, in this case the stack—remove the min height of the section by setting it to ‘None’ from the inspector panel. Also, remember to edit the section grid and set the row height to auto. 9. To add space between the content and it’s parent, set margins to the top and bottom of the stack. Adjust per breakpoints 10. Select the tablet breakpoint. 11. Adjust the grid of the section to 1X2—in order to become 2 rows instead of 2 columns. 12. To rearrange the content in each row, you can use the grid area in the inspector panel, or simply drag it. 13. To place the container with the text on the second row, click on the container and change the row to start on 2 and to end on 3. 14. To place the picture on the first row, click on it and change the row to start on 1 and end on 2, using the grid area in the inspector panel. If you placed an element on top of the image, as done in this design, then you will need to change it’s grid area as well. 15. To make sure that the image on the top row isn’t too small, edit the section grid and set the first row to a min of 400px. In order to maintain the image ratio as the screen scales—set the max height property of the row to 50vw. Note: the grid layout applied to the tablet breakpoint will automatically cascade to appear the same on mobile. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Creating a scroll snap effect with a Layouter TUTORIAL Designing a Brick Layouter with max content Go to library →

Home Library Interactions & effects Creating a changing gradient background on scroll Tutorial Scroll effects Follow along with technical designer Ido as he explains how to create a gradient background that changes color while scrolling. In this example, we’ll recreate the effect from our mid-year 2022 digital design trends report . 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 a gradient background scroll Open the editor to try it out → Part 1: Create a section with a gradient background 1. Start with a blank section 2. Set the section height to 250vh Note: The height of the section determines how long the gradient scroll will last. The section height needs to be more than 100vh in order to create the scroll effect. 3. Select the Design tab in the Inspector panel 4. Open the Color Picker 5. Choose the linear gradient 6. Set the degrees to zero so the colors align horizontally 7. Select the colors Note: In this example, the gradient is made up of 3 colors. Add more color stops by clicking where you want them on the slider. Click and drag the stops to adjust the fade. The colors used in this example are: Color 1: # D769CE Color 2: #FE7D56 Color 3: #66B362 Part 2: Add elements to the section Add a container to the section Remove the container background Set the container width to 100% Adjust the margins to zero on all sides Taking into account the height of the header, set the container’s height to a calculation of (100vh - 50px) Set the minimum height of the container to None Make sure the container is docked to the top of the section Add the SVG basic shape to the container From the floating action bar under settings, toggle off Keep original proportions Set the width and height of the shape to 100% Remove the margins Set the shape to Scale proportionally (this will automatically set the height to auto) Add a maximum height of 100% Add the text element to the container Align the text horizontally and vertically so it is docked to the center of the container Part 3: Create the sticky scroll Select the container From the Inspector panel, set the Position type to Sticky Keep the Top offset at zero Part 4: Finalize the design You can add a section below the gradient one with the same background color as the last color of your gradient to create a smooth transition between sections. The new section will push the previous one once the gradient scroll is finished. Result: When you preview the site and scroll down, the text and shape stay in place while in the background the gradient moves through colors. EXPLORE MORE TUTORIALS TUTORIAL Background scroll effects TUTORIAL Video & decorative TUTORIAL Creating a full page sticky scroll effect Go to library →

Home Library Basics Sections Tutorial Structure Sections are large containers that act as the building blocks of each page. By default, they span the width of the browser, and you can set the height as you wish. LOADING... Article Exercise Transcript Adding sections You can have as many sections as you want on each page. Add an empty section by selecting a section and clicking the + icon. You can also choose from tons of pre-designed sections inside the Add panel. Moving sections To reorder sections, select a section and from the 3 dots on the floating action bar, choose Move Up or Move Down. You can also reorder sections from the Layers panel. Background colors From the Inspector panel, choose the Design tab to change the background color of your section. Duplicating sections You can duplicate a section to use the same design somewhere else on the page. Select the section, then from the floating action bar, click the 3 dots and choose Duplicate. Flipping to vertical You can turn any horizontal section into a vertical section. Select the section, then from the floating action bar, click the 3 dots and choose Flip to Vertical. Creating vertical sections Add a full length vertical section by selecting Page from the breadcrumbs, and clicking the + icon on either side. EXPLORE MORE TUTORIALS TUTORIAL Element hierarchy TUTORIAL Site structure TUTORIAL Designed sections 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 Workspace Discover your workspace and get to know the tools and features on Editor X. 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 6 Results Basics Topics Format type All formats Sort by Featured Filters 6 Results WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Element hierarchy Workspace Structure TUTORIAL Finding & fixing issues using the Site Checker Workspace TUTORIAL Best practices from a technical designer Workspace TUTORIAL Inspector panel Workspace TUTORIAL Workspace Workspace No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Layout & design Sizing Tutorial Sizing & units You can set the sizing properties of each element to control how they respond to changes in the viewport width. LOADING... Article Exercise Transcript Sizing options Select an element on the canvas and open the Inspector panel to control how it resizes. Choose from Fixed , Fluid or Scale proportionally . Fixed Use Fixed sizing to keep the width of the element the same across all viewport sizes. Fixed elements are generally measured in pixels ( px ). Fluid Fluid sizing adjusts the width—and sometimes the height—of elements depending on the screen size. With fluid sizing, elements are measured in proportional units like percent ( % ), viewport height ( vh ) and viewport width ( vw ). Scale proportionally When elements are scaled proportionally, their height and width maintain a balanced ratio when resized. Note: Scale proportionally is only available for media and decorative elements. One more thing You can set different sizing options for your elements at each breakpoint. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL How scale text works TUTORIAL Measurements 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 →