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)
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.
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:
New Look: Simply update backgrounds, photos, headlines, text, buttons, links within 7.0
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.
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.
Review content regularly and update. Proper data migration is as time intensive and costly as building a new website ($2,500-$10,000)
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
Section designs are managed sitewide/globally in 7.1, as are font styles, buttons, and animations
Make the switch to 7.1 before you start blogging/adding more content or creating an online shop
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.
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
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.
What are some more advance features?
When editing a page, click “Add Block” and select one of the options/integrations:
Content Blocks: Text, Image, Video, Audio, Newsletter, Calendar, Accordion, Scrolling
Events: Reservations (Tock), Scheduling, Calendar, Bandsintown, Zola (Registries)
Restaurants: Menu, OpenTable, Reservations (Tock)
Business: Product, Donation, Member Sign Up, Scheduling
Filters & Lists: Search, Fluid Engine, Tag cloud
Formatting: Text , Scrolling, Line, Spacer, Quote, Markdown, Map, Shape blocks
Calls to Action: CTA: Button, Content link, Embed
Forms: Many field options, custom success messages, notifications and storage
Comms/Social links: Newsletter, Instagram, Twitter, Foursquare
Collections: Audio, SoundCloud,Video, Chart, Gallery, Summary, Image: Archive, 500px Flickr
Other: Search, RSS and Code - JavaScript/ iframe (can slow performance)
Stores: Product, Amazon Affiliate Program, Donations (Stripe or PayPal)
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:
Pages: Main Navigation and Not Linked (See Above)
Design: Site Styles, Browser Icon (Favicon), Lock Screen, Checkout Page, 404 Page, Access Denied Screen, Social Sharing
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
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
Scheduling: Book Clients
Asset Library: Store Logos, Photos and Videos
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)
Profiles: All, Subscribers, Leads, Customers, First-Time Customers, Repeat Customers, Donors
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
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:
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)
Commerce/Products: Connect to Stripe, Square, Paypal, Venmo, ApplePay
Marketing: Use the free trial for 3 email campaigns
Engagement: Regularly update Promotional Pop-up and Announcement Bar
Scheduling: Use a calendar app with SMS and email reminders to save time
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?
Choose Pricing: Squarespace starts at $16 a month for personal sites billed annually and gets more expensive with Business, Commerce, etc. Check out the breakdown here: https://www.squarespace.com/pricing
Get Organized: Canva (graphics), Pinterest (mood boards), Millanote, Figma, Evernote, Trello
Use Emojis: https://emojipedia.org/
Get Headshots and Product Photography: https://soona.co/
Write Newsletters: Import Mailing List to Squarespace or Mailchimp
Build Content: Expand upon what you write in newsletters in your blog or write a blog and shorten for your newsletter with a button that says read more. This builds traffic to your website and grows SEO
Google: Email/Workspace, Business Listing, Analytics
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.