Pursue Template


Welcome to this section of the tutorial in which we’re going to build a brand new Squarespace website based on the Pursue template kit you purchased.

As we go along, I recommend having:

  1. The Pursue demo site open in a separate browser tab just so you can use it as a reference.

  2. The placeholder images folder downloaded into your computer just in case you do not have all of your own website images ready yet.

For your convenience, here is a quick summary of the topics we’ll cover in the following videos so feel free to skip ahead or go back whenever necessary.

In case you encounter a term you don’t recognize, I’ve also provided a Glossary list of terms with their definitions.

Let’s begin.

Log into your Squarespace.com account and create a new website using the Hayden template.

https://www.squarespace.com/templates/hayden


>> Add a Logo and Title

The first thing we’re going to do is add your logo and website title.

Now if you do not have a logo, website title, or favicon just yet, that’s perfectly okay; you can skip this step and just come back to it later on.

So from the Home menu, click on Design and select Logo & Title.

Type in your website title here and upload your logo here if you have one.

Notice how we can automatically see the changes we’ve made to our site on the right and also take note that if you do add a logo image here, it will replace the text title of your website up here. 

So for now, we will not add a logo but we will add a favicon down here.

Don’t forget to click save and then double click on the arrow up here to go back to the Home menu.


>> Create and Organize Website Pages

The next thing we’re going to do is to clean up and organize all of your website pages and this will essentially create a framework or skeleton for your website. 

From the home menu, select Pages, and over here at the top of the main navigation, create a new Index page. Name that Index page “Start Here” then open up the settings window by clicking on the gear or cog icon, change the URL to /home and set this as your homepage.

Next, we’re going to delete all of the demo pages so that we can start fresh. 

If you want to keep this Read Me page, which contains helpful information about the Hayden template, feel free to do so since it’s in the Not Linked section anyway.

And at any point you make a mistake and you want to retrieve a deleted page, you can just go here to the Deleted Pages section here at the bottom.

Next, we’ll create your website pages starting from the main navigation. 

Underneath the Start Here index page, add three blank pages or sections then open up the settings window, again by clicking on the cog or gear icon.

Then we’re going to change the Navigation Title, URL slug, and Page Title of the three pages to

Home 1

Home 2

Home 3

Next, we’re going to create a new blank Page and name it About (Remember to not make this part of the Index. Make this a separate navigation page on your site).

Then we’re going to create a new Blog page and name it Blog.

Then we’re going to create a new Products page and name it Shop.

Next, we’re going to create another new page, but this time select a Cover Page and name it Free Resources.

Next, we’re going to add a new Page but under the layouts category, we’re going to click on Features, then we’re going to select the Vertical layout, and name that page Work With Me. This will serve as your Services Page.

Now we’re going to rearrange your main navigation by dragging and dropping the pages in the following order:

Start Here

About

Blog

Shop

Free Resources

Work With Me

Take note also that when you want to move Index pages, make sure to click on the Index page itself so you can drag and drop all the sections underneath it at the same time. 

Next, we’re going to build out your Footer Navigation. 

So here in the footer navigation area, add a link page, name it Home, and link it to your Start Here Index page.

Next, create a blank Page and name it Contact.

Then create another blank page and name it Terms and Conditions.

And again, create another blank page and name it Privacy Policy.

Now make sure to rearrange the pages in the footer navigation in the following order:

Home

Contact

Terms + Conditions

Privacy Policy

Then finally, over in the Not Linked section, we’re going to add a blank page and name it Brand. 

And there you go, we’ve created all the main pages of your website. 


Brand Page

The first page we’re going to customize is the Brand page.

Now, the purpose of this Brand page is to house all your main website design elements so that it’ll be much easier and faster for you as you customize all the other different pages of your website later on.

Also, in case you want to change or update your website design in the future, this page will come in handy because then you can just refer to this one page while you’re customizing everything to see if all your design elements match or look good together. 

So from the Pages panel, we’re going to open up the Brand Page’s Settings by clicking on the cog or gear icon, and under the Media tab, we’re going to upload a banner image. Feel free to upload your own photo or use the placeholder image I provided.

Next, under the Basic tab, we’re going to type in the following text as the page description.

Brand

Page

Demo Button

Then we’re going to make the first line of text bold and then add a link to last line of text.

Since this is just a demo button, I’m just going to link this to my website as an example, and click save.

So don’t forget that for this template, whenever you’re typing in the banner description, if you make a line of text bold, this will turn it into a Banner Heading and if you add a link to the last line of text, this will make it a Banner Button.

