DIY Website on Squarespace

DIY Website on Squarespace

DIY Website on Squarespace

If you’re relatively tech savvy and self-sufficient, read below on how to get started with a Squarespace website. If reading this gives you a headache, reach out and I’ll see how I can help.

Getting Started

By Ashley Dodge, Digital Marketing Strategist and Content Creator

I’ve included helpful tips and several links to save you some time Googling things I have along the way.

What’s the first step?

The first thing I recommend is to secure your website domain. Most are $20 on Squarespace which is easier than buying it on GoDaddy and transferring it. Be sure to set up auto-renewals to a credit card that won’t expire and always keep the email for notifications up to date.

If you already purchased your domain on GoDaddy or other common providers, you can manage the DNS following these instructions.

PRO TIP: Make sure the URLs are available for Facebook, Instagram, and Twitter too. You don’t want brand confusion or have to buy an expensive URL or have something so long it’s hard to provide verbally to friends and fans. I can be found on https://www.dodgeashley.com as well as @dodgeashley on most platforms. This is similar to my email @mac.com.

Check Domain Availability

Do I even need a website? Maybe.

To be honest, if you have a great Facebook, Instagram, or LinkedIn profile, you can just direct your website to that. For example, I didn’t have a website for the first two years I was freelancing. I actually just built this site to show people aspects of UX/UI of Squarespace rather than creating demo sites. So somestartupincolorado.com used to just redirect to https://www.linkedin.com/in/dodgeashley/

Manage My Domains

What do I do next? Templates!

If you’ve decided that you indeed need a website, the next step is to pick a template. What I love about Squarespace is that they let you play around with templates for 14 days before you need to purchase anything.

PRO TIP: Try out a couple of these to test out functionality/design. You don’t need to like the colors, photos, or font. This can all be customized but you need to pick a look & feel that you can work with.

Test Out Templates

Each template as settings you can customize including like Pages, Design, Commerce, Marketing, Scheduling, Asset Library, Analytics, Profiles, and Settings. Keep reading for more information.

How do I edit the website?

Squarespace calls this “Pages.” Once you’ve picked out a template you like, there will be photos and web copy that you need to replace. Squarespace uses a mix of common messages and lorem ipsum.

The pre-built pages will be in the left menu of the web editor (see below example ).

Pages are separated by two sections: Main Navigation and Not Linked. If a page is listed under Main Navigation, it shows up in the menu. If it’s “Not Linked” that means the page is active but will not appear in the main menu. Below you can see I have Our Work, Our Services, and Contact in the main menu. You can also see what that looks like here: https://somestartupincolorado.com

Any of the pages from either section can be relocated by just clicking the name and dragging them up or down. This is also how you re-order your menu.

You will want begin by editing the Home page layout (see the little house next to it). Your home page does not have to be in the menu because most people know that clicking the Logo in the top left will bring them HOME. https://support.squarespace.com/hc/en-us/articles/205814778

Learn More About Navigation

PRO TIP: Keep your menu simple. Too much can be clunky (bad UX aka user experience)

Squarespace Navigation

How do I add Pages?

Above you’ll see a plus sign (+) to create another page. This will provide a prompt for you to select a blank or pre-built layout. In the image below, you can see the options are:

  • Blank Page - Clean Slate but you can still use pre-built sections or blocks

  • Page Layouts - Each template has various looks to layouts

  • Scheduling - You don’t have to use Squarespace Scheduling. I like Calendly

  • Blog - This is where I recommend storing newsletter content in a longer form

  • Store - Upgrade to an eCommerce account (Example)

  • Portfolio - Choose from many options for photos/galleries (Example)

  • Events - Promote upcoming events you are hosting/attending (Example)

  • Videos - Share natively or in Vimeo, YouTube, etc. (Example)

  • Folder - Used to create a drop down menu with internal and/or external links

  • Link - Used in Main Navigation and Folders for external links

Note: Some of you have an older version of Squarespace so there are some limitations.

Learn More and Add Pages

PRO TIP: Add a site map in your footer and submit to Google. Your website must be public for Google and other internet crawlers to index your site. You can add a “no index” tag to pages too.

Squarespace - Add Page

What are examples of websites?

Some folks know what they want and others need inspiration. I recommend looking around for sources of inspiration even if they’re not in the same industry. Here’s a list of some websites I’ve worked on recently.

I’ve been editing Squarespace, Wix, and Wordpress sites since 2015. I’ve also written web and social media content for larger tech firms but because I signed an NDA, I cannot discuss.

If you’re looking for help but staying stealth, no worries! Happy to help.

What if I have an existing website on 7.0?

