Build a Custom Footer Layout for Your Author Website

Introduction

Just as a Header tops the entire author website we also need a footer. The website footer is the section of content at the very bottom of a web site. The footer typically contains a copyright notice, a link to a privacy policy, sitemap, logo, contact information, social media icons, and a newsletter sign-up.

LIke HEADERS footers are a default item expected by visitors as another navigation tool to help them get where they need to go.

So lets not disappoint them 🙂

Add the Footer in Breakdance

Just like with the Header we have to create the footer element in Breakdance before we can edit.

From the WordPress admin dashboard

• Go to Breakdance > Footers
• Add New Footer
• Give it the title MF001 (Main Footer 1)
• The location is everywhere
• No conditions
• Priority 1
• Click on Add Footer
• Click on EDIT IN BREAKDANCE

Footer Section

Unlike the HEADER there is no FOOTER builder in Breakdance.

We could use the library and select a premade footer but lets build our own from scratch to get to know the Breakdance editor better.

• We’ll start with a new SECTION
• Relabel to Footer Section
• We can’t use either of the SECTION PRESETS for the footer as we are going to apply some unique stylings
• Set the SECTION LAYOUT to vertical
• Set the GAP to 12 rem

That may seem like a lot but we are going to make good use of this spacing in the footer.

Just like the HEADER I want to use the BORDER, in this case the TOP BORDER to separate the FOOTER from the content above.

• Staying inside the DESIGN TAB for the section click on BORDERS
• Under STYLING click on BORDER TOP
• Set width to 1 pixel
• Set colour to BRAND from the global palette
• Set style to solid.

Footer Layout

I want this FOOTER to have 3 columns and 2 rows.

1 column for books, 1 column for site information, and 1 column for the Newsletter sign up. The first row is for social links and the other for the copyright info at the bottom of the site.

• In the structure panel click on the SECTION element
• ADD a new element and choose COLUMNS
• Select the 3 COLUMNS element
• Next, add a DIV underneath the Columns
• From the DIV ELEMENT DESIGN TAB go to CONTAINER
• Change the WIDTH input box from px (Pixels) to the percentage symbol
• Make the width 100%
• Duplicate that DIV element.

Set the Column Layout

• Set the COLUMN GAP, the space between the columns inside the COLUMN ELEMENT, to 6 rem.

This gives a clear gap between the columns to assist the visitor in switching from one set of information to another.

Set the Columns Layout

• Go to the FIRST COLUMN in the COLUMNS Element

• In the ELEMENT’s DESIGN TAB
• Set the LAYOUT to Vertical
• With a 3 rem Gap
• Repeat that for the other two columns

Add Column Headings

• Click inside the first column
• Add a heading Element
• Set it to a H5 Heading
• Duplicate that heading twice
• Move one heading into each column
• Rename the headings to Books, Site Info and Free Book

Summary

In this lesson, we have successfully set up the structure for your author website footer using Breakdance. We created a three-column, two-row layout that will accommodate key elements like social links, copyright information, and a newsletter sign-up. 

When we check that layout in the live site we are not going to see anything other than the border and blank space below. Hidden away in all that blank space is the layout we need for a structured footer with everything a visitor needs to help them get around.

Next Lesson

In the next lesson we will start adding content to the footer.