Library Tutorial library Browse the full collection of tutorials, exercises and more. 89 Results Basics Format type All formats Sort by Featured Topics Filters 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 Topics All Topics Close menu 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 89 Results

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!

Learn and enhance your web design skills Choose from courses, video tutorials, exercises and webinars to match your learning style and start building extraordinary websites on Editor X. Learn by topic: Basics Sizing & units Positioning Dev & code Breakpoints Interactions See all topics Get started with the 101 course 24 Lessons 8 Challenges 1 Project site Learn the essentials of responsive web design and how to create on Editor X. Follow along at your own pace with a curriculum of in-depth lessons and challenges. Start course Key chapters GETTING STARTED 4 lessons | 1 challenge RESPONSIVE WEB DESIGN 5 lessons | 1 challenge ADDING CONTENT 4 lessons | 1 challenge LAYOUTING 4 lessons | 2 challenges View all → Explore tutorials from the essentials to the advanced Dive into key responsive design concepts, individual feature tutorials and hands-on exercises to gain the skills you need to bring your designs to life. Learn key concepts of responsive design TUTORIAL Breakpoints part 1 Breakpoints TUTORIAL Sections Structure TUTORIAL Containers Structure TUTORIAL Breakpoints part 2 Breakpoints Explore the basics → Sharpen your layout skills TUTORIAL Measurements Sizing & units TUTORIAL Grid Grid Sizing & units WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL Choosing a layout tool Grid Repeater Layouter Explore layout tutorials → Create engaging interactions TUTORIAL Click & hover interactions Interactions TUTORIAL Applying hover interactions to Repeater items Interactions Repeater TUTORIAL Lottie animations Interactions Images & media WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration Explore interaction tutorials → Looking for something in particular? Browse by topic → Webinars Go in-depth with interactive sessions covering web design trends, best practices, live demos and more. Join us live MONTHLY INTRO WEBINAR Mar 29, 3:00 PM Save Your Spot Live intro webinar with product manager Jonathan See all upcoming webinars → Watch on demand WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration WEBINAR How to get a full book of web design clients Freelance & business Discover more → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care → Editor X is transitioning to Wix Studio , our new platform for agencies and freelancers. Learn more

Add a Title Add a Title Add a Title

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 Library Basics Finding & fixing issues using the Site Checker Tutorial Workspace Explore how to quickly find and fix site issues using the Site Checker to create a seamless web experience. 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 check your site using the Site Checker Open the editor to try it out → What is the Site Checker? The Site Checker is a smart tool that scans your site to identify problems and recommend fixes related to breakpoints, page structure, content and more. How to use it You can find the Site Checker under Tools in the top bar. Once you click Check Page , the Site Checker scans the page you’re currently editing on all breakpoints and you’ll see a list of issues detected. It also scans the full site for potential security concerns. You can use the tabs to switch between page issues and site issues. Click on any item to navigate directly to the source, or select Learn More to understand more about the issue. Once you make the suggested fixes, click Check Again , and the issue will be removed from the list. If a suggested fix isn’t relevant, click on the breadcrumbs to the right of the item and select Ignore. You can always revisit it by selecting Ignored Issues from the dropdown. Types of issues detected Once the scan is done, you’ll see a list of suggested fixes related to: Private data visible in content collections Hidden elements Missing header sections Low image quality Small fonts Missing links Default content that hasn’t been changed Overflowing content Content not adapted to all breakpoints Missing or multiple H1 tags Learn more about any of the issues listed above here . When to use the Site Checker. You can check your site at any time during the creation process, as many times as you need. It’s best to scan before going live, or after changing or building a new page. EXPLORE MORE TUTORIALS TUTORIAL Overflow TUTORIAL Measurements TUTORIAL Inspector panel Go to library →

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 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 →

Library Sizing & units Discover how sizing properties and units affect how elements behave when the viewport changes. 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 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 TUTORIAL Grid Grid Sizing & units WEBINAR Thinking responsive-first design Breakpoints Structure Sizing & units TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons TUTORIAL Layouter Layouter Sizing & units TUTORIAL Measurements Sizing & units TUTORIAL Sizing Sizing & units No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Dynamic content Datasets Tutorial Content manager Use datasets to display content from a collection in the Content Manager on a site, and update the content without touching the design. You can use datasets to allow multiple pages to retrieve content from the same collection but change how it’s displayed from one page to another. LOADING... Article Exercise Transcript Adding a dataset Once you’ve added a collection and created your design with corresponding elements, you can add a dataset. Select the element you want to connect to your collection—a Repeater for example–and click the Connect to Data icon. In the panel that opens, choose Create Dataset and select the collection you want to connect to. You can also name the dataset. When that’s done, click Create . The dataset will appear as an icon on the canvas with the name you assigned it. Connect elements to your collection Select your desired elements and connect them to the corresponding field in your collection. You can only connect elements to their corresponding field type: images to an image field, text to a text field, etc. If you’re connecting a Repeater, select the Repeater and connect each component from the panel. You only need to do this once, and all of the other Repeater items will update to display the content from your collection. Setting the dataset mode settings Click on the dataset and choose Settings. In the setting panel, you can choose from 3 modes: Read-only , Write-only and Read & Write . The dataset mode determines how visitors can interact with the collection on your live site. Read-only : Elements can read and display content from your collection, so site visitors can view it. Write-only : Visitors can interact with user input elements and a submit button on your live site to add content to your collections. You can’t display collection content. Read & Write : Page elements can display content from the collection and visitors can interact with user input elements and a submit button on your live site to add or edit content in a collection. Setting the number of items to display Control how many items from the collection are displayed in a Repeater or gallery by entering the value under Number of items to display . Filtering content Create filters to display content based on a set of conditions that you apply. Select the dataset icon and open the settings panel. Click Add Filter . From the Field dropdown, choose which field from your collection you want to use to filter your content. Use the Condition dropdown to choose which criteria to filter by. For the Value source choose between: Manual entry: filter by a specific value or text you enter Another dataset: filter this dataset based on another one User input element: let site visitors filter page content by selecting an option from an input element such as a dropdown Sorting content Set up content to display in the order you want by adding sort criteria. Open the Dataset Settings panel, and under Sort choose Add Sort . Choose which field to sort by and under the Order dropdown select how you want the field to be sorted. Editing sort and filter settings You can adjust or remove filters and sorting properties from the Dataset Settings panel. Find the property you set, click on the 3 dots next to it and choose to either Edit or Delete it. EXPLORE MORE TUTORIALS TUTORIAL Content manager TUTORIAL Dynamic pages WEBINAR Content manager part 2 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 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 →

Library Grid Explore how to create intricate layouts using grid. 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 12 Results Basics Topics Format type All formats Sort by Featured Filters 12 Results WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Grid Grid Sizing & units TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL How to create a split section using grid Grid TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Creating a sticky text scroll effect Scroll effects Grid TUTORIAL Creating a full page sticky scroll effect Scroll effects Grid WEBINAR The new OFFF Barcelona website: How we built it Interactions Repeater Grid Scroll effects Inspiration 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!