v1 - Uploaded August 13, 2015
Squarespace Site Readme – Overview of parts, directions for adding/editing content (using Squarespace 7)
--August Rulewich, Summer Intern 2015
To keep this document organized: When editing it to update to new information, please use a different color for your text to indicate that that text is not the original / is properly updated to fit the current state of the site. Original text (as of August 12, 2015) is in black.
CONTENTS
Overview
Edit Panel Overview
Hiding / Showing the Edit Panel
Previewing Other Devices
Pages
Managing Pages
Configuring Pages
Page Types
Adding, Moving, and Deleting Pages
Specific Page Notes
Homepage
Cover Page
Featured Projects Page
Featured Projects Galleries
Portfolio
Portfolio Galleries
About
News
Contact
Project Pages
Lock Page
Adding / Editing Content
General Page Editing
Block Types
Adding Images
Adding Links
Adding a Project Page
Adding a Featured Project
Removing a Featured Project
Adding / Removing a Project from the Portfolio
Adding a Project
Dealing With the Title/Links
Removing a Project
Editing the Portfolio Page
Editing the Portfolio
Organizing the Portfolio
Editing the About Page
Editing the Contact Page
Styling
Overview
The Style Editor / What Can I Style?
Logo and Title
Custom CSS
Other Styling
Other Settings
Basic Information
Domains
Permissions
Billing
Even More Settings
Other Item Notes
Footer
Special URLs
Code Snippet Reference
Contact Info
OVERVIEW
EDIT PANEL OVERVIEW
When you log into Squarespace, you should be brought to the "Editing Screen", consisting of an edit panel on the left and a live preview on the right. The following is a quick breakdown of the edit panel's menu options:
Pages – Deals with site pages/content. Note that generally (with the exception of the coverpage), this section only deals with content, and not the styling of that content (color, font, sizing).
Design – Deals with site styling. This includes Logo, fonts, colors, the lock screen, and the current template being used.
Commerce – Deals with e-commerce. Ignore
Metrics – Allows you to view various statistics about the site, such as traffic, activity, and search queries.
Comments – Deals with comments people post on your site, if enabled. In our case this would probably only apply to a blog or similar.
Settings – Other settings not included above. Basic info, domains, emails, permissions, billing, etc.
At the bottom lies the button for your account. Edit account settings, change website, and log-out here.
------------
HIDING / SHOWING THE EDIT PANEL
The edit panel can be hidden by clicking the arrow in the top-left of the preview window. To re-show the panel, click this arrow again.
------------
PREVIEWING OTHER DEVICES
Using the preview panel, you can view the site as it would look on different size devices (such as tablets or smartphones). Hover your cursor at the top of the preview panel, then click on the device you want from the drop-down. The preview will automatically resize to that device.
Note that while the preview should be an accurate live version of the site, sometimes Squarespace bugs out and doesn't show things exactly as others would view them (especially when previewing the site with different screen sizes). I recommend always reviewing the site on other devices/browsers/computers just to make sure everything is as it should be.
PAGES
MANAGING PAGES
Pages are managed under the PAGES menu. All top-level pages under the "Main Navigation" section will be displayed in the navigation bar (Momentum does not display sub-page items, although some other templates do).
All pages under the "Not Linked" section will not display in the nav bar and must be linked to manually. Unlinked pages will also not be indexed by search engines unless specifically linked to. Thus, any page put in this section without a link elsewhere on the site is effectively disabled. Currently this section houses four folders – a “Project Pages” folder for detailed project pages, a “Portfolio Galleries” folder for specific galleries of images to be used on the Portfolio page, a “Not Featured” folder for galleries of currently not-featured projects, and finally a folder to simply house old/unused pages – as well as the coverpage, a template-specific readme, and this document.
------------
CONFIGURING PAGES
To configure basic settings for any page, click on the cog icon next to the page in the Pages Manager.
Navigation Title/Page Title – the page name and title. By default, Squarespace will make the Page Title the same as the Navigation Title. The Navigation Title is the title that appears in the nav bar (if being displayed) and in the edit panel. Conversely, the Page Title is displayed at the top of the page and in web search results.
Enable/Disable – You can disable a page from this pane if you want all links to it to be “removed” to hide the page. Note that links will still exist in other pages, but rather than directing to the page will instead direct to the 404 error page. Disabled pages will not be indexed by search engines, and will be grayed-out in the Pages Manager.
Description – In the Momentum template, the Description will display at the top of the page, under the Page Title. I would leave this blank for project profile pages, since we have our own layout for text. However, this description is also what is shown in web results (and is used for SEO, or Search Engine Optimization), so for certain pages it should be included.
URL Slug – The URL Slug determines the URL that will be used for that page. This slug will be amended to the site URL, for example a slug of “/projects/eric-carle” will appear as “www.justerpopefrazier.com/projects/eric-carle” in the browser. When linking to a page, this slug is what you will link to.
Password – If you would like to lock a page, add a password. Once locked, when a user visits the page they will first have to enter this password (via the Lock Page). Note that the number of asterisks Squarespace uses to represent the password may be more or less than the actual number of characters you entered. A locked page will have a small lock icon next to its name in the Pages Manager.
Thumbnail – I would recommend adding a thumbnail image to all (or most) pages on the site, as some content blocks (such as summary blocks) will show the thumbnail to represent a page. See below for details on adding images.
Page Controls – As a final option, you can also duplicate the current page or set it as the homepage using the bottom two buttons.
------------
PAGE TYPES
(Clicking the “Add Page” button will show you all available page types and their respective icons. See below for adding/deleting a page).
Page – A basic page. All block types (see below) can be used in this page.
Products – For selling items. Ignore.
Cover Page – A splash page. Coverpages use their own templates and styling options. The current “Welcome” page is a coverpage – most likely you will not need to add any more.
Folder – a simple folder for storing pages. When used in the “Main Navigation” section, they will produce drop-down menus of their sub-pages. To show or hide the content of a Folder, click the small arrow next to the name in the Edit Panel.
Album – For displaying music. Ignore.
Index – A special type of Folder that can also house its own content. In Momentum, Index pages are displayed as full-bleed galleries, grabbing images from sub-galleries. As such, Index pages in Momentum can only house sub-pages of the gallery type, and will display all images within them. There is no way to pick and choose.
Blog – A blog-type page. Can embed/import content from other pages. If using an external blog, this page is unnecessary (use link page).
Gallery – A special page type that houses only images. Galleries can be displayed in multiple ways depending on the template – in Momentum, galleries are used to populate the Index pages with images. Galleries can also be referenced by other content blocks (such as Gallery Blocks or Summary Blocks) in other pages.
Events – A calendar-type page. Ignore.
Link – A page that functions as a simple link to an external URL. Link pages can be handy if you want to have a button in the nav bar send the user directly to an external page (such as the Issuu document or a blog).
------------
ADDING, MOVING, AND DELETING PAGES
To add a page, click the plus icon next to the “Main Navigation” or “Not Linked” headers, or within a folder.
Pages can easily be moved between sections or into/out of folders by simply dragging the page around the edit panel.
To delete a page, click the trash-can next to the page in the edit panel. If you are looking to simply hide a page, either disable it in the configuration window or move to the “Not Linked” section instead of deleting.
SPECIFIC PAGE NOTES
HOMEPAGE
Any page can be designated a homepage by going to the settings for that page and clicking "Make Homepage." The current homepage will have a small house icon next to it in the Pages Manager. Clicking on the logo anywhere on the site will always bring the user to the homepage.
------------
COVER PAGE (Type: Cover Page)
The coverpage is stored in the "Not Linked" section of the Pages Manager (titled "Welcome"). The coverpage has its own unique template and does not follow the site-wide Momentum template. As such, all style settings for the site do not apply to the coverpage, and vice versa. To change coverpage settings, you must navigate to the coverpage within the Pages Manager.
There are six menu options within the coverpage edit panel:
Layout – Change the coverpage's current template. Changing this can easily mess up previous settings – use with caution.
Branding & Text – Edit the coverpage's title/logo and sub-text. Note that this logo is different than the logo images used elsewhere on the site. The Headline and Body will both be displayed next to/near the Branding Logo, using different formatting.
Video – deals with embedded video files. Unless you want to add a video to the coverpage, ignore.
Imagery – Edit the images used in the coverpage slide show. The order images are listed in this gallery determines the order images will appear on the coverpage.
Action – Deals with the action buttons the user clicks to enter the full site. Either button types (links with a background) or Navigation types (links that only feature text) can be used. As of when this document was written, one button-type action was used, directing the user to the “Featured Projects” (/featured) page.
Style – Like the “Style” edit panel for the site as a whole, this panel deals with styling for the coverpage. Note that all styling applied here does not affect the website, and vice versa.
Positioning: Changes the location of the text.
Branding: Adjust the size of the logo image. Sizing anchor point is the upper-left of the image.
Headline: Adjust font, size, weight, spacing, and color of the Headline text as entered above.
Background: Change both color and whether the page has a border.
Imagery: Coverpages feature an automatic overlay color, which is a high-transparency layer placed over an image to improve readability of text. The color of this overlay is chosen based on colors featured in the image and the text.
Button: Adjust font, sizing, weight, coloring, shape, and style of the action buttons or nav items.
Video Controls: Deals with the (currently hidden) video button. Unless adding a video file, ignore.
Also note that the current coverpage normally features a video "Play" button (as it is meant to have an embedded video). I have hidden this button by injecting custom HTML code into the page (found under the "Advanced" tab of the page's settings). For reference (if you delete the page accidentally, for example), the code is as follows:
<style>
.group-video {
display:none !important
}
</style>
If you would like to un-hide this play button (such as if you add a video to the coverpage), remove this line of code. I would suggest commenting the code out rather than deleting it, in case you want to bring it back later. To comment it out, just add "<!--" to the beginning and "-->" to the end, for example "<!--[code goes here]-->".
------------
FEATURED PROJECTS PAGE (Type: Index Page)
The Featured Projects page functions as the general home page for the site – after clicking through the splash page (i.e. the coverpage) using the “View Work” link, users will be directed to this page. This page is an “Index Page” type, which can house sub-pages. Note that in Momentum, index pages can only have sub-pages of the gallery type.
Depending on the template, an Index page will show sub-pages in different ways. With Momentum, index pages will scroll through ALL images in the sub-galleries – you cannot tell it to only show select images. In the lower right users can click a button to show all images in the sub-galleries, and can click specific images to go to that gallery. The name that is displayed for each gallery is based on that page's Navigation Title.
In the upper right users can show or hide additional information about the current image. The info shown here is based on the embedded info within the selected image. Using some custom HTML code, I have made it so that users can click this title/info to go to a more detailed page about the project, to allow us to include more images and text without clogging up the index's main scrolling gallery. See the section below for more details.
In the style editor (DESIGN→STYLE EDITOR), you can change settings about these index pages under the “Gallery Styles” section. Note that this section applies to all galleries on the site, not just the index (See Styling for more info).
------------
FEATURED PROJECT GALLERIES (Type: Gallery)
The featured project galleries are the special galleries that are shown in the Featured Projects page. Currently, these galleries hold only one image per gallery, to minimize the amount of images that the Featured Projects page shows.
Note that all gallery page URL slugs start with “galleries”, for example “/galleries/fels-student-center”. This is to keep these pages organized and separate from the more detailed “/projects/” pages.
When a user shows more info about the current image on the Featured Projects page, that text is taken directly from the embedded info in the images in the sub-galleries. At the time of this writing, only the “Title” section has been used.
Normally, clicking on an image in the special index type within Momentum simply scrolls to the next image – to combat this, I have added some custom HTML around the image title. This allows the user to click the title and be redirected to a more detailed page on that particular project. See the code below for reference:
<a href="../../projects/[project url]" style="cursor:pointer">[project name]</a>
If you would like a more detailed explanation of how this code works, see the “Code Snippets Reference” below.
Currently all unused Featured Project Galleries are located in the “Not Featured” folder of the “Not Linked” section of the Pages Manager
------------
PORTFOLIO
While the Featured Projects page shows only a select few projects, the Portfolio page lists all projects (or at least those you want to show). I have divided the page into multiple sections to organize the projects. This is done through the use of Summary Blocks (note that these are different than the Gallery Blocks we use on Project Pages). Each project features one image, a title, and sub-text (currently the project's location). Projects that are currently featured can also be accessed directly by clicking their title. Projects that are not featured do not have clickable titles.
Note that by default, summary blocks have both text and images that when clicked open up a larger version of the image using a “Lightbox”, i.e. clicking the image dims the background and expands the image to fit the screen. I have removed this functionality for both the image and the text, and instead have implemented a URL that links directly to a featured project on select projects, all using custom HTML. This code is located in different parts of the site, however. The code that deals with adding (or removing) URLs for the text is embedded within the project images themselves – see the section below on “Portfolio Galleries” for more information.
The code used to remove the Lightbox feature for the images is injected into the site as a whole using the Custom CSS setting – navigate to this by going to DESIGN → CUSTOM CSS. In a perfect world you should never have to worry about or see this block of code, but just in case the world is not perfect, I have included the code (and an explanation) in the “Code Snippets” section below.
See “Editing the Portfolio Page” and “Adding/Removing a Project to the Portfolio” below for more information.
------------
PORTFOLIO GALLERIES (Type: Galleries)
The portfolio galleries are simple galleries where the single thumbnail images are stored. These galleries function simply as references for the Porfolio Page summary blocks (see “Editing the Portfolio Page”). All portfolio galleries are stored in the “Not Linked” section of the Pages Manager under the “Portfolio Galleries” folder.
Note that all images in here have embedded titles and descriptions, as this is what the Portfolio Page summary blocks draw from when they display text. Since some of these projects are featured and have specific Project Pages, the embedded titles of these images, like the titles in the Featured Projects galleries, have custom HTML wrappers. For reference, the two types are listed below:
<a href=”../../projects/[project url]” style=”cursor:pointer”>[project name]</a>
When the project is currently featured and has a project page, a link is added. This is identical to the link used on the title in the Featured Project gallery.
However, the summary blocks used on the Portfolio page by default do not remove links – thus, we have to do so manually. This is done using the following code:
<a style=”pointer-events:none”>[project name]</a>
Below is an example for both code snippets, using the Elms Science Center:
<a href=”../../projects/elms-science-center” style=”cursor:pointer”>Elms College Life Science Center</a>
<a style=”pointer-events:none”>Elms College Life Science Center</a>
See “Adding / Removing a Project from the Portfolio” for a more detailed explanation of when to use these two code snippets. If you would like to know more about how they work, see “Code Snippet Reference” below.
------------
ABOUT (Type: Page)
The About page features a few paragraphs of text taken from the “Firm History and Process Text.docx” document. I have placed one paragraph in the description of the page (located in the page settings) rather than in the body to help visually break up the page more. Plus, this description paragraph will be given more weight when the page is indexed by search engines.
See “Editing the About Page” for more information.
------------
NEWS (Type: Link)
Currently the News Page is used to simply link directly to the existing blog on Blogger (also called Blogspot), located at justerpopefrazier.blogspot.com
There is also an older version of this news page located in the “Not Linked” area of the Pages Manager. This news page features the same content as the existing blog, but the content was imported into Squarespace using the “Content Import” feature (SETTINGS → ADVANCED → IMPORT/EXPORT). This would allow you to manage your blog through Squarespace, but would remove the ability to update it via Blogger. If you would rather use this option, simply swap the pages.
------------
CONTACT (Type: Page)
The contact page features a special map block. If desired, you can change the style of this block by editing it and navigating to the “Design” tab.
The contact page also has an email address and phone number that are linked. See “Special URLs” below.
------------
PROJECT PAGES (Type: Page)
Each featured project has a dedicated page to showcase more specific content about that project. The page is laid out such that there is a horizontal banner image at the top, a short blurb about the project in the center, and a few select images in a small gallery at the bottom. See “Adding a Project Page” for more information on the layout of this page.
Note that all Project Page URL slugs start with the “projects” folder, for example “/projects/fels-student-center”. This is to help keep site URLs organized and to separate project pages from the gallery pages used by the Featured Projects index.
All projects are housed in the “Project Pages” folder within the “Not Linked” section of the Pages Manager. Remember that projects here will not be viewable unless a link is added elsewhere on the site (such as on the Featured Projects page and the Portfolio page).
------------
LOCK PAGE
The lock page is a special page that is used whenever you lock content behind a password. This includes the whole site as well as whenever you add a password to a specific page.
To access the Lock Page, go to DESIGN → LOCK SCREEN.
Note that like the coverpage, the lock page has its own style settings and its own logo image:
Change Layout – Allows you to change the template / general layout used for the lock screen.
Branding & Text – Like the Cover Page, deals with the Logo and any subsequent Headline/Body text. Here you can also choose to hide or show a basic lock icon on the page.
Imagery – Choose one or more images to display in the background.
Style – Like all other style panels, this panel deals with sizing/fonts/coloring of the content. Note that this styling only affects the lock screen and not the rest of the site (and vice versa).
Branding – Adjusts the height of the logo image.
Background – Lets you pick a color and border. The color will only be shown if there is a border or if there are no images in the Imagery section.
Imagery – Like the cover page, the lock screen has an auto color overlay which will change the coloring of the image slightly to help boost the contrast between the image and the text for better readability. I would recommend leaving this on.
Password – Here you can adjust the settings of the password box, such as style, font, size, and color.
ADDING / EDITING CONTENT
GENERAL PAGE EDITING
All pages have a general set of settings that you can edit via the Configuration Panel – click the cog icon next to the page's name in the Edit Panel to access this (some pages also feature a cog icon when you are actually editing that page's content).
See “Configuring Pages” above for more information on what these settings do.
------------
BLOCK TYPES
When editing the content of a basic page, there are a lot of different types of “Content Blocks” you can use to organize your content. For the most part, we will only be using Image, Text, Gallery, and Summary blocks, although there are many others available. Below is a list of all the block types you will most likely use/encounter, along with brief descriptions.
Text – A simple text block. Allows you to input text, and do some basic styling options (such as italics and bold). Note that things like font, color, and size are not dealt with here – navigate to the style editor to adjust these settings.
Image – A simple block that holds one image. You can crop an image block around the image's focal point.
Gallery – there are four different types of gallery block to choose from – Slideshow, Carousel, Grid, and Stack. These all organize the images slightly differently, however they all deal with a collection of images and the displaying of them in an organized fashion. Gallery blocks can hold images from either an existing gallery/collection, or images you upload directly.
Summary – Summary blocks are slightly different than Gallery blocks. Like galleries, they hold images – however, they also display text associated with the images. Summary blocks are also more powerful in that they can summarize content beyond just images (like text from a blog, for example). Like gallery blocks, summary blocks come in four flavors: Wall, Carousel, List, and Grid.
Spacer – A basic block that adds a space in the column it is located in. Spacer blocks can be adjusted in the horizontal direction, but not in the vertical.
Line – Essentially just a spacer block, but with a line through it. Can be used to cleanly and clearly separate content.
Map – An embedded Google Maps block. Map blocks have a lot of cool styling settings that allow you to customize the map to fit the style of your site. Currently we have one map block, on the Contact Page.
Search – a simple search field.
Content Link – Like a summary block, in that it links to specific content and displays a preview or summary of that content where available. We don't currently use any Content Link blocks in the site.
There are many more types of blocks – if you want to find out more about these or other blocks, check out the Squarespace documentation at support.squarespace.com/hc/en-us
Note that blocks can be easily moved around a page by simply clicking and dragging the block to the location you want. Squarespace will automatically adjust surrounding blocks to try and fit the new location. This may result in some unexpected or unwanted changes, so be aware that you may have to play around with the blocks to get them to lay out correctly. If you screw things up too much however, you can always Cancel your changes to the page.
------------
ADDING IMAGES
Whenever you add an image to a page or gallery, there are a couple of settings you should set regardless of where the image is to be used.
At any point on the site, you can right-click on an image to open up the settings for that image. Note that this only works on the edit panel, NOT the live preview, unless you are actively editing a page.
Within the image settings you can change a few things such as title, description, and some other settings such as tags and categories, depending on where the image is located. Specific information on what to edit is located in the respective tutorial section, however for the most part we will ignore almost all the settings besides the title and description fields.
All images throughout the site have a focal point – this is the point on which Squarespace will center when it has to crop the image (such as when you change the device). This focal point is represented by a small circle over the page's thumbnail. Mouse-over the image to see this circle – to edit the point, simply drag the circle to a new location on the image.
To keep the site loading smoothly, I would recommend only using images that are properly optimized for the web – this means as low of a size as you can get, while still maintaining a reasonable quality. I have been saving all images used on the site as JPGs, making sure that the image size is generally not greater than 1920 x 1080 (since most people will never have a screen larger than that, and so the extra detail is wasted), and then saving the JPG at a Photoshop quality level of “5”.
------------
ADDING LINKS
To add a URL to text within a text block, simply highlight the desired text and click the Link button (a small chain-link icon) in the Text Edit Panel. You can choose whether you want the link to go to content already on your site, a files that you have uploaded, or an external page.
You can also add links to most images by adding a “Clickthrough URL” in the image settings – however, I would generally recommend against doing so given that most images on the site function in specific ways (for example, given the code we have used to remove the lightbox for images on the Portfolio page, adding a click-through URL to them will not work).
Beyond these two methods, adding links will require using custom code. We've already done that in a few locations (such as with the featured projects), so if you wanted to use that code and modify it for a new URL, you could. Do note however that using custom code can easily break the site depending on what you do. See “Code Snippet Reference” below for more information about existing URL code.
------------
ADDING A PROJECT PAGE
The following gives step-by-step instructions on how to add a new project page to the site. Note that this will NOT add the project to the Portfolio or Featured Projects pages – this simply explains how to add the detailed project page in preparation for adding the actual project elsewhere.
Navigate to the Pages Manager of the Edit Panel. Under the “Project Pages” folder in the “Not Linked” section, click the plus symbol to add a new page.
Choose a basic page type (simply titled “Page”). With the highlighted name field, type in a new title for the page and hit enter (if you accidentally deselect this field or need to change the name later, you can always do so in the page's configuration panel).Once the page is created, open up the configuration/settings panel by clicking the cog next to the page's name. If you need to change the title, do so here. Leave the Page title the same as the Navigation title (Squarespace will automatically copy the Navigation Title into the Page Title field).
Next, scroll down to the URL slug field. Add “/projects/” before the actual page URL, for example a page for Eric Carle might be “/projects/eric-carle-museum”. REMEMBER THIS URL – you will need it when you actually add the project to the Featured Projects or Portfolio pages.
Lastly, add a thumbnail to the page – scroll down to the Thumbnail Image field and click “Add thumbnail image.” Choose the desired image from the pop-up window. This thumbnail is not currently used on the site – however, it is indexed by search engines, and should you decide to change/edit the template at a later date this image will already be in place.
Close the configuration panel by hitting SaveYou will now see a blank project page. To edit the page, mouse over the blank space between the header and footer, and click on the Edit button under the Page Content pop-up.
We are now in “Page Edit” mode – the edit panel on the left will disappear, and we will be editing the page directly.First, let's create the header image. To do this, we will need to insert an image block. Mouse over the blank portion until you see a dark-gray line with a circular shape at the end – this is the “Insert Block” tool, which will allow you to insert a block at the indicated portion of the page. Note that we can move this block around later (For more information on block types, see “Block Types” above). Click the tool, and select the Image block.
Under the block settings pop-up, upload an image. I would recommend choosing one that can be easily cropped on the top and bottom without losing important information. Once the image is uploaded, set the focal point (see “Adding an Image” above) and make sure the Stretch setting is checked. Leave Lightbox unchecked. Then click Save – we can safely ignore the other settings.
You should now see the image on the page – to crop it to a more proper banner size, mouse over the bottom of the block until you see a small gray circle (if the circle doesn't appear, make sure the image block is selected by clicking on it). Grab the circle, and drag upwards to crop the image. If you set the focal point properly, the image should crop both the top and bottom around this point. If you need to change the focal point, simply re-open the image settings by right-clicking (or by clicking the Edit button in the Image Settings pop-up menu when you mouse over the block). Note that Squarespace has a tendency to glitch out here – you may change the focal point, but when you go back to re-crop the image it uses the old point. You will have to refresh the page (and may need to do this multiple times) until Squarespace registers the changed focal point.Next, we'll add the text. The page should come with a text block already (indicated by the grayed-out “Write here...” text). If not, you can add a new block in the same way we added an image block.
To edit the text, simply click on the block. You can type directly here, or copy-paste text from an external source. Note that if you do paste in text, make sure you highlight the pasted text and click the “Remove Format” button (second from the right) to make sure there is no embedded formatting. This will make sure the text uses the site's styling rather than it's own. Also note that we cannot change things like color, font, or sizing here – we do so in the Style Editor (see below).
To match existing pages, add the project's location at the top of the text block, making sure this line is both bold and italicized.Finally, add the gallery of images at the bottom. Add a new Gallery block, making sure to choose the Grid type (if you select the wrong type, we can change it later in the settings for the block). Watch out that you don't accidentally choose a Summary Block – given their location in the menu and similar types, they can be easily confused. You can always check what block type you're working with by looking at the top of the block's settings panel.
With the Gallery block's settings open, upload the images you wish to use. I have been using either 3 or 6 images, depending on how many good images are available for that project. Remember to set the focal point for these images.
Once the images are uploaded, change to the Design portion of the gallery settings panel. Make sure the gallery is the “Grid” type. Choose an aspect ratio of “3:2 Standard.” Check Crop Images. Set the number of thumbnails per row to 3. Leave padding at 20. Finally, check Lightbox, and save the block's settings.Done! To save our changes, make sure to hit “Save” at the top of the page. Squarespace will then exit the Page Edit mode, and the Edit Panel will return. To add the project to the site more fully (such as making it into a featured project), see the tutorials below.
------------
ADDING A FEATURED PROJECT
After adding a Project Page, we can then add the project to the site as a Featured Project. To do this, we MUST have a detailed project page already to reference to – if you don't, see the tutorial above on adding a new Project Page.
Navigate to the Pages Manager of the edit panel, and under the “Featured Projects” Index Page under the Main Navigation section, click the plus symbol to add a new project.
Since we are using the Momentum template, we can only add a page of type gallery to an Index Page (see “Page Types” for more information). Add a new gallery page, type in a name for the page, and hit enter (as before, we can change this title in the page's configuration panel).After adding the page, open up the configuration panel by clicking on the cog next to the page's name. Once again, leave the Page Title and Navigation Title the same. Scroll down to the URL field and add “/galleries/” to the beginning of the URL, for example “/galleries/eric-carle-museum”. Finally, add a thumbnail image, remembering to set the focal point.
Now we can deal with the gallery's images. Note the small arrow next to the name pointing right (which is different than the arrow pointing up/down) – this indicates that we can edit the page's content at a more detailed level. Click the page in the Page Manager to go to that page's own edit panel.
Note that the collection is empty – we will be adding one image to this gallery. Click the upload space in the edit panel to upload an image to the gallery. This image is the image that will be displayed on the Featured Projects page. Don't forget to set the focal point!Lastly, we need to deal with the URL that allows the user to click on the image's title to navigate to the detailed project page we created earlier. Since Momentum doesn't allow for this by default, we have used a small amount of custom code to get this to work.
Right-click the image to open up the image's settings panel. We will ignore all the fields except for the title.
To get the link to work, we will be wrapping the project's name with some custom HTML code. If you would like a more detailed explanation of how this code works, see the “Featured Projects Gallery” and “Code Snippet Reference” sections elsewhere in this document. For now, I have provided the code below so that you can copy-paste it in.
<a href="../../projects/[project url]" style="cursor:pointer">[project name]</a>
where [project url] is the URL of the project as we determined in the detailed project page, and [project name] is the name of the project. Note the “/projects/” before the page's URL – this is exactly as we typed into the URL slug field in the project's detailed page.
For example, with Fels Student Center the URL might read
<a href="../../projects/fels-student-center" style="cursor:pointer">Nichols College Fels Student Center</a>Save the image settings, and return to the Pages Manager. The project is now featured in the Featured Projects page! I would recommend always double-checking the URL you provided by attempting to navigate to the page, just to make sure the link isn't broken. If it is, make sure you have the “../../” following by the URL slug EXACTLY as it appears on the linked project page.
------------
REMOVING A FEATURED PROJECT
While removing a featured project is relatively straight-forward, there are a few things to be aware of.
You can remove a project by removing the corresponding gallery in the Featured Projects page, either by deleting it (clicking the trash-can icon next to the page's name in the Pages Manager), or by moving it to the “Not Featured” folder in the “Not Linked” section.
Remember though that doing either of these will not remove other links to the page in the site. For example, assuming things have been set up correctly, the project should not only be linked on the Featured Projects page but also on the Portfolio page. If we were to simply delete the detailed project page, the link in the Portfolio would remain, but would be broken – we need to not only remove the Featured Project page, but also the Portfolio link. See below for directions on how to do this.
------------
ADDING / REMOVING A PROJECT FROM THE PORTFOLIO
While the main way to access a featured project is through the Featured Projects page, we also want users to be able to access the project through the Portfolio page as well. To do this, we will need to deal with a little more custom code to implement a URL for the text of the project. This means that in fact we will not be dealing with the actual Portfolio page, but rather with the galleries located in the “Portfolio Galleries” folder, from which the Portfolio page grabs its images.
If you are looking to turn an already-existing project into a featured project, see step 2 of “Dealing with the Project's Title” below. Conversely, if you are looking to REMOVE a featured project and thus remove all links to that project's page, see step 3 of the same section.
Adding a Project to the Portfolio
Whether we want to add a featured project or simply want to update the portfolio with a basic project, we will need to first add the project to the portfolio, by uploading an image and adjusting its settings.
Navigate to the Portfolio Galleries folder in the “Not Linked” section of the Pages Manager, and click on the section to which you would like to add the project (if instead you would like to add a whole new section, see the tutorial below in “Editing the Portfolio Page”).
To add an image to the gallery, simply upload the image as you would for any other image, remembering to set the image's focal point when you do so (see “Adding an Image” for more information). Any image here will show up on the Portfolio page, showing select text from the image's settings.
In the image's settings panel (accessed by right-clicking the image), enter in the project's name in the Title field, and the location in the Description field.
Dealing with the Project's Link/Title
By default, the summary blocks used on the Portfolio page will treat the title as a link to a larger version of the image. This doesn't work – we need to wrap the title with some custom HTML (much like the title of the featured project in the Featured Projects gallery). Depending on what we want to do with the project, we will use two different versions of the code.
Navigate to the Portfolio Galleries folder in the “Not Linked” section of the Pages Manager, and click on the section to which you would like to add the project (if instead you would like to add a whole new section, see the tutorial below in “Editing the Portfolio Page”).
To make the Portfolio project link to a featured project page, we will be using the same HTML code we used before when we added the project to the Featured Projects page, posted below for reference:
<a href="../../projects/[project url]" style="cursor:pointer">[project name]</a>
As before, replace [project url] with the URL of the page you want to link to, and [project name] with the project's name. This code functions the same as the code on the Featured Projects image, and for all practical purposes is identical.However, if the project is NOT featured currently, we want to remove any and all URLs that might be associated with it. To do this, replace the link code with the following:
<a style=”pointer-events:none”>[project name]</a>
Here, we are simply styling the text to remove any and all URL events – coloring, cursor changes, etc. Like before, replace [project name] with the name of the project.
For a more detailed explanation of both code snippets, see either “Portfolio Galleries” or “Code Snippet Reference” elsewhere in this document.
Removing an Existing Project
If you ever feel you need to remove a project from the Portfolio, simply delete the image from its respective Gallery container in the “Portfolio Galleries” folder of the “Not Linked” section of the Pages Manager. Ta da! The project will be removed.
------------
EDITING THE PORTFOLIO PAGE
So far we have covered how to add new projects to the portfolio and update existing projects to be either featured or not. But what if we want to change the layout of the Portfolio page itself? Or how about adding a whole new section of projects?
Editing the Portfolio
The actual Portfolio page can be edited much as any other page – click the edit button at the top to enter page edit mode. Note that the Portfolio page is organized into seven summary blocks, one for each section of the portfolio. Each summary block references a specific gallery of images, located in the “Portfolio Galleries” folder in the “Not Linked” section.
If you would like to re-arrange the layout of these summary blocks, simply click and drag on a block to move it to the new position – Squarespace should automatically rearrange the other blocks to reflect the change. If you accidentally screw things up, you can always cancel the changes and re-edit.
Organizing the Portfolio
Beyond simply changing the order of the portfolio sections, you may want to add or remove sections as well.
Removing a section is simple
Click and hold on the block you wish to delete. A small trash-can icon should appear at the bottom of the screen. Drag the block over this icon to delete it. You should also be able to click the trash-can icon on the pop-up menu for the block when you mouse over it.
To add a new section, we will first need to add a new gallery and populate it with images.
Navigate to the “Portfolio Galleries” folder and click the plus symbol to add a new gallery. Choose the gallery type page, and with the name field highlighted, enter in a new name for the gallery.
Next, open up the gallery to add the images. Click the large empty box in the edit panel to upload the images you want to include in this section.
Remember that the summary blocks used on the Portfolio page get their text from these images – you will need to go into the settings of each image you upload (by right-clicking the image) to add/edit the embedded text information. Each image should have a title with the name of the project, and a description with its location. The title must also be wrapped in the appropriate HTML code depending on whether it is a featured project or not. See the above section on “Adding/Removing a Project from the Portfolio” for more info.Now that we have added the gallery, we need to add the accompanying Summary Block on the Portfolio page itself. Navigate back to the Portfolio page and open it for editing. Add a new block as we would for editing a Project Page, choosing the Carousel Summary Block type. The settings panel should automatically open
Under the Content section, select the Gallery that we just added, so that the summary block pulls images from the correct location.
Next, under Layout, make sure everything is set correctly. Carousel type, Small Text Size, 3:2 Standard Aspect Ratio, 4 items per row, Left Text Align. For Header Text, put in the name of the section (the summary block will NOT grab this from your gallery – you'll have to put this in yourself).
Finally, under the Display tab: make sure that the number of items is greater than the number of images you have in the gallery (just drag it all the way to the right); show all info (Title, Thumbnail, and Excerpt); and make sure that both Primary and Secondary Metadata are set to “None” (otherwise the Summary Block will start showing more text that we don't want).And we're done! Save your changes.
------------
EDITING THE ABOUT PAGE
The about page currently features two text blocks with two embedded image blocks. To embed an image block into a text block, drag the image block over the text block until the gray indicator changes. You can then resize the image to change how it relates to the text.
Note that in the about page, one paragraph is located in the page's description, NOT in the body of the page. To edit this paragraph, open up the page's configuration panel. This separation was done for both visual weight/interest, but also for search engine indexing optimization.
------------
EDITING THE CONTACT PAGE
As one of the most basic pages, the contact page features two blocks – a text block, and a map block. The text block simply lists the firm's address, phone, and contact e-mail. Note that the phone and email links are special URLs – see the section below on “Special URLs” for more info on how these work.
The map block's design can be changed by editing the block and navigating to the “Design” tab. You can adjust the color scheme of the block, as well as whether map controls should be shown or hidden. See “Block Types” above for more information on the map block.
STYLING
OVERVIEW
While Pages are where you manage the content (and the general layout) of the site, we do not deal with styling there. Styling refers to setting the size, font, color, weight, etc. of different parts of this content. To adjust the style of the content, we must use the Style Editor.
------------
THE STYLE EDITOR / WHAT CAN I STYLE?
The Style Editor is located in DESIGN → STYLE EDITOR. Here we can adjust a plethora of settings across the website. Depending on the page we are currently viewing in the Preview Panel, the Style Editor will change what content it shows, so that we only see what is relevant. Do note however that styling applies across the ENTIRE site (with the exception of the cover page and lock page), not just the page we are currently viewing. It is important to remember that when you change styling to affect a certain part of a certain page, you may also be changing the style somewhere else as well.
Why does the Style Editor affect across the entire site? Well, it does make it easier to edit large amounts of content at once. But mainly, it is because the Styling affects types of content, not blocks or locations of it. This is actually due to how HTML and CSS are working behind the scenes.
Since the options that the Style Editor gives you change depending on what page you are viewing, I am not going to go over all of them here. The easiest way to see what things affect is by actually changing them and watching what happens in the preview panel.
When using the Style Editor, you may notice that the panel cannot be used to navigate through pages. This is because we are editing the page's content directly (like when we edit a project page through the page editor) – we can't use a page in this state.
When in the Style Editor like this, you will notice that hovering your cursor over certain parts of the preview panel will display blue boxes – click on an area to isolate that section as determined by the box. When you do this, the Edit Panel will change to only show style settings that apply to that specific part of the page. You can easily show all the settings again by clicking the “Show All” button at the top.
Remember, whenever you change the style of the page, you need to save these changes for them to take affect. This also means that if you don't like what you've changed, you can just discard your changes before exiting the Style Editor, no harm done.
------------
LOGO AND TITLE
To change the logo, go to DESIGN→LOGO & TITLE. Here you can change the logo and the favicon (the small icon that appears on the tab bar in the browser). The Site Title/Tag Line is used in a few places around the site, most notably as the title for the browser tab. The Momentum template however does not display the tag line within the site by default.
To adjust the size of the logo. go to DESIGN→STYLE EDITOR, under "Site Title/Logo" section. Note that the coverpage and lock page both have their own logo that must be changed separately.
------------
CUSTOM CSS
Beyond the styling options in the Style Editor, Squarespace also gives us the ability to add our own custom CSS to style essentially anything we want. Do note that this can severely break the site if you're not careful. At the moment I have inserted one bit of Custom CSS, to deal with the issue regarding the summary blocks on the Portfolio page (see the relevant page for more info). This is located under DESIGN → CUSTOM CSS. Most likely you will never have to deal with or even look at this section.
If you would like to look at this custom code block, see the “Code Snippets” section.
------------
OTHER STYLING
There are also quiet a few other bits of styling located throughout the site – most of these options under the DESIGN menu we won't have to touch. However, do note that the styling for the Cover Page and the Lock Page are located within their respective page edit panels, NOT in the Style Editor.
OTHER SETTINGS
BASIC INFORMATION
SETTINGS → BASIC INFORMATION – Here we can adjust a few basic things about the subject of the site.
Site Type – Lets Squarespace know what kind of subject the site is about, so it can adjust a few settings accordingly.
Site Description – A basic description of the site. For now I have simply included the first paragraph from the About page here.
Promotion/Indexing – Whether we want Squarespace to include our site in its sample sites area.
Business Information – Set/Update hours, location, phone, e-mail, etc. here.
------------
DOMAINS
SETTINGS → DOMAINS – Under the domains section we can set up and manage domains that are associated with the site. This includes the justerpopefrazier.squarespace.com default domain, as well as any other domains either purchased through Squarespace or external ones mapped to the site.
------------
PERMISSIONS
SETTINGS → PERMISSIONS – Here you can set and manage which Squarespace accounts can have access to the site and what kinds of things they can do to it.
The Website Owner is the account that actually owns the website – this is the account where the billing information is located by default. Note that only the owner can transfer the site to a new owner.
Admin status refers to accounts that also have effective control over the website. An admin has essentially the same control as an owner, with the one difference that an admin cannot change the owner's own permissions (and thus cannot transfer ownership).
If you would like to change the permissions of a specific account, click the account to open up the settings dialogue.
------------
BILLING
SETTINGS → BILLING & ACCOUNT – Here you can manage the subscription/billing of the website.
Billing – Manage saved payment methods and which plan you are currently purchasing here.
Invoices – View previous invoices here.
Login History – View all previous log-ins to the editing of the site. Provides Browser, IP Location, and OS information for each login.
------------
EVEN MORE SETTINGS
There are a lot more settings beyond the ones listed above. Most you will not have to deal with – if you need more info, check out the Squarespace Documentation.
OTHER ITEM NOTES
FOOTER
The footer is a special text block that appears on all pages of the standard type – this includes our Portfolio page, About and Contact pages, and all of our specific Project pages. Currently in the footer I have placed the firm's telephone and e-mail address. Like the contact page, these two bits of text are URLs that point to their respective action (the email uses mailto to open an email, and the telephone uses tel to open the user's phone if they're on a mobile device). See the section below for more information.
------------
SPECIAL URLS
A few locations on the site feature special URLs as opposed to regular webpage ones, such as the phone number and email address on the contact page and in the footer.
- mailto - This special link type allows you to link to an email address rather than a webpage. When the user clicks this address, the browser will open up their email client with a blank email to that address, if able. To edit this link, highlight the text and click the “Edit Link” button in the formatting bar (next to the “Italics” button). A pop-up will appear that will allow you to “Remove” or “Edit” the link. Clicking Edit will open up a new pop-up where you can change what the email address links to. Note that you must us “mailto:” before the address for the site to know you are linking to an email and not a webpage, for example “mailto:person@email.com”.
- tel - This special link type allows for a mobile user to simply tap the link and automatically call that number. To edit this link, like the mailto above, highlight the text and click through the pop-ups until you can edit the actual URL. Note the URL is displayed as “tel:+1[phone number]”, rather than a traditional webpage URL.
Also note that these special URL types may not work on all URLs across the site without heavy custom code.
------------
CODE SNIPPET REFERENCE
<a href=”../../projects/[project url]” style=”cursor:pointer”>[project name]</a>
This code is used to create a hyperlink to a detailed project page from a couple locations around the site, namely on the Featured Projects and Portfolio pages. It is used to wrap the title of an image to turn that text into a link.
The <a></a> is placed around the text, indicating that the text inside should be a hyperlink. Within this hyperlink, we can set a few properties, in this case the href property and the style property.
The href property indicates where we would like the hyperlink to point (the “hyperlink-reference”). In this case, we set the property to “/projects/[project url]”, i.e. the URL slug for the specific project. Note the “../../” at the beginning of the URL – this is a shortcut that we can use since our project page is located within the same site. We could put “www.justerpopefrazier.com” instead, but there are two reasons not to: 1), “../../” is shorter, and 2) “../../” always references the site we're in, which means it will continue to work even if we change the main domain.
The style property is then used to tell the browser how to style parts of this URL. In this case, we're telling it to set the cursor to a pointer type.<a style=”pointer-events:none”>[project name]</a>
In contrast to the code used above, this code is used to remove a hyperlink from the text where Squarespace would otherwise put one by default. In practice, this is for images located in the Portfolio that are not currently featured.
Here, we still use the <a></a> wrapper, since we are addressing the url. However, within we set the style property to pointer-events:none. This means we are telling the browser to have no pointer events, i.e. no changing of color, size, font, etc. This means that technically the URL is still there, however the user cannot click on or see it, and so for all practical purposes the URL has been removed.<style>
.group-video {
display:none !important
}
</style>
This particular code is used only on the Cover Page, and specifically addresses the play button/icon that normally appears on the template we are currently using. Most likely you will never have to deal with this code, but just in case it is here as a reference.
Here we are using the <style></style> HTML blog, which means the code it wraps deals with styling – i.e. the code inside is CSS, not HTML.
Within the actual code, first we have to tell the browser what we're addressing – in this case, we're applying the styling to all code blocks that have the class “group-video” assigned to them.
Next, we tell the browser to change the code's “display” property to “none”, i.e. to not display it. The “!important” simply tells the browser that if it ever encounters other code that would contradict this one, use this one instead.#collection-55b0f699e4b0db7c799daea2 .summary-thumbnail-container {
pointer-events: none !important;
}
This code snippet is used across the site, and deals with the default URLs that Squarespace places on the images in its summary blocks – in our case, this addresses the Portfolio page. By default, clicking on an image in a summary block opens up a larger version of that image – however, we only want people to be able to click on the link in the title to go to the project's individual page (if it exists). This code removes the default lightbox that Squarespace provides. You can find the code under DESIGN → CUSTOM CSS
Most likely you will never have to touch this code and can simply ignore it – however, if something happens and you do need to edit/re-insert it, or are simply just curious about it, below is a brief description of its parts. Note that this code is CSS, not HTML, which is why it looks different than other code we've been using.
The #collection-55b0f699e4b0db7c799daea2 tells the site where to apply the following code, in this case to a page with an id of “collection-55b0f699e4b0db7c799daea2”. This happens to be the id that Squarespace automatically assigns to the Portfolio page – why it picked that string we can only guess.
Now that we've told the browser which page to address, we need to indicate which part of the page. Here, we are saying to apply this styling to all code blocks that have a class of “summary-thumbnail-container” applied to them.
Now that we know what code to style, how do we want to style it? In this case, like in previous code snippets, we are using the “pointer-events:none” bit, to remove all URL events attached to that code. The “!important” simply tells the browser that if it ever encounters other code that would contradict this one, use this one instead.
Further questions? Email me (August Rulewich) at arulewich17@gmail.com
or give me a call at (413) 522-8804
Or check out the Squarespace Documentation at support.squarespace.com/hc/en-us