Footers
How to add and style footers.
Last updated
Was this helpful?
How to add and style footers.
Last updated
Was this helpful?
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
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.=
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.
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.
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 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:
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:
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.
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.
The image will take up the full background space of the footer.
Adjusting the Image Opacity
More information on footers is coming soon.
To add a 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.
Like many other parts, , , , , , , and can be adjusted using the property editor on the right, once the footer, or parts within the footer, have been selected.
To add a 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.
Adjusting the 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.
Rows and columns
Buttons
Icons
Links
Lists
Text
Customizing and formatting