Next, hover over the page, select edit to edit the page content, and type in the following text.

Heading one looks like this

Heading two looks like this

Heading three looks like this

Paragraph text looks like this

Next, we’re going to highlight this first line and select Heading 1 from the text toolbar. 

Highlight the second line and select Heading 2.

Highlight the third line and select Heading 3.

And keep the fourth line as is - that is your normal paragraph text. 

Next, hover over here the bottom until you find an insert point, add in a line block then below that, add in a quote block.

Now we’re going to populate the text area with some text. I usually use the website loremipsum.io to get placeholder texts but you can just type in any text you want as demo content. Click apply.

Next, add another line block below the quote and then we’ll add three button blocks one on top of each other. 

For the first button, select small. For the second, select medium. For third, select Large. 

Then add another line block below the buttons.

Next, we’re going to add a photo. Feel free to use the placeholder image I provided or use your own.

Now go to the design tab, select Collage, add a button for the link, type in some demo text and click apply. Again add in demo text for the title and subtitle. 

Repeat this process with another image block, could be the same photo, but this time select Card instead of Collage.

Now close out this section, again with another line block.

Next, we’re going to add in some content for the pre-footer section.

Hover over the pre-footer section and click edit.

Add two spacer blocks above the social links icons then drag and drop the second spacer block to the right of the first so that they’re side by side. Hover over the edge until you see the slider icon and slide it four slots to the left. 

Now add a text block underneath the first spacer block and type “Let’s Connect!”

Highlight it, align it to the center, and select Heading 2.

Next drag the social links under the let’s connect text. 

Now let’s add actual links to your social media icons. Click on Edit and a window will pop up where you can type in the URLs of your social media accounts. 

Click enter to continue adding different links. These are just demo links of course. Next under design, this is where you can customize the appearance of your social links - like you can change the style, alignment, etc. but for now, we’ll just leave it as is and click apply.

So now, underneath the second spacer block, we’re going to add an Instagram content block. 

But before we can do that, we’ll need to first connect Instagram and Squarespace so that you can pull content from there. 

To do that, we’re going to double click on this top navigation link back to the Home menu then click on Settings, select Connected Accounts, and click on Connect account.

Select Instagram and log in your Instagram account. Click save and so anytime you upload a new photo to Instagram your SS website will be updated as well.

Now let’s go back to the Pages panel and back to the Brand page to continue editing the pre-footer section.

Click edit and underneath the second spacer block, we can finally add an Instagram content block.

Select your account then move this slider to select 6 items right here and under Design, select 6 thumbnails per row and select 8 for padding, and click on “open links in new window” and hit apply. Now delete both spacer blocks up here and click save.

Now let’s edit the footer content section.

This is typically  where you put in the copyright statement of your website and where you attribute the designer of your website. Click save.

Next following the design of the demo site, we’re going to enable the announcement bar at the very top of your website.

To do this, we’re going to go back to the Home menu, select Marketing and click on Announcement bar.

We’re going to select enable, then type this demo announcement text, and link it to your Work With Me page.

Now, I don’t recommend you always have an announcement bar enabled on your site. Simply because you don’t want your website visitors to get so used to it that they’ll neglect it, especially since the idea is to grab their attention regarding a new promotion or product launch you’re having.

So now that our entire brand page is populated, Let’s go back to Home, click on Design, select Site Styles and we can begin customizing!

Since we have just built a page with different content blocks already, we can just click here on the actual section we want to customize and the editing panel will filter that section’s customization options for use

OR you could also type in the specific item you’re looking for here in case you’re having problems finding it. Just make sure that you’re editing the correct item under the correct category.

Now please refer to the information below this video for the specific site styles for each section. Feel free to save your changes every once in a while and once you’re done, don’t forget to hit Save before you exit.



Contact Page

The next page we’re going to customize is your Contact page.

From the Pages panel, we’re going to click on your contact page right here and then click on edit to edit the page content. 

We’re going to add two spacer blocks and put them side by side.

Below the first spacer block, add a photo or use the placeholder image I’ve provided. Then for animation, select, “Collide.”

Next we’re going to drag the text here below the second spacer block and add in some text.

Now if you’ve got the Pursue template demo site open in your browser, feel free to copy paste from there for now and then you can just replace the text later on.

Highlight the first line and make it Heading 1 ,and then leave the next line as normal text. Then look for the slider icon and move it one slot to the left.

Next, we’re going to add a form block underneath the text here and feel free to edit the questions based on what information you want to collect from the people who want to contact you.

Then select the method you’ll be collecting or storing the form entries - either via email, mailchimp, zapier, or google drive.

