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 Layouter TUTORIAL Measurements Go to library →

Home Webinars Web design industry Our new Editor X homepage: How we built it WEBINAR Inspiration Join design and marketing experts, Ido and Maria, for a deep dive into creating a powerful homepage. Explore the process from concept to build and see how we use features like interactions and scroll effects to reflect our brand message. LOADING... EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it WEBINAR 2021 Trends: How we built it WEBINAR The new OFFF Barcelona website: How we built it WEBINAR 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 Freelance & business Learn essential skills to run and grow a thriving freelance business or agency. 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 4 Results Basics Topics Format type All formats Sort by Featured Filters 4 Results WEBINAR How to get a full book of web design clients Freelance & business WEBINAR The ultimate workflow for creating client sites with Michael Janda Working together Freelance & business WEBINAR Digital design in 2022: How to grow as a creator Freelance & business WEBINAR Rethinking how web design teams work together Working together Team management Freelance & business No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Basics Workspace Tutorial Workspace The Editor X canvas is wide and flexible. Panels appear as you need them, and you can move elements around freely using smooth drag and drop. LOADING... Article Exercise Transcript Canvas Your canvas is divided into horizontal sections. By default, you have a header, a footer and a large section in the middle. You can move them around and add as many sections and pages as you want. Use the resize handles at the side of your canvas to adjust the width. This lets you see and design your site at every viewport. Add panel Drag any kind of element onto your canvas, from simple shapes and text, to social bars and fully designed sections. Action bar Select any element on your canvas to open this floating action bar. From here, you can choose an animation, insert links, add comments and more. Inspector panel This is where you can control the properties of a selected element. Jump through the tabs to see what’s possible—from adjusting the size and position to changing the design and adding interactions. Layers Use the Layers panel to view the hierarchy and parenting relationships between elements on each page. Rename each layer to stay organized and select or edit specific elements using the 3 dots. Masters Masters are sections of content that can show on multiple site pages. Changes you make to one will affect this Master everywhere it appears on your site. Breakpoints The breakpoints navigator at the top of your canvas lets you jump between 3 preset breakpoints—desktop, tablet and mobile. Click the 3 dots to customize breakpoints and add more. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Inspector panel TUTORIAL Site structure 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 Interactions & effects Applying hover interactions to Repeater items Tutorial Interactions Follow along with technical designer Ido as he explains how to create a hover interactions on Repeater items. In this exercise, we’ll recreate the design that was used in the Mid-Year 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 hover interactions on Repeater items. Open the editor to try it out → Part 1: Building the basic layout To follow along with this exercise, open up the template in the editor. 1. Apply a 2x2 grid to the section. 2. Select ‘ Edit Grid ’ then, select ‘ Advanced Mode ’, set the left-column width to 1087px , then convert it to fr . Adjust the height of the rows: Row 1: 2.5 vw Row 2: 14.3 vw 3. From the Add panel , drag in a Repeater to the bottom-left grid cell. 4. From the dropdown, choose the “ List ” layout. 5. In the Inspector panel , adjust each item height to 86px . 6. Stretch the repeater to fill the entire grid cell. 7. Remove the background color by setting the background to 0 opacity. 8. Add a horizontal line to the item and then stretch it. 9. In the Inspector panel , dock the line to the bottom and remove all margins. 10. From the Add panel , drag in a container and stretch it. 11. Apply a grid of three columns to the container. And from the ‘ Advanced Mode ’ and make the following adjustments: Column 1: 1fr Column 2: 5.4fr Column 3: 0.1fr Row height: 4.5vw 12. Change the background of the container to be transparent. 13. Add text to the left and center grid cell and change the font-size to ‘ scale-text ’ with a range of 20 - 25 and set the text element width to max content . 14 .Add an arrow icon to the right column. Part 2: Building the hover container 15. From the Add panel , add a new container and set the container’s width to 241px , the height to 348px , and set minimum height to none . 16. From the Inspector panel , add 6.5% padding on all sides. 17. Apply a grid of 2 rows, adjust the height of the rows: Row 1: 14.9vw Row 2: 1.6vw 18. From the Media Manager , add an image to the top grid-cell and stretch it. 19. Add some text to the bottom grid-cell, set the font-size to ‘ scale text ’ from 12-16 and the text element width to max content . Align the text to the left and vertical center, checking it’s in the bottom grid cell. 20. Set the container to Fluid and the height to “ Auto ”. 21. In the Inspector panel , under design, round the corners of the container and the image by setting the radius to 12px . 22. Attach the hover container to the Repeater item and align it to the horizontal and vertical center . 23. Add a right-margin of -28% to the hover-container. Part 3: Adding the hover interaction to the container 24. In the Inspector panel , select the interactions button and Add an Effect . 25. Then select a Custom Effect , name it “ Hover ”. 26. From the dropdown menu, set the image to rotate and display on hover. 27. Still in the dropdown menu, choose the initial state and set the card’s container opacity to 0 and set the scale to 100.1% . 28. Add a trigger and choose “ Hover ”, select the effect created and press “ Done .” 29. From the Layers panel , view the card and then update the image and text in each card so that different content appears on each hover. Result : When you hover over each line in the Repeater, a different card will appear, each with a new image and text. EXPLORE MORE TUTORIALS TUTORIAL Background scroll effects TUTORIAL Multi-state box TUTORIAL Click & hover interactions Go to library →

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 WEBINAR Content manager part 2 TUTORIAL Datasets Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Library Tutorial library Browse the full collection of tutorials, exercises 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 89 results Basics Topics Format type All formats Sort by Featured Filters 89 results WEBINAR Working with Layouters: When, why & how Layouter WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL How scale text works Sizing & units Text & buttons WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints WEBINAR How to add code to Editor X sites with Velo Velo TUTORIAL Content manager Content manager TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL Element hierarchy Workspace Structure TUTORIAL Grid Grid Sizing & units WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration TUTORIAL Dynamic pages Content manager WEBINAR Tabula Rasa #2: Web creation on the fly Inspiration TUTORIAL Anchors Menus & navigation TUTORIAL Lightboxes Interactive components WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning WEBINAR How to get a full book of web design clients Freelance & business No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Webinars Layout & design Working with grid: When, why & how WEBINAR Grid To create a successful responsive site, you need to build the right structure. Learn how to do that in part one of our site structure webinar series, starting with grid. Editor X product manager Liron gives a detailed breakdown of the revamped grid features on Editor X and explains how to use them to make structuring a site seamless—whether you create layout or content-first. LOADING... EXPLORE MORE TUTORIALS WEBINAR Working with Layouters: When, why & how TUTORIAL Choosing a layout tool TUTORIAL How to create a split section using grid Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Basics Inspector panel Tutorial Workspace Take a tour of the Inspector panel on Editor X, where you control the size, position and behavior of all elements on your canvas. LOADING... Article Exercise Transcript Take a tour of the Inspector panel where you control size, position and behavior of all elements on your website. This is an overview of all the properties and dropdown options on the panel. EXPLORE MORE TUTORIALS TUTORIAL Element hierarchy TUTORIAL Measurements TUTORIAL Site structure 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 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 Pinned position TUTORIAL Masters TUTORIAL Click & hover interactions Go to library →

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

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!