top of page

126 items found for ""

  • Team Management Tutorials | Academy X | Editor X

    Library Team management Learn how to set up and manage team accounts with custom roles and permissions so each collaborator gets a tailored editing experience. 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 3 Results Basics Topics Format type All formats Sort by Featured Filters 3 Results WEBINAR Rethinking how web design teams work together Working together Team management Freelance & business TUTORIAL Roles & permissions Team management TUTORIAL Team accounts Team management No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

  • Creating a scroll snap effect with a Layouter Tutorial | Editor X

    Home Library Layout & design Creating a scroll snap effect with a Layouter Tutorial Layouter Follow along with Product & Design Advisor Vicky Borges to create a scroll snap effect using a Layouter. In this example, we’ll create a design that uses 4 images scrolling behind pinned text and a button. 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 Follow these steps in the editor Part 1: Set up the section. 1. Select the section where you want to create the scroll snap effect 2. Set the section to 100vh and remove the minimum height 3. Drag in a Layouter 4. Stretch the Layouter to fill the section Part 2: Add and format your content. 5. Add the image you want to each Layouter item and stretch it to fill 6. Select the Layouter 7. Change the Display type from Mosaic to Slider 8. Set the Direction to Top to Bottom 9. Remove the Vertical margins by setting them to 0px 10. Activate Scroll snap align and set it to Center 11. Set the minimum height of each Layouter item to 100vh 12. Select your page header and set the Position type to Pinned 13. Set the header to Overlap next section 14. Add the elements that you want to the Layouter section. In this case we have text and a button 15. Position the elements in the center of the section 16. Set the Position type of your items to Pinned 17. Pin the items to the section Result: When we preview the page, the images scroll while the header, text and buttons stay fixed. EXPLORE MORE TUTORIALS TUTORIAL Slides Layouter TUTORIAL How to make a gallery that plays on infinite loop TUTORIAL Building a slider using a Layouter Go to library →

  • Building a proportionally scaling design Tutorial | Editor X

    Home Library Layout & design Building a proportionally scaling design Tutorial Sizing & units Follow along with Technical Designer Ido Hershkovits as he explains how to create a design that keeps its relative size and position as the browser size changes. 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 proportionally scaling design Open the editor to try it out → Understanding sizing properties Elements can be set to Fixed , Fluid or Scale proportionally from the Inspector panel . Fixed sizing means an element’s width remains the same, no matter how the browser width changes. Fluid sizing means an element’s width (and sometimes height) changes depending on the screen size. Elements such as images can be set to Scale proportionally , so they keep their relative width and height. For your design to scale proportionally, make sure your elements are set to Fluid and Scale proportionally . Understanding fixed versus fluid units The units you use give you control over the way elements resize. You can find these units of measure under Sizing in the Inspector panel. Pixels (px) are a fixed unit. Elements with a width or height set to pixels keep their size no matter how the viewport changes. If we use a fluid unit like percentage (%), the element’s size changes relative to the width of its parent container. Other relative units in responsive design include viewport height (vh), viewport width (vw) and fractional units (fr), which you can learn more about here . For a design to scale proportionally, elements should be in fluid units. How to position elements Under Position in the Inspector panel , we can set docking and margins to control the positioning of elements while they scale up or down. Docking lets us define how an element is positioned relative to its parent. Elements automatically dock to the nearest edges of their parent container, but you can override this and dock to the top, left, right, bottom, or a combination of each. Adding margins creates a buffer between an element and what’s around it. After docking an element, use margins to maintain a set distance between it and the edges of the parent container. You can also add margins to the sides of an element that aren’t docked. Margins can be set to a fixed number of pixels, but to scale proportionally, they should be set to a percentage. How to set your section height to scale proportionally Sections automatically fill the browser width, but you can adjust height settings however you need to. If a section has a minimum height, it will reach that value and no longer become shorter—even if the elements inside continue to scale down. We can remove the minimum height by setting it to None . When the minimum height is removed and the section height is set to Auto, the section height is determined by the content within the section. Add margins around the section content, so the section grows and shrinks proportionally. How to add text that scales proportionally When adding text, follow the same position rules as above and dock text elements with margins set to %. You’ll also want to change the text from a fixed font size. Using the text editor, turn on Scale text and set a minimum and maximum font size. It takes some trial and error to determine the best values, but once you find the sizes that work, your text will scale smoothly as you resize the screen. Result: With these concepts in mind, you can adjust your element properties to create designs that scale beautifully to fit any viewport size. Remember you can also readjust properties such as position, docking and margins, section height and text scale at different breakpoints. EXPLORE MORE TUTORIALS TUTORIAL How scale text works TUTORIAL Measurements TUTORIAL Designing a Brick Layouter with max content Go to library →

  • Workspace Tutorials | Academy X | Editor X

    Library Workspace Discover your workspace and get to know the tools and features 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 6 Results Basics Topics Format type All formats Sort by Featured Filters 6 Results WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Element hierarchy Workspace Structure TUTORIAL Finding & fixing issues using the Site Checker Workspace TUTORIAL Best practices from a technical designer Workspace TUTORIAL Inspector panel Workspace TUTORIAL Workspace Workspace No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

  • Anchors Tutorial | Academy X | Editor X

    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 →

  • Web Design Industry Tutorials | Academy X | Editor X

    Library Web design industry Stay at the forefront of your field with tutorials covering the art and business of 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 35 Results Basics Topics Format type All formats Sort by Featured Filters 35 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 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 Tabula Rasa #1: Web creation on the fly Inspiration WEBINAR Digital design in 2022: How to grow as a creator Freelance & business 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!

  • Creating a sliding menu using Velo Tutorial | Editor X

    Home Library Dev & code Creating a sliding menu using Velo Tutorial Velo Follow along with Product Manager Jonathan Tsodikovitch as he takes you through the steps to create a sliding navigation menu using Velo. In this tutorial, the menu we create slides out from the right side of the page when users click the icon. 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 → Jonathan Tsodikovitch Product Manager I’m a Product Manager for Editor X. I have a Bachelor’s Degree in Instructional Technology from HIT. During my free time, I enjoy hiking, camping, and snowboarding. I live by the motto “coffee on workdays, tea on weekends." Go create on Editor X → LOADING... Guide Transcript How to create a sliding navigation Open the editor to try it out → Part 1: Create the section or page. Set up your section or page. In this example, we’re using a simple, two-column section with a Stack containing text on the left and a transparent video on the right. Part 2: Set up the menu and button. 1. Drag in a container from the Add panel 2. Set the background color 3. Dock the container to the top of the section 4. Set the top margin to 0px so the container is touching the top edge of the section 5. Change the container’s Position type to Pinned 6. Pin the container to Page 7. In addition to the docking to the top, dock the container to left and right with margins of 0px on either side 8. Set the container’s height to 100vh and make sure the minimum height is set to None 9. Apply a 2X1 grid to the container so there are 2 columns 10. Change the Column Width of the left column from 1fr to 5% Note: In this example, we want the sliding panel to appear on the right side of the screen. If you want it to appear on the left, then change the column width of the right column instead. Then continue with the following steps on the opposite side to the one we’ve said. 11. Add your menu items to the right column. In this case we used 3 buttons and stacked them 12. With the Stack selected, set the size to 100% width 13. Make sure the margins are set to 0 14. Add a container to the left grid column and stretch it to fill 15. Add the clickable element that will work as the button to expand and collapse the sliding menu. In this example, we’re using a two line menu and rotating it 90 degrees to be vertical 16. Resize and align the shape to the middle 17. Select the container that has the two-column grid and undock it from the left side 18. Make sure the width is 100vw 19. Add a margin to the right of -95% so the right grid column moves off the canvas, but the left column with the button is still visible Part 3: Rename elements in Velo. It’s a good idea at this point to rename elements by setting up element IDs in Velo. Turn on Dev Mode Change the main container’s element ID. We’ll call it nav Change the button’s element ID. For this one we’ll use navOpen Note: Before moving on, check that the navigation bar looks the way you want it to at each breakpoint. Part 4: Create the sliding navigation with Velo. 1. Copy and paste the following code snippet: import wixAnimations from 'wix-animations'; import wixWindow from 'wix-window'; let navTimeline; let screenSizeInterval; $w.onReady( function () { let open = false ; $w('#navOpen').onClick(() => { if (open == false ) { screenSize(); screenSizeInterval = setInterval(screenSize, 500) open = true ; } else { clearInterval(screenSizeInterval); navTimeline = wixAnimations.timeline().add($w('#nav'), { x: 0, duration: 300, easing: 'easeInOutCubic' }).play(); open = false ; } }) function screenSize() { wixWindow.getBoundingRect() .then((windowSizeInfo) => { let windowWidth = windowSizeInfo.window.width; navTimeline = wixAnimations.timeline().add($w('#nav'), { x: -(windowWidth * 0.95), duration: 300, easing: 'easeInOutCubic' }).play(); }); } }); 2. If you used element IDs other than nav and navOpen, don’t forget to adjust them in the code snippet A closer look at what’s happening in Velo: For a more in-depth look at Velo and the APIs being used in this tutorial, click here. Result: In preview mode, when you click on the menu icon, the navigation menu will pop out from the left. When you click the icon again, the menu will slide back to the right and close. Note: You can change the duration and easing to suit your design. Also remember that if you change the container size, you need to readjust the negative margin and adjust the windowWidth in Velo. EXPLORE MORE TUTORIALS WEBINAR Going deeper into Velo TUTORIAL Multi-state box TUTORIAL How to build a full height section Go to library →

  • Vespa Search | Academy X 3.0

    Add a Title Add a Title Add a Title

  • Velo Tutorials | Academy X | Editor X

    Library Velo Get to know Velo, a full-stack development solution that allows you to add custom code to an Editor X site. 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 How to add code to Editor X sites with Velo Velo TUTORIAL Multi-state box Velo Interactive components TUTORIAL Building a slider using a Layouter Velo TUTORIAL Building a custom badge using a Multi-state box Interactive components Velo TUTORIAL Creating a sliding menu using Velo Velo TUTORIAL Intro to Velo Velo TUTORIAL Creating infinite scrolling text with Velo Velo WEBINAR Going deeper into Velo Velo No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

  • Join live web design webinars | Editor X

    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 →

  • How to create a split section using grid Tutorial | Editor X

    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 →

  • Only for the Events App - Don not delete | Academy X 3.0

    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

Search results

Can’t find what you’re looking for?

Thank you for submitting!

bottom of page