Studio 89 Template Documentation

Read this page before making any changes to the template. Also, please register for our template restyle course:

*By the way, this page is pass-protected. You can just keep it in the Not Linked section and consult it when you need to

 

What's covered in this guide:

  1. How to get started / Watch the course

  2. Access CANVA graphics

  3. List of all changes made via custom CSS

1. How to get started / Watch the course

Firstly, duplicate all the pages you plan to use before making any changes to the design. This way you will save the original design of the layouts for your future reference. Many things can go wrong when you start designing, and some of them are difficult to reverse. Duplicating the pages beforehand will safeguard your customization process. If you mess something up, you can always start fresh. You can duplicate pages within one website as many times as you need.

To duplicate a page click a small gear icon next to it. In the general settings scroll down and click Duplicate page. You can put these duplicated pages in the Not-Linked section, so no one sees them except for you. To do this, just click the name of the page and drag it down.

I also advise you to watch the course and prepare your content before tweaking the template. The course walks you through Squarespace website builder and explains how to customize your template using basic design principles. Watching it before jumping into tweaking ensures the best possible outcome.

2. Access CANVA graphics

Access CANVA graphics below:

Logo & color palette

Shop covers

Mission collage

Process collage

About collage

Collage

BONUS: Download vector files here (Click on the file name up top and duplicate the file into your own drafts)

3. List of all changes made via custom CSS

In order to achieve certain look and feel we added some custom CSS code, which you can access and adjust via Design -> Custom CSS in the main admin menu.

We added many comments to the CSS code, explaining how it us used and where, so things should be self-explanatory.

For your convenience, here is a list of all the things we adjust with code:

  • We chage the font of the every Heading 3 to "Roboto Slab" vont also adjusting its weight, size etc.

  • Every Heading 4 is set to display in the "Oswald" font and for it we also adjust weight, size, letter spacing and some other typography aspects.

  • We make the line height of items in the dropdown menu larger

  • Adjust the font size of the Summary block title

  • Make slideshow left and right arrows non-transparent (plane white)

  • Under the blog posts we adjust the display of the author profile card (font, background color etc).

  • Adjust a bit the look of the lnks in the website footer

  • Decrease the distance between the title and the content of the testimonials slider