GoodVibesHoldingPageImages19.jpg

Set up a journal post


SCROLL DOWN

Set up a journal post


Setting up a journal entry


Click on the + symbol on the journal page to start a new entry

To get the entries displaying nicely on both the main journal page and when you click through to an individual entry page there's a couple of pretty simple steps to follow.

A. Repeat the title of the entry at the top of the post. Make sure it's set to Heading 1.

B. Add in a horizontal line by hovering over the space beneath the heading and clicking on the tear drop shape that appears. In the options you'll fine lines under the 'More' section

C. Type the rest of the entry set to Normal here and you're done!

Set up a product


Set up a product


SETTING UP A PRODUCT


On the shop page click the + button to add a product and fill out all the details needed. It's all very easy!

Once that's all done you'll find that Squarespace automatically adds a thumbnail image. You'll want to remove that as it adds a giant background image on the product page, which doesn't look great. Once you've done that you're all good to go!

Typography


Typography


TYPOGRAPHY


TYPESETTING

Headings — should be set in HEADING 1

Any body text should be set in Normal.

If you're pasting text in from another document make sure you paste it in as plain text or remove formatting after you've pasted it in. This will make sure that all the type is the correct size and style and everything looks nice!

We don't recommend using bold text on this website. It looks a little bit heavy compared to the other elements.

 

IMPORTANT NOTE!!!

To make sure the text paragraphs look correct on mobile make sure you remove all extra returns or spaces after text blocks

COLUMNS

We're using a two column grid for text so that the paragraph line length isn't too long and everything's easy to read.

The columns should be divided straight down the middle of the page so that both sides are equal.

GoodVibesHoldingPageImages19.jpg

Add images


Add images


Add a feature image


To add a feature image click on the little gear icon next to any of the pages. The image will appear above the text on that page.

In the settings panel scroll down to the thumbnail images section and add the image from there. You can also remove images in the same section.

Make a .png file for the shop


Make a .png file for the shop


Make a .png file WITH TRANSPARENT BACKGROUND for the products


Once you've opened the file you're about to edit select the pen tool.

With the pen tool you're going to outline the object. I'm not sure how familiar you are with photoshop so I've added in a couple of notes! 

Also, it always looks a little better if you cut into the object by a couple of pixels rather than having a white 'halo' effect around the edges.

Once you've outlined the item, right click on the image and select make selection. In the pop up window make sure you have the following settings:

  • Feather Radius: 1 pixels / Anti-aliased: ticked

Delete the background. 

  • If you're finding that you're deleting the object instead of the background press 'cmd + shift + i' which will select the background.
  • If you're finding it won't go transparent double click the background layer and select ok to unlock the layer.

Once you're happy with your image select 'Save As' and change the format to 'PNG'

Make the website live!


Make the website live!


...and finally MAKE THE WEBSITE LIVE!


On each index page (eg. Home, Classes, About etc.) click on the settings button.

Remove the password on each of these pages.

Then, on just the 'Home' page scroll down in the settings and set it as the homepage.

The website should now be live and ready to use!

Create two columns


Create two columns


SET UP TWO COLUMNS


Starting off from one column it can be easier to add a line in between the two sections you want in separate columns, this seems to break up the sections and make them easier to move.

Click and drag either section of text next to the other. Note the thick vertical line showing where the section will go should only be about as big as the block of text, if it's taking up the whole page it's going to push everything to the next column, if it does this you can just drag and drop until it gets to the right place :)