What does MAUD do?

Published on
September 22, 2023

What does MAUD do?

MAUD (Mobile and Desktop Underlay) is a feature in Webflow that allows you to make certain sections of your website fixed or sticky. This means that as the user scrolls through the page, these sections will remain visible at a specific position, providing a seamless user experience. MAUD is particularly useful for creating sticky headers, footers, or sidebars, as it ensures that important information or navigation menus are always accessible to the user.

Benefits of Using MAUD:

  1. Improved User Experience: MAUD helps improve the overall user experience by providing easy access to important elements, such as navigation menus, search bars, or call-to-action buttons, regardless of the user's scroll position.

  2. Increased Engagement: By keeping important components in view at all times, MAUD can increase user engagement. Users are more likely to interact with sticky elements, leading to higher conversion rates and goal completions.

  3. Design Flexibility: With MAUD, you have the freedom to design unique and creative layouts that incorporate fixed or sticky elements. It allows for innovative web designs that can enhance your website's visual appeal and user interaction.

  4. Responsive Behavior: MAUD is responsive by nature, meaning that the fixed or sticky elements will adapt and adjust according to different screen sizes and devices. This ensures a consistent experience across desktops, tablets, and mobile devices.

How to Use MAUD in Webflow:

  1. Select the Element: Identify the element on your webpage that you want to make sticky or fixed. This could be a header, footer, sidebar, or any other section you want to keep in view.

  2. Set Position: In the Webflow Designer, select the desired element and go to the Styles panel. Under the position settings, choose "Fixed" or "Sticky" from the drop-down menu.

    • For fixed elements, the selected element will stay fixed at a specific position on the screen, regardless of scrolling.

    • For sticky elements, the selected element will remain in view until it reaches a specific position relative to the viewport, and then it will scroll with the rest of the page.

  3. Configure Settings: Depending on your requirements, you can further customize the behavior of the sticky or fixed element. In the Styles panel, you can adjust the top, bottom, left, or right values to position the element precisely where you want it.

  4. Preview and Publish: Once you have set up the MAUD feature for the desired element, preview your website to see how it behaves during scrolling. Make any necessary adjustments and then publish your website to make the changes live.

By using MAUD effectively, you can enhance the user experience of your website and improve engagement with your content, ultimately leading to better conversion rates and user satisfaction.

Additional questions:

  1. How can I create a sticky header in Webflow?
  2. What are the benefits of fixed elements in web design?
  3. Does MAUD work on all devices and screen sizes in Webflow?