Squarespace Guide | Hefferren Consulting
Karina Cruz
62 steps
5 minutes
Squarespace
Finding your website editor
1
Navigate to [https://www.squarespace.com/](https://www.squarespace.com/)
2
Click on your profile picture
3
Click "Account Dashboard"
4
Click "WEBSITE"
Website Editor
5
Click "Pages"
6
Under "Pages" you'll see the three pages on your website. \ Click on the page you want to edit.
7
Click "EDIT"
Text Editing
8
Click on the text box you wish to edit.
9
Double-click into the text box and begin changing the text.
10
You have the ability to format the text in a similar way to Google Docs or Word with this formatting menu.
11
Change the size of the text by clicking on the paragraph styles.
Changing Text Color
12
Double-click the text you wish to change the color of.
13
Click this button.
14
The color you select will change the highlighted text color.
Changing Background Colors
15
Click "EDIT SECTION"
16
Click "Colors"
17
Click on the color theme you want that section to be.
Changing the color theme will change other aspects of that section, not just the background color. There's more information on color themes under "Advanced Changes" in this guide.
Updating Bottom Section of Homepage
This section is a bit more complicated than the others used on your website.
18
Click "EDIT CONTENT"
19
Click "Content"
20
Click "Title" to change the text above the images.
21
This text box will appear where you can edit the text.
Changing the images
22
Click "Content"
23
Click on the image you wish to change
24
Click "Replace"
25
Click "BROWSE STOCK IMAGES" or "UPLOAD FILE" if there's an image on your desktop you wish to replace it with.
26
To find a free stock image you simply use their search tool.
27
Here's an example:
28
Click "SAVE" and then "EXIT" to save your changes and edit another page.
29
Once you exit, the side menu will appear again. Click on another page to begin making edits there.
30
Click "EDIT" to begin making changes.
Changing Background Images
31
Click "EDIT SECTION"
32
Click "Background"
33
Click "REPLACE"
34
Upload the image you wish to replace the background with or browse stock images.
Editing Text
35
Double-click the text box to make edits to the text.
Underlining Text
36
Click on the text box
37
Double-click and highlight the underlined word
38
Click here.
39
Here you can change the formatting of the line or get rid of the line all together.
40
Changing the color of the line (to change the color of the word and not the underline, go back to the text box's formatting menu.
Replacing Image on Services Page
41
Click on the image.
42
Click "Edit"
43
Click "REPLACE"
44
Click "Save" and "Exit"
Mobile View
Tip! Always look at your changes in MOBILE VIEW before finalizing any changes. You can move items around on mobile view without it affecting the desktop version but you cannot delete or change colors on one view without affecting the other. I also play around with the screen size on desktop view to ensure the changes look appropriate on all screens.
45
Click on cellphone icon to change to "MOBILE VIEW"
46
Click on computer icon to go back to "DESKTOP VIEW"
Social Images (the image that shows up when you share a direct link to any of your pages)
47
Click on the gear icon next to the page you want to change the social image for
48
Click "Social Image"
49
Click "REMOVE IMAGE" to replace the images I've uploaded.
50
Click "ADD IMAGE" to replace the image with one on your computer
51
Click "SEARCH FOR IMAGES" to replace it with one that has already been used on your website or to change it with a free stock image.
52
Here you can see the images I've used throughout your website (as well as some that I uploaded but didn't end up using).
53
Click "ADD"
54
Click "SAVE"
Advanced Changes
Please note that changes made using "Site Styles" will affect the entire website
55
Click "HOME"
56
Click "Styles"
57
Click on:\ "FONTS" to change the paragraph styles.\ "COLORS" to change color combinations. \ "BUTTONS" to change the button shape and formatting.
58
Click "SITE STYLES" after you made your changes.
59
Click on "BACK" to go back to the editor.
Site Header
60
Click "EDIT SITE HEADER"
61
Click on the logo to change the size of the logo or update it with a different version of the logo.
62
Click "Edit Site Title & Logo"
Remember to always save your edits!
Squarespace Guide | Hefferren Consulting
Karina Cruz
62 steps
5 minutes
Squarespace
Finding your website editor
1
Navigate to [https://www.squarespace.com/](https://www.squarespace.com/)
2
Click on your profile picture
3
Click "Account Dashboard"
4
Click "WEBSITE"
Website Editor
5
Click "Pages"
6
Under "Pages" you'll see the three pages on your website. \ Click on the page you want to edit.
7
Click "EDIT"
Text Editing
8
Click on the text box you wish to edit.
9
Double-click into the text box and begin changing the text.
10
You have the ability to format the text in a similar way to Google Docs or Word with this formatting menu.
11
Change the size of the text by clicking on the paragraph styles.
Changing Text Color
12
Double-click the text you wish to change the color of.
13
Click this button.
14
The color you select will change the highlighted text color.
Changing Background Colors
15
Click "EDIT SECTION"
16
Click "Colors"
17
Click on the color theme you want that section to be.
Changing the color theme will change other aspects of that section, not just the background color. There's more information on color themes under "Advanced Changes" in this guide.
Updating Bottom Section of Homepage
This section is a bit more complicated than the others used on your website.
18
Click "EDIT CONTENT"
19
Click "Content"
20
Click "Title" to change the text above the images.
21
This text box will appear where you can edit the text.
Changing the images
22
Click "Content"
23
Click on the image you wish to change
24
Click "Replace"
25
Click "BROWSE STOCK IMAGES" or "UPLOAD FILE" if there's an image on your desktop you wish to replace it with.
26
To find a free stock image you simply use their search tool.
27
Here's an example:
28
Click "SAVE" and then "EXIT" to save your changes and edit another page.
29
Once you exit, the side menu will appear again. Click on another page to begin making edits there.
30
Click "EDIT" to begin making changes.
Changing Background Images
31
Click "EDIT SECTION"
32
Click "Background"
33
Click "REPLACE"
34
Upload the image you wish to replace the background with or browse stock images.
Editing Text
35
Double-click the text box to make edits to the text.
Underlining Text
36
Click on the text box
37
Double-click and highlight the underlined word
38
Click here.
39
Here you can change the formatting of the line or get rid of the line all together.
40
Changing the color of the line (to change the color of the word and not the underline, go back to the text box's formatting menu.
Replacing Image on Services Page
41
Click on the image.
42
Click "Edit"
43
Click "REPLACE"
44
Click "Save" and "Exit"
Mobile View
Tip! Always look at your changes in MOBILE VIEW before finalizing any changes. You can move items around on mobile view without it affecting the desktop version but you cannot delete or change colors on one view without affecting the other. I also play around with the screen size on desktop view to ensure the changes look appropriate on all screens.
45
Click on cellphone icon to change to "MOBILE VIEW"
46
Click on computer icon to go back to "DESKTOP VIEW"
Social Images (the image that shows up when you share a direct link to any of your pages)
47
Click on the gear icon next to the page you want to change the social image for
48
Click "Social Image"
49
Click "REMOVE IMAGE" to replace the images I've uploaded.
50
Click "ADD IMAGE" to replace the image with one on your computer
51
Click "SEARCH FOR IMAGES" to replace it with one that has already been used on your website or to change it with a free stock image.
52
Here you can see the images I've used throughout your website (as well as some that I uploaded but didn't end up using).
53
Click "ADD"
54
Click "SAVE"
Advanced Changes
Please note that changes made using "Site Styles" will affect the entire website
55
Click "HOME"
56
Click "Styles"
57
Click on:\ "FONTS" to change the paragraph styles.\ "COLORS" to change color combinations. \ "BUTTONS" to change the button shape and formatting.
58
Click "SITE STYLES" after you made your changes.
59
Click on "BACK" to go back to the editor.
Site Header
60
Click "EDIT SITE HEADER"
61
Click on the logo to change the size of the logo or update it with a different version of the logo.
62
Click "Edit Site Title & Logo"
Remember to always save your edits!
