Create a Custom Header and Footer¶
The Header and Footer aren’t found in the Component library, rather you can enable them in Page Properties (where you can also disable the standard Salesforce header). The best practice is to create your custom header and footer as a master page, and then create child pages defining the body of each page that you want to have the custom header and footer (that way you don’t have to re-build the header/footer on every page). See a detailed example of creating a branded header in a master page in this tutorial.
Step 1: Click on Skuid Page > Layout to configure the header and footer.¶
- Click on the page title.
- Click Layout.
- (Optional) uncheck Show Salesforce Header and Show Salesforce Sidebar.
- Check Show Custom Header and Show Custom Footer.
The header and footer regions will now appear on your page.¶
Now you can drag and drop components into the header and footer.
Step 2: Click on your header to edit its properties.¶
- Click on the Header.
- Configure basic header properties, like making it Sticky. This means that no matter how far you scroll down the page, your header will always appear on top.
Configure header styling.¶
- Click the Styles tab to configure your Header styles, such as Background and Border and Padding.
- Click Style Attributes to add more.
Step 3: Drag and drop components into your header and footer.¶
- Let your imagination run wild!
- We typically like using a responsive grid to space out a logo image, navigation, etc.
- If you need some inspiration, check out our Build a Branded Header use case.
Step 4: Click Save, then click Preview to open your new page in a new tab.¶
Success! You new header and footer will be displayed!¶
For the body of this page I used a stock photo from https://stockphotos.io. I set it as the page background in Page Properties > Styles.
Troubleshooting Tips, or, “Learn from our mistakes!”¶
Sometimes images in headers can cause problems if they’re taller than the header would normally be. If you suspect this is the case, go into Image > Styles and under size choose “set height” and specify a smaller Minimum Height of your image.