Building a new Science Gallery website


Contents

Before you begin

1. Configure the new site (around ~1 hour)

1.1 Create a new Squarespace website using the Sonora template

1.2 Configure the sites basic Settings

1.3 Configure the sites advanced Settings in the following sections:

1.4 Setup Google Analytics

1.5 Setup a few things before you begin

1.6 Configure the sites basic Design in the following sections

1.7 Configure the blog listing pages basic Design

1.7 Configure the individual blog pages basic Design

1.8 Configure the sites custom CSS:

1.8 Upload other required assets

2. Customise the content (around ~1 hour)

2.1 Delete the dummy content and get ready to start populating the site with your own content.

2.2 Start populating the site with your own content

Before you begin

  • View the base template website -

    Site URL: https://sg-template.squarespace.com
    Password: SGI

    Make sure you have edit access to the backend of the base template website as you will need to copy the settings from here into the newly created site while being careful not to change any of the settings on the base template website.

  • Don’t delete dummy content until the end - Don’t delete any of the new websites dummy content until you have completed the configuration steps below. Squarespace will hide configuration options for elements that are not in use. This helps makes the config screens cleaner and easier to use, but when you are trying to setup a new website it can cause confusion as the config screens will have very few options if there are no active elements to style.

  • Keep an eye on auto generated URLs - Every time a new piece of content is added to a squarespace site a URL slug is automatically generated for it. Sometimes this can end up being something undesirable like /new-page-1 and for this reason it is important to keep an eye on the path aliases that are generated any time a piece of content is added. This applies equally to Pages, Folders, Index pages and so on… Furthermore, if a page is updated and the title is changed the path alias will not automatically change. If you want to change the path alias that will need to be done manually. This is more clearly explained in the videos in the base templte

  • Understand the editor - When changing design settings the squarespace editor will only show configuration options for elements that are visible on the page loaded in the right side of the editor. For example to configure the look and feel of an individual blog page you will need to navigate to a blog page in the editor to get access to the style settings.

    When you are in design mode and have a page loaded in the editor you can click on components and the available styling option for that specific component will show. To get all the styling options back click ‘Show All’ at the top of the design

  • Change the font everywhere - one slightly annoying aspect of configuring a squarespace site is that you can’t set a global font that applies site wide. You need to set up the specific font you want to use for each element (H1,H2,H3, Paragraphs, Button Text, and so on...). So as a rule of thumb anywhere you encounter a ‘Font’ setting you will need to set it to Trade Gothic Next (using the base templateor SGI site as a reference for any other settings like line height etc).


1. Configure the new site (around ~1 hour)

1.1 Create a new Squarespace website using the Sonora template

Give the site a title.



1.2 Configure the sites basic Settings

Using the base template site as a reference:

  • Settings > Language & Region

  • Settings > Business Information

  • Settings > Social Links

  • Settings > Cookies & Visitor Data

  • Settings > Blogging

1.3 Configure the sites advanced Settings in the following sections:

Using the base template site as a reference:

  1. Insert some custom code into the header  

    1. Settings > Advanced > Code Injection

1.4 Setup Google Analytics 

  1. Setup Google Analytics (using your own Google Analytics key - do not copy the key from the SGI or base templatewebsite)

    1. Settings > Advanced > External API keys 

Copy and paste the code from the ‘code injection’ section of the base templateor SGI website

1.5 Setup a few things before you begin

A) Secondary Navigation

The Sonora theme doesn’t use a secondary navigation out of the box so we need to add one that can be styled in the next step. Go to:

  • Pages > Secondary Naivation

    • Add a Folder named “Locations”

      • Within that folder add a Link named Dublin and link it to the SGD website

      • Add links to the other network locations in the same way

    • Add a Link named “Subscribe” and link to to /#footerBlocksTop


B) Small Buttons

The Sonora uses large buttons out of the box. For our purposes we will only ever use small buttons. Convert a large button to a small button to be styled in the next steps. Go to:

  • Pages > Secondary Naivation

    • Add a Folder named “Locations”

      • Within that folder add a Link named Dublin and link it to the SGD website

      • Add links to the other network locations in the same way

    • Add a Link named “Subscribe” and link to to /#footerBlocksTop

1.6 Configure the sites basic Design in the following sections

Using the base template site as a reference:

  • Design > Logo & Title (make sure to use this logo and this favicon, leave the tag line empty)

  • Design > Site Styles * (remember to click Save at the top when you are done)

  • Design > Lock Screen

  • Design > Not Found / 404 Page

* Make sure to expand any settings that are expandable (as indicated by the drop down arrow) and configure them too. All colours should also be configured (mostly as black or white). Settings can sometimes be quickly edited by click into and typing in numeric value fields.


1.7 Configure the blog listing pages basic Design 

Using the base template site as a reference:

  1. In the site editor make sure you are at the home screen (Pages, Design, Commerce...)

  2. In the site editor on the right side of the screen click on the Blog link in the site menu 

  3. This will take you to the demo Blog page. Do not delete any of the content here just yet.

  4. On the left side of the screen bring up the Site Style options (Design > Site Styles)

  5. Keeping the Blog page visible in right hand editor configure the blog page styles. (The settings at the top are mostly already configure from our previous steps but if you scroll to the bottom you will find some new additional settings that relate to Blog pages)


1.7 Configure the individual blog pages basic Design

Using the base template site as a reference:

  1. In the site editor make sure you are at the home screen (Pages, Design, Commerce...)

  2. In the site editor on the right side of the screen click on the Blog link in the site menu 

  3. In the site editor on the right side of the screen click into one of the dummy blog posts

  4. This will take you to an individual Blog post page. 

  5. On the left side of the screen bring up the Site Style options (Design > Site Styles)

  6. Keeping the Blog page visible in right hand editor configure the blog page styles. (The settings at the top are mostly already configure from our previous steps but if you scroll to the bottom you will find some new additional settings that relate to Blog pages

1.8 Configure the sites custom CSS:

Using the base template site as a reference:

  • Design > Custom CSS

Copy and paste the code from the ‘custom CSS’ section of the base website template

1.8 Upload other required assets

Using the base template site as a reference, go to:

Pages > Not Linked

  • Create a folder named “Assets (do not delete)” 

  • Edit the Folder settings and give it the URL slug “/sg/assets”

  • Within that folder upload two files

    • “SG Filled Logo” (make sure to use this file)

    • “University Logo” (use the relevant university logo) *

* To upload a file select the Link option and then select “file” option on the left hand side. Once the file is uploaded click on the file to select it as the Link destination. (see below)

** For more information on uploading the University Logo see below.

2. Customise the content (around ~1 hour)

2.1 Delete the dummy content and get ready to start populating the site with your own content.

Using the base template site as a reference for layouts and how to structure site navigvation, delete the dummy content and begin populating the site with your own content

  • Delete all the content from the Primary Navigation

  • Delete all the content from the Footer Navigation

  • Delete everything from Not Linked (you won’t be able to delete the Welcome page just yet)

  • In the Not Linked section add (click the + icon) a new create a new Index page and name it “Home”

  • Click the settings for the new “Home” page and under general setting set it as the site home page (see below)

  • Delete the Welcome page


2.2 Start populating the site with your own content

Visit: https://sg-template.squarespace.com/adding-content