Home Library Layout & design Repeater Tutorial Repeater Display dynamic content using this multi-box layouting tool. Repeaters on Editor X are built using flexbox technology, so your layout automatically adjusts to every screen size. An ideal use case could be a team page where you display unique profiles with uniform styling. LOADING... Article Exercise Transcript Adding a Repeater To add a Repeater, choose from the selection of Repeaters available in the Add panel under Layout tools and drag one onto the canvas. Choosing a display type To choose your preferred Repeater layout, select the Repeater and, from the floating action bar or the Inspector panel, choose an option from the Display type dropdown. You’ll see options for Cards, List, Slider and Grid Cells. You can also make a different layout choice for each breakpoint. Managing items In the Inspector panel, click on the 3 dots next to Manage items to enter the Manage items panel. From there you can add, duplicate, rename and delete items. Customizing items If you add or remove elements or make any design, position or layout changes to one Repeater item, these will affect all the other items in the Repeater. You can display multiple different elements in each Repeater item by adding them to one item from the Add panel . You can also adjust the grid of one item, which will affect each item. Populating your Repeater You can populate a Repeater by manually adding data to each item, or you can sync data with the Repeater behind the scenes using the built-in Editor X CMS. EXPLORE MORE TUTORIALS TUTORIAL Choosing a layout tool TUTORIAL Layouter TUTORIAL Datasets 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 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 Collaboration tools Roles & permissions Tutorial Team management Give every teammate and collaborator a custom role on each site. Set and manage granular permissions for each role, so everyone—from designers to developers and SEO specialists—has a tailored editing experience. Controlling specific permissions means some actions on the dashboard and inside the editor will be disabled. This makes sure everyone can focus on just those tasks that are authorized by their role. LOADING... Article Exercise Transcript Finding site-level roles To define and manage roles for collaborators on one particular site, go to the site dashboard and from the sidebar, click Settings . Scroll down and select Roles & permissions , then click Manage Roles in the top right. Finding team roles To define and manage roles for your team, go to the Partners Dashboard and select Settings in the sidebar. This opens the Team Management tab. In the top right, click More Actions , then Manage Roles . Predefined roles For any collaborator or teammate, you can assign predefined roles which were created for you based on common use cases. They range from general roles—like Website Manager and Website Designer—to roles relating to the solutions you have on the site, like billings and blogs. To see the exact permissions of a predefined role, click View over on the right. Assigning a role To assign a role to a collaborator or teammate, click the 3 dots beside it, then select Invite People . You can then type in a single email address or multiple emails separated by a comma. When you’re ready, click Send Invite . Creating a custom role To create a new custom role, select + Create New Role in the top right, then give your role a title and description. Next, select Editor X to open the dropdown. Here you’ll see a comprehensive list of permissions. Select the permissions you want, and click Save . You can then use the 3 dots to assign this new role to one, or multiple collaborators. Inviting collaborators To invite someone to join you on just one site, go to that specific site dashboard, then under Site Actions , click Invite People . You’ll be prompted to enter an email address and choose a role for this new collaborator. Note: You can also invite collaborators to join your site from inside the editor. Under Site in the topbar, select Invite People to Site . Inviting a new teammate To invite someone to join your team, go to the Team Management tab on your Partners Dashboard and from the top right, select + Invite People . You’ll then be prompted to enter an email address and choose a default role for this new teammate across all sites. Multiple roles You can customize a teammate’s role across different sites and folders in your team account. From the invite flow, once you’ve chosen the role & permissions you want, scroll to the bottom to select whether they’ll apply to All sites in your account, or Specific sites only. If you select Specific sites , you can choose which sites they apply to. You can then assign this same teammate a different role on other sites in your account. Roles inside the editor When you’re working on a site, hover over your avatar in the top left to see your current role. Custom experiences When you’re working on a site, hover over your avatar in the top left to see your current role. EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together WEBINAR The ultimate workflow for creating client sites with Michael Janda TUTORIAL Concurrent editing 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 Layouter Tutorial Layouter Let your content seamlessly adjust to every screen size using flexbox technology—ideal for structured layouts with multiple boxes. LOADING... Article Exercise Transcript Adding a Layouter Find Layouters in the Add panel under Layout Tools . Choose from blank wireframes or designed layout suggestions. To begin, drag one onto your canvas. Choose a display type Each container in your Layouter is called an item . At each breakpoint, you can choose to lay out your items in Columns , Rows , Mosaic , Bricks , Slider or Slides . Select the Layouter and then choose the display type from the floating menu or from the Inspector panel . Items You can drag and attach elements to each item in the Layouter. You can also apply a grid and position elements exactly where you want. Managing items From the Inspector panel , under Manage Items you can add items, or click on the 3 dots next to each item to duplicate, rename, delete or choose not to display. Reordering items From the Manage Items panel, drag the items to reposition them. You can also reorder the items directly on the canvas. Setting the items size You can resize individual items. From the Inspector panel , adjust each item's width and height using the measurements of your choice. You can also adjust the horizontal and vertical gaps around items Adding gaps between items You can set how much space you want to have between your items, horizontally and vertically by setting the gaps in the Inspector panel. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Choosing a layout tool TUTORIAL Slides 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 →

