Welcome to Module 5… you’re almost to the finish line! You’ve already conquered the most time-consuming parts of adding your content and customizing your template, now it’s time to check your settings, connect some accounts, add some finishing touches, and launch your new site. In this Module we’ll cover all that and also talk a little about search engine optimization and where to find your site analytics.
You may not need some of the finishing touches we’re going over in this lesson, so feel free to jump around and only watch what will benefit you.
Connecting Social Media Accounts
In Squarespace you can’t just add links to your social media accounts, you have to actually connect them and authorize Squarespace to access them. Once you’ve done this you’ll be able to add social icons that link to your profiles anywhere you want using the Social Links block, or add your Instagram or Twitter feed in your site footer, or content from one of your other accounts elsewhere and it will pull that content into your site automatically.
To connect your accounts you’ll need to click on Settings from the Home Menu, then click Connected Accounts. (If you’re on the Cover Page plan you’ll click Social Icons instead of Settings)
On the Connected Accounts page click Connect Account, then choose the account you’d like to add from the popup list. There are a *ton* to choose from. My advice is don’t feel like you need to add every single social account you have… just add the ones you actually want people to connect with you on. That might sound simple, but I see a lot of entrepreneurs fall in the trap of thinking they need to be everywhere all the time, which generally doesn’t work.
Anyway, each account is going to have a little different setup, but for each one you’ll click Connect Account, choose your network, then log in with your username and password and click Authorize.
After you’ve authorized Squarespace to access the account you’ll be given some setup options, which will vary for each account. Luckily Squarespace is good about providing explanations for each one, so just walk through the options for your accounts and choose what works for you.
Repeat the process to add the rest of your social networks.
Sometimes you’ll run into an issue where your Instagram or Twitter block has an issue pulling the most recent posts. The same can happen with Flickr, Foursquare, and 500px. If that happens you can go back to Connected Accounts, click on the service that’s having the issue, and then click Reset Data at the bottom of the settings box. This will refresh the feed and should solve the problem.
If you need to disconnect an account you can go back to Connected Accounts, click on the service you want to disconnect, and click Disconnect at the bottom of the screen.
Adding Share Buttons
The difference between Social Icons and Share Buttons is that Social Icons take visitors to your social media accounts, while Share Buttons let them share your blog posts and other things on their social media accounts. If you have a blog or other content you want people to share on social media you’ll want to add Share buttons to your site.
Each template has it’s own setup for where and how Share buttons appear, for example they might show up on your main blog page or only on your individual blog posts. You can check your template’s guide to see how they work in yours.
To add Share buttons you’ll go to Settings from the Home menu, then click Marketing, then Share Buttons.
Here you’ll use the checks to select which services you want to enable buttons for and click Save. Share buttons should now show up wherever they’re supposed to for your template.
In some templates the share buttons will be contained under one main button labeled Share. Other templates will display each button individually on a blog post or item page. If your template displays each one individually you can style the buttons to match your site by going to your Style Editor from the Settings menu. First go to the page where the Share buttons appear, then go to the Style Editor and highlight the buttons to see your options. You can adjust the style of the button and potentially other options depending on which style you choose. Depending on your template you might also have options to hide or show buttons here.
Pinterest Share Buttons will only appear on items with thumbnail images, like Blog posts, Products, or Album pages, because Pinterest requires an image to share.
Using the Announcement Bar
Squarespace gives you a super cool site-wide announcement bar that you can use to let your clients or readers know you have a sale going on, a new opt-in, openings for client work, or whatever your announcement might be. This shows up in a bar across the top of the site on every page.
To enable and customize the content of the bar go to Design from the home menu, then click on Announcement Bar. You’ll see a drop down allowing you to Enable or Disable the bar, then a text area for your content. Below that you can set a URL to open when people click the bar.
Inside the bar itself you can add whatever call to action text you want. I would recommend keeping it short, sweet, and action oriented. Remember, people don’t want to have to guess what action to take, they want to be pointed in the right direction.
You can change the style settings for the Announcement Bar by having it enabled and visiting the Style Editor. Scroll through the style tweaks until you see options for the bar background color, text color, and font.
Adding Page Banners
Squarespace has a neat feature that lets you add a full width image to the top of some templates. This is really handy if you have great photography you want to show off on the site, and it adds a nice visual element to the top of the page too.
Note: Not all templates have this option, so if you know you’re going to want banners you’ll want to choose a template that does.
There are four different types of banners.
- A Page Banner displays an image at the top of a single page.
- A Video Banner can be used in place of the Page Banner to show a video in some templates.
- Collection Item Banners are just the thumbnail added to a blog post, product, or event that shows above the event in certain templates.
- A Site Wide Banner is a photo that can be set to display at the top of every page of the site - this is added in the Style Editor if your template has this option.
To add a Page Banner, navigate to Pages from the Home menu, hover over the page name and click the gear icon to open the page settings. In the Media tab click Add an Image and upload one from your computer or purchase from Getty.
Once you’ve set your banner image you might want to change the focal point. You can actually do this on all photos in Squarespace. The focal point tells Squarespace where to focus if it has to crop the image tighter, which it will, especially for banners. You’ll see the focal point indicated on your image by a white circle in the center. If you click this circle you can drag it around the photo, and wherever you leave it is the part of the photo that Squarespace will make sure is shown if it needs to crop the photo.
If your template offers Video Banners you’ll see that option on the Media tab as well, just click over to Video and paste your video URL. You’ll also want to add a Mobile Fallback Image, which is just an image that will display instead of the video on mobile browsers.
Adding Text to Banners
At some point you may want to add a little text over the top of your banners. Most templates with banner options will show the page title and description over the banner, which you may be able to turn on or off with an option in the Style Editor.
You can find the page title and description in the same Page Settings that you used to set the photo, just click over to the Basic tab and find the right text areas. After you’ve changed your text click Save and then refresh the page to display your banner text.
Certain templates allow you to add headers and buttons to your banner text by formatting the text in the Description field. You can add a Header by highlighting a line of text and bolding it. Text that isn’t bolded will stay as regular description text. You can also create a button by adding a link to the last line of the description. Make sure the link text isn’t bolded and there’s no content below it for that to turn into a button.
Note: It might seem tempting to upload a banner image with text already overlaying it. Don’t. First, it’s not going to show right in most areas because of cropping, and second it’s not going to do your SEO any favors. Squarespace gives you easy options to add banner text, use them.
There will inevitably come a time when someone will try to view a page on your site that doesn’t actually exist, and when that happens they’ll see a 404 Not Found page. Squarespace has a default 404 error page, but if you want your site to be as professional as possible you’ll want to create your own instead. And fortunately Squarespace makes that super easy.
The first thing you’ll need to do is create a new blank page in the Not Linked Module of your Pages. You can name it 404 Page Not Found, or Oops! Our bad!, or really anything you want. On the page itself you can put a very small amount of information or you can get really creative. At the very minimum you should let people know the page they were looking for when they landed here doesn’t exist. Here’s a bit of sample text you can use if you want:
“Oops! There seems to have been a mix up. The page you were looking for isn’t here. You might want to check the address for spelling errors, or you could go to the home page and start over.”
Other things that you might think about adding: A search box, a newsletter signup form, or a few recent blog posts (use the Summary block for this).
When your page is finished make sure to save it, then go to the Home menu and find Settings, then Advanced on the next menu. At the top of the Advanced menu you’ll click 404 Error / Page Not Found. Choose the page you just created from the dropdown box and click Save. You now have a custom 404 page.
Password Protected pages
There could be a lot of different reasons for securing a page behind a password. You could create a resource library or use it to house a single freebie download. You could create project pages for each new client you sign and remove it once the project is complete. Whatever your reason is, setting up a password protected page is super easy. Once you’ve created your page you’ll open up the Page Settings by hovering over the title on the list of pages and clicking the gear. You’ll notice towards the bottom of Page Settings there’s a Password box. Entering a value in this box will automatically require visitors to provide the password before viewing the page. To clear the password just delete it from this box.
The screen visitors see when they visit a password protected page is called a Lock Screen. It’s a super simple page that just asks them to enter the password to view the page. You can edit the design of this page by clicking Design from the Home Menu, then clicking Lock Screen.
The design options here are minimal for good reason. This page has one sole purpose, and you want it to be clear and easy to accomplish. You aren’t allowed to add Content Blocks to the Lock Screen, but you can change the layout, add your own branding and text, and even add a background photo or video. Keep in mind that one Lock Screen will be used for all the password protected pages of the site, so you won’t be able to customize it per client or page.