Web Creation on Squarespace: Moorheart Site Transfer | Part 4

In the latest instalment of our Squarespace series, where we transform an existing custom-built website into a Squarespace website. We wrap up the homepage by focusing on populating the footer, implementing CSS for the entire Squarespace website to give the website a paper design feel, and adjusting the layout of the homepage in mobile view to ensure the user doesn’t have to scroll to see the important details.

Crafting a Functional and Stylish Footer.

The footer is often overlooked, but it's a crucial component of site navigation and branding. When I populate a website footer, I like to make sure that I incorporate contact information, social media icons, and quick links to important pages (or hidden ones such as the privacy policy), and an address if this is relevant for your business.

Adding CSS Padding for a Printed Look

A well-padded website can mimic the elegant feel of a printed page, enhancing readability and visual appeal. Here’s a simple CSS trick to achieve this:

@media (min-width: 600px) {
  body {
    padding: 20px;
  }
}

This CSS code adds padding to the entire body of your website, creating a comfortable space around your content, reminiscent of a beautifully laid-out printed page.

Optimising the Homepage for Mobile Viewing

With the increasing use of mobile devices, it's essential to ensure your homepage looks as good on a phone as it does on a desktop. Thankfully Squarespace makes this super easy with a simple view toggle. It's best to watch the video for this, but what I am trying to ensure is that the content still makes sense (it can sometimes shift order). I also don't want the user to have to scroll too much, so I need to ensure that non-important elements such as icons or images are smaller, and the main content is still visible.

So please follow along with this series, in the next video we populate the about page and work with the Squarespace background image section, and use the Squarespace 'Save section' feature to speed up my process.