There are so many options for updating your 7.0 website before doing a full rebuild in 7.1. However at a certain point it gets difficult to make changes on 7.0 and some featured updates are not supported. As of December 2023, Squarespace announced a tool to migrate to 7.1.

Here are some things you can do to update before making the switch:

  1. New Look: Simply update backgrounds, photos, headlines, text, buttons, links within 7.0

  2. To change your site’s design, Home > Design> Change Design > Select a new template. This will not affect your live website. Be sure to backup before making any switches to a newer version. If you can’t find missing content, you can view cached versions of your website if you’ve allowed for search engine indexing. You can play with a new Template for 14 days for free or longer if you add me to your permissions as I’m a Circle Member.

  3. Test links/slugs to make sure everything still works so you don’t damage your SEO. Be sure to also edit SEO descriptions and images for each page.

  4. Review content regularly and update. Proper data migration is as time intensive and costly as building a new website ($2,500-$10,000)

  5. You can request a refund from Squarespace Support if you already renewed for a year on 7.0 but want to switch to 7.1. Be sure to use the 20% code on the main Squarespace website when you upgrade from the free trial

  6. Section designs are managed sitewide/globally in 7.1, as are font styles, buttons, and animations

  7. Make the switch to 7.1 before you start blogging/adding more content or creating an online shop

  8. Take advantage of the free year of Google Workspace via Squarespace AFTER switching to 7.1

I learned how to do web design from years of research and practice so I’ll never discourage anyone willing to DIY. However, if you do need my help, let’s book a time to chat about a project fee or hourly basis.

Ready to make the Switch to 7.1?

What are common layouts?

  • General: Make it stand out

  • Appointments: Schedule clients

  • About: Share your story

  • Contact: Collect names, emails, etc. in forms or share how to get in touch

  • Services: Let prospects know what you’re offering

  • Member Areas: Sell access to your content including videos, white papers, planners, etc.

  • Gallery: Show off your work whether it’s your photos that didn’t make it in your book or professional portfolio

  • Team: Introduce everyone that helps make your work possible (Example: Partners)

  • Reviews: Brag through what others are saying with testimonials from Yelp, Google, and LinkedIn

  • RSVP: Collect registrations for an upcoming event

  • FAQs: Provide answers to frequently asked questions so you can direct folks to your website rather than repeating yourself (Example: This page)

  • Privacy Policy: Help visitors understand how you collect and use their information and link it in the footer and your newsletter

  • Terms of Service: Comply with any local, regional, and federal regulations and CYA

PRO TIP: Don’t just build a bunch of template pages and forget to update the copy. Google dings you for duplicate copy or pages that have less than 500 words. If it makes sense, keep simple and do a one-page website and as you grow, build more pages with robust web copy.

Squarespace - Add a page template

Is Squarespace Mobile Friendly?

This is crucial for good SEO. Google indexes and prioritizes websites that are mobile friendly and optimized not only for robot eyes but human eyes.

All newer templates (version 7.1) work on mobile devices including tablets. You can preview and edit in the mobile view. Note that this stacks content blocks like text, images, and photos differently so always double check what it looks like.

Below is an example of what it looks like and if you hit edit you’ll be able to drag and drop content block to make sure everything has room to breathe but doesn’t require too much scrolling. You can also expand images to fill the screen.

Learn more about Mobile Preview settings

Squarespace - Mobile Preview

How do I edit a page title?

Click the cog next to the page name. In the above picture you see the word Contact in the left sidebar. Many folks rename Blog to their Newsletter, Contact to Contact Us, Portfolio to Our Work, Services to Our Services, About to About Us, etc. Be sure to check the SEO tab too and not just what’s listed on General settings.

How do I delete a page?

Also in the picture above, you click the trash can symbol as seen to the right of the word Contact.

How do I recover a deleted page?

In the bottom left of the pages view, there is a list of pages that have been deleted in the past 24 hours. If you’ve deleted a page and it’s not there, double check that you didn’t just drag it somewhere else.

How do I edit the header?

This setting is site wide (global) and has options for desktop and mobile. Hover over the top of any page and click “Edit Header” when it appears in the top middle of your screen as seen here. Options:

  • Title Text or Logo: Be sure to type in title text for SEO even if you use a logo

  • Elements: You can add or hide a button, social and email icons, a shopping cart icon (e-commerce) and/or customer logins as well as edit their height and look

  • Design: You can edit the look by editing the first section right below the header under Colors

Note: Be sure to preview on mobile versions to see how the hamburger menu stacks.

Squarespace - Edit Site Header

What are some more advance features?

