Join live web design webinars Tune into expert-led sessions to learn Editor X, sharpen your design and business skills, refine your creation process and fuel your ideas. Upcoming webinars All times are local MONTHLY Discover the Editor X workspace Learn the fundamentals of creating responsive sites on Editor X. Watch a step-by-step build and ask questions live. See dates Mar {day} 3:00 PM Live intro webinar with product manager Jonathan RSVP Don’t want to wait? Watch on demand Recorded webinars Missed something? Want to watch a rerun? Find past webinars in our library. Browse all → What do you want to learn next? Submit Thank you for submitting! 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 →

No upcoming events at the moment DO NOT DELETE THIS PAGE!!! If you delete this page or the wixEvents app, the entire Events app will be removed from the website and with it all the Webinars information on the website

Home Webinars Collaboration tools Design libraries WEBINAR Working together Product manager, Dana Karp explains how to create design libraries by adding and customizing typography, color themes and design assets. Learn how to manage and share design libraries with your team to streamline your workflow and drive collaboration. LOADING... EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together TUTORIAL Live comments TUTORIAL Roles & permissions TUTORIAL Team accounts Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Dynamic content Content manager Tutorial Content manager Create and store heavy or dynamic content behind the scenes of a site using database collections. You can connect your database to individual site elements like images, and responsive display tools like Repeaters. Ideal use cases could be a real estate listing or a custom marketplace. LOADING... Article Exercise Transcript Getting set up From the Add panel, add a Content Manager , then choose the type of content you want to display. Creating your collection Select New Collection , name it and choose whether you want to add it to a new or existing page. Adding your content Fill out your collection with text, images, dates and relevant links. If you want, you can import data from a CSV file. Click the 3 dots in the top right to begin. Once you’re ready, click Sync Sandbox to Live . For the sync to be successful, you’ll need to first publish the site. Creating a dataset To display your data collection, go back to the editor and select your chosen display tool. Next, click the Connect to Data icon and select Get Started . Choose the collection you want from the dropdown and select Create . The dataset component will appear at the top of your page, and will be pinned to the screen—visible only to you, not on the live site. Connecting each field If you are displaying content in a repeater, you can quickly connect each element to a field in your database. For example, connect the image element to the image field. From the dataset component, you can also filter your collection to control what’s displayed. Now when you click Preview , the repeater displays content from your collection. Finding your collection Your new collection is now stored in the site dashboard under Content Manager . EXPLORE MORE TUTORIALS TUTORIAL Dynamic pages WEBINAR Content manager part 2 WEBINAR Content manager part 1 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 Inspiration Discover how to build inspiring designs and use these ideas and skills for your own creations. 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 mid-year trends report: How we built it Scroll effects Interactions Inspiration WEBINAR Tabula Rasa #2: Web creation on the fly Inspiration WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning WEBINAR Tabula Rasa #1: Web creation on the fly Inspiration WEBINAR The new OFFF Barcelona website: How we built it Interactions Repeater Grid Scroll effects Inspiration WEBINAR Our new Editor X homepage: How we built it Inspiration Interactions WEBINAR 2021 Trends: How we built it Interactions Scroll effects Grid Inspiration No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Interactions & effects Creating a sticky text scroll effect Tutorial Scroll effects Technical designer Anastasia Logacheva shows you how to create this dynamic effect using sticky position and grid. 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 → Anastasia Logacheva Technical Designer I’m a technical designer for Editor X. I studied industrial design at college and have completed courses in graphic, web and UX design. I’m a keen Scuba diver and mother to a golden retriever named Shirley. Go create on Editor X → LOADING... Guide Transcript Follow these steps in the editor Open the editor to try it out → Part 1: Create the grid 1. Apply a 1x2 grid to the main section (1 column, 2 rows) 2. Select Adjust Grid then Edit Grid 3. Set the top Row Height to min/max , Min to 3000 px and Max to max-content 4. Set the bottom Row Height to min/max , Min to 100 vh and Max to max-content Part 2: Sticky Position 1. Drag in a title from the Add panel to the top grid cell 2. Open the Inspector panel 3. Change the Width to 100% 4. Go to Edit Text in the floating action bar and align the text line to the center 5. Change the font size to 200 6. Duplicate the text 3 times, so you have 4 rows of text 7. Align each line of text to the center using the alignment tools in the top of the Inspector panel 8. Select the 1st title and go to the Inspector panel 9. Set the Top Margin to 0px 10. Select the 2nd title 11. Set the Top Margin to 800px 12. Select the 3rd title 13. Set the Top Margin to 1600px 14. Select the 4th title 15. Set the Top Margin to 2400px 16. Select the 1st title again 17. Open the Inspector panel 18. Set Position Type to Sticky 19. Set the Top offset to 0px 20. Select the 2nd title 21. Open the Inspector panel 22. Set Position Type to Sticky 23. Set the Top offset to 180px 24. Select the 3rd title 25. Open the Inspector panel 26. Set Position Type to Sticky 27. Set the Top offset to 360px 28. Select the 4th title 29. Open the Inspector panel 30. Set Position Type to Sticky 31. Set the Top offset to 540px Part 3: Set to full height 1. Drag in a container to the bottom grid cell 2. Open the Inspector panel 3. Set the Width of the container to 100 vw , the Height to 100% 4. Align it to the Center and to the Middle 5. Design it as you want Result: In preview, as you scroll, the text lines will gather one under the other until the container scrolls up. Note: Make sure that the container is above the text lines in the Layers panel. EXPLORE MORE TUTORIALS TUTORIAL Combining sticky position & animations TUTORIAL Creating a full page sticky scroll effect TUTORIAL Placing sticky scrolling elements over a video Go to library →

