HOW TO

Use Your Template

Congratulations on getting started with your website!

Before you begin styling, watch my video on how to set up your website.

Next, scroll down this page to learn all about how to style your site.

Watch the video

How to Add Pages
(the Easy Way!)

To make new pages for your site, I recommend duplicating the page called “TEMPLATE PAGE.” You’ll get all the pre-designed styles and layouts (and you can easily move sections around, delete them, change their colors, etc).

HINT: Not sure how to duplicate pages? Watch my video above 👆 or check out this Squarespace tutorial.

How to Use Squarespace

This website runs on Squarespace Version 7.1, Classic Editor.

I have created a guide to the most essential tutorials so you can easily find what is relevant to you.

See the guide

Your writing workbook

Click the button below to go to your writing workbook!

There are instructions inside the workbook on how to use it.

Go to my workbook

How to get this opalescent gradient background

This effect is just a background image! If it doesn’t work with your colors you can try playing with the overlay opacity in your background image settings:

(Edit Section ⟶ Background ⟶ Scroll Down ⟶ Overlay Opacity)

If that doesn’t work either, you can also find many free gradient background images at Canva and Pexels or you can purchase paid ones at Creative Market. Just search '“gradients” or “gradient backgrounds".”

Custom Gallery Feature

Using custom code, I modified the “Stacked Gallery” block, native to Squarespace, to create this overlapped effect.

To change the images, click the little pencil icon that appears when you hover over the images.
Click the “+” symbol in the lower right corner, which will allow you to add images from your computer, from the site library, or browse stock images.
The first image will be the bigger one.
It only works for two images, no more.

NOTES ABOUT IMAGE SHAPES:

For the oval shape shown, you need to use an image that is taller than it is wide (aka “portrait” ratio).
If your image isn’t “portrait” ratio, you can crop the image to that dimension by clicking the little pencil.
If you use a square image, it will turn into a circle.
And if you use a landscape image, it will still be an oval, just a horizontal one :) It actually looks really cool too!

Watch the quickie video tutorial⟶

Using photos on your template

You can use any of the images that are included with your template! They are all from either Unsplash or Pexels.

If you want to find other images, check out this post I wrote for tips on where to find good stock photos (and making sure you have the correct license to use them!).

Typography

You can easily change the template typography to make it your own if you like!

Here’s the guide.

Heading One

Heading Two

Heading Three

Heading Four

Heading One Italic

Heading Two Italic

Heading Three Italic

Heading Four Italic

Paragraph one

Paragraph two

Paragraph three

Paragraph one italic

Paragraph two italic

Paragraph three italic

Button Styles

The buttons have the arrow accent automatically (if you want to remove it, just email me).

The “tertiary button” is styled to have the animated gradient effect. If it’s not for you, don’t use it. You still have the primary and secondary button styles to style & use as you wish!

Note: If you want to use it but you really really want to change the color, it will require a slight code adjustment, so email me!

Primary Button

Secondary Button

Tertiary Button

Note: The buttons in the “split sections” act a little differently. See the info below to understand what I mean.

Split section styling

Your text will go here.

And then the button will go below all of your text.

When you aren’t in “edit mode” you’ll see the button will magically snap to the width of this area and stick to the bottom!

No text or images (or anything) can go below the button, or else they will work like a regular button (and not stick to the bottom).

See the quickie tutorial video ⟶

Sample button

Color Themes

⍛

Color Themes ⍛

Below are samples of each of your color themes.

You can change the colors in your Site Styles menu (see the guide here).

TIP: When you are changing colors, it can be useful to look at this page while you’re doing it to see how the changes are affecting each theme and how they look all together.