Then under the advanced tab, you can also customize the button text and the post-submit message. But we’ll leave these as is for now and click apply.

Next, delete the first spacer block so that this photo can move up, then click on the second spacer block, look for the slider icon at the bottom, then click and extend it to about twice as tall as one spacer block. Click save.

Now, let’s make this form a bit more on-brand by adding custom CSS.

Don’t worry, the particular code I provided below this video is pretty straightforward. Just copy it then go to the Home menu, click on Design, select Custom CSS and paste the code right into this box here.

Click save and we’re done with the Contact Page!


Shop


The next page we’re going to customize is your Shop or Products Page.

Click on your Shop page under the Main Navigation, then open up the settings window. 

Under media, upload a banner photo or you could use the placeholder image I provided for now.

Then under the Basic tab, add the following text.

Welcome to

The Shop

So again, remember, while you’re typing in the banner description, if you make a line of text bold, this will turn it into a Banner Heading and if you add a link to the last line of text, this will make it a Banner Button.

But for now, we won’t be adding a link. We’ll just use the two lines here. 

Next, click here to add the first demo product for sale.

We’ll create a digital product first, so upload a product image or use the placeholder image I provided. 

Add Some Demo Text for the TItle and Description. Again, if you don’t have products and product information yet, you can copy-paste from the demo site for now.

Then we’re going to scroll down here and add in a category called ebooks

Next, under the pricing and upload tab, put in a sample price then upload a sample digital file for sale. I’m just going to use the placeholder image again since this is just a demo product.

Next, under Additional Info, we’re going to add a spacer block first to create some white space.

Then we’re going to add in some additional information text — you can again copy-paste from the demo site until you have your own info to put in.

Then under the form tab, we’re just going to select “no form” then under options, type in the url you want to use and upload a product image thumbnail.

Click save and then publish. 

Next, follow the same process to create another digital product for sale OR you could duplicate this product and just make a few minor changes. 

To duplicate a product, double click on the product to open the product editing window and click on duplicate here at the bottom.

Now, we’re just going to make some minor changes but keep most of the content because this is again, just another demo product. For now, we’re just going to edit the title right here and the upload a different product photo right here. 

Then under the options tab, we’re also going to upload a different product thumbnail and we’re going to edit the URL to reflect the new product you’re putting up for sale.

Click save & publish once you’re done.

So now that we have two digital products for sale we’re going to follow the same process but this time, create a service for sale, not a digital product.

>> social media <<

So click on the + icon, select service, then upload a photo. Again, I’ve provided a placeholder photo you can use but feel free to upload your own.

Next, add a title and description, again, we’re just copy-pasting the text from the demo site.

Then here under categories, we’re going to add a Services category.

Then under pricing and variants, since this is a service for sale, you could create variants here for different services you offer.

So for example, if you offer social media management for Instagram and for Pinterest, you can add them here to give people a choice as they’re purchasing your services. 

So click on the + icon here, and we’re going to name the option “platform,” and then type in Instagram here.

Then add another entry, this time for Pinterest. 

We’re now going to add the price, let’s say it’s $500 for each service package, and edit the stock to unlimited. 

Don’t worry, we’ll be removing that stock number later on.

Next, under additional info, we’re going to add a spacer block and some text again from the demo site.

Next under Options, add in the URL, upload a thumbnail image, and click save. 


So remember I mentioned a while ago about the hiding the stock quantity. Obviously this is a service for sale so you may or may not want to show the quantity here. 

So to remove the quantity displayed, we double click on the navigation to go to the Home menu. Select Commerce > Inventory > Settings and disable the show quantity feature right here.

Click save then double click again right here to go to the Home menu, select Pages, and go back to the Shop page panel, and check out the new service for sale we created.

So now, when people visit this page with the intention of purchasing, they can choose which platform they would like you to manage for them since we’ve added variants for different social media platforms.


Next, we’re going to create another service product for sale, but this time, no need to create variants.

We can either follow the same process or duplicate this one we just created and just make minor changes. 

We’re just going to change the title and photo, then under variants we’re just going to delete the other service, click here to remove the other option, change the price. 

Then under Options, we’re going to replace the image and type in the correct URL.

Then we’re going to click save & publish.

So now we have four demo items for sale on our shop.

Remember you can rearrange the order of the products on your shop page. Just drag and drop right here.

Now it’s time to customize the Shop page settings by again going to Design > Site Styles.

Please refer to the information below this video for the specific site styles and once you’re done, don’t forget to hit Save.