Home Library Elements & components Placing sticky scrolling elements over a video Tutorial Images & media Follow along with product and design advisor Vicky Borges to add a video and scroll elements on top of it with sticky position. 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 a video background with sticky elements Open the editor to try it out → Before you get started In this example, we’ll create a crypto wallet site with a video and several sticky elements to create an interactive scroll effect. To follow along, open up the template in the editor and save each component to your site assets. These include the background video, the headline text, the phone background container, the wallet and total balance container, the three cards with different currencies, the green button and the services stack. Then add a new page to re-create this design as you follow along. Part 1: Set up your site Make sure the page header is set to Pinned and Overlap next section is selected In the next section, add a 1X8 grid Set the grid’s column width to 1fr Adjust all 8 rows of the grid to 100vh Part 2: Add the video and headline Add the video to the first row of the grid Stretch it to fill the cell Change the video’s position type in the Inspector panel to Sticky Keep the top offset at zero Add the headline text over the video in the first row of the grid Use the alignment tab in the Inspector to center the headline in the section Part 3: Add and align the sticky elements To add our sticky elements precisely, we’ll add them all together in the second grid row first. Once we have the position settings right, we’ll move each one into its own grid row. Start by adding the components we need: the phone background, the wallet and total balance, 3 cards and the green button in grid row 2 Center align the phone background element in the grid cell Dock it to the top Make sure the top margin units are in viewport height Set the element to sticky position Copy the value of the top margin, 12.5vh, and set that as the Top offset Now we’ll repeat these steps with the rest of the elements. Make sure they’re all centered horizontally and docked to the top with the top margin in vh. Set each one to sticky position, and use the top margin value as each element’s top offset. The top margin/top offset values for the remaining elements are: Wallet and total balance stack: 21vh First currency card element: 45vh Second currency card element: 55vh Third currency card element: 65vh Green button: 75vh Note: Best practice here is to position elements by selecting them and using the Inspector panel. If you drag and drop you might unintentionally re-parent an element. Part 4: Reposition elements in separate grid rows When all the elements are positioned and have the correct settings in the second grid row, we’ll move each one to separate grid rows, but with the same position. The phone background stays in grid row 2 From the Inspector panel, move the wallet and total balance container into row 3 The first currency container moves to row 4 The second one to row 5 The third one to row 6 Add the green button to grid row 7 Drag in the services stack and place it into grid row 8 Center align it in the cell Part 5: Adjust the services container When we preview the site, the services container scrolls up to cover the sticky elements. We don’t want this behavior, so we’ll go in and add bottom margins on each sticky element to prevent it. Start by using the Inspector panel to help calculate the distance we need for the bottom margin. Select the phone background container We already know the top margin is 12.5vh. Because this element is aligned to the center, we know the bottom margin will be the same on top and bottom Add a bottom margin of 12.5vh plus 100vh (the size of the last grid row), so 112.5vh Select the wallet and total balance container In the Inspector, dock it to the bottom of the grid cell Change the bottom margin units to vh Make a note of the value—in this case 58vh Click undo twice to undo those last two changes Add a bottom margin with that value plus 100vh, so 158vh Repeat steps 4 to 9 for the remaining containers and button Preview one more time Result: The video remains in place as a background and when you scroll the different elements move up into view and then stick in place. EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it TUTORIAL Video & decorative TUTORIAL Creating a sticky text scroll effect Go to library →

