Design Menu

 

Design Menu

The next section we are going to go through is the Design page - this section is all about controlling the appearance of your site.

Let’s go through the menus and what functions they can do.

LOGO & TITLE

This is where you will add your logo and title. If you haven’t done this already let’s go a head and do that now.

Make sure to add a high quality image, a PNG file type is recommended so your logo will have a transparent background.

You can also add in a browser icon which will help users easily identify your site when they have multiple tabs open.

You also have the option to add a social sharing icon. This image will appear when you share a page to social media and the page doesn’t have an image on it.

Once you hit save, your browser should refresh and your updates will have been made. In some cases you may need to refresh your browser a second time to give the browser icon a chance to load.

TEMPLATES

Preview other Squarespace templates here, or change your template entirely.

STYLE EDITOR

The style editor is where most of your customising will happen. Here you can manage all the colors, fonts and other aspects of your site's design. Anytime you want to make a change to your site, its a good idea to come to this section first.

Another thing most people don't know is that you can click on different elements on the website to automatically filter the style options available for that respective element - this is a great way to easily identify which applies to different areas of the site, as sorting through the whole section can be challenging.

CHECKOUT PAGE STYLE EDITOR

If you have eCommerce setup, you can customise the look of your shop's checkout page here.

LOCK SCREEN

If you plan on password protecting some of your content, the Lock Screen page will allow you to customise the look of the login page.

ANNOUNCEMENT BAR

The Announcement Bar allows you to place a sticky message bar at the top of your website, great for promoting your latest product, share a message, or even better, offering a content upgrade to get people signed up for your email list.

MOBILE INFORMATION BAR

The Mobile Information Bar makes important information like business hours and your address available to visitors on mobile devices.

SQUARESPACE BADGE

Squarespace Badge allows you to hide or display the "Powered by Squarespace" badge at the bottom of your site. By default it is set to hide.

CUSTOM CSS

Custom CSS is the most powerful way to customise your site. CSS stands for Cascading Style Sheet. I recommend that you only deal with this tab if you know how to code or are going to learn how to code . It can sometimes be as simple as copying and pasting snippets as long as the snippets are provided by someone who is familiar with CSS.

Squarespace doesn’t support CSS when you need any help so this is where a Squarespace expert comes in handy.

If your template comes with any custom CSS you will have a backup file in the zip file provided just in case you delete it by accident.

ADVANCED

You can enter your Type Kit ID under the Advanced tab to enable custom Type Kit fonts on your site.

 
Joanne Whyte