Everything you need to know about the Text Block in Squarespace
When starting out with a new design tool understanding and mastering the basics is the first step. One of the fundamental tools you need when building a website in Squarespace is the Text Block. View the video below and read through the article, I'll also be sharing some design tips and tricks for using the Text Block.
The text block is your first option in the Squarespace content block. You can use it to add headings, links, quotes, lists and more. Begin by adding a text block. New blank pages come default with a text block on it. Click into the text block and start typing to add text. The tool layout at the top is similar to other text editors you already use such as Microsoft Word or Pages.
An example of all the options available in the Text Block the numbers in the pictures coordinate with the numbers examples listed below.
Tools
Squarespace Website Design Tip: I have included the "Hot Keys"/"Shortcut Keys" in this article. Try using them while working in the Text Block to make your website build process faster.
1) Undo (⌘+z) - Use this key to go back a step if you made a mistake. You can go back (undo) multiple changes to your text if you have not already saved your changes.
2) Redo (Shift +⌘+z) - You can use this if you undid a step and would like to revert back to the previous version of the document you just had.
Squarespace Website Design Tip: These tools are great if you are trying to lay out text in a few different ways. Change the text as you'd like and then use these keys to move back and forth through your changes to see which version looks the best.
3) Bold (⌘+b) - Makes your font a bold version of the font. Great for emphasizing a word or sentence in a paragraph. This is bold text. (Note, bold will not work if you are already using the boldest version of the font that Squarespace caries as your font).
4) Italic (⌘+i) - Allows you to use the italic version of your font. It slants to the right. This is an example of italic. It is great for emphasizing a word or sentence in a paragraph.
Squarespace Website Design Tip: Use bold and italicized text sparingly to draw the attention of your readers to a certain sentence or paragraph.
5) Link (⌘+k) - You can link your text to an external web page such as google.com. If I am linking off of my website, I usually opt to open the link in a new window so that users can still easily access my website. You can link to an internal page in your website, link to an email, link to a phone number, and link to a File. (Typically a PDF, when linking to a file I always opt to open that file in a new window).
6) Left Align (Shift +⌘+l) - Used to line your text up with the left side of the page.
This sentence is left aligned.
7) Center Align (Shift +⌘+e) - Used to line your text us with the center of the page.
This sentence is center aligned.
8) Right Align (Shift +⌘+r) - Used to line your text up with the right side of the page.
This sentence is right aligned.
Squarespace Website Design Tip: Nervous about deviating from the Left Align setting? Try Center Aligning your headings or small pieces of text. It is best to have paragraphs left-aligned for legibility. Use right alignment sparingly in website design.
9) Paragraph Style Dropdown
H1(Option/Alt +⌘+1) - Your H1 text should be the most important text items on the page. It is the same as using a <h1> heading tag while coding. This is often designed as the visually largest font or text style when designing the website. Think of H1 as something you use for headlines.
An example of an H1
H2 (Option/Alt +⌘+2) - Your H2 text is for the second most important text items on the page. It is the same as using a <h2> heading tag. Your H2 text is still essential text but not as important as the H1.
An example of an H2
H3 (Option/Alt +⌘+0) - Your H3 text is for the third most important text items on the page. It is the same as using a <h3> heading tag. Your H3 text is supplementary to you H1 and H2 text.
An example of an H3
Normal (Option/Alt +⌘+1) - Your Normal text is your paragraph text. It should be easy to read when there are many lines of it in a row.
An example of normal text.
Squarespace Website Design Tip: In your "Site Settings" where you choose which fonts and sizes to set up your paragraph styles stick to one or two fonts. From there you can use bold, all capitals, or all lowercase versions of your fonts as well as a range in sizes to add variety to the typography of your website.
10) Quote (No Hot Key) - Use the quote option to break up large chunks of text. Best used when you have a quote or other significant bit of information that you'd like to draw your reader's attention to.
Example:
Lindsay from Launch23.com has been designing websites in Squarespace for 6 years.
11) Numbered List (No Hot Key) - Make a list starting with number 1 and moving forward. When you have many items to list this can be an excellent way to break up your content.
Example: Reasons to work with Lindsay:
-
She’s a Squarespace expert
-
She’s the Creative Director at a Marketing Agency
-
She has built over 60 websites on Squarespace
12) Bulletted List (No Hot Key) - A list which is broken up by bullet points. When you have many pieces of information to share this is a great way to break up your content.
Example: Reasons to work with Lindsay:
-
She’s a Squarespace expert
-
She’s the Creative Director at a Marketing Agency
-
She has built over 60 websites on Squarespace
Squarespace Website Design Tip: When designing a piece of text you can only use one of the following at a time: Quote, Numbered List, and Bulleted List.
13) Decrease Indent (⌘+[) - Use this tool to decrease the indent in your text (only needed once you have already indented text).
14) Increase Indent (⌘+]) - Use this tool to indent your text.
An example of indented text.
Squarespace Website Design Tip: This is another good way to break up text or draw attention to it. Similar to the Quote option but without adding the extra line to it (a more simple or "visually clean" solution).
15) Paste As Plain Text (Shift +⌘+v) - Gets rid of any existing formatting on text you have copied from another website page or word document.
Squarespace Website Design Tip: If you have some text that is showing up in an odd way (larger or smaller than everything else) try deleting it and pasting it in as plain text. There is a good chance there is formatting on the text from the source you originally got it from. 9 out of 10 times that solves the problem.
16) Remove Text Style (No hot key) - Gets rid of text styling such as bolded text or italicized text.
17) Remove Block - Removes Entire Text Block.
Have any questions about this article? I'd love to hear from you: hi@launch23.com