Library Basics Review key responsive design concepts and explore the Editor X workspace. 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 How scale text works Sizing & units Text & buttons WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL Element hierarchy Workspace Structure TUTORIAL How to hide & display elements per breakpoint Breakpoints WEBINAR Thinking responsive-first design Breakpoints Structure Sizing & units TUTORIAL Finding & fixing issues using the Site Checker Workspace TUTORIAL Diving into the cascading rule on Editor X Breakpoints TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Best practices from a technical designer Workspace TUTORIAL Designed sections Structure 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 Slides Layouter Tutorial Layouter Use a Layouter set to the slides display type to lay out your content as slides that users can scroll or click through. This option works well for presenting galleries with navigation arrows, displaying products or testimonials and more. LOADING... Article Exercise Transcript Adding a Layouter Find Layouters in the Add panel under Layout Tools . To begin, drag one onto the canvas. Setting the slides display type Select the Layouter, and from the floating menu choose the Slides display option from the dropdown. The display type can be also set from the Inspector panel under Display type . Choose the slides direction You can set the slides to move from left to right or from top to bottom. From the dropdown under Direction in the Inspector panel, choose which way you want the slides to move. Setting the number of items per slide Change the number of items per slide to control how many are in view at once. Adding navigation Under Display in the Inspector, you can add arrows, buttons or text for navigation. The position type for these elements is automatically set to be pinned to the Layouter. They stay in view as users click from one slide to another. You can customize these items to change their size, position, design and more. Scrollbar Toggle the Show scrollbar option on or off to choose whether or not to display it in the Layouter. EXPLORE MORE TUTORIALS TUTORIAL Layouter TUTORIAL Creating infinite scrolling text with Velo TUTORIAL Building a slider using a 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 →

Home Library Basics Getting started on Editor X Tutorial Workspace Get familiar with the workspace and learn the basics of creating a site on Editor X. LOADING... Article Exercise Transcript Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace WEBINAR Thinking responsive-first design Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Basics Masters Tutorial Structure Masters are sections of a site that you can save and show on multiple pages, like headers, footers and sidebars. Changes you make to one, apply to this Master on every page it’s in use. LOADING... Article Exercise Transcript Creating a Master The headers and footers of each site are automatically saved as Masters, and you can turn any section into a Master too. Right click the section and select Set as Master , then tag it as either a Header , Section or Footer . It’ll be added to the Masters panel on the left of your canvas. Finding a Master You can identify Masters by a green outline that appears on hover. Multiple headers & footers If you like, you can use different headers and footers on each page or breakpoint. For example, on one page, you may want a horizontal header, but on another, a vertical sidebar works best. To set this up, create a new header, right click it and select Set As Master . In the Masters panel, you’ll now see 2 headers saved. Use the 3 dots to select one of them as Default . Your default header will be the one that automatically shows on each new page. Showing on pages Masters can be shown on multiple pages of your site. From the Masters panel, click the 3 dots beside a Master, then choose Show on to choose the pages you want. Alternatively, you can right click your Master directly on the canvas and from the floating action bar, select Show on . Detaching Masters You can detach a section from the other Masters at any time. Right click the section and from the floating action bar, select Detach from Masters . Now you can make changes to this section without affecting the other duplicates on the site. Breakpoints for Masters Masters have their own breakpoints —highlighted in green at the top of the canvas. This means that if you make a change to your page breakpoints, you won’t see the change on your Masters and vice versa. For example, if you’re designing a header—which is by default a Master— you could add 3 extra breakpoints and style your header differently at each one. When you move to a different section on the page, you won’t see these extra breakpoints. EXPLORE MORE TUTORIALS TUTORIAL Inspector panel TUTORIAL Design libraries 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 →

