Fix the header and footer
Fix the header and footer on a single screen
To set the header and footer of your screen, follow the steps below.
- Select the screen you would like to edit.
- A preview of the screen will appear on the right side. Drag the gray sliders located on the sides at the top and bottom to adjust the header and footer respectively.
- Once you've adjusted your header and footer, click the Preview button to see how it looks.
Tips: How to create a Floating Action Button (FAB)
- From the Wireframe feature, head to where it says Screen Settings.
- Change the opacity to 0%.
- Add your button at the bottom and make sure to leave space between the screen and the button.
- Adjust the footer so that it's above the button.
- Lastly, see how it looks by clicking on the Preview button.
Fix the header and footer across multiple screens
If there's multiple screens that require the same header and footer settings, you can set it all in one go by following the steps below.
- Select the screens that you would like to set.
If the screens are all located next to one another, click the first screen while holding Shift and select the last screen to highlight all the screens in between.
If you have screens situated in different areas of your project screen, start off by selecting the first screen and hold Command ⌘ to select the rest of the screens.
- Once you've chosen your screens, adjust the header and footer by dragging the gray sliders located on the the right hand side of your screen.
- You'll notice a blue line move across the top of the screen. That's how you'll know that the header and footer settings have been successfully applied.
- To see how it looks, click the Preview button.