KNOWLEDGEBASE

These are explanations and how-to videos that I think are helpful when creating a website with Squarespace, especially topics which may not be covered by Squarespace tutorials.

Click here to view playlist of all training videos ordered from oldest to newest


CHAPTER MENU

USING THE SQUARESPACE PLATFORM
CONTENT BLOCKS
LAYOUT
UX
STYLING
CODING
SETTINGS
SEO
DEVELOPER MODE
THE BUSINESS SIDE
GRAPHIC DESIGN

 

USING THE SQUARESPACE PLATFORM

How to choose a template for an interior design website
There are 2 main groups of templates to be considered for interior designers. The first one I'd call "portfolio oriented templates". The second one I'd call "other". Note that not all Squarespace templates work great for interior design websites. VIDEO

How to use a shortcut in style editor
Click particular elements on the page to filter the relevant styling options. WARNING: this feature is unreliable. VIDEO

How to use jump to sections in the Squarespace
Simply press the "/" key to launch the search tool. Note that as you type, you can jump to the top suggestion by pressing enter. Pressing the down key will take you t the second suggestion. VIDEO

 

CONTENT BLOCKS

How to drag content blocks into place
From the menu of content blocks, simply drag (rather than clicking) a content block to where you want VIDEO

How to add elements next to stubborn text blocks
When attempting to drag a content block next to a text block with more than 1 paragraph, you may need to first cut the section of text by using the line block VIDEO

How to configure image galleries
Make sure to turn on light box mode and choose the appropriate background color based on the website's color theme. Also, if the website theme is light, take care to add CSS to darken the "X" icon. VIDEO

How to remove "last name" from forms

Simply replace the "name" field with a text field specifying name. In general I believe it's unnecessary (and even a little aggressive) for forms to ask for last names except for special cases. VIDEO

 

LAYOUT

How to use Squarespace's page layout templates
When creating a page, choose from Squarespace's suggested options. This can speed your workflow and also inspire creating layouts VIDEO

How to create magazine style layouts
There are several principles that contribute to a webpage feeling like a magazine: 1) most of the page is filled with content. Not too much white space, 2) the layout is varied and interesting. Not too grid like. 3) Most images are viewable without clicking a button. The visitor simply scrolls and takes in the beautiful imagery.  VIDEO

How to adjust image size to refine a Squarespace layout
Drag the bottom edge of photos in order to make small refinements to an image size. This can help layout appear more polished. VIDEO

How to use spacing to communicate relationships within a layout
By increasing or decreasing the space between elements on a page, sections can be grouped visually. VIDEO

How to use the summary block to create a magazine style layout
The summary block keeps margins between sections consistent the way a magazine does. This technique is especially useful for collections such as portfolios, blogs and press pages. VIDEO

How to add an image into the corner of a text block
Drag the image into the text block until you see a square appear VIDEO

How to group lines of text
Hold SHIFT then press ENTER. This technique is very helpful in situations where you want to go down a line but stay remain in the same idea/paragraph. VIDEO

How to create spaces that appear on mobile as well as desktop
Instead of using a normal spacer (which will disappear on mobile, simply add more spaces above words in a text box. Take care not to add so many that the layout will become unappealing on mobile. VIDEO

When to use a photo gallery versus regular photos
In general, a gallery should be used when there are many photos to present, whereas when only a few photos regular photos are generally preferred because they allow for detail of the whole photo to be shown. VIDEO

 

UX

Keep visitors engaged
Imagine you have a limited life meter like in a video game. Every time a visitor feels confused or uninterested, you lose a bit of life meter. When that life meter runs out, the visitor leaves. Thus, one of the core principles of web design is to make it easy for the visitor to find the information they are seeking and to avoid any problems of site usability. NO VIDEO YET

How to keep visitors engaged after viewing a project
Give the visitor something to click. Options include: 1) the next project, 2) any project within the portfolio, 3) a button to take them back to the portfolio page. VIDEO

 

STYLING

How to transfer styling from website to website
Find the export/import buttons at the bottom of the Style Editor menu. Take care that you are transferring to a website with the same template. Transferring styling saves time when duplicating a site. VIDEO

How to choose button shape
Pill shape is typically best for a more soft/friendly/feminine look, whereas square shape is typically best for a more sharp/cool/masculine look. VIDEO

Why I prefer outline buttons over solid buttons
Typically, I go for outline buttons because they can look more modern. VIDEO

 

CODING

How and why to hide asterisks in forms
Use the following custom CSS: span.required {display: none;}  VIDEO

How to create a custom CSS code with the help of the inspector tool.
On Chrome, VIEW > DEVELOPER > DEVELOPER TOOLS. Use the arrow to identify an element, then search for its class (and ID if necessary). Use that class and an applicable CSS rule in the Custom CSS portion of a Squarespace website.

How to install and use the video light box plugin
Simply install the Javascript code, then include [lightbox] directly next to the text of the button.

Adding custom fonts
Here's a tutorial: https://voxpopagency.com/blog/how-do-i-add-a-webfont-to-squarespace

 

SETTINGS

How to connect dummy social media accounts
When you connect certain social media accounts, Squarespace will require you to login to your actual social media account. After you do this, simply revise the account URL away from your actual account. You may like to create actual dummy social media account to do this procedure so that you don't run the risk of actually attaching your real accounts. VIDEO

How and why to connect Google Analytics ID tag
Google Analytics provides more depth and detail than Squarespace's native analytics tool, although it can be less client friendly. After creating a Google Analytics website property, paste the resulting tag into Squarespace. VIDEO

 

SEO

How to register a Squarespace website with Google Search Console
Based on this Squarespace article, only one property needs to be added to Google Search console: https://www.example.com. However, the bottom line is: whether you have the WWW button in the Squarespace back end checked or not, the property you enter into Google Search Console should match exactly. NO VIDEO YET

ARTICLES ON HOW TO CREATE IDEAL SITE TITLES FOR SEO
http://www.thesempost.com/new-title-description-lengths-for-google-seo/
https://moz.com/learn/seo/title-tag

AN ARTICLE ON WHETHER TO USE WWW
http://www.yes-www.org/why-use-www/

 

DEVELOPER MODE

How to access template files with SFTP using sublime text 2

Note: these instructions may have some differences on windows

  1. Turn on developer mode in the Squarespace backend
  2. Open Sublime editor
  3. Install SFTP on sublime
  4. Create a folder in your computer
  5. Right click on folder and “map to remote”
  6. Submit data for fields: host, user, password, port, remote path
  7. Right click on folder and “download folder”
 

THE BUSINESS SIDE

How to interpret the House Digital grading system
At House Digital, we use a 6 grade system to determine just how much value we can offer to a particular potential client.  We use the House Digital Website Grading System. VIDEO

 

GRAPHIC DESIGN

How to create a portfolio mockup for a finished website
After finishing a website, follow these steps in Photoshop to create a mockup image for House Digital's portfolio.  VIDEO,  DOWNLOAD INSTRUCTIONSDOWNLOAD TEMPLATE FILE

How to create a custom banner in photoshop by combining a color with a texture
Stack the texture layer on top of the color layer, then set the texture layer to blend mode: screen VIDEO

How to manually apply a color overlay to a banner image, using photoshop
Create a layer on top of your image layer. Set it to a color. Reduce the opacity of the layer. VIDEO