Library Content manager Learn how to 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 7 Results Basics Topics Format type All formats Sort by Featured Filters 7 Results TUTORIAL Content manager Content manager TUTORIAL Dynamic pages Content manager TUTORIAL Datasets Content manager TUTORIAL How to make a gallery that plays on infinite loop Content manager Images & media WEBINAR Content manager part 2 Content manager Repeater WEBINAR Content manager part 1 Content manager 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!

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 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 Library Layout & design How to build a full height section Tutorial Sizing & units Follow product marketing manager Sebi Vidret's step-by-step guide on how to create a full height section using grid calculations and section sizing properties. 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 full height section Open the editor to try it out → What is a full height section? In a full height section, the design covers the entire height of the screen or the viewport, which is the canvas where the site is displayed. In a browser, the viewport does not include the address bar or the rest of the interface. How do you set it up? To create a full height section, we’ll use the vh unit of measurement, which lets us calculate values based on height. Setting the section height to 100vh means that the section will take up 100% of the viewport height. This measurement lets us adjust the height of the section according to the viewport, which means the design will also adjust. How is it calculated? For this design , we’ll apply a 3x3 grid with 3 columns and 3 rows and we’ll adjust the rows and columns. Column 1: set as 56% Columns 2 and 3: 1fr by default so they’ll divide the remaining area equally The rows will create the height of the section so we’ll give them a vh value. Row 1: The header row is set as 10vh Rows 2 and 3: set as 45vh Total for 3 rows: 100vh The 3 rows will cover the full height of the viewport. If the rows total less than 100vh then they won't cover the full height of the viewport. If they’re more than 100vh, then there’ll be a vertical scroll. Vh is also relevant for margins when creating responsive designs so that the elements’ position will adjust as the viewport height adjusts. Can you set the header to be a fixed height? As the height of the viewport adjusts, the header section automatically adjusts as well. Sometimes you want to adjust the size of the rows but not the header. Pixels are ideal here so we can be precise with our calculations. The header is set to be 66 px high so that it’s fixed in size Row 1: Set as calc (50vh - 33 px) Row 2: Set be calc (50vh - 33 px) Total rows 1 &2: 100vh minus 66px from the header When you view the design in preview, the header is fixed and does not adjust as the viewport adjusts. EXPLORE MORE TUTORIALS TUTORIAL Measurements TUTORIAL Building a proportionally scaling design TUTORIAL Creating 3 different side-by-side designs Go to library →

Home Library Basics Designed sections Tutorial Structure Discover fully designed sections and wireframes, all with built-in responsive behavior. Add them to any site to accelerate your creation flow, or use them as blueprints to learn how they were built. LOADING... Article Exercise Transcript Discover fully designed sections and wireframes, all with built-in responsive behavior. Add them to any site to accelerate your creation flow, or use them as blueprints to learn how they were built. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace WEBINAR Our new Editor X homepage: How we built it WEBINAR Digital design in 2022: How to grow as a creator 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 Docking & margins Tutorial Positioning Control the positioning of elements at every viewport size. LOADING... Article Exercise Transcript Docking elements Editor X has a smart docking system. When you drag an element into a container, it automatically docks to the closest edges. You can override this and manually set your docking from the Inspector panel . Adding margins Use margins to maintain a set distance between an element and the edges of the container it’s docked to. From the Inspector panel , under Margins , choose your desired value in pixels (px) or percent (%). You can also add margins to the sides of an element that isn’t docked. These margins act like a buffer between the element and the container or gridlines around it. EXPLORE MORE TUTORIALS TUTORIAL Stack TUTORIAL Position type TUTORIAL Creating a full page sticky scroll effect 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 →

Library Interactions & effects Find out how to bring websites to life with engaging effects and interactions. 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 Background scroll effects Scroll effects TUTORIAL Creating a changing gradient background on scroll Scroll effects Structure TUTORIAL Applying hover interactions to Repeater items Interactions Repeater TUTORIAL Creating an overlapping sticky gallery Scroll effects TUTORIAL Combining sticky position & animations Scroll effects TUTORIAL Click & hover interactions Interactions TUTORIAL Creating a sticky text scroll effect Scroll effects Grid TUTORIAL Creating a full page sticky scroll effect Scroll effects Grid TUTORIAL Designing 3 creative header scroll effects Scroll effects TUTORIAL Overflow Scroll effects 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 →

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!

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 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 Choosing a layout tool TUTORIAL 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 →