Writers Building Websites

Writers Building Websites

Add Social Links and Copyright to Your Footer

Learn to customise your author website footer with social links and copyright info for better branding, seamless navigation, and enhanced reader connectivity.

Last Updated: 13 December 2024

Introduction

In this lesson, we’ll dive into customising the footer of your author website by adding social media links and a copyright notice. Setting up these elements ensures readers can easily connect with you on social platforms, while a professional copyright notice gives your site a polished look. With straightforward steps, we’ll cover alignment, spacing, and design to create a footer that’s both visually appealing and functional. Let’s enhance your site’s branding and reader experience with these essential footer elements.

When we added the Footer section in an earlier lesson we placed two full width DIV elements under the columns. We’re going to use the first DIV element for our social links. Putting links to your social media channels in the footer makes it easy for visitors to find and connect with you online in the social media platform of their choice.

Breakdance makes this easy with a dedicated social links element.

  • Click the plus icon inside the first DIV element to add a new element
  • Search for Social Icons
  • Click the Social Icons element to add it to the first div.

Centre the Icons

Because it’s 3 columns above the social links they’ll look better centred on the page.

  • Click on the Social Links DIV
  • In the DESIGN TAB click on layout
  • Set the layout to HORIZONTAL
  • And the alignment to CENTER

Social Icon Design

Allowing the social icons to remain at their default may make visitor selection a little easier but they look out of place with the rest of the site.

I’m going to change the colour of the icons to sites branded colour and put some space between the icons as well.

  • Click on the social links element.
  • Go to the DESIGN TAB
  • Under ICONS change the ICON COLOUR to the off white ALT TEXT Colour we set up in the BRanding Module
  • Next change the icons BACKGROUND COLOUR to BRAND from the global palette.
  • Like the other square elements on this site I’m also going to change the shape to a custom radius of 8 pixels. Again it’s the little things that add up.

Now that we’ve changed the colours and shape of the icons we can space them out a little more

  • Staying in the DESIGN TAB go to LAYOUT
  • Change the SPACE BETWEEN the icons to 30 pixels. This options doesn’t have rem.

The Social Links element has a number of social media icons with more on the way. If the social platform you want isn’t there the element has an option to add custom icons. Dirk is only active on Facebook, X and Instagram so I’ll edit the social links bar to match.

  • Click on the social links element
  • I’ll go to the first Social Network item on the configuration tab
  • It’s already set to Facebook so I’ll replace the default link with the link to Dirks FB page
  • I’ll repeat this process with each of the social networks I want to use.
  • When I get to LinkedIN, a social network Dirk DOES NOT use I just click on the trash icon to remove it.

The final element to this build is adding a text element to the second div in the footer. Please note this is an example copyright notice. I’m not a legal professional.

  • Click the PLUS icon inside the second div.
  • Add a TEXT element
  • I’ll paste the following inside the text element
    • Copyright © 2022 – 2025 Dirk Volcano | All Rights Reserved.

This is aligned to the left and is too big. Let’s change that.

  • Click on the Copyright DIV
  • From the DESIGN TAB Change the layout to horizontal and aligned to the CENTER.
  • Click into the TEXT ELEMENT
  • Go to the design tab.
  • Go to typography
  • Change the font size to 1.6rem

Summary

This lesson guided you through creating a professional, branded footer for your author website. You saw how to add social links to make it easy for readers to connect on platforms like Facebook and Instagram. We  customised spacing, alignment, and colour to match your site’s design. Finally, we added a copyright notice to complete the footer. By the end, your site will feel cohesive, inviting, and ready to connect with readers.

Stephen Gordon
Stephen is the founder of Writers Building Websites and brings over a decade of experience as a freelance marketer specialising in publishing. He is also an author.

Index

Copyright © 2024 Writers Building Websites | All Rights Reserved.