O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building Business Websites with Squarespace 7 - Second Edition

Book Description

Discover the best way to build, design and launch professional websites with Squarespace quickly, without needing to learn any code

About This Book

  • Discover time-saving tricks and best practices, and avoid common pitfalls while creating a website
  • Create visually stunning Responsive Design templates for your website with Squarespace 7
  • Understand how to monitor, measure, and manage your website after launching it

Who This Book Is For

This book is ideal for anyone who wants to learn how to use the latest version of Squarespace to create a website from scratch and take it through to go-live. You don't need any prior experience with Squarespace, HTML, or CSS, or building websites in general as everything is done using Squarespace's simple, browser-based interface.

What You Will Learn

  • Develop an essential Website Toolkit that will act as reference and materials for your entire project, ensuring you stay on-target to meet your objectives
  • Set up your Squarespace account, learn how the interface works, and select the correct template for your website's purpose and goals
  • Create your website framework, fill it with content, and arrange your pages using Squarespace's easy drag-and-drop tools
  • Customize your site's look and feel to match your brand, and create a stunning visual impact for your website on all types of devices, including mobiles and tablets
  • Configure the core functions your business needs, whether connecting to social media, promoting events, showcasing your work, or selling goods and services online
  • Learn time-saving tricks and how to avoid common pitfalls from an experienced professional with years of Squarespace experience
  • Gain valuable insights about search engine optimization, communicating effectively online, and other e-marketing advice
  • How to monitor, measure, and manage your website post-launch

In Detail

Squarespace is a web-based tool that allows non-technical people to create and manage professional-looking websites quickly, without needing to write any code. It empowers business owners to take total control of their own websites, without needing to pay someone to design or maintain it.

This book covers much more than just how to use Squarespace. It covers all aspects of creating a successful business website, from developing your brand identity, to writing and structuring content to match your target audience's needs, and dozens of other other valuable tips that will help your website shine. Most importantly, you'll learn the correct steps to follow in order to ensure your project is smooth and stress-free.

The book starts by helping you plan your website project and gather all the raw materials you'll need. Next, you'll set up your account and become familiar with the terminology and tools that you'll be using. Once you've learned the basics of how the Squarespace interface, templates, and different page types operate, you will create the framework of your website, ready for you to insert content and functionality. Then, once all the core elements are in place, you'll apply the aesthetic fine-tuning needed to bring your website in line with your brand. After the aesthetics have been honed and all functions tested, you will launch your website and drive traffic to it, monitor it, and improve it.

Style and approach

This easy-to-follow guide will teach you to build websites the easiest way in the latest version of Squarespace.

