TL;DR
Ok this is a proper complete guide so you probably kinda have to read the blog post but, in a nutshell to build a doula website on Squarespace you’ve gotta: pick a template, set your fonts, colours and buttons in Site Styles, then replace the template text, images and button links page by page. To optimise your site for SEO make sure you resize, rename and add alt text to every image, give each page a keyword-rich URL slug, use your SEO keywords in your headers and throughout your site. Please for the love of birthworkers, save often (Squarespace doesn't autosave).
Yay exciting you’re ready to make your doula website! It can definitely feel like a huge and daunting job, but it really is just a series of small, doable steps. Do them in the right order and it’ll be SO much more straightforward, efficient and successful than a trial and error attempt that ends up looking like a proper botch job. You want a site that looks amazing and brings in the beautiful clients you deserve. Maybe today is not the day to sign up for a big custom build from a website designer, but you still deserve a site that feels like you, not some generic template. This guide walks you through the whole process, from logging in to sharing your site for feedback.
What's in this guide
Choose a template and set up Squarespace
Log in and find your pages
Start with Site Styles (fonts, colours and buttons)
Organise your pages and set SEO-friendly URL slugs
Edit your text content
Replace your images (and boost your SEO while you're at it)
Change button text and links
Edit testimonials and FAQs
Work with sections
Squarespace tips and shortcuts
Share your site with proofreaders
FAQs
1. Login to Squarespace + choose a template
First thing's first - create a Squarespace account. Your site will pop up in your dashboard on Squarespace. This is where you will be able to access your site to edit it going forward. Then choose a template. There’s a ton of “free” ones i.e. ones that are included in your Squarespace membership, so you can try and find one of those that fits your needs. I’ve created Squarespace templates specifically for birth workers and doulas, which are tailored to fit what most of the doulas I've worked with need - so take a look at these as well, they may be super helpful. If you require anything additional such as a shop, a membership functionality or anything else you can think of, it can be added to your specific site.
2. Go to your new doula website on your “dashboard”
On your dashboard you will see your new website, click into this website.
Click on the “pages” subtab under the “Website” tab on the left side of the screen. This allows you to see all of the pages that are already included on the template site.
Click the black 'Edit' button to enter the editor mode
You're now ready to start customising!
3. Start with Site Styles
Site styles is really important in Squarespace. You can access it in the top right hand corner of the Squarespace screen by clicking on the paintbrush icon.
Site styles is the place where you can “set” the styles that you want to use globally across your whole site. If anything goes awry while you’re making your site for example a button is coming up in the wrong colour/font/size - site styles will be where you need to look to fix it.
Changing fonts
Change the template fonts to the fonts your brand fonts:
Stay in site styles or return to site styles by clicking the paintbrush icon
Click on the arrow to the right of fonts (if you click on the fonts themselves i.e. not the arrow, you will see a selection of Squarespace’s “recommended font packs”.)
Choose fonts for “headings” and “paragraph” text by clicking into these to adjust them - you can also choose an “accent font” for example if you’ve chosen a handwritten style font pop that in the “miscellaneous” section.
Make sure you’ve reset your “buttons” font as either your heading or your paragraph font, as having another font on the buttons will start to make the page look messy.
Don’t adjust the font size in this screen. Adjust it in the following screen when you click through to the specific settings for each font.
There are other settings you can adjust that can help really refine and professionalise your site:
Weight: Some fonts have multiple “weights” this is a bit like more subtle versions of bold, so if your chosen font has options you could change this to make it really bespoke.
Style: Your font might have the option of being “bold” or “italic” - remember if you change it here it will apply across your whole site.
Line Height: this is the distance between one line and the next, so you can increase it to separate the lines further or lower it to bring them closer together. Particularly with heading fonts it can look good to reduce this.
Letter Spacing: this is the distance between the letters, again this will probably only be relevant for specific styles of heading fonts but it can make it look more professionally made.
Text transform: This is about capitalising - so if you want your headings to be in all caps or always have the first letter of every word be a capital you can do this here. Because it will be a global change I would advise against doing this here and instead just TYPING IN ALL CAPS if you want a particular header to have more impact.
Adjust sizes if needed. Again, don’t do this using the “base size” leave that at 16. The font sizes which you want to adjust are in each of the separate sections below all the other settings.
You just slide the circle up or down or click on the number and type the figure you want. This usually is just a process of trial and error once you’ve put your text into the template - so don’t stress about it at this stage. Come back to it later.
Changing colours
Change the template colours to your branding colours:
Click on the arrow to the right of colours (if you click on the colours themselves i.e. not the arrow, you will see a selection of Squarespace’s “recommended colour palettes”.)
Click on edit palette
Choose each colour individually and copy and paste the hex code of your chosen colours into each slot
Add your colours from light to dark - left to right (this is because Squarespace automatically creates “colour themes” based on your colour palette and it will combine the colours using its understanding of the lightest colour being on the left and the darkest on the right.)
Changing your palette makes colour changes update across the entire site
Setting button styles
Click on the arrow to the right of buttons
Click on “all button packs”
Choose a button pack - if you hover over all the button packs it will show you the three buttons included within that pack
4. Organise your pages and set SEO-friendly URL slugs
Now you’ve set your site styles, you're ready to start editing your pages. My doula website templates come with five pre-built pages, each designed with content sections to match your website copywriting. These are:
Home
Services
About me
Blog
Contact
If you choose a template from Squarespace it might not have all these pages/might have different pages but the next section will apply in the same way.
Main navigation and not linked
The menu of pages is split into your main navigation and the not linked pages. You can see these on the left hand side of your screen once you’ve clicked into pages. The pages that are in your main navigation are visible and linked in your navigation. You can drag and drop pages from the “Main Navigation” section to the “Not Linked” section as you wish.
You won’t want all your pages visible in your menu, for example your home page (as this is linked via your logo not your menu), privacy policy, any hidden pages that are there for SEO, contact page (as this is linked in a button in your navigation not your main menu to make it super clear how to get in contact with you) etc.
URL slug
A url slug is the web address plus whatever you’ve added to show which page is which. For example laurahubbard.com/services
Squarespace will automatically create URL slugs based on the “name” of the page, as for the above “services” however it is useful for SEO to customise these to have some keywords in it. For example instead of laurahubbard.com/services it would be better for me to have laurahubbard.com/doula-website-design-services.
Go to the settings for each page and create a SEO Keyword optimised URL slug for each page. This will serve you well when you come to edit your template and start setting up internal links on your site (i.e. where you click from one page to another).
5. Edit your text content
Editing and saving
Click on “edit” in the top left of the screen. You’ll then be in editor mode. The “Edit” button will be replaced with a “Save” and “Exit” button.
You must save your changes. Squarespace does not autosave, so periodically click the save button. If you click “Exit” with unsaved changes Squarespace will warn you that you might not want to “Exit” until you’ve saved.
Updating text content
Replacing the placeholder text with your own content is simple:
Click on any text block to select it - this will show you a menu.
This is a menu that applies to the text block rather than the text itself. Taking these icons left to right:
Pencil: when you click on this it will take you into the text itself so you edit the contents of the text block.
Paint box: this allows you to put a background colour just for the text block.
Align icon: This allows you to align the text in the block to the top/middle/bottom of the block. This is really useful to know because it can help you get the text exactly where you want it, when moving the text block itself isn’t quite getting there.
Pin: This pins the block so as a visitor to the site is scrolling, that block will stay still until the visitor reaches the next section.
Duplicate squares: this duplicates the block
Bin: the bin deletes the whole text block.
Now you know how to edit the text block itself but you will of course want to edit the text within the text block. You can do this either by double clicking on the block or using the pencil icon mentioned above. Once you’re into the text block, you can highlight the template text and replace it by pasting in your own text.
Once you’re in the text block editing text this formatting menu will appear. Again taking this left to right:
Tag & text type: Where it says Heading 4, is where you choose the different “types” of text you can have on your site. There are 4 headings and 4 paragraphs. These will be different sizes based on the size you’ve chosen in Site Styles as explained above. In your templates these will already be set but as you learn to edit your site and add things you need to you’ll be using these more. You should only use one Heading 1 per page.
Bold & Italics: you’re familiar with. You can use these to make things have a little more impact. From a design perspective it’s best to use a consistent system for emphasising things i.e all bold or all italics, not a mixture of both.
The black dot: this is to adjust the colour - but just for this specific text box. If you want to change the colour of all the headings in a section with that colour theme you need to do that via site styles.
The A in the picture frame corners: This will increase the size of the text in that specific box to fill the boundary of the text block. So if you want one piece of text to be really big you can do it like this, not by changing the size of the font in site styles.
A with underlines: this is a cute tool to give little bits of text emphasis. Use this to highlight a couple of words and choose a style of pen-like drawing to go around it. This can also be animated so it actually looks like someone is circling a couple of words as the visitor scrolls down the page.
Link: you can use this to add a link.
Text alignment: the same as you would have in a word document
“Quote”: this is for a quote setting
Bullets & Numbers: same as word
Everything else on that menu isn’t useful. Except the bin which will delete the whole text block.