Now we’re going to go back to the shop page, click on an actual product then go back to Design > Site Styles again, this time to customize the actual Product page.

Again, please refer to the information below this video for the specific site styles and once you’re done, don’t forget to hit Save.

And now we’re done with your Shop page!


Free Resource Landing Page

The next page we’re going to customize is your Free Resources Page, which is a Cover Page for a lead magnet or opt-in freebie. 

So we’re going to click on the Free Resources page and open up the settings window. 

We’ll just change the url to /signup but feel free to change it to whatever URL you want - like /join or /freebie or something like that. I just suggest you use something easy for people to remember.

Click save and now let’s open up the layout options right here and select the one named, “Flash.” Click save then go back to the editing panel.

Under Branding & Text and here in the branding section, type in Free Resource and under the headline section, type in your lead magnet title. Then under description, let’s just type in some demo content. Again, you can refer to loremipsum.io or the demo site itself for some placeholder text. Click save. 

Next, under media, we’re going to upload a photo or you can use the placeholder image I provided. And don’t forget, you can drag the focal point if necessary.

Next under Action, select your preferred email marketing method to collect sign ups but since we do not have that set up for this demo site, for now, we’ll use Form down here and just type in “Sign Up to Download.” 

You can then edit the form here. We’ll delete the name, subject, and message boxes. And as for the storage method, I’ll just use my email. Click save and don’t forget to delete the other button.

Click save and go back to the editing panel. 

Next make sure the social links section is unchecked. We do not want to give website visitors any distractions or other links to click on because the goal for this page is to sign up for your email list. So, click save and go back again to the editing panel. 

Lastly, under Style, please refer to the information below this video for the specific site styles to customize this page and once you’re done, don’t forget to hit Save.



Work With Me

The next page we’re going to customize is the Work With Me page or your Services Page.

If you remember, we chose one of the pre-styled layouts called the “Vertical” layout so now open up the settings window and you can change the URL here if you want, I’ll just change it to services and under the description, type in your banner text. For this demo, I’ll just type in the following:



Ready to turn your passions into profits?

Let’s Work Together


Now notice how we’ve added two blank lines of text on top and one blank line of text at the bottom. We did this to make our banner image fill up the entire screen which I’ll show you in a moment.

Also notice how we’ve made this line of text bold - this is so it becomes a Banner Heading. 

Next under the media tab, upload a banner image or use the placeholder image I provided. Click save then as you can see we now have a full screen banner image with a clear call to action.

Now click edit to edit the page content right here.

Delete the Features Overview text and replace it with some of your own content text. If you do not have content just yet, feel free to copy paste from the demo site for now.

You can also add a snippet that links to your contact page in case they have questions about your services. Now align this text to the center and next, we’re going to edit these sections to add three service packages. 

So just go ahead and upload three square-sized photos or crop from the image editing window… then for the animation, select “Collide” for each of the photos.

Next, add some demo text to introduce your first service package.

The first line is the category and it’s Heading 3.

The second line is the title of your service package and it’s Heading 2.

And the next lines of text is just normal paragraph text.

At this point, you can take these buttons and just link them to other pages on your site, like a longer sales page if you have one, your contact page, or your products page. OR you can follow what I did in the demo site and create a form.

So my reasoning behind this is that as a service provider, I would want to first get to know a potential client before I ask them to pay for my service packages. I would want to know if we’re the right fit for us to work together, what is it that they need exactly, how much is their budget, what’s their schedule and so on.

And so with a form, I could ask some qualifying questions and I could go over their responses and then send them an email in case we’re good to move forward or not. At that point we could hop on a Skype call or I could send them an Invoice. 

Now it’s totally up to you how you want to structure your process. But for now I’ll just offer this option as an alternative in case this is the path you want to take.   

So we’ll begin by deleting the three buttons here. And in their place, we’re going to add a form content block. 

I’ll just rename the form to differentiate it from other forms on the site. Then feel free to edit the questions you want your potential clients to answer. For now, we’ll just leave the form as is.

Then I’ll just use my email address for storage then under the advanced tab, we’re going to scroll to the bottom and select Lightbox mode.

This now creates a button which will pop up if someone clicks on it and it reveal the form. I just find it better than having the form displayed outright. Then for the label, I’ll just type in “Let’s get started.”

Now follow the same process for the two other service packages. 

So, notice how the form block buttons looks different than your normal buttons and that’s because we selected the lightbox mode instead of having the form displayed outright. So Let’s just customize that by going back to the Home menu, select Design > Site Styles and click on the form block button to filter the editing panel. 