Table of Contents

  1. Preface
    1. Why choose Squarespace?
    2. About this book
    3. What this book covers
    4. Who this book is for
    5. Conventions
    6. Reader feedback
    7. Customer support
      1. Downloading the color images of this book
      2. Errata
      3. Piracy
      4. Questions
  2. Setting Up for Success - Your Website Toolkit
    1. Understanding the process of making a website
    2. Understanding website concepts
      1. Structure
      2. Functions
      3. Content
      4. Aesthetics
    3. Writing a website plan
      1. About your business
        1. Business overview (the "elevator pitch")
        2. Slogan (also known as, tagline or strapline)
        3. Brand image
      2. About your audience
        1. Your customers (the site's target audience)
        2. Primary purpose
      3. About your website
        1. Goals
        2. Functions
        3. Content
        4. Integration
        5. Site management
      4. About this project
        1. Project team
        2. Project timelines
        3. Project budget
    4. Gathering materials, ideas, and inspiration
      1. Creating idea boards
        1. Website inspiration
        2. Other resources for inspiration
    5. Creating a sitemap
      1. Don't make your customers work hard
      2. Break it down
      3. Keep it simple
      4. Consider action words
      5. Include notes or wireframes
    6. Gathering raw materials
      1. Branding
        1. Logo
        2. Colors
        3. Fonts
      2. Text content
      3. Photos
      5. Videos or audio streams
    7. Summary
  3. Getting Started with Squarespace
    1. Signing up for a Squarespace account
    2. Finding your way around Squarespace
      1. Understanding the Site Manager interface
        1. Understanding annotations
        2. Using the Home Menu
      2. Using the Pages area
      3. Using the Design area
      4. Using the Commerce area
      5. Using the Analytics area
      6. Settings
    3. Adjusting basic site settings
      1. Inputting your Business Information
      2. Setting your site's language and region
      3. Changing the built-in domain
        1. Setting up the SEO options
      4. Keeping your site private until its launch
      5. Setting up your subscription plan and billing
        1. Choosing the right subscription plan
          1. The Personal plan - the cheapest Website plan
          2. The Business plan - the higher Website plan
          3. The Basic Commerce plan
          4. The Advanced Commerce plan
        2. Setting up your billing information
    4. Logging in and out of Squarespace
      1. Logging in
        1. Logging in by pressing Esc
        2. Accessing your site's login page
        3. Logging in via the Squarespace site
    5. Summary
  4. Working with Squarespace Templates
    1. Understanding Squarespace templates
      1. Characteristics of a Squarespace template
        1. Page structure
          1. Canvas
          2. Header
          3. Body
          4. Footer
          5. Sidebar(s)
        2. Visual style
        3. Special features
          1. Different homepage
          2. Secondary navigation area
          3. Index page
          4. Variable banner images
          5. Promoted Blocks in blog posts
          6. Navigation customization
    2. Choosing the right Squarespace template for your site
      1. Selecting the best template for your needs
        1. Step 1: Consider the site's primary purpose and important functions
        2. Step 2: List the special features that you want
        3. Step 3: Identify the page structure you like best
        4. Step 4: Refer back to your brand and content
      2. An overview of the different Squarespace templates
      3. Understanding template families
        1. Comparing templates
      4. Browsing templates and their example sites
        1. Important points to remember when browsing templates
        2. Using the template's Read Me page
      5. Trying out a new template for your site
        1. Installing and previewing a new template
      6. Narrowing down your template choices
        1. Fullscreen preview
        2. The Style Editor
        3. The Pages panel
      7. Getting stuck on choosing a template
      8. Applying your chosen template to your site
        1. Making a template live
    3. Summary
  5. Creating Your Site Framework - Pages, Items, Collections, and Navigation
    1. Understanding Squarespace pages
      1. Standard page
      2. Collection Page
      3. Cover Page
      4. Page cluster
      5. Special properties of Collection Pages
    2. Adding pages to your site
      1. Using the Pages panel
      2. Understanding your template's unique way of displaying page elements
      3. Using demo pages to create new pages
      4. Standard Page Settings
        1. Navigation Title
        2. Page Title
        3. The Enabled checkbox
        4. Page Layout
        5. Page Description
        6. URL Slug
        7. Password
        8. Page Controls
        9. Media Settings - Banner/Thumbnail Image or Video
        10. Page Settings action buttons
    3. Creating new pages
      1. Using Starter Layouts and blank standard pages
      2. Creating Collection Pages
      3. Collection Page Settings
        1. Blog Page Settings
        2. Gallery/Project Page Settings
        3. Events Page Settings
        4. Index Page Settings
        5. Products Page Settings
        6. Album Page Settings
      4. Adding items to Collection Pages
        1. Configuring the item settings
          1. Blog post settings
          2. Event settings
          3. Gallery image settings
          4. Gallery video settings
          5. Product settings
          6. Album track settings
        2. Organizing items in Gallery, Products, or Album Pages
        3. Moving Blog posts
        4. Deleting items
      5. Creating a Cover Page
        1. Setting up your Cover Page
    4. Organizing your site's navigation
      1. Folder settings
      2. Creating an Index
        1. Index settings
      3. Rearranging pages
        1. Adding pages to a Folder or Index
        2. Opening and closing Folders or Indexes
        3. Adding pages to a secondary navigation area
      4. Removing pages from your site
        1. Disabling pages
        2. Storing pages for later
        3. Deleting pages
          1. Moving pages to the Recycle Bin
          2. Restoring a page from the Recycle Bin
      5. Adding external site links to your site navigation
        1. Adding social media profile links
        2. Adding links to third-party sites
    5. Summary
  6. Adding, Editing, and Arranging Content in Your Web Pages
    1. Understanding blocks
    2. Adding and removing blocks
      1. Adding a block
      2. Removing blocks
    3. Adding basic content to your pages
      1. Adding and formatting text using Text Blocks
      2. Adding images using Image Blocks
        1. Using stock images from Getty Images
    4. Arranging blocks on the page
      1. Moving a block to another position on the page
      2. Canceling a move or other adjustment
      3. Understanding fluid layouts and responsive design
        1. Responsive design, image sizes, and screen resolutions
      4. Adjusting the size of blocks and columns
        1. Adjusting the width of columns, adjacent blocks, or wrapping blocks
        2. Using Spacer and Line Blocks to fine-tune layouts
          1. Adjusting the height of a Spacer Block
    5. Adjusting images in Squarespace
      1. Cropping and zooming images with LayoutEngine
      2. Adjusting the Focal Point of images
      3. Using the Adobe Creative Cloud Image Editor
    6. Adding content to sidebars or footers
      1. Adding or editing content in a footer
      2. Adding or editing content in a sidebar
        1. Enabling a sidebar
    7. Adding links that point to web pages or files
      1. Assigning a link to word(s) in a Text Block
      2. Assigning a link to an image
      3. Creating a Button on your page
    8. Summary
  7. Using Blocks to Add Functionality, Rich Media, and Special Features
    1. Adding images - beyond the standard Image Block
      1. Gallery Blocks
        1. Adding a Gallery Block
      2. Adding galleries from external photo-sharing websites
        1. Adding a gallery from Flickr, Instagram, or 500px
    2. Embedding video into your pages
    3. Adding a Google Map to your site
    4. Capturing data and handling enquiries on your website
      1. Using forms
        1. Adding a form to your page
          1. Using the Build section in the Form Editor
          2. Setting the Storage preferences in the Form Editor
          3. Customizing the Advanced settings in the Form Editor
      2. Using Newsletter Blocks
    5. Using content blocks to improve internal navigation and highlight content
      1. Adding a search box
      2. Displaying sorted lists of items
        1. Displaying a list of tags or categories as a cloud
        2. Displaying date-based lists in a calendar format
      3. Using Content Link Blocks
      4. Using Summary Blocks - the most powerful of blocks
        1. Creative ways to use Summary Blocks
          1. Featuring and filtering content
          2. Bypassing template design restrictions
        2. Summary Block design options
          1. Grid
          2. List
          3. Carousel
          4. Wall
        3. Summary Block filtering and display options
    6. Inserting sales or donation blocks to make transactions fast and easy
      1. Using Amazon Blocks
    7. Displaying a price list
      1. Using Menu Blocks
    8. Adding audio to your website
      1. Using the Audio Block
        1. Additional settings for podcasting
      2. Using the Soundcloud Block
    9. Adding a Twitter feed
    10. Displaying charts and graphs
    11. Other types of block
    12. Summary
  8. Selling Online or Taking Donations with Squarespace Commerce
    1. Setting up Squarespace Commerce
      1. Restrictions on Squarespace Commerce
        1. The currency and location of your business
        2. The right Squarespace subscription plan
      2. Gathering your store content
      3. Configuring your store
        1. General Settings
        2. Payments
        3. Connecting to Stripe
        4. Connecting to PayPal
        5. Checkout
        6. Notifications
        7. Shipping
        8. Taxes
          1. Setting up a new country tax rule
          2. Setting up a new state/province tax rule
          3. Setting up a local area tax based on postal/zip codes
        9. Accounting
        10. Donations
    2. Creating and managing products
      1. Product types
      2. Adding product items
      3. Duplicating products
      4. Removing or rearranging products
      5. Importing products from Big Cartel, Etsy, or Shopify
      6. Managing products using Inventory
    3. Testing your store
    4. Handling orders
      1. Processing orders quickly or in bulk
      2. Using Order Summary
    5. Customers
    6. Promoting products and offering discounts
      1. Using Product Blocks to enable quick purchases from anywhere on your site
      2. Using Summary Blocks to showcase featured products
      3. Offering and promoting discounts
        1. Discounts
        2. Using the Announcement Bar to highlight discount codes
    7. Setting up and managing donations
      1. Adding a Donation Block
      2. Testing donations
      3. Viewing and exporting donations received
    8. Handling transactions without Squarespace Commerce
    9. Summary
  9. Tailoring Your Site's Look and Feel
    1. Understanding Squarespace template customization
      1. Finding your way around the Style Editor
        1. Selecting an element for adjustment
        2. Saving changes in the Style Editor
        3. Testing your template customizations
        4. Resetting the template
        5. Switching templates with customizations applied
    2. Working with fonts and typography
      1. Choosing fonts
      2. Using fonts on your website
      3. Other typography settings
      4. Applying typography changes to your template
      5. Easier ways to find, compare, or match fonts
        1. Using Google or Adobe Typekit font-finders
          1. Google Fonts
          2. Adobe Typekit
        2. Finding fonts that are similar to other fonts
    3. Adding or creating a logo in Squarespace
      1. Creating a text-based logo in Squarespace
      2. Designing your own logo using Squarespace Logo
      3. Adding an image-based logo to your site
        1. Adjusting logo size and positioning
    4. Adjusting your website's color scheme
      1. Tools and resources for choosing colors
        1. Color picker tools
        2. Resources for color schemes and color inspiration
      2. Controlling the color and opacity of page elements
    5. Using background or header images
      1. Adding a sitewide background or banner image
      2. Adding banner images or videos to individual pages
        1. Adding a banner image to a page
        2. Using a video as a page banner
    6. Adjusting an element's size, position, visibility, or other options
      1. Controlling element visibility and other options
    7. Adjusting Cover Page styles
    8. Summary
  10. Going Live with Your Website and Driving Traffic to It
    1. Connecting to social media accounts
      1. Setting up Connected Accounts
      2. Displaying social icons
        1. Using a Social Links Block
        2. Showing or hiding individual social icons
    2. Enabling social sharing on your website
    3. Making Pinterest social sharing easier
    4. Adjusting the final details in your site settings
      1. Adding a Browser Icon (Favicon)
      2. Adding a Social Sharing Logo
      3. Using Google Analytics with your Squarespace site
      4. Adjusting SEO settings: description, title, and URL formats
        1. Configuring blog settings
    5. Testing your site before launch
      1. Verify that your site works at all sizes
      2. Fine-tune your site and page elements with SEO in mind
      3. Thoroughly test all of your site functions
      4. Ensure your media files look the way they should
      5. Look out for broken links
      6. Double-check your tags and categories
        1. Verify that your social blocks are automatically pulling in fresh content
    6. Making your website live to the public
      1. Removing site-wide password protection
      2. Setting up a custom domain
        1. Registering a new domain through Squarespace
        2. Pointing an existing domain name
        3. Transferring an existing domain name
          1. Moving from an existing website to Squarespace
        4. Using custom email addresses with your custom domain
        5. Managing your domain and URLs
    7. Driving traffic to your website
      1. Making your website visible to Google and other search engines
      2. Using social media to drive traffic to your site
        1. Automatically promoting news or blog posts
          1. Enabling the push option
          2. Pushing a blog post to a social site
        2. Displaying a Squarespace page or Gallery in your Facebook page
    8. Summary
  11. Managing Your Squarespace Website
    1. Monitoring visitors and activity on your website
      1. Understanding your website traffic
      2. Finding out where your visitors came from
      3. Finding out what's popular on your website
      4. Commerce Analytics reports
      5. Gaining insight into your website sales
      6. Getting an overview of missed sales
      7. Other Analytics reports
    2. Managing comments on your blog
      1. Approving comments
      2. Replying to comments
      3. Deleting comments
      4. Handling flagged comments
    3. Giving other people access to edit, monitor, or administer your website
      1. Adding a Contributor
        1. Modifying, canceling, or resending a contributor's invitation
      2. Adding a Basic Author
      3. Setting up contributor or author Profiles
      4. Modifying or removing an author or contributor's permissions
    4. Using floating bars on your website
      1. Using an Announcement Bar to highlight important information
      2. Making it easier for mobile site visitors to reach you
    5. Using Squarespace mobile apps
      1. Blog
      2. Analytics
      3. Commerce
      4. Portfolio
      5. Note
    6. Summary
  12. Moving Beyond Standard Squarespace Tools
    1. Understanding advanced customization options
      1. Learning the basics and finding code to use
        1. Using the Squarespace Help Center
        2. Using the Squarespace Answers forum
      2. Types of code customization
        1. Code Block
        2. CSS Editor
      3. Sitewide code injection
        1. Per-page code injection
    2. Accessing more advanced resources
      1. Joining the Squarespace Circle
      2. Gaining total control with the Squarespace Developer Platform
      3. Finding Squarespace experts, designers, and developers
    3. Summary
  13. Getting Help with Squarespace
    1. Knowledge Base
    2. Community Answers
    3. Open a support ticket for 24/7 email support
    4. Live chat
    5. Twitter
    6. Squarespace Authorized Trainers
  14. Squarespace Templates in a Nutshell
  15. List of Online Resources Used in This Book