How to get the most out of your Squarespace Style Editor

S1862_How-To-Get-The-Most-Out-Of-Your-Squarespace-Style-Editor.jpg

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!

 

Step 1 | Create a new blank page

  1. In your "Not Linked" pages section, click the +
  2. Select Page
  3. Select Blank
  4. Give the page a title (something like Template Style Guide)
  5. 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.

 
 

You can see this in the example below:

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. When you’re done, it should look similar to my examples below.

 
 
 
 
 

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. When you’re done, it should look something like this:

 
 

 

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. Mine look like this:

 
 

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. 

 

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.

NEW FEATURES: Image Block 2.0

Now 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.

 

select the style from the Add Block section

or from the Edit Image window, under the Design tab at the top

 

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).

 

Inline: (the original Image Block style)

Poster:

 
 
 

Card:

Overlap:

 
 
 

Collage:

Stack:

 
 

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.

 

here are the options available to add to your Form Block

 

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, and when you’re done, it should look something like this:

 
 

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. :)

 

 

What tips or tricks do you know that could help readers with this topic? Comment below with your suggestions!

HAVE OTHER COMMENTS ABOUT THIS ARTICLE OR SUGGESTIONS FOR A NEW BLOG? COMMENT BELOW! I'D LOVE TO HEAR FROM YOU!

Katelyn Dekle

Studio 1862, P.O. Box 244, Calvary, Ga, 39828

I'm a freelance graphic designer. I've been designing for 10 years, and still love it! My passion is helping small businesses, startups and entrepreneurs become successful by providing professional branding and website design services.

What do you need help with right now? Visit my website for advice from my blog, sign up for my newsletter + access to freebies, or follow me on Twitter, Facebook, Instagram or Pinterest to stay connected! =) 

Follow