Home Library Layout & design Stack Tutorial Positioning Stacking is a way to control the relationship between elements that are arranged above and below each other on your canvas. Stack automatically puts elements inside a flex container which prevents overlap when the viewport changes size. LOADING... Article Exercise Transcript Creating a stack Multi-select elements using Shift on your keyboard, then click Stack . Remember, you can only stack elements that are arranged above and below each other on your canvas. Vertical margins In a stack, the elements are separated by vertical margins, indicated by blue strips. To control the size of these margins, open the Inspector panel and under Margins , enter your desired values in px or %. Note : in a stack, you’re addressing only the Top and Bottom margins between elements. Reordering elements You can manually switch the order of stacked elements using drag and drop. The margins will automatically adjust to accommodate the new layout. Attaching & detaching You’re free to drag elements in and out of a stack. Note: These actions result in reparenting which changes the hierarchy of your site and affects all breakpoints. Unstacking elements You can break up a stack to release elements from their flex container. Click anywhere in your stack, select Stack from the blue breadcrumbs and click Unstack . You can also unstack elements using the Layers panel. Note : These actions result in reparenting which changes the hierarchy of your site and affects all breakpoints. EXPLORE MORE TUTORIALS TUTORIAL How scale text works TUTORIAL Layouter TUTORIAL Docking & margins Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Basics Breakpoints part 2 Tutorial Breakpoints The cascading rule saves you time when you’re designing. Any layout or style changes you make at larger breakpoints automatically trickle down to all smaller breakpoints. This doesn’t mean you need to keep the same design for every screen size. You can still make custom changes at each breakpoint. LOADING... Article Exercise Transcript Don’t display To hide an element on a specific breakpoint, go to that breakpoint, right click the element and select Don’t Display . Alternatively, go to the Layers panel from that same breakpoint, select the 3 dots next to the element and click Don’t Display . This change will only affect your current breakpoint and any smaller ones. To re-display your element, go back to the Layers panel, find the element and click the eye icon. Copying from breakpoints You can copy all of an element’s layout and style properties from one breakpoint to another. For example, you might like the way you styled an element on mobile, and want to use this same styling on tablet. To do this, go to tablet, select the element and click Copy from Breakpoint . You’ll then see a preview of how this element appears at each breakpoint. Hover on the mobile breakpoint—where you have the styling you want—and click Apply . The mobile styling of this element will now be applied on tablet. Using on all breakpoints To use the same styling of an element on all breakpoints, right click the element and select Use on All Breakpoints . Removing overrides All changes that cascade down are inherited changes from larger breakpoints. You can override an inherited change by customizing an element at a specific, smaller breakpoint. An element that has overrides no longer inherits other changes from larger breakpoints. Remove overrides from an element by right clicking it and selecting Remove Overrides. EXPLORE MORE TUTORIALS WEBINAR Working with grid: When, why & how WEBINAR Discover the Editor X workspace TUTORIAL How to hide & display elements per breakpoint Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Webinars Basics Discover the Editor X workspace WEBINAR Workspace Join Sebi Vidret from the Editor X team as he walks you through a live site building demo. This webinar introduces the workspace and shows how to structure a site for different screen sizes using vertical sections, CSS grid and flex layouts. LOADING... EXPLORE MORE TUTORIALS TUTORIAL Choosing a layout tool TUTORIAL Site structure TUTORIAL How to build a full height section TUTORIAL How to hide & display elements per breakpoint Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →