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!

Home Library Elements & components Anchors Tutorial Menus & navigation Anchors can be added to any element on your site so that you can link directly to them. You can link elements such as buttons to anchors so visitors are redirected to another location on a site, or create anchor menus to help users navigate longer pages. LOADING... Article Exercise Transcript Adding an anchor You can add an anchor to any element on a site, including sections and containers. Start by selecting the element you want to add an anchor to. From the Inspector panel under Anchor , turn the toggle on. Once it’s enabled, name the anchor so you can identify it. Linking to an anchor Once you’ve added an anchor, you can link elements such as buttons, images or text to it. When visitors click on the linked element, they’re redirected to where the relevant anchor is on the site. To link an element to an anchor, select it and choose the Link option from the floating action bar. Choose the anchor option from the list. Then select which page the anchor is on from the dropdown. In the second dropdown that appears, find the name of the anchor you created and select it. Note: You can link elements on one page to anchors on a different one. Adding an anchor menu Anchors can be displayed in an anchor menu that remains fixed in view as visitors scroll down a page. If you have a particularly long page with a lot of sections, anchor menus are useful for helping visitors navigate more easily. You can add an anchor menu from the Add panel. Choose from several pre-designed options under Menu & Search , and drag one onto the canvas. Note that the Position type of the anchor menu is automatically set to Pinned , so it remains in the viewport as you scroll through the page. Managing an anchor menu With the anchor menu selected, choose Manage Menu from the floating action bar. From there you can control which anchors to display in the menu, and rename them as needed. There’s also a pre-made option to link to the top of the page. Designing an anchor menu You can control the menu’s appearance from the Design tab in the Inspector panel. From there you can adjust the style, color, fonts and more of the menu items in both the regular and clicked states. Change the text alignment by clicking on the Layout icon from the floating menu while the menu is selected. EXPLORE MORE TUTORIALS TUTORIAL Custom menus TUTORIAL Creating a unique custom menu at each breakpoint TUTORIAL Creating a sliding menu using Velo 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 Overflow Tutorial Scroll effects Control what happens when elements like images, text or buttons extend past the borders of their parent container. You can control the overflow property of containers and sections, as well as Layouter and Repeater items. LOADING... Article Exercise Transcript Showing overflow Sections and containers are set to Show by default, so when content flows outside, it’s still visible on the site. Note: The way sections are arranged may also affect whether overflow content is visible. To change the arrangement, select the section that’s covering the content, choose the 3 dots from the floating action bar, and under Arrange choose which way to move it. Hiding overflow You can choose to Hide content if it flows outside the borders of its parent container, which means site visitors won’t see it. Showing overflow on scroll To enable content to scroll, add all the content to the section or container and set the overflow to Scroll . Next, choose the direction you want the content to flow in, either Vertical , Horizontal or Both . You can hide or show the scrollbar using the blue toggle. EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it WEBINAR 2021 Trends: How we built it 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 →

Library Interactions Discover how to create click and hover interactions on Editor X. 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 The mid-year trends report: How we built it Scroll effects Interactions Inspiration WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning TUTORIAL Lottie animations Interactions Images & media TUTORIAL Applying hover interactions to Repeater items Interactions Repeater TUTORIAL Click & hover interactions Interactions 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 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 Library Interactions & effects Click & hover interactions Tutorial Interactions Create engaging interactions triggered when visitors click or hover on site elements. Learn how to fully customize their behavior and how to tailor them for every breakpoint. LOADING... Article Exercise Transcript Adding triggers To add a trigger, click Interactions in the Inspector panel. Then, from the triggers tab, click Add a Trigger . Finally, choose Click or Hover .Note: On mobile and tablet breakpoints, interactions are converted to on tap interactions. Setting up an affected element Choose the element you’d like to add a click or hover interaction to. The element can be the same as the trigger element or it can be any other element on the canvas. Setting up an action type From the Action type dropdown, you can choose what happens when a visitor clicks or hovers on the triggered element. Setting up an interaction’s effect Choose which effect you’d like to apply to the target element. You can choose between the preset effects or create a new, custom effect. Using a preset effect From the dropdown menu, you can choose between preset effects including Grow, Shrink, Float and more. Then, you can set its duration by adding start and end points. You can also choose the effect’s easing type. Designing a custom effect To create a custom effect, choose Custom from the Effect dropdown. Name the effect and hit Start Designing . Navigating between initial state and effect design From the dropdown, you can navigate between the element’s initial state—the way it will look when the page loads— and the element’s effect in order to choose which one you want to design. Adjusting & designing the element Under Adjust , you can edit the element’s appearance and its transform properties. You can change the element’s opacity, rotate it, and set the scale, skew, and translate values in their relevant units of measure. Depending on the type of element you select, you can also edit the fill color & opacity, border, corners, shadow, text and spacing. Timing the effect When editing an effect from the floating menu, you can set its duration by adding start and end points and choosing its easing type. Click Done to complete the setup. Removing and editing interactions To remove an interaction, click on the trash icon next to the trigger’s name. If you would like to edit it, click on the name of the interaction. EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it TUTORIAL Combining sticky position & animations TUTORIAL Creating a changing gradient background on scroll 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 →

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

Home Webinars Web design industry 2021 Trends: How we built it WEBINAR Inspiration Watch our in-focus webinar for a behind-the-scenes look at how we built our award-winning 2021 web design trends report on Editor X. Learn how to use advanced tools like code-free interactions, overflow, sticky position and grid. LOADING... EXPLORE MORE TUTORIALS WEBINAR The mid-year trends report: How we built it WEBINAR The new OFFF Barcelona website: 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 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 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 →