Module 1

Introduction

In this module, we’ll introduce you to the Sales Page Template, and give you a quick overview of everything you’ll be receiving as part of your Template Kit.

 

Introduction

In this module, we’ll introduce you to the Sales Page Template, and give you a quick overview of everything you’ll be receiving as part of your Template Kit.

 

Tour Squarespace

Watch the video below to learn all the Squarespace basics that will be helpful to know as you go through the tutorials.

 
 

Creating an Account

If you do not already have a Squarespace account:

  1. Click here and type MILLER in the Search space at the top. Click START WITH MILLER.

  2. On the next page, follow the prompts to sign up with Squarespace.

  3. Sign up for the trial, and once the page is completed I’ll show you how to upgrade your account.

If you have a Squarespace account but don't have a live website:

  1. Login to your existing account and click “Create a Site” top right

  2. Type MILLER in the Search space at the top. Click START WITH MILLER

If you have a Squarespace account and have LIVE website:

*Adding the Sales Page template won’t affect your live site, but changing the styles will. You will either need to override your site styles with the Sales Page styles or manually add the ones you want.

  1. For best results, make sure your website template is part of the Brine Template Family

    1. If not, in your sidebar go to Design > Templates > Install New Template then choose MILLER.

  2. You will be creating the Sales Page in the “Not Linked” section of your site while it is being created.

 

Module 2

Building your Page

 In this module, we’ll introduce you to the Sales Page Template, and give you a quick overview of everything you’ll be receiving as part of your Template Kit.

 

Building your Skeleton

This video will walk you through building the skeleton of your sales page - and all 13 content blocks within the page.

Creating your Page

This video will walk you through building the skeleton of your sales page - and all 13 content blocks within the page.

 

Module 3

Setting your Styles

You'll create the entire design in your Squarespace account with dummy text (all the fake text from our demos) and sample jpegs from our demos BEFORE you start customizing the design with your own content and images in steps 05-07. 

 

Video 1: Adding Custom CSS

This video will walk you through building the skeleton of your sales page - and all 13 content blocks within the page.

 
 

Video 2: Setting your Styles

This video will walk you through building the skeleton of your sales page - and all 13 content blocks within the page.

 
 

Module 4

Adding your Content

Now that your design is all built out in your Squarespace account, you're ready to start adding in your real written content. Locate the Content Worksheet in your initial Design Kit Download (located in Step05Files), fill it out, and then start filling in your written content on your website. The pages you'd like on your site might not match up exactly with the design you built in Step 04, so you can edit the pages you created as needed (for instance changing an 'info page' to a 'testimonials' page, or adding an additional page). Once you've added all your text to your pages, you can move on to Step 06.

 

Module 5

Customizing your Graphics

 

Step 1: Find and Save your Photos for Web

Once you’ve written the text content for your site, it’s time to choose what photos you want to feature on each page. If you’re handy with a camera, you might already have a lot of photos to choose from. If you don’t, here are some of our favorite resources to find photos for your site.

Once you have photos chosen to use on each page, you will need to make sure they’re in the right format for Squarespace. Some photos may need to be resized to ensure that they look their best on your site. Here’s a checklist to use when prepping your photos for Squarespace. Photos should be:

  • In .jpg, .gif. or .png format only. We recommend saving photos in .jpg format and logos, icons or other graphics that might need a transparent background as a .png

  • Sized at 1500px wide. The one exception is if you’re using a photo for a responsive hero image or background image—those photos should be saved at 2500px wide.

  • In RGB color mode (not CMYK). RGB is the color mode used for images on web. CMYK is for printed materials.

  • In a sRGB color profile. Most images have this already, so no need to worry about it. However if after uploading your images to Squarespace, the colors look off, it’s worth opening the images in Photoshop to make sure they have the correct sRGB color profile.

  • Less than 500 KB in file size. Squarespace can accommodate uploads up to 20 MB, but 500 KB will give you best results and load times.

