Lesson 3: Creating a Cover Page + Connecting Social Media
Now that you've got a domain attached to your website, it will technically be "live", meaning someone could search your URL and see your website in progress – which we don't want! So, in this lesson, we're going to create a temporary landing page with one clear call to action. Your site will be live, so a cover page acts as an "Under Construction" sign, but it looks a bit nicer.
In this lesson we will:
1. Connect your social accounts
2. Create the initial Cover Page
3. Choose a different layout
4. Modify the branding + text
5. Change the Background Image
6. Modify the call to action button
7. Modify the fonts, colour and sizing of things on the page
8. Set the Cover Page as your Home Page!
Go to Home > Settings > Connected Accounts
Click the button titled “Connect Account”
Follow the instructions provided for each account. You will need to log in to your account, and for accounts that are managed by a personal page (like Facebook or LinkedIn) follow the instructions until you can select the page that will be linked to the website. Don't worry, it won't show your personal page, just the business one you select!
STEP 2: Creating a Cover Page
Go to Home > Pages
You will see a grey bar on the left hand side. This is your website. Every page on your website will be listed here. Consider this similar to a “Contents” page you’d find in book.
Scroll down to the bottom of this menu. You should see the section labelled "Not Linked" at the bottom. Like the description indicates, the “Not Linked” section houses all your live webpages that aren’t accessible via any main menu; you can only access these pages if you know the URL. Next to the words “Not Linked” , there is a large plus sign. Select it and a menu will pop up titled “Create New Page”. This menu gives you all the options for different pages you can add to your website.
For this lesson, we are going to add a Cover Page. Select “Cover Page”, and give it a new name. Maybe try “Coming Soon”.
STEP 3: Change the Layout of the page
This is the main menu for Cover Pages. Select “Change Layout”
Look through some of the layouts available on Squarespace. These are all pre-styled templates that are separate from the initial templates you decided for your website initially. Its function is to be simple yet powerful in the way the information has been pre-laid out.
Select a cover page you feel is suitable for your website. Select “Save” in the top left hand corner.
STEP 4: Modify the branding & Text
Select “Back” in the top left hand corner to go back to the Cover Page main menu. Select "Branding & Text".
Every time you make a change to this section, select “Save” in the top left hand corner. When you are finished with the Branding & Text section, select “Back” in the top left hand corner.
BRANDING: Enter the name of your business. If you have a Logo file that is good quality and transparent (there is no white background around the logo itself), feel free to use that instead.
HEADLINE: You'll want a bold and eye-catching short phrase indicating that your site is on its way. Something as simple as "Coming Soon" will do just fine here, but feel free to be as creative as your brand allows.
BODY: Keep this section short and to the point. Consider adding copy about what your business is about (ie. are you an online retailer? A yoga instructor? An interior designer?) and a brief description of what services you’ll have to offer or use it to entice visitors with what's to come.
Step 5: Change The Background Image
Select “Back” in the top left hand corner to go back to the Cover Page main menu. Select "Media".
Add any image you'd like as your Cover Page background. Try to choose images that are minimal and simple – easy on the eyes is always best, with lots of negative space for your text.
If you are using your own stock photography, be sure to check the rights on those images. Never steal images from sites!
Select the empty space inside the dotted line and select “Upload Image”.
If you do not have an image, select “Search Images” instead. This will bring up the database of stock imagery that Squarespace uses. The free images are powered by Unsplash. From there, you can use the search function to find appropriate images for your Cover Page.
Go back to the Cover Page main menu. Select "Action".
Ideally, you want visitors to come to the site and then take an action. Dead end pages are no fun! Some Call to Action options for your cover page can include
linking to any previous websites you might have that are affiliated with your business
asking visitors to sign up to your mailing list
encouraging them to get in contact with you using a form.
It is perfectly acceptable to have multiple buttons on your site (as long as they each have their distinct function), but it’s not necessary. You should always ensure you have at least one Call to Action.
Note that if you connected your Social Accounts in Step 1, you should see your social icons on the Cover Page. You do not need to link it via a button, etc.
Let’s discuss the different types of Call to Actions you can select.
SELECT ACTION TYPE:
Buttons vs. Navigation - Both options will re-direct your clients via a URL. Consider adding any affiliated websites you may have that might be relevant to your business, such as a specific Facebook page.
Buttons - Places a linked button on your Cover Page. The default copy reads “Get Notified”. It is currently set up to link to https://squarespace.com.
To change the button label, select the white section, remove the current label title (“Get Notified”) and add your own.
To change the URL, select the dark grey section, remove the current URL (“https://squarespace.com”) and add your own. If you select “Open in New Window”, when the button is selected, a new browser tab will open.
Use the blank slots below to add additional buttons.
Navigation - Places linked text on your Cover Page. There is currently no navigation link on the Cover Page.
To add the navigation label, select the white section, and add your own label.
To add the URL, select the dark grey section, and add your own URL. If you select “Open in New Window”, when the button is selected, a new browser tab will open.
Use the blank slots below to add additional navigation links.
What if you don’t need a button or navigation link? Just get rid of all the text in the button or link label field. The function will be removed from the Cover Page.
SELECT SUBMISSION TYPE:
Form vs. Newsletter Signup
Forms - A form can be filled in by your client as a way to contact with you. Consider it like them sending an email to you via your website.
Select “Edit Form”. This grey menu will pop up. The first tab that is open is the “Build”.
Under the “Build” tab, you can rename the form, or select “Add Form Field” to add additional lines such as phone number or check boxes. You can choose to stick with the default form, however, as it will work just fine.
Next, select “Storage”. This section allows you to set up where the the filled in forms will be saved so that you can refer to and address them.
At best, you should connect your email address. All subsequent forms will be forwarded to your email.
If you are proficient in using Google Drive, MailChimp or Zapier, feel free to utilize these options instead.
Newsletter Signup - This will allow your clients to add their email to your mailing list.
If you do currently have a Newsletter in circulation, download the resource to better understand how to add it to your Cover Page.
Step 7: Modify the fonts, colour and sizing of things on the page
Go back to the Cover Page main menu. Select "Action".
Here you can play around with the fonts, colours, and sizing of the text. You will know which section on your menu is associated with the text on your site if you hover your mouse on each option; the associated text will have a blue box around it.
Select the down arrow, from there you can modify each piece of text to your liking.
Every time you modify some aspect of text, you will see a little dot next to the category that you changed. Aren’t happy with the changes you made? Hover your curses over the dot, until it becomes an “x”, select it and that will remove your new changes. It will revert right back to whatever the default was.
Like what you’ve done? Just click your mouse outside of the font box and all your changes will be saved! Don’t forget to select “Save” at the top of the page.
Note that the new settings you’ve established for your fonts becomes the new default.
If your business already has an established brand, it would be wise to stick with those fonts and colours.
If your business does not have an established brand (yet), go for more neutral colours and avoid anything too bright. The key is to pick colours that are appealing to the eye, while still be legible, especially on an image background.
When choosing fonts, it's best to stick with simplicity again. Choose easy to read fonts that help visitors get the message of your brand and business.
Step 8: Set the Cover Page as your Home Page!
Pages > Not Linked > + > Cover Page > Settings Icon
Go back to the Cover Page main menu and then go back once more so that you are on the Pages menu.
Locate your Cover Page. Hover your mouse until you see the little Cog/Settings icon on the right-hand and select that.
Set your "Navigation Title" and "Page Title" as something like "Coming Soon" or "Under Construction"
In the "URL Slug" ensure this matches your page title
Still In the Settings section, scroll down until you locate two black buttons on the bottom of this page. Select "Set as Homepage". Select “Confirm”.
To get out of the Settings section, select “Save” in the bottom right hand corner.
Now you're all set! You’ll notice now, next to the page is a little house! This means that whenever people go to your domain, they will see this cover page!
Way to go! With your cover page in action you can now share your website and direct towards it - especially if you want people to still be able to contact you or follow you online (depending on your call to action). Feel free to copy the URL of your website and share it with others/ add it to the bio of your Instagram profile - you have got a website, friend!