In this video we’ll take you through using overlays on your Framer site to create popups and dropdowns.
Why are overlays useful?
An overlay can be a popup, modal, dropdown or toast, with each one being important for the user experience (UX) of your site. Popups are great for bringing attention to signup forms, while a modal can help show additional information. A dropdown is used for menus, and a toast is used to show a success or fail notice to users – for example, when filling out a form, or clicking a button that needs a success label.
Quick steps
- Select your frame
- Navigate to the Overlays section in the right-hand side panel
- Select Relative or Fixed
- Adjust settings like Fill, Z Index (specifies the stacking order) and Page Scroll
- Create content in the overlay – this will only show when the the overlay is triggered (you can adjust trigger settings in the right-hand side panel)
- Test your overlay in the preview tab