Home Webinars Layout & design Working with Layouters: When, why & how WEBINAR Layouter Join the Editor X product team for the latest event in our site structure series: a deep dive into Layouters. Take part in a live demo on using Layouters to let content seamlessly adjust to every screen size. Plus, get advice on choosing the right layouting tool for every project. LOADING... EXPLORE MORE TUTORIALS TUTORIAL Pinned position TUTORIAL Sizing TUTORIAL Repeater TUTORIAL Single images Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Layout & design Pinned position Tutorial Positioning Use Pinned position to lock elements in place as users scroll through an element’s parent or the page. LOADING... Article Exercise Transcript Setting the position type to pinned To change an element’s position, open the inspector panel and click the dropdown under Position type , then select Pinned. Defining what the element is pinned to To define where you want to pin an element, click the Pin to dropdown. The options that will appear are dependent on whether the element’s parent is a container or a section. Select one of the options to set your desired behavior: Container: Make the element visible as visitors scroll through a specific container. Section: Make the element visible as visitors scroll through a specific section. Page: Make the element visible as visitors scroll up and down the page. Depending on what your element is pinned to, it will behave differently in relation to how the user scrolls through your design. If an element is pinned to the page, the position of that element will be set relative to the viewport, meaning the element will always be fixed in that position regardless of how the site sections scroll. You may be familiar with this position as the CSS property Fixed. If an element is pinned to a parent section or container, the element’s position will be set relative to its parent. When an element is pinned to a section or a container, the element will only stay in place as a user scrolls through that section or container*. Once its parent moves out of the viewport, the pinned element will move with it and will no longer be visible. Note that pinned elements are not affected by parent overflow. For example, whether the overflow is set to hidden, scroll or show, the pinned element will still be displayed. *To find out how to create scrollable containers visit our overflow article. Changing from Pin to page to Pin to section Click the Position type dropdown and choose one of the other options—Default or Sticky—to remove the existing Pinned position. Then, click on the Position type dropdown again, choose Pinned and select Section under Pin to. EXPLORE MORE TUTORIALS TUTORIAL Overflow TUTORIAL Position type TUTORIAL Combining sticky position & animations 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 Collaboration tools Rethinking how web design teams work together WEBINAR Working together Learn how Editor X agency leads Roee and Nofar refined their workflows to work better as a team and with clients. Plus, find out how effective collaboration can help grow a web design business in a panel with Editor X Product Lead Naama and Florence Brown of FLSY Studio. LOADING... EXPLORE MORE TUTORIALS WEBINAR The ultimate workflow for creating client sites with Michael Janda TUTORIAL Live comments TUTORIAL Roles & permissions TUTORIAL Working effectively with clients on Editor X Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Webinars Basics Thinking responsive-first design WEBINAR Breakpoints Revolutionize your approach to web creation by embracing responsive design. Learn best practices from Gali Erez, head of product at Editor X, and join Ido Hershkovitz, technical designer, for a demo showing how to create fluid sites on Editor X. LOADING... EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace WEBINAR Rethinking how web design teams work together WEBINAR The ultimate workflow for creating client sites with Michael Janda TUTORIAL Diving into the cascading rule on Editor X Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Layout & design Choosing a layout tool Tutorial Grid Layouting tools provide an efficient way to arrange, align and distribute space among elements in responsive design. Grid, Layouter and Repeater are all examples of layouting tools you can use to display content on your sites. In this lesson, you’ll understand the responsive behaviors and benefits of each layout tool so you’ll know which one to use for your next design. LOADING... Article Exercise Transcript When should you use a Repeater? Repeaters are ideal for designs that include multiple items with the same design and layout, but different content. You can find more information about repeaters here . When should you use a Layouter? Go with Layouters for items with unique designs that may adjust in size and position as the viewport changes. With layouter and repeater you can also set the layout to interactive layouts like sliders. Items may wrap automatically as the screen size changes and this happens even without moving to a new breakpoint. For more information about Layouters click here . When should you use a grid? The grid is a layout tool that allows you to build precise, pixel-perfect designs. It lets you build individual column and row definitions using units of measurement to control the grid structure at each breakpoint and position the elements accordingly. You can learn more about the grid here . Note : In some cases you may also want to combine these layouting tools. For example, if you’re using a Layouter or a Repeater, you can choose to adjust the grid inside any of their items. By doing this, you can align elements inside individual Layouter or Repeater items according to the grid’s cells. This gives you more precise control over how your content is distributed. 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 →