Footers
How to add and style footers.
What is A Footer?
A footer is a designated area appearing at the bottom of a webpage or app screen. It usually spans the full width of the page and contains various types of content and links that provide additional information and navigation options to users.
Location in the Parts Library: Base Parts > Layout > Footer
Some Common Uses of Footers
Navigation: Footers often contain secondary navigation links, such as links to less frequently visited pages like Terms of Service, Privacy Policy, and Help or FAQ sections.
Contact Information: A footer is a common place to provide contact details, including addresses, phone numbers, email addresses, and sometimes even maps or business hours.
Social Media Links: Footers often include icons or links to the organization’s social media profiles, encouraging users to connect on platforms like Facebook, Twitter, LinkedIn, YouTube, and Instagram.
Copyright and Legal Information: Footers typically include copyright notices, disclaimers, and other legal information that needs to be accessible but not intrusive.
Newsletter Sign-Up: The footer can be a place for users to subscribe to newsletters or mailing lists.
Site Map: A site map in the footer provides a comprehensive list of links to the major sections and pages of the site, aiding navigation.
Awards and Certifications: Organizations may use the footer to display awards, certifications, or memberships in professional associations to build trust and credibility.
Miscellaneous Links: Links to blogs, careers pages, media kits, or other informational resources that support the main content of the site can be placed in the footer.=
Why Are Footers Useful?
Footers are useful for several reasons. They:
Enhance User Experience: Footers provide users with additional navigation options and important information without cluttering the main content area, enhancing the overall user experience.
Improve Accessibility: They offer quick access to essential information and resources, especially for users who scroll to the bottom of the page seeking further options or details.
Provide Consistency: A well-designed footer provides a consistent look and feel across all pages of a website or app, reinforcing the site’s structure and branding.
Improve Trust and Credibility: Including contact information, legal notices, and certifications in the footer helps build trust and credibility with users, showing that the site is legitimate and professionally managed.
Offer SEO Benefits: Footers can contribute to search engine optimization (SEO) by providing additional internal links, which can help search engines crawl and index the site more effectively.
Improve User Retention: By offering links to related content or social media profiles, footers can help keep users engaged with the site or app and encourage further interaction.
Support Compliance: Including necessary legal information such as privacy policies and terms of service in the footer ensures that the site complies with legal and regulatory requirements.
Isn't There Already a Footer in My App?
Yes, all apps come with a footer, even the skeleton app. The footer can be removed if you don't want it there. The footer can be edited as appropriate or switched out for one of the footers in the parts library, then edited as needed.
What is the Difference Between Bottom Navigation and Footers?
While both bottom navigation and footers are positioned at the bottom of the interface, they serve different purposes and contain different types of content. Bottom navigation is designed for quick and easy access to primary sections of an app or site, enhancing usability and user experience, particularly on mobile devices. Footers, on the other hand, provide supplemental information, secondary navigation links, and various resources, contributing to the overall structure and credibility of the website or app.
The Components of a Footer
The footer (parent) houses several different parts (children). This will often include a row (or rows) containing columns. Inside the columns will likely be:
Footer headers containing text
Images
Buttons that may link to social media accounts or other pages, such as contact pages
Text links
The following shows some key parts within a footer and their parent/child relationship:
The Alignment of the Footer Row
In the following example of a footer, you'll see that the columns are spaced nicely across the span of the canvas, with space between the columns. The spacing of the columns within the row can be changed using the 'alignment' property on the row.
Here's the row alignment property in action:
Editing the Link Text
The text within the link is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.
Linking the Footer Items
To add a link to the items in your footer, first select the text that needs to be linked, then navigate to the parent part which is "Link". On the right property editor panel, select 'link to', and you'll see the current list of pages within your app that you can link to. If the page you want to link to within your app hasn't been created yet, select 'new page'. You'll then be prompted to complete some details for your new page. You can also link to an external URL.
Adding or Removing Columns
To add another column to your footer, an easy way to do that is to select an existing list column and duplicate it using the edit menu in the top toolbar. Then select the column you've duplicated, and move it using the 'move left' or 'move right' options in the edit menu in the top toolbar, or by using the right property editing panel.
Delete any parts you don't want by selecting them, then using the delete option in the edit menu in the top toolbar, or using the right property editing panel.
Styling the Footer
Like many other parts, borders, shadow, rounding, opacity, rounding, colors, and color gradients can be adjusted using the property editor on the right, once the footer, or parts within the footer, have been selected.
Adding an Image to a Footer
To add a background image to a footer, select the footer. In the property editor on the right, click on Image > Default to select your image from the Media Gallery or upload an image from your device.
The image will take up the full background space of the footer.
Adjusting the Image Opacity
Adjusting the opacity of the background image is the same as adjusting the opacity of a regular image. Go to the Decoration Editor in the right property menu, and go to the ‘Image Opacity’ tab. You'll need to get the opacity of the image right so that you can adequately see the contents of the footer.
More information on footers is coming soon.
Related Information
Last updated
Was this helpful?