When editing a page, click “Add Block” and select one of the options/integrations:

Use the pencil icon to edit the block’s content, alignment (left, right, center), layer (overlap etc.) or delete.

How do I edit the overall design?

Squarespace has a couple options here. You can hit edit on any page and click the paintbrush in the top right or you can go Home > Design > Design Settings

  • Site Styles: Edit fonts, spacing, animations, and more here

  • Browser Icon: This is also known as a Favicon and shows up in your web browser

More advanced Settings:

  • Lock Screen: For private sites under construction

  • Checkout Pages: For eCommerce

  • 404 Page: If a link to your site is broken, this shows a customizable error page

  • Access Denied Screen: For password protected/member only pages

  • Social Sharing: When a link is shared, if a custom image isn’t added this prepopulates an image. Ex. When you copy and paste the url from this page, it will prepopulate a photo and text into a text message, Facebook posts, Instagram chats, or LinkedIn posts

PRO TIP: Set your 404 to redirect to HOME or CONTACT pages so that people don’t bounce from your website. It can look unprofessional if someone goes to an old page and the link is broken. This happens when products/services change or employees have specific bio pages and then leave your organization.

What are other ways to customize my site?

When you edit your website, you will see a left margin with the following options:

  1. Pages: Main Navigation and Not Linked (See Above)

  2. Design: Site Styles, Browser Icon (Favicon), Lock Screen, Checkout Page, 404 Page, Access Denied Screen, Social Sharing

  3. Commerce: Set up your store with products, payments, and add your cart in the header. Orders, Inventory, Customers, Discounts, Memberships, Sales Channels (Facebook, Instagram, Google), Selling Tools (Point of Sale, Custom Merch, Product Status, Waitlists, Related Products, Product Reviews), Notifications (Customers, Low Stock), Setup (Payments, Cart & Checkout, Customer Accounts, Shipping, Pickup, Taxes, Accounting

  4. Marketing: Grow your audience with subscribers to newsletters in a pop-up. Email Campaigns (Subscribe Form), Profiles (Import CSV) , Discovery (SEO, Location Management), Engagement (Promotional Pop-Up, Announcement Bar), Promotion (Instagram Stories, Meta Pixel & Ads, Pinterest Save Buttons), URL Builder, Google Ads Credit

  5. Scheduling: Book Clients

  6. Asset Library: Store Logos, Photos and Videos

  7. Analytics: Check out your web traffic and optimize your SEO. Overview (Traffic, Geography), Aquisition (Traffic Sources, Search Keywords), Engagement (Site Content, Activity Log, Form & Button Conversions, Site Search Keywords, RSS Subscribers)

  8. Profiles: All, Subscribers, Leads, Customers, First-Time Customers, Repeat Customers, Donors

  9. Settings: Site Availability (Public, Private, Password Protected), Member Areas, Language & Region, Business Information, Social Links, Connected Accounts, Extensions, Permissions (Invite and Remove contributors), Domains, Google Workspace (Free for one year!), Billing, Mobile Information Bar, cookies & Visitor Data, Blogging, Advanced Settings

  10. Help: There is no shortage of online support from Squarespace. You can visit the Help Center, Ask the Community, Join a Live Webinar, or Hire an Expert. Customer support is pretty prompt.

How do I optimize my site?

Squarespace has a list of Best Practices, SEO Checklist and Audit and I really love using anchor links to help jump around on a page.

The main things I would highlight from a design or UX/UI perspective:

  1. Branding: Don’t forget to update your Header, Update Browser Icon, Checkout Page, 404 Page (I change to default to Home), Social Sharing (Sitewide and Blog Post Previews) 

  2. Commerce/Products: Connect to Stripe, Square, Paypal, Venmo, ApplePay

  3. Marketing: Use the free trial for 3 email campaigns

  4. Engagement: Regularly update Promotional Pop-up and Announcement Bar

  5. Scheduling: Use a calendar app with SMS and email reminders to save time

  6. Analytics: Track Sales, Traffic, Geography, Keywords, and Conversions  from your phone

PRO TIP: Verify your website with Google Console and create a Google Business Account that sends folks to your website. This is another place to share offers, posts, photos, services, hours, and other information as well as gather google reviews.

What are other helpful tools/strategies?

How do I edit a section?

You can Add a section by hovering over the top or bottom of a section. This option will appear in the middle of your screen. You can also duplicate sections, move them up and down (reorder), favorite sections (heart), and remove (delete) them.

When you click Edit Section you can change the design background, image, colors, opaqueness, etc.

Squarespace - How to Edit Sections

Didn’t find what you were looking for? Search for a key term here