TIP: If after adding photos to your site, your images or graphics look ‘fuzzy’ or ‘pixelated,’ try loading your site on different computers and different browsers. We’ve noticed sometimes images can look fuzzy in out-of-date browsers or at certain browser sizes, but it’s an issue with the browser—not with your images. Before you go resizing or reuploading your images to fix the problem, make sure it’s not just a browser issue.

Step 2: Creating your Graphics

 

Designing with Canva

Now that you've built out the design, organized your content, and found and saved your photos for web, you can create your own graphics using a free online program called Canva. In the tutorial below, we'll show you how to get started with Canva and create your graphics. 

 
 

Designing with Photoshop

Your design also comes with photoshop files for you to edit and incorporate on Squarespace for your design if you would prefer. Now that you've built out the design, organized your content, and found and saved your photos for web, you can customize the PSDs and add them to your site so they include your own images and content. You can find the PSDs by referring back to your initial Design Kit download and going to FilesYoullNeed > FilesYouNeedForStep07. (Note: If you'd rather edit your files on Photoshop, but don't have the program yet, check out our article on how to get a free trial of Photoshop). 

 

Module 6

Pushing it Live!

 In this module, we’ll introduce you to the Sales Page Template, and give you a quick overview of everything you’ll be receiving as part of your Template Kit.

 

Step 1: Prep for Launch

Congratulations--you are almost done with your new site! There are a few final important steps to getting your site ready to launch. Review the launch checklist below and make sure all the items are completed before launching!

 
  • PROOFREAD: Ask a friend to proofread your entire site for grammar, punctuation and typos.

  • CHECK LINKS: Go through your site and click on every link on every page to make sure they're working, paying special attention to checking each social media link.

  • TEST CONTACT FORM: Submit a test to make sure your contact form is working. Do the same thing with your e-newsletter signup form if you've included that.

  • ADD A FAVICON: This is the little icon that appears in the tab or url bar at the top of your browser. To add yours, log in to Squarespace and go to Design > Logo & Title > Browser Icon (Favicon). Upload the image you'd like to use and hit 'save.' Clear your browser cache to see the favicon.

  • COPYRIGHT LINE: Consider removing the "Powered by Squarespace" line in the footer and replacing with your own copyright info and geographic area (if applicable).

  • TEST ON MULTIPLES DEVICES: Since Squarespace sites are responsive, they will look slightly different depending on the monitor size. Open your site on a mobile device (and tablet if you have one handy) and multiple desktop monitor sizes to make sure it's loading properly and all the text is easy to read.

  • FACEBOOK DEBUGGER: Sometimes when you post your site to facebook and it shows preview information, it doesn't load the most recent thumbnail or website title. To fix that, click here, paste in your domain and click "debug."

 

Step 2: Upgrade your Account and Set up your Domain

Once you've gone through the checklist above, you're ready to upgrade to a paid Squarespace account and set up your domain. Once you complete the steps below, your site will be live online at your domain and visible to search engines. Follow the steps below:

 
  • Click the "TRIAL ACCOUNT - UPGRADE NOW" button stuck to the bottom of your Squarespace site.

  • Choose either a Personal, Business, or Commerce plan. TIP: The primary difference between a personal and business plan is that a business plan lets you have more than 20 pages and up to 20 products (a personal account limits you to 20 pages and 1 product). If you sell more than 20 products, you'll need a Commerce plan.

  • Select either a monthly or yearly billing term. TIP: If you sign up for a yearly billing term, you get a free domain name with purchase, so keep that in mind if you don't have a domain name yet.

  • Enter payment information, and click the 'subscribe' button.

  • Now that you are set up with a paid plan, you can set up your domain name. From the home menu in Squarespace, go to Settings > Domains

  • If you have purchased a domain already from a third party service such as GoDaddy or Bluehost, click 'Connect a Third-Party Domain' and follow the instructions. If you do not yet own a domain, click 'Get a Domain' and follow the instructions to purchase a new domain or register your free one if you signed up for an annual billing cycle.

  • Once your domain is set up, it may take up to 72 hours for your website to appear live online.