Versions Compared

Old Version 12

changes.mady.by.user Shah, Neha

Saved on

compared with

New Version Current

changes.mady.by.user Alyssa Mai Le

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

  • Has a 14-day free trial

  • Location services integrated well into website builder 

  • Ability to easily import content from other platforms when switching web hosting (no need to manually copy and paste content) 

...

Step 4: Confirm the page that is being exported 

Click here for more information 

How to create a background video and get its URL

...

Note: You should be able to set tags in Mailchimp to select and categorize clients for personalized market groups.

Adding and Configuring Summary Blocks

  1. Log onto the Squarespace website (https://www.squarespace.com/) using user credentials
  2. After the page loads the dashboard, click on the icon for your client’s website
  3. Click to “Pages” and then scroll to the page that you are editing.
    1. We recommend creating a page and keeping it “not linked” so that you can make any edits and changes without affecting the appearance of the live website (i.e. this is the development stage).
  4. Hover over the main page and click “Edit” on the Page Section option.
  5. Click the “+” button to add a new block to the page.
  6. Scroll to the “Summary” section and click on the type of summary block (Carousel, Grid, Stack, and Slideshow) to add it to the page.
    1. You are able to change the display type later on if you would like to switch from Grid to Carousel, for example.

 

Once you add a new summary block or edit an existing summary block, a settings panel will display with three tabs titled “Content”, “Layout”, and “Display”

7. Under the Content, click to reference the blog, product, or gallery page to connect the summary block to the resource list. The linked page serves as the database from which the summary block pulls information (for reference, this would be your SQL Server backend in 333K)

8. Under Layout, you can change the appearance of the summary block if desired.

9. Rename “Header Text” to the desired header text

10. Change the Aspect Ratio to optimize display of different resource types

11. Change Items Per Row to optimize display

12. Change text size and alignment as desired.

13. Select categories and tags appropriate for the resources you are going to display

14. Apply changes and review the display. Make any edits necessary to optimize display.


Managing Share Buttons


Squarespace has a Social Sharing block that you can use. However, the links that you put in this block will be the same across any time you use the block in the website. If you would like to create share buttons that share to unique social media links, this option is for you.


Facebook Share Button

  1. Use this Facebook Developer page to create the Facebook share button (since there is code to be copied, it is better to directly obtain it from this page in case there are any changes made)
  2. Add the code as a Code block on the respective page
  3. Resize as necessary


Twitter Share Button*

  1. Follow the instructions on this Twitter developer page to create a share link with the Twitter Button option (since there is code to be copied, it is better to directly obtain it from this page in case there are any changes made)
  2. Add the resulting code as a Code block on the respective page
  3. Resize as necessary


*Note that when the Twitter share code is added to the page, the following warning will sometimes display. This is normal, and the button as it appears live can be previewed in Safe Mode or viewed in the live page.

Image Added

Reference Links for additional aid:

Summary Blocks - https://support.squarespace.com/hc/en-us/articles/206543337-Summary-Blocks


Adding Filter Blocks for Blog Archive Page


One way to add a filter function to a page is to set your blog to be an archive page and adding archive blocks to search through the posts. This is a built-in Squarespace functionality that avoids needing to purchase external plugins or develop code to search.


  1. Navigate to the page to which you want to add the filter block and click on “Edit” near the top left to add an Archive block to the page.
  2. Click the “+” on the right side of the page and type in “Archive”. 
  3. Select the blog from which you want to pull posts from (i.e., the backend/server for the page).
  4. Click to the “Display” tab and change Layout to “Dropdown” to create a filter function. 
  5. You can change the title of the dropdown to match the filter criteria that you are using. 
  6. If you would like to show the # of items within the filter, enable “Show Group Count” which will tally the number of items to the right of the tag. 

 

Adding Filter Blocks – Universal Filter


As archive blog filter functionality is sometimes limited in certain aspects that may be desired for some projects (i.e., you are unable to sort based on $$$ and it is limited in where it is placed), you can also create a separate filter box. However, this is an external plugin and is developed by SquareWebsites that you will have to purchase for $70 in order to obtain the source code for Squarespace blocks and additional support. The link for the plugin that we found to be useful is Universal Filter.


  1. In order to add code to the page, you will first need to determine what the reference ID is for the summary block. You will need an extension titled “Squarespace Collection/Block Identifier”.
  2. Click on this link to download the extension (https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde?hl=en) or search for the extension on the Chrome Web Store (https://chrome.google.com/webstore/category/extensions?hl=en). 
  3. Log onto the Squarespace website (https://www.squarespace.com/) using user credentials
  4. After the page loads the dashboard, click on the icon for the Restoring Justice website 
  5. Click to “Pages” and then scroll to the page that you will be adding the filter block too.
  6. Depending upon what Squarespace block you are attempting to add the filter functionality to, you will add different code. For this example, we are using summary blocks.
  7. On the page, click on the installed Squarespace extension. Upon activation, the page will display new text boxes with the reference ID for each summary block.
  8. Copy the “#block-yui” for the summary block that you want to add the filter to. The filter box will be added to the defined resource ID in the code injection (more below). 
    1. Copy this reference ID into a separate document as you will need to copy more code first.
  9. Hover over “Page Content” close to the top of the page and click “Edit”. 
  10. Click the “+” icon near the top right of the page to add a new resource. 
  11. Click to add a Markdown block and add the code to this block.
  12. Edit the code for summary blocks and replace the summary block ID with the reference ID that was found above.
  13. Add this code to the Markdown block that was created and click save at the top of the page. Hit refresh on the page to have the filter take effect.

 

...

Click here for details on how to build a non-profit site on SquareSpace 

...

  1. SEO Description for each page -- add title and page descriptions
    1. Include keywords that are related to page contents
    2. Unique descriptions for each page to increase scope of traffic
    3. Consistent description updates to help generate/direct traffic to website
  2. Image Description
    1. Readable file names
    2. Make sure images are nimble (under 500KB)
  3. Verify site with Google Search Console
    1. Check URL slugs of each page on the site


Finding Solutions to Squarespace Problems

Squarespace can be finnicky at times, and sometimes its interface is not immediately intuitive. For this reason, we found ourselves often scrambling to the internet to find solutions to the problems that arose. Over the course of the semester, we slowly developer the following “escalation ladder” for Squarespace issues.

  1. Squarespace Help Center- https://support.squarespace.com/hc/en-us - This is full of content made by Squarespace about how to accomplish various tasks. The search bar makes it very easy to find what you’re looking for.
  2. Squarespace Forum - https://forum.squarespace.com/ - This content is not made directly by Squarespace, but instead by contributors. It is still extremely helpful. If you can’t find your answer in the Help Center, you can likely find it here.
  3. r/squarespace - https://www.reddit.com/r/squarespace/ - This reddit forum is similar to the Squarespace Forum, but is a little more disorganized, and is not directly controlled by Squarespace. You can find more unconventional and niche solutions on here.
  4. Google Search - https://www.google.com/ - This one is obvious, but this is the last step you should take before contacting Squarespace support directly. Plenty of people have created websites solely to explain how to do stuff in Squarespace. We have found a number of random helpful articles just by Googling the problem we were facing.
  5. Squarespace Customer Support - https://support.squarespace.com/hc/en-us/requests/new - This is the last resort. As a paying Squarespace customer, you can do a live chat to discuss whatever issues you’re facing. However, they don’t make this a very painless process, so we do recommend exhausting Resources 1-4 before attempting this.