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
Change handwritten h4 font
Summary block - add category cards (grid summary block type), change font
Add more padding to blog grid
How to add featured podcast episodes (explain about two blogs)
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.
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:
Crop your logos - the exact dimensions of logo images used are 200x300 px, make sure they are all the same size. Use this template to crop them!
3. Change handwritten h4 font
You can see that for Heading 4 we are using handwritten Homemade Apple font. With a little trick, we can apply it without having to actually import it manually to the website.
If you want to change the Homemade Apple font for something else, here is how you do it. Go to Design > Fonts > Assign Styles. There is an option to assign a font for a site title here. But because we are using an image for a logo, we do not show this font anywhere on the site. Choose a font you want to have as your H4 and set it as your Site Title font.
Now go to Design > Custom CSS and find this snippet in the code:
// H4 heading handwritten font
h4 {
font-size: 18px;
font-family: Homemade Apple;
line-height: 1;
}Change the name of the font (after font-family:) for the one you have set as your Site Title font. You can also tweak a few more settings here – font size and line height. Click Save in the upper-left corner, when you are happy with the result.
4. Summary block - add category cards (grid summary block type), change font
We use Summary block to present our blog posts by categories on the Blog page and on the About page of the Lemongrass template. Firstly, we need to attribute categories to all of our blog posts and set some of them to be the featured ones.
To do this, we need to access Blog posts settings. In the blog menu click three dots next to the blog post you are going to edit and click settings. In the Content tab upload a featured image, fill in the excerpt and change the URL to help your SEO. In the Options tab, go to Categories and type in a category for your blog. In the Lemongrass template we have several dummy categories: business, vacations, wellness, beauty. Also, switch the toggle on for your featured posts.
On the blog page scroll down to the section where the Blog is organized by categories. In the Edit mode click the Summary block and click the pencil icon next to it. In the Content settings tab we select blog as a page where the posts are be drawn from, set primary metadata to Category, and secondary metadata to none. We also filter items by featured only.
In the Design tab we have a grid layout with number of items set to three, square large images, centered position, with only image and title to be shown. Do not forget to save your changes when you are done designing this page.
We also use a categorized Summary block for the Podcast on the Home page.
There is also a snippet of code in the Custom CSS that controls font styling in the Summary blocks. It sets the font family, font size and weight. Check it out if you need to do some tweaks.
// Fonts in summary block title
.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title {
font-size: 1.7rem;
font-family: Lora;
font-weight: 300;
}
.sqs-block-summary-v2 .summary-excerpt {
margin: 20px 0 0 0;
}
.summary-block-setting-text-size-medium .summary-title {
font-size: 1.2rem!important;
font-family: Lora;
font-weight: 400;
}5. Add more padding to blog grid
On the blog page, we use Side by side layout. It is set in the Format settings of the section.
However, without some extra CSS we feel like we lack padding. It looks like this:
The entries are too close to the left side of the screen. To fix this problem we have added a bit of code in the Design > Custom CSS. Here is the snippet.
// Blog padding
.blog-side-by-side .blog-side-by-side-wrapper {
padding-left: 4vw !important;
padding-right: 4vw !important;
}Here is the final look. You can tweak the value to make the padding bigger or smaller.
6. How to add featured podcast episodes
There are two pages named Podcast in this template. The first one is the the regular page that is placed in the main navigation and has a page icon next to it. This is a custom page designed to present your podcast to your audience. The second page is placed in the not-linked section of the pages menu and has an ink pen icon next to it. This is one actually keeps your podcast episodes. It is de facto your second blog. This page basically has a storage function and is not visible to your website visitors.
Firstly, you will upload your episodes to your Podcast blog page. Every episode is a new blog post, where you can include an audio file as well as anything you need – images, description text, transcription, info about the guests. It is important that you fill out the info in the Blog post settings. In order to do this click three dots next to your blog post and then click Settings. Here, you should upload a featured image and and type in excerpt. We use excerpt to show the number of the episode. Also, pop in the Options tab and switch the toggle to make the post Featured if you consider it to be one of your favourite episodes and you want it to be singled out.
Now let’s go to the Podcast page in the main navigation to fill in the Featured episodes section. The episodes are contained here in a Summary block. To make changes to it, click the block itself and then click pencil icon. Select a page your episodes are drawn from – Podcast, and go to Filter items and switch the toggle to Featured only.
In the Design tab of the Summary block settings you will see that this is a List in which we chose to show the title, image, and excerpt (the one with the episode number). You can also tweak the number of shown episodes, size and aspect ratio of the images, and style text. Save the page when you are done.
