x

Page Structure / Layouts

All pages in your website consist of two different types of content areas:

  1. "Main Content" - this is editable in the backend Content Manager area.
  2. "Additional Layout Areas" - these are extra content injection areas that I built into your template. These areas are editable when viewing the page and in frontend editing mode (view the page and click the pencil icon at the bottom right to turn on editing mode).

In the "Instructions & Samples" folder in your backend Content Manger's list of pages, I created a series of samples to show you the different layouts available to apply to your pages. All pages in your website follow a similar format and are setup to allow you to pick and choose the layout areas you want to use on the page. If you choose not to use an area and it is left empty then once you click out of editing mode and refresh the page to preview it, you will see all empty areas are no longer displayed. 

Generally when creating new pages you will likely just use the DEFAULT template and not have to specify a layout, but here is the information about the layout types available - click the link for each layout to view it and see instructions right on the page:

If you want to manually create client, industry or type portfolio pages instead of using the automatic collection method, use these layouts:


Typography - I made a page for you at /typography where you can view all the different text styles you can apply to your text.


Things to remember!

Here is a list of important do's and don't to keep in mind when editing your site:

  • Paste as Plain Text:
    Make sure to use the "paste as plain text" button in your text block toolbar when pasting in text.
     
  • Paragraph Breaks -vs- Line Breaks:
    RETURN = new paragraph
    SHIFT + RETURN = new line
     
  • Use Relative links:
    It's important to use "relative" links when typing or pasting in urls to link to other pages within your own website. So for example, to link to the about page:
    - DO use a RELATIVE link like this: /about
    - NOT an ABSOLUTE link like this: http://staging-graphica.squarespce.com/about
    - When linking to pages in other websites that's when you want to use the full / "absolute" url.
     
  • Keep your Tags & Categories organized:
    If you click on the "Settings" button at the top right of your "Work Items" collection page in your backend Content Manager, and then click the "Advanced" tab at the top right, you can see / manage all the tags and categories used on your work items in your portfolio. You can delete, merge or rename them here. The same goes for your blog.

Editing the Top "Hero" Images / Slideshows

To edit the large images / slideshows at the top of pages, switch to the front view and click the pencil button at the bottom right to turn on editing mode. Then double click on the image to open up the gallery block editor. Here you can add or remove images, and drag and drop to change their order. You can also adjust the image "focal point" (the position of the image with it's container when it is sized / cropped by the system).


Managing your Portfolio

The Graphica "Works" portfolio section is made up of the following "pages" in your backend Content Manager:

  • WORK folder - This is the folder that contains all your active works pages. When you are viewing a page in this folder then the "Works" menu item will show as being active. 
  • WORK frontpage - This is your Works section frontpage. The first page in the folder is where people will go when they click on the "Work" link in the main menu.
  • CLIENTS collection - This is the collection of client page containers. Create a empty page container in this collection for each of your clients. In each one, enter the client name in the title box and also add the client name as a "tag" (add tags at the bottom left of the page's editing box).
  • INDUSTRIES collection - This is the collection of industry page containers. Create an empty page container for each of your industries. In each one, enter the industry name in the title box and also add the industry name as a "category" (add categories at the bottom left of the page's editing box).
  • TYPES collection - This is the collection of type page containers. Create an empty page container for each type of work. In each one, enter the type name into the title box and also add the type name as a "category".
  • WORK ITEMS collection - This collection consists of all your "Works" portfolio items. Add each item here and "tag" it with the client, and check off the corresponding "categories" for industry and type.

The system is setup to automatically fill each of the empty page containers with the corresponding work items by matching the tags and categories used in each.

  • MANUALLY CREATED PORTFOLIO PAGES (i.e.: Identities) - This Identities page is an example of how you can manually create a (client, industry or type) page instead of using the automatic collection pages. 
    - NOTE: When manually creating these pages, click the "Settings" button at the top right of the page in the backend Content Manager and select the appropriate layout from the page layouts dropdown options (i.e.: portfolio landing, client, industry, or type) to set which portfolio page type you are creating.

Add / Edit Items in the portfolio
(using the auto-collection method)

  1. ADD A NEW ITEM - Click the Add Item button at the top right of your "Work Items" collection in the backend Content Manager.
  2. GIVE IT A TITLE - Type the title of the work item (i.e.: "BRIGHTMONT ACADEMY BROCHURE") in the title field.
  3. ADD IMAGES (and text) USING GALLERY BLOCK - In the main content area add a "Gallery Block" by clicking on one of the insertion points (move your mouse around a bit to find an insertion point).
    -- Upload the image/s you want to display for this item, drag and drop to change their order.
    -- Click the little gear icon that shows up when you hover over the images added to the Gallery Block to add any titles or description text you want to show with each image.
    -- In the Gallery Block editing box click the "Design" tab at the top right and make sure it is on the "Stacked" display setting.
    -- Then click the Save button at the bottom of the Gallery Block editing box to save and close.
  4. "TAG" IT WITH CLIENT NAME - At the bottom left of the item's editing box add the client name as a "tag". Note, that as you start typing into the tags box, any existing tags that start with those letters will popup for you to select from. This is to try to help reduce duplicate tagging, alternate spelling for the same tag, etc. 
  5. "CATEGORIZE" IT FOR INDUSTRIES & TYPES - Next, checkoff the industries and types in the "categories" list (at the bottom left of the item's editing box under the tags area). If the industry or type you want is not yet in the list use the "create category" button at the bottom of the list to add new ones to choose from.
  6. GIVE IT A DATE - At the bottom right of the item's editing box set the date - note that only the year is displayed, so just set it to a day in the year you want to display for the item.
  7. GIVE IT A MAIN THUMBNAIL - Click the "Options" tab at the top right of the item's editing box and upload the image you want to use as the main image/thumbnail for this item.
  8. PUBLISH OR SAVE AS DRAFT - When you are in the first / main area of the item's editing box, at the bottom right you have the option to set the item to be published or to save it as a draft. Note that if you click the save button without setting it to "Draft" first then it will automatically save and publish.

Where to Find Help

Squarespace Help Docs - The Squarespace wbesite provides a wide variety of tutorials and videos for how to add and arrange content blocks, work with text, image, gallery, and video blocks, blogging tips and more.

OR email me anytime!!

loader Loading

Loading Website Manual