Then please refer to the information below this video for the specific site styles and once you’re done, don’t forget to hit Save.




...

Next, we’re going to add a spacer block, a line block, then a text block.

Type in Client Testimonials, align it to the center and select Heading 1.

Then we’re going to add some demo text, and again, you can link to your contact page if that makes sense for your site.

Next, we’re going to add two more spacer blocks, and drag and drop them to either side of the text to constrain it and using the slider icon, move the spacers to the very end on the left and on the right. 

Next, we’re going to add four spacer blocks and put them side by side. Then we’re going to move the first and third spacer blocks one slot to the left.

Now we’re going to upload photos underneath the first and third spacer blocks, each with the animation called, “Collide.”

Then we’re going to add some placeholder text as testimonials under the second and fourth spacer blocks.

Click save to save your work so far. 

Next, we’re going to follow the same process to create two more testimonials under the first two.

Then we’re going to add a line block to close out this testimonials section. 

Next we’re going to add the FAQ section.

So add a text box and type in FAQs, align it to the center, and make it heading 1. 

Next add in four spacer blocks side by side and using the slider icon, slide the first and fourth spacer blocks to the left most and right most areas. 

Next, add a text block under the second spacer block and add in some placeholder text FAQs. 

We’re going to make the questions Heading 3 and the answers normal paragraph text. 

Now we’re going to follow the same process under the third spacer block to add in FAQs #3 and #4. 

Then we’re going to delete the second and third spacer blocks to move the text up. 

Now add a line block below this entire section and we’re done with the FAQs. 

Next we want to add a final call to action at the bottom of this page so go ahead and add in four spacer blocks again side by side.

Then slide the first and fourth spacer blocks to the left and right most.

Next, add a text box underneath the second spacer block and type in some Header 1 text. Here, I’m just going to copy-paste the text from the demo site but feel free to add your own. 

Then I’m just going to add a small button under that text with a link to the contact page.

I’m going to align the button to the left and click apply.

Next, we’re going to add a photo underneath the third spacer block. Feel free to use the placeholder image I provided or upload your own, then select the animation “Collide.”

Then let’s just move this slider two slots to the right to make the image block smaller.

Then we’re going to delete the second and third spacer blocks. 

Finally, we’re going to add a line block at the bottom of the page and we’re done with your Work With Me page.



About

The next page we’re going to customize is the About page. 

So from the Pages panel, click on the About page settings and add some banner text to the description. 


I help creatives

Turn Passions Into Profits

Let’s Work Together


Notice again how we’ve put in line breaks before the text - if you remember, we do this to make the banner image full screen size which you’ll see later on.

We’ve made the second line of text bold to make it a Banner Heading and we’ve linked the last line of text to the Work With Me page and this turned it to a button.

Next we’re going to add a banner image under the Media tab. You can upload your own or use the placeholder image I provided.

Now click save and then hit edit here to edit the page content.

We’re going to add an image for this about me section. You can either upload your own or you can use the placeholder image I provided.

Next, go to the Design tab and select the collage as the layout.

Then let’s add in some text in the title section and in the subtitle section.

Then for the animation, we’ll choose the “Fade In” option and click apply.

Next we’re going to add two spacer blocks side by side and then slide the spacer two slots to the right.

Now drag the text block underneath the first spacer block and add in some text.

We’re going to make the first line heading 1 and the text underneath it is normal paragraph text. 

Next, we’re going to add a photo underneath the second spacer block. Feel free to upload your own or use the placeholder image I provided, the one with the shadow on the bottom right-side. Then for animation, select the “Collide” option.

Next we’re going to add a spacer block then a quote block underneath with some placeholder text. Then for the quote animation, we’re going to select the “Fade In” option.

Next we’re going to add in two spacer blocks side by side and slide it three slots to the left. 

We’re going to add in text blocks underneath both spacer blocks then add in some text. 

We’re going to type “My Values” for the text block on the left and we’re going to list some values on the right. 

We’re going to make My Values is heading 1 while the list of values is heading 3. Then the description of the values will be normal paragraph text.

Next, we’re going to add another spacer block, and a text block underneath.

To close out this about page, we’re going to type in a strong call to action, like this one from the demo site for example. We’re going to make it Heading 1 and align it to the center.

Next, we’re going to add a medium button, add a call-to-action text and link it to the “Work With Me” page.

Now I just want to double check the animations for this page. 

For the first photo, we’re going to use Focus In.

For the second photo, we’re going to use Collide.

For the quote, we’re also going to use Focus In. 


And we’re done with the About page!


Blog

