Homepage: footer

When the guests who navigate your site reach the bottom of the page, encourage interaction with a footer that showcases a second navigation leading to your projects and offers easy access to your social media profiles. Save time on design in the future by converting the footer into a Symbol for repetitive use in your project. 

In this tutorial, you will discover how to include a reusable footer for navigation at the end of each page by following these steps:

1. Create the structure of the footer
2. Style the footer
3. Transform the footer into a Symbol

Join in and obtain the resources needed for this tutorial.

Create the footer structure

In our homepage layout, we feature our navigation and 3 Zones, each containing our main image, our client projects, and our contact form. 

Let’s introduce a fourth Zone to store our footer: 

1. Access the Add panel
2. Insert a Zone into the Navigator and position it below the existing 3 Zones

We can apply the “Zone” class to our new Zone to maintain the 60 pixels of padding at the top and bottom that we previously styled: 

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

Include a Container within the new Zone to organize our elements neatly:

1. Access the Add panel
2. Drop a Container into the new Zone
3. Pick the Container and click into the Selector field
4. Choose “Container” from Existing classes

Remember: When assigning a class to an element, all styling modifications performed on this element are saved in that class. You can reuse the class on new elements to automatically apply the saved styles from the class you established. 

Style the footer

Deliberate visual repetition is a commendable design approach, so let’s incorporate a logo into our footer to echo the logo integrated into our navigation at the page’s top: 

1. Access the Assets panel
2. Drop your logo (e.g., “Logo.svg”) into the Container in your latest Zone

Introduce a Div block to contain your footer content:

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

Align the content of the “Footer holder” Div block in the center: 

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

Let’s include a Paragraph in the footer and provide some spacing between it and the logo:

1. Access the Add panel and insert a Paragraph into the Container beneath the logo
2. Select the logo and access Style panel > Spacing
3. Add 30 pixels of bottom margin

To prevent the Paragraph from spanning the full width of the Container, let’s set a maximum width restriction: 

1. Select the Paragraph 
2. Access Style panel > Size
3. Specify the Max W (maximum width) as 600 pixels
4. Remove any redundant text from the Paragraph

We will insert lower navigation links into the footer by initially placing a Collection list: 

1. Access the Add panel and drop a Collection list inside the “Footer holder” Div block below the Paragraph
2. Choose “Projects” from the Source dropdown in theSettings for the list of collections popup to connect your Grouping

In order to finalize the lower navigation, we should include a Connection section to a Assembly element:

• Initiate the Incorporate panel and pull a Connection section into any Assembly element

Reminder: A Connection section is similar to a Division element, except it functions as a clickable hyperlink. Explore more about Connection sections.

Let’s introduce a Documentation section within the freshly incorporated Connection section to provide our users with something to interact within our lower navigation:

• Initiate the Incorporate panel and pull a Documentation section inside the Connection section

To eliminate the preset hyperlink design, let’s modify the appearance of all our hyperlinks:

1. Pick the Connection section
2. Launch the Design panel and navigate to the Identifier field
3. Select All hyperlinks from HTML tags

Toggle off the preset underline and opt for a distinct hyperlink color:

1. Access Design panel > Typography
2. Define decoration as “None”
3. Click on the palette and set a new shade (e.g., “ivory”)

Let’s associate our Documentation section with our Grouping information to enable the automatic extraction of each project’s titles:

1. Choose the Documentation section inside the Connection selection
2. Tap on the label’s cog icon to reveal the Documentation section’s configurations
3. Tick off “Retrieve text from Projects”
4. Unfold the “Pick field” dropdown and designate the field to integrate with the Documentation section (e.g., “Project designation”)

We will utilize Lattice to showcase the project designations in a structured layout:

1. Select the Grouping list
2. Access Design panel > Arrangement
3. Assign Display as Lattice

By default, our project designations are showcased in a 2 by 2 format. Let’s distribute our project designations across a single row:

1. Select the Lattice and press Modify lattice below Arrangement in the Design panel
2. Hit the “delete” symbol next to one row for its removal
3. Click the columns “plus” symbol twice to append 2 extra columns

