Design a reusable footer to act as a second navigation for your project.
When your site visitors scroll to the bottom of your page, encourage engagement with a footer that boasts a second navigation pointing to your projects, and easy access to your social media presence. Save design time in the future by turning the footer into a Symbol to reuse it throughout your project.
In this lesson you’ll learn how to add a reusable footer for navigation at the bottom of every page doing the following:
Follow along and download the assets for this lesson.
In our homepage design we have our navigation and 3 Sections, each of which contains our hero, our client projects, and our contact form.
Let’s add a fourth Section to hold our footer:
We can reuse the “Section” class on our new Section to bring along the 60 pixels of top and bottom padding we had styled before:
Add a Container to the new Section to keep our elements neatly bound:
Note: When you add a class to an element, all styling adjustments made on this element are saved in this class. You can reuse the class on new elements to automatically apply the styles saved in the class you created.
Thoughtful visual repetition is good design practice, so let’s add a logo to our footer to mirror the logo we included in our navigation at the top of our page:
Add a Div block to hold your footer content:
Center the “Footer holder” Div block content:
Let’s add a Paragraph to the footer and add some breathing room between it and the logo:
To prevent the Paragraph from spanning across the entire width of the Container, let’s set a maximum width constraint on it:
We’ll add lower navigation links to the footer by first dragging in a Collection list:
To complete our lower navigation, let’s add a Link block to a Collection item:
Note: A Link block is like a Div block, except it’s a clickable link. Learn more about Link blocks.
Let’s add a Text block inside the newly added Link block to give our visitors something to click in our lower navigation:
To remove the default link styling, let’s adjust the style of all our links:
Turn off the default underline and choose a different link color:
Let’s link our Text block to our Collection data so we can automatically pull in each of our project’s names:
We’ll use Grid to display the project names in an orderly fashion:
By default, our project names appear in a 2 by 2 layout. Let’s spread out our project names over a single row:
Let’s create even spacing between the items in our Grid:
Create some breathing room between the Paragraph and the Grid:
Let’s create a combo class for our footer Section:
Good to know: A combo class is a separate class built on top of another class. The separate class allows you to apply style overrides on the original class to create a unique variation. Read more about combo classes.
Let’s change the “Section Footer” Background color:
Let’s add 3 social media buttons contained in a wrapper:
We’ll add Link blocks inside the “Social wrapper” Div block to create clickable links:
Let’s update the 2 additional social link Images:
Evenly space out the social links and give them some breathing room:
Note: You can quickly add margin or padding to opposing sides of an element by holding down Option (on Mac) or Alt (on Windows), and dragging one of the margin or padding controls.
Add URLs to each “Social link:”
To make our project links stand out a bit more from the rest of the footer text, let’s adjust the weight of the text:
Let’s make the footer a Symbol so we can easily reuse it throughout our project:
Note: To quickly create a Symbol with shortcut keys, select the element you want to turn into a Symbol, and press Command + Shift + A (on Mac) or Control + Shift + A (on Windows).
Way to finish your page with a bang and keep your visitors engaged!