The next page we’re going to build out is the Blog page. 

As I mentioned in the SS overview, Squarespace blogs have a two-part hierarchy which includes the Blog Page first, then the individual blog posts. 

So first we’re going to click on the Blog page and open up the Settings window.

We’re going to select 3 posts per page right here, and type in the following text in the description box:

Welcome to

The Blog

Notice how we’re making the second line bold so it displays as a Banner Heading then over in the Media tab, we’re going to upload a banner image - you can upload your own or use the placeholder image I provided for now.

Now before we go any further, let’s make some design changes for the blog first. 

To do this, we’re going to double click on the navigation to go to the Home menu, then we’re going to select Design > Site Styles and then click on the blog area of your site. 

Doing this will filter the editing panel so now please refer to the information below this video for the specific site styles and once you’re done, don’t forget to hit Save..




Basically, we’ll select the meta priority as Category, we’ll hide the entry author and the entry list footer, and we’ll want to show the blog sidebar.

Click save and go back to the Pages panel and back to the blog page.

Now let’s add some demo blog posts.

Click on the + icon here to add a new blog post.

Add a blog post title and blog post content. Feel free to add your own or use the placeholder text generator I use loremipsum.io, or for now, copy-paste the text from the demo site. 

So here we have the introduction, then we’ll add in a blog post header image which can also serve as a Pinterest pin since it’s a tall vertical image.

Again, you can add your own photo or use the placeholder image I provided. 

Then I recommend adding a spacer block here to add some white space. 

And another text block for the remainder of your blog post.

So what I did right here is just add in some text and I made sure to use sections, headers, bullet points and numbered items to make your blog post more engaging for the reader and to make it easier for visitors to actually read the entire blog post.

Then at the bottom I recommend ending a blog post with a call to action. 

You could then link to your lead magnet landing page here, your contact page, or in this case, your Work With Me or Services page using a button.

Click apply and next, we’re going to add a spacer block.

Then under that spacer block, we’re going to add in the summary block called Carousel.

So under Content, we’re going to select Blog.

Under Layout, select Carousel.

Under Header Text, type “Related Posts.”

Under Aspect Ratio, select Auto.

Under Items per row, select 3.

Text size is small, 

Text alignment is Center.

Metadata position is below content.

Then under the display tab, select 10 items to display.

Check Show Title

Check Show thumbnail

Uncheck Show Excerpt

Uncheck Show Read More Link

Under primary data, select none

Under secondary data, select none

And if you want to filter your related posts by category, type in the category here. 

If you want to filter it by tags, type in the tag or tags here. 

If you want to feature only featured posts, check this here. 

Then click apply.

So for now, since we do not have any blog posts yet, there won’t be anything here yet. But we will go back to this later on so for now, let’s move forward.

Under the options tab, upload a thumbnail image, add in a URL slug you want. I suggest using keywords you want your blog post to rank for in search engines.

For example, if this post were to be about productivity tips for entrepreneurs, I’d put in entrepreneur-productivity-tips right here. 

Of course it’s up to you and if you’ve done some research beforehand. For now, we’ll just use blog post 1.

Next add in a blog post excerpt and click save and publish right here. 

So I’ve just shown you how to edit a blog post via the settings window but you can actually edit from the blog page itself, which is what I recommend doing since it’s more convenient. 

To do that, just select the blog post right here, and then hover over the page and click edit to edit the blog post.

Now let’s go back to the main blog page and as you can see the blog page is showing your blog post but there is no blog thumbnail. This is because this template does not have that feature but with a little Custom CSS, we can add that in.

Notice also how when you click on the actual blog post, the banner area looks messy but again, with a little Custom CSS, we can hide that section.

So please refer to the code below this video and copy and paste it to the Design > Custom CSS section.

Now if you have some code in there already, please make sure you add in the additional code below the one you put in before so you don’t break any of the code.

Click save then now we’re going to go back to your Blog Page and open the settings window.

Under the advanced tab, scroll down to the Page Header Code Injection box and paste the next set of code in here - this is for customizing the style of the blog page.

Click save and (refresh the page ) now you can see your blog post, the blog thumbnail, your blog excerpt, and a read more link. 

So now, let’s add in three more blog posts just so we can get a feel of what your blog page would look like when populated. 

We can follow the same steps or just duplicate the blog post we’ve created.

To duplicate a blog post, just go in the blog page panel, hover over the first blog post we created, and click on edit right here. 

THen at the very bottom, click on the Duplicate button to duplicate your blog post and voila, SS has created a new demo blog post for us. Let’s just name it something else. And then under the Options tab, change the url to blog post #2.

