How to get the most out of Squarespace Site Styles
📌 Pin it!
To get the most out of your Squarespace site, you’ve gotta really dig into that Style Editor page. But what you may not realize? The editor won't allow you to style some things that aren't on the page you’re viewing when you enter the Style Editor!
So today’s Squarespace How-To will walk you through setting up a Style Guide page, to help you get the most out of your style editing!
Looking for 7.1-based advice? Read this post too:
How to start & build a 7.1 site, fast
Step 1 | Create a new blank page
In your "Not Linked" pages section, click the +
Select Page
Select Blank
Give the page a title (something like Template Style Guide)
Start editing
Okay, now you’ve created your new page, and you’re ready to start laying it out, right? Remember! This page can be disabled (I’ll walk you through that too, right after you save everything you worked on!). If you choose to do that, then no one will be able to see it, so it doesn’t have to look perfect! It only has to have all the elements on that page that you’ll be using on your site.
Step 2 | Think about which elements you want
Think about everything you will want to have on your website. Things like:
buttons
paragraph text
headers
quote blocks
columns
images
newsletter blocks
forms, etc.
If you want, you can make a list of elements you want to be able to edit later, and add them to this page. If you don't want to plan ahead, you can follow my suggestions here, which contain the basics, and then add more to the page later on as you find additional elements that need styling.
Step 3 | Add some text
Add a text block to your page. Since it’s currently blank, you can just click on it in the Add Block window, and it will place it at the top for you.
Headings & Paragraphs
To simulate paragraph text, you can grab some Lorem Ipsum simulated “dummy” text from this link here, by copying from that site & pasting into your newly added Text Block. Or, of course you can come up with something to write about in these places, if you want! Set up your text like the following:
Default Heading 1
<paste paragraph text here> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nulla diam, laoreet feugiat eros vitae, ornare convallis nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse convallis sodales massa sit amet fringilla.
Default Heading 2
<paste paragraph text here> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nulla diam, laoreet feugiat eros vitae, ornare convallis nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse convallis sodales massa sit amet fringilla.
Default Heading 3
<paste paragraph text here> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nulla diam, laoreet feugiat eros vitae, ornare convallis nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse convallis sodales massa sit amet fringilla.
When your done, it should look something like the example below:
Linked text
If you want to style linked text, make sure to select at least one word from one of your “dummy” paragraphs, and link it to some website, by clicking on the chain-link icon in the text editing bar (right after the Bold and Italics icons). You can link to your homepage, or the Lorem Ipsum page, etc. Whatever works best for you!
My own links are usually the paragraph text in coral, as you can see in the above example.
Quoted text
Next, add more text in quote format, by pasting in some more dummy text (all of this text your pasting can be the same paragraph over and over, to make it simple). Select the text you want to change, then select Quote from the Format pull-down menu in the grey bar at the top of your text editor.
Lists: Bulleted & Numbered
Next, create a bulleted and a numbered list! You can create your own, or get some dummy text from that site again. You can get their dummy text for bulleted lists, by clicking here, then copy and paste into your text editor back in Squarespace. Paste it in twice, then select one group and change it to bullets, then select the other group and change it to numbered.
Bold or Italicized text
It would be smart to select some text and make it bold or italicized, as well. That way you can see what your body text will look like in those styles if you ever decide to change it.
Step 4 | Add columns
Set up some more dummy text in columns. To do that, you add another Text Block, paste in some dummy text & give it a heading (if you want). Then add another Text Block, and this time, click and drag the text block to the right or left of the one you just added, only letting go of the mouse when you see that dark grey insert point line popping up in the space you want to add it. You can set up 2 or more columns the same way.
This will help you visualize how the line-height & text wrapping will look in the font style you choose BEFORE you start implementing on the real design.
Step 5 | Set up your header text in paragraphs
Just so you can see how long titles or headlines will look in the styles you chose, it’s always good to set up dummy paragraphs or dummy titles using those styles.
To do this, you guessed it! Paste in more of that dummy text! Then select each group and change it to one of your header styles from the Format drop-down.
This will help you visualize how the line-height & text wrapping will look in the font style you choose BEFORE you start implementing on the real design.
Step 6 | Add a quote block
If you think you might want to use a quote block on your site to post customer reviews, etc., add a dummy Quote Block here. You can grab this right from the Add Block section! Paste in some more of that dummy text, when the edit window pops up.
The top area is where you’ll paste in the quote, and the bottom is the byline, or where you write the author of the quote.
Since I’m using dummy text for mine, I just wrote Lorem Ipsum for the author.
You can use this block to find & edit the styles for this block type, in Site Styles, along with everything else after you’ve set up this template guide.
Step 7 | Add images with a caption
Add an Image Block, choose an image to put there, and write a caption. You can make it appear smaller in your layout by adding a spacer on the left & right sides of your image, then adjusting the width on each spacer, which automatically adjusts the size of the image you added.
Image Block
There are several different ways you can style and format your images. Squarespace has descriptions for each below:
Inline - Display a plain image with an optional caption (our classic Image Block).
Poster - Display text over the image.
Card - Align text to the left or right of an image.
Overlap - Display an image on one side with text on the other, partially overlapping the image. Add a background color to the title for a highlighting effect.
Collage - Display an image on one side and text over a background "card," offsetting and overlapping the image.
Stack - Display an image with text below, with an optional background color.
I've styled some for this example, below. To set these up, you just select a layout either from the Add Block section or from your Edit Image window.
Here are those Image Block 2.0 examples, so you can see how much each type can be customized. (click on any to enlarge it).
Step 8 | Add a Form Block
Super easy! Select it from the Add Block section, and it will be at the end automatically. If you want to customize it, to see what those radio buttons (allows 1 selection out of several options), checkboxes, (allows multiple selections from several options), drop down boxes, etc., look like, then edit the form to show those things now.
To add more options to your Form, in the Edit window for that form, select the plus sign at the bottom, and choose a field you want to add from the Add Form Field pop up.
Step 9 | Add buttons in different sizes
Last, but certainly not least, add buttons! Make sure you add a Small, Medium, and Large button so you can style each one later. You can lay them out however you like.
There are a lot of blocks you can add, that can help customize your site to fit your brand. But the Style Editor can't see a lot of them unless they're on the page you're viewing while using it.
So, take some time and set up a style guide for your own site! While that page is open, go into your Style Editor and go through it, fixing all the little details. It can be tedious, I know, but it will payoff when you're done!
Hiding Your Style Guide
Once you've completed your Style Guide page, you might want to hide it from public view, since it's not really an information page.
You can do that by going into your Pages, and selecting the gear icon for that page. When it comes up, click "Disable," then Save at the bottom. It may ask if you're sure, and if so, click Yes or Save to save that change.
Once you've done that, the page title will be listed in light grey, and no one will be able to look at it, but you. :)
See the whole layout:
READ MORE: How to launch a new site on 7.1, FAST
Save money & attract better clients.
It’s not a pipe-dream! Get a custom design without the year-round payroll of an in-house designer or designer on retainer, because editing is truly easy.
