Homepage: footer

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: 

1. Build the footer structure
2. Design the footer
3. Make the footer a Symbol 

Follow along and download the assets for this lesson.

Build the footer structure

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: 

1. Open the Add panel
2. Drag a Section into the Navigator and place it under the existing 3 Sections

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: 

1. Open the Style panel
2. Click into the Selector field
3. Choose “Section” from Existing classes

Add a Container to the new Section to keep our elements neatly bound:

1. Open the Add panel
2. Drag a Container inside the new Section
3. Select the Container and click into the Selector field
4. Choose “Container” from Existing classes

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. 

Design the footer

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: 

1. Open the Assets panel
2. Drag your logo (e.g., “Logo.svg”) into the Container in your newest Section

Add a Div block to hold your footer content:

1. Open the Add panel
2. Drag a Div block inside the Container 
3. Select the Div block and click into the Selector field
4. Give it a class (e.g., “Footer holder”) 
5. Drag the logo into the “Footer holder” Div block and grab a handle to resize it (e.g., 187 by 27 pixels)

Center the “Footer holder” Div block content: 

1. Select the “Footer holder” Div block and open Style panel > Layout
2. Set Display to Flex
3. Set Direction to vertical and Align to center

Let’s add a Paragraph to the footer and add some breathing room between it and the logo:

1. Open the Add panel and drag a Paragraph into the Container under the logo
2. Select the logo and open Style panel > Spacing
3. Add 30 pixels of bottom margin

To prevent the Paragraph from spanning across the entire width of the Container, let’s set a maximum width constraint on it: 

1. Select the Paragraph 
2. Open Style panel > Size
3. Set the Max W (maximum width) to 600 pixels
4. Delete any unnecessary text from the Paragraph

We’ll add lower navigation links to the footer by first dragging in a Collection list: 

1. Open the Add panel and drag a Collection list inside the “Footer holder” Div block under the Paragraph
2. Choose “Projects” from the Source dropdown in the Collection list settings modal to link your Collection

To complete our lower navigation, let’s add a Link block to a Collection item:

• Open the Add panel and drag a Link block into any 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: 

• Open the Add panel and drag a Text block inside the Link block

To remove the default link styling, let’s adjust the style of all our links:

1. Select the Link block
2. Open the Style panel and click into the Selector field
3. Choose All links from HTML tags

Turn off the default underline and choose a different link color: 

1. Open Style panel > Typography
2. Set decoration to “None” 
3. Click the color picker and set a new color (e.g., “white”) 

Let’s link our Text block to our Collection data so we can automatically pull in each of our project’s names: 

1. Select the Text block inside the Link block
2. Click the label’s cog icon to open the Text block’s settings
3. Check “Get text from Projects”
4. Open the “Select field” dropdown and choose the field to link to the Text block (e.g., “Project name”) 

We’ll use Grid to display the project names in an orderly fashion: 

1. Select the Collection list
2. Open Style panel > Layout 
3. Set Display to Grid

By default, our project names appear in a 2 by 2 layout. Let’s spread out our project names over a single row: 

1. Select the Grid and click Edit grid under Layout in the Style panel
2. Press the “trash” icon next to one row to delete it
3. Press the columns “plus” icon twice to add 2 additional columns

Let’s create even spacing between the items in our Grid: 

1. Select the Grid
2. Open Style panel > Layout
3. Set Align to “Justify items: center”

Create some breathing room between the Paragraph and the Grid:

1. Select the Paragraph
2. Set the bottom margin to 30 pixels

Let’s create a combo class for our footer Section:

1. Select the Section containing the footer
2. Open the Style panel and click into the Selector field
3. After the current “Section” class, type in a new combo class (e.g., “Footer”) 

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:

1. Open Style panel > Backgrounds
2. Click the color picker and set the color to the main brand color

Let’s add 3 social media buttons contained in a wrapper:

1. Open the Add panel
2. Drag a Div block into the “Footer holder” Div block under the Collection list wrapper
3. Open the Style panel and click into the Selector field
4. Give the Div block a class (e.g., “Social wrapper”) 

We’ll add Link blocks inside the “Social wrapper” Div block to create clickable links: 

1. Open the Add panel and drag a Link block into the “Social wrapper”
2. Open the Assets panel and drag a social media Image into the Link block (e.g., “Twitter”) 
3. Select the Link block, click into the Selector field and add a class (e.g., “Social link”) 
4. Copy and paste the “Social link” twice more for a total of 3 social media links

Let’s update the 2 additional social link Images: 

1. Double click the second social link Image and choose “Replace image” 
2. Choose your new social Image from your Assets panel (e.g., “Instagram”) 
3. Repeat the above 2 steps to replace the third Image (e.g., “LinkedIn”)

Evenly space out the social links and give them some breathing room: 

1. Select a “Social link”
2. Open Style panel > Spacing
3. Add left and right margin of 10 pixels
4. Select the “Social wrapper”
5. Open Style panel > Spacing
6. Add top margin of 30 pixels

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:” 

1. Select a “Social link” and click the label’s cog icon to open the link settings
2. Type your social channel’s external URL in the URL field
3. Repeat the previous 2 steps for the 2 remaining “Social links”

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: 

1. Select the Collection list
2. Open Style panel > Typography
3. Set the font weight to a higher number (e.g., “600 - Semi bold”) 

Make the footer a Symbol

Let’s make the footer a Symbol so we can easily reuse it throughout our project: 

1. Select the Section that contains our footer elements
2. Right click the Section’s label and choose “Create a Symbol” from the menu
3. Give your Symbol a name (e.g., “Footer”) 

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!