Click save and publish. 

Now repeat this duplicate process two more times, but of course name it blog post #3 and blog post #4.

To do that, once again we’re going to hover over the main blog post, click edit, click duplicate, and change the title and URL. Then click save and publish. 

And finally for blog post #4, Hover over the main blog post, click edit, click duplicate, and change the title and URL. THen click save and publish. 

Now let’s refresh the blog page and notice how the blog page shows the most recent blog post first.

Now let’s customize your blog sidebar based on the demo site. 

So scroll to the top of your blog page, hover over the sidebar section and click edit.

The first content block we’re going to add is an image. You can upload your own or use the circle placeholder image I provided. Then for animations, we’re going to use FADE IN.

Next we’ll add in some text to introduce yourself and what your blog or website is all about.

Next add in a SEARCH BAR and select your blog for the search results.

Next, we’re going to add three small buttons, one on top of the other.

For the first button, type “about me” and link that to your about page.

For the second button, type “contact” and link that to your contact page.

For the third button, type “freebie” and link that to your free resources page.

Next, add in a line block, text block, small button, and a line block again. 

This little section is for a call to action. In this case, we’re going to add an invitation to check out your “Work with me” page.

So just type in the text right here, make it Heading 1, and add a CTA in the button, and link the button to your “Work with me” page.

Next is an invitation to read the latest blog posts. So add in a text box and type in the text: Read the latest:, make it Heading 1 and then add a summary block for your latest blog posts.  

Select the summary block: Carousel

Under content, Select Blog

Under Layout, select carousel

Then delete the header text

Select aspect ratio: auto

Under items per row, select 1

Under Display > Number of items, select 10

Uncheck show title

Check show thumbnail

Uncheck Show excerpt

Uncheck show read more link

Under primary metadata, select none

Under secondary metadata, select none

Then since these are your latest posts, no need to filter by category or tags.

Click apply.

Next we’re going to link to your shop products.

Add a line block then a text block and type in the text Grab my eBooks:. Make it Heading 1.

Next, add a product block from here under the category Commerce.

Select the product you want to feature, uncheck show price and align it to the center.

Click apply then repeat this process for the other product we created previously. 

Then close this little section off with a line block.

Finally, we’re going to close out the sidebar with an invitation to connect with you on social media. Add in a text block and add in the text: Let’s connect! And make it Heading 1.

Next, add a social links content block. You can change the design under this tab if you want but for now, we’ll just leave it as is.

Next, add in an Instagram block like we did in the prefooter section.

Select the Instagram block under the Social Blocks category.

Under account, make sure your Instagram is selected, and drag this slider to 6 items.

Next under display, select grid, aspect ratio 1:1, and check crop images.

Next choose 2 thumbnails per row and 5 as the padding. Check the “open links in new window” option and click apply.

Finally, add a line block to close out the sidebar. 

And now, we’re done with the blog page!



Start Here / Home

So the next page we’re going to customize is your Home or Start Here page. 

Now this page is actually an Index page with three pages or sections stacked one on top of the other. 

Start by opening up the settings window of the first section, not the settings of the index page, the settings of the first section.

In the description, type in your brand statement, opening line, mission statement - anything interesting that will immediately grab your ideal website visitor’s attention. Remember, this is going to be your homepage banner and it may likely be the first things a visitor sees so make sure that you give a great first impression. 

For now, I’m just going to add the same text as in the demo site.


I help creatives

Turn Passions Into Profits

Let’s Work Together


Notice again that we’ve pressed enter twice before typing anything because we want to show the full banner image. Then we’ve made the second line bold to make it a Banner HEading and we’ve linked the last line to your Work With Me page and in so doing, turned it into a Banner button.

Next, we’re going to click on the MEdia tab and upload a banner image. You can upload your own or use the placeholder image I provided. Adjust the focal point if necessary and once you’re happy, click save.

Next, hover over the page content and click on edit. 

The first content block we’re going to add is a welcome image. Again you can upload your own or use the placeholder image I provided.

Then under the Design tab, we’re going to select Collage, we’re going to keep the image position on the left and under the image link, we’re going to select the button.

We’re going to type “Learn More” for the button then link it to your about page. 

Then for animations, we’re going to select Focus In. 

Next we’re going to add a spacer block then a text block with the following text:


Want to pursue your dreams and turn your passions into profits?

Here’s how I can help you


We’re going to make the first line Heading 1 and the second line HEading 3.

Then we’re going to add two spacer blocks and drag each one on either side of the text. Then slide the slider icons to maximize the space for the text.