Lets formulate evenly distributed space among the elements within our Lattice:

1. Select the Lattice
2. Access the Design panel > Arrangement
3. Define Align as “Justify elements: center”

Craft a gap between the Statement and the Lattice:

1. Pick the Statement
2. Define the lower spacing to 30 pixels

Let’s establish an amalgamation category for our footer Segment:

1. Select the Segment enclosing the footer
2. Launch the Design panel and navigate to the Identifier field
3. Post the existing “Segment” category, type in a fresh amalgamation category (e.g., “Footer”)

Valuable information: An amalgamation category is a distinct category constructed based on another category. This independent group enables the application of style alterations to the primary category to formulate a unique variant. Delve into more details about amalgamation categories.

Lets modify the “Footer Segment” Backdrop shade:

1. Access Design panel > Backgrounds
2. Click on the palette and set the shade to the principal brand hue

Let’s include 3 societal networking buttons situated within a wrapper:

1. Initiate the Incorporate panel
2. Drag a Division element into the “Footer holder” Division element under the Grouping list wrapper
3. Access the Design panel and navigate to the Identifier field
4. Title the Division element with a category (e.g., “Social wrapper”)

We should introduce Connection sections inside the “Social wrapper” Division element to generate clickable connections:

1. Initiate the Incorporate panel and drag a Connection section into the “Social wrapper”
2. Launch the Resources panel and insert a societal media Picture into the Connection section (e.g., “Twitter”)
3. Select the Connection section, tap into the Identifier field and append a category (e.g., “Social link”)
4. Copy and paste the “Social link” twice more for a total of 3 societal media connections

Let’s enhance the 2 supplementary societal link Pictures:

1. Click twice on the second social hyperlink Picture and opt for “Substitute picture” 
2. Pick your fresh social Picture from the Library panel (e.g., “Instagram”) 
3. Iterate the preceding 2 actions to exchange the third Picture (e.g., “LinkedIn”)

Equally distribute the social hyperlinks and provide them with some space to breathe: 

1. Choose a “Social hyperlink”
2. Unfold the Design panel > Spacing
3. Incorporate a left and right margin of 10 pixels
4. Pick the “Social wrapper”
5. Unfold the Design panel > Spacing
6. Incorporate a top margin of 30 pixels

Remark: You can promptly append margin or padding to opposite sides of an element by pressing Option (on Mac) or Alt (on Windows), and dragging one of the margin or padding controls. 

Incorporate URLs to each “Social hyperlink:” 

1. Choose a “Social hyperlink” and tap the cog symbol of the label to open the link settings
2. Enter your social channel’s external URL in the URL field
3. Redo the previous 2 actions for the 2 remaining “Social hyperlinks”

To make our project links more prominent from the rest of the footer text, let’s modify the weight of the text: 

1. Choose the Collection list
2. Unfold the Design panel > Typography
3. Adjust the font weight to a higher figure (e.g., “600 – Semi bold”) 

Transform the footer into a Symbol

Let’s convert the footer into a Symbol to facilitate its reuse across our project: 

1. Choose the Segment that encompasses our footer items
2. Right-click the label of the Segment and choose “Establish a Symbol” from the menu
3. Assign a name to your Symbol (e.g., “Footer”) 

Remark: To promptly generate a Symbol with shortcut keys, select the element you wish to convert into a Symbol, and hit Command + Shift + A (on Mac) or Control + Shift + A (on Windows). 

An impressive way to conclude your page with flair and engage your visitors!

• Author
• Recent Posts

Ewan Mak

Webflow Expert at Tenten

Webflow expert and frontend developer with 4+ years of experience. I bring a versatile skillset (HTML, CSS, JS, Figma, Adobe) to craft exceptional Webflow experiences. 70+ projects honed my ability to seamlessly blend custom code and visual development. Organized, deadline-driven, and passionate about growth, I excel in dynamic environments. Let's push boundaries and create something amazing.

Latest posts by Ewan Mak (see all)

• Include or eliminate Workspace spots and members - April 15, 2024
• Centering box summary - April 15, 2024
• Store a site for future reference - April 15, 2024