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:
How to get started / Watch the course
Access CANVA graphics
Custom CSS overview
How to edit font colors on-page
Customize drop shadow buttons
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 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.
We 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:
Home page testimonials background
Home page about section visual
BONUS GRAPHICS:
Access a Google Drive folder with source svg shapes, and Figma template files:
Click here to open a Google Drive folder with various assets.
3. Custom CSS overview
Boho Social is crafted to be extensively user-friendly. Which means that we use very little custom code to tweak some of the design and layout of the template. There are several things we achieve with custom CSS (can be access by navigating to Design > Custom CSS):
Add a shadow and a hover effect on buttons
Make the header logo larger on bigger screens
Make the mobile menu text smaller on smaller screens
Only show q blog post per summary block row on smaller screens
All of the above is clearly annotated in the code, which means you can adjust/remove segments of it as you please.
4. How to edit font colors on-page
Squarespace allows editing font colors on-page. We re-applied some colors on your page manually. You can edit the colors by going into the page, selecting a piece of text and changing the color in a contextual menu that appears:
5. Customize drop shadow buttons
To change the button shadow, go to Design -> Custom CSS
Find a place that says "Drop shadow buttons" and edit all HEX codes before the next snippet begins (before the next comment marked with "//" ).
The code affects all buttons on the site - regular buttons, forms, newsletter blocks and image blocks. That's why you need to replace all #E4AD1E codes with your own.