Next, we’re going to add three spacer blocks side by side then under the first spacer block, we’re going to add a square photo. Again, you can use the placeholder image I provided or upload one of your own. Then for animations, we’re going to select Fade in.

Now select the Card display and for the image link, we’re going to select the button.

We’re going to type in “Learn More” for the button and link it to your Work With Me page.

Now we’re going to add a title and a description which I’m just going to copy off of the demo site.

Then we’re going to follow the same process to add two more image cards, one under the second spacer block and the third one under the third spacer block. 

Once you’re done, delete the three spacer blocks on top. 

So ideally this is where you showcase your service packages or if you want, your products, lead magnets, courses, popular blog posts — any three items actually that are the 3 most important things you would want your website visitor to know or act on.


Next, we’re going to customize the second section, your Home 2 page.

Open up the settings window and in the description, type in a testimonial from a customer or client, or if you want, you could also put in a quote that represents your business, your business statement or even an announcement. 

I’m just going to copy the text from the demo site. Now I’ve split them up into two lines as you can see and the first few words I’ve made them bold to make it a banner heading.

Then under the media tab, we’re going to upload the “kind words” placeholder image but feel free to use your own image if you want. 

Now click save and click on edit to edit the page content. 

We’re going to add a text block first and type in the following:


The first line of text is HEading 1 and the second line of text is Heading 3

Next we’re going to add three spacer blocks side by side, then we’re going to make the middle spacer block bigger by moving the slider icon two slots to the left and two slots to the right.

Then underneath the second spacer block we’re going to add a summary block for your ebooks. 

Under content, select the shop.

Under layout, we’re going to select carousel, delete the header text

Then under aspect ratio, we’re going to select 1:1 square.

We’re going to display 2 items per row, make the text size medium, make the text alignment center, and as for the metadata position, we’re going to select below content. 

Next under the display tab, we’re going to select two items

Check show title

Check show thumbnail

Uncheck show excerpt

Uncheck show price

Then we’re going to select none for the primary metadata and none also for the secondary metadata

Then under category filter, we’re going to type in ebooks 

And click apply.

Lastly, delete the spacer block above the summary block and click save.

//

Next, we’re going to customize the third section of your Index page.

Open up the settings window and in the description, type the following text:

Free Resource

Insert Your Lead Magnet Title Here

Sign Up to Download

Now make sure to make the second line bold to make it a Banner HEading and add a link to the last line to make it a button. Now since this is a Call to Action for your lead magnet, I’m just going to link this to the Free Resources Cover page.

Next, we’re going to go to the Media tab and upload a banner image. Feel free to upload your own or use the placeholder image I provided.

Adjust the focal point if required and click save.

Next, hover over the page and click edit.

We’re going to add a text block and type in the following text:


Popular Posts

MY TOP TIPS ON GOAL SETTING, DESIGN, AND BUSINESS


We’re going to make the first line Heading 1 and the second line Heading 3 then align it to the center.

Next, we’re going to add a summary block to showcase your popular blog posts.

So add a summary block, and select Carousel. 

Under Content, select Blog.

Under Layout, select Carousel.

Under Header Text, delete the text.

Under Aspect Ratio, select Auto.

Under Items per row, select 4.

Text size is small, 

Text alignment is Center.

And metadata position is below content.

Then under the display tab, select 10 items to display.

Uncheck Show Title

Check Show thumbnail

Uncheck Show Excerpt

Uncheck Show Read More Link

Under primary data, select none

Under secondary data, select none.

So at this point you can filter your blog posts to showcase whatever set of blog posts you want. You could check the featured post section here and your summary block will filter your featured posts. 

But since we’re showcasing popular posts, I recommend going to the blog posts that are popular and adding a specific tag to them then you could type in that tag name here to select it and filter it.

So after you’ve done that, click apply. 

Next, we’re just going to add a medium button down here and type in the text “visit the blog” and link it to your blog page.

And we’re done with your Work With Me Page. 



Terms + Privacy


So at this point, we’re almost done with your entire website but I’d just want to point out two pages in the footer navigation - the Terms and Conditions and Privacy Policy pages. 

Now, I’m not a lawyer so I cannot offer legal advice but these are pages you could use to input your website terms and conditions and privacy policy especially if you plan on collecting data from visitors or if you plan on providing or selling content, products, and services.

You could leave the pages here in the footer navigation or move them to the Not LInked section of the Pages panel and just link to them in the footer.

Then it’s as simple as adding a text block and typing the content in here. 

Then once you’re done, click save.