Hey Guys, today I will be showing you how to recreate Squarespace’s Momentum template from start to finish.
When I first started using Squarespace I wanted to watch other people building websites using Squarespace’s templates. I am a visual learner, and even though Squarespace is easy to use I needed to see someone else using it, watching how they add photos and using features that I may have not even known were there. Unfortunately I found very few videos that fit that criteria, which inspired me to create some of my own in case I could help other people. You can either watch the video tutorial I created or read through the steps I have listed below.
I decided to use Momentum for my first tutorial because here in our area, more specifically the Shenandoah Valley we have a lot of talented photographers and artists and Momentum is a perfect template for people to showcase their photos or art work.
Setting up a Squarespace Account:
We will start by setting up an account with Squarespace. Go to www.squarespace.com and in the upper right hand corner click “Get Started”.
You can now view all of Squarespace’s templates. On the left you have a navigation bar where you can jump to different template categories depending on the site you are building, you also have the option to “Like” different sites by clicking the heart in the bottom right corner of each picture. Next we are going to scroll down the page until we see the template “Momentum” and click on it.
On this next page you have can preview your website in different formats either tablet, desktop or smart phone, then click on “Start with Momentum”.
Now you will have to set up a Squarespace account. Squarespace gives you a 14 day free trial, once your trial ends you can start a plan with Squarespace for just $12.00 per month.
I already have an account so I am going to click on “Or use an existing account” (If you do not have an account, create one now).
Next you will be asked four questions regarding the purposes of your website including the title. I am going to fill these questions out as if I want a photography website exactly like Momentum’s, (of course you can put in whatever applies to your website).
Once you finish your questionnaire you will be redirected to your new website. Your site navigation panel will be on the left and your template preview on the right.
We will be recreating all of Momentum’s pages so for the purpose of this tutorial I am going to start by erasing all of the content in each of my pages so that I can take you through the process of adding it back in.
Starting with my blank template I am going to click on “Pages” in my navigation bar. Once this loads you will have a list of your website pages on the left hand side of your template preview. Here you would have the option to add additional pages to your website but for the purpose of this tutorial I will just keep the ones listed.
The “Produce” page is a photo gallery inside of the “Photography” tab. If you click on the “Setting” icon for “Produce” you can rename your gallery or add a new gallery.
We will start by creating the gallery slider for the “Produce” page. Click on “Produce” to add photos to your new gallery. If you click the + sign in the upper right corner you have the option to upload the photos from your computer. Once your photos are uploaded into this area you can rearrange their order by clicking, dragging and dropping them where you want.
If you noticed on the original “Momentum” template, there was a small icon in the upper right hand corner of each gallery photo. This is called an “Info bar”, to add one to each of our pictures we are going to hover over one of our recently uploaded images and then click on the round “Settings” icon which will give us the option to add a title and text to our image. After you have added your title and text to your photo click “Save”, and your icon will appear in the upper right hand corner of your photo.
Next we are going to work on our “About” page. If you want to change the name of your about page, you can double click on the title “About”, or you can click on the round settings icon to rename it.
After you have chosen a name, hover over the page and you will see a black bar show up. Among the list of options on this black navigation bar will be an “Edit” option. Click on “Edit” and this will bring up an empty content box for your page.
Hover over your page again, this time clicking on the black teardrop that appears near your new content box, this teardrop has all of the different page options you will need for your website. Inside the options tab find the “Image” icon and click on it. This will automatically bring up a box on the right hand side of your page that will give you the option to upload a photo from your computer or choose from Squarespace’s “Getty Images”, where you can buy photos. After you have uploaded your photo click “Apply” and it will be added to the top of your site. If your photo is too large for the page, hover over the edge until a resize handle appears and then click and drag the photo to your preferred height or width.
Now we are going to do that same process again, (hover over the teardrop and click to open the options tab) but instead of clicking on the image icon we are going to click on “Text”. We will add some text into this box telling us a little more about the artist, (or whatever you would like) then repeat the above instructions to add one more text box for more of the same information.
Now that you have two text boxes Squarespace will automatically place them above one another but we want them to sit next to each other, to do this you hover over the top of one of your text blocks and drag it until you see a black bar appear that will tell you where the box will sit when you release it. Once your black line is showing that your text will drop beside (not beneath) your other text, release it. If your text seems too close to your photo you can add a “Spacer” to give your photo and text a small buffer. If you want to add a “Spacer”, hover and click the teardrop again but this time scroll a little farther down until you see the “Spacer” icon and click on it. Then click on “Save”.
Click on “Blog” in your navigation bar and you will see a list of options along the left hand side of the panel. You can click the + sign to add a new post, view your “Drafts”, “Review” a post or create “Scheduled” posts (which are very helpful if you blog a lot).
Click on the + sign to add a new post. In the box that pops up you can add your title and text. After you have named your new post we will add an image to it. Hover over your page until the teardrop appears and add in your photo just like we did on the “About Page”. Next we will hover again and add two different text boxes and move them next to each other. (See the “About” page if you need a refresher on this step)
At the bottom of your blog post people will have the option to like or share your post, and once you add more posts they will also be able to navigate either to newer or older posts via an arrow that will appear along the bottom of the page.
The last page we are going to do is our Contact page. The first thing you want to do is add a map. Hover and click on “Edit” to find the teardrop for your page and then scroll down until you see a map.
The map will automatically be added in as a grayscale. You can alter the maps layout by clicking on “Design”. Enter in your address in the “Address” area, and a marker will be placed on the map showing your location. Once you have customized your map click “Apply”. If your map is too large for your page you can adjust the size by clicking and dragging the resize handle up and down like we did with our image on the About page.
Next we will add a contact form. Below the map, hover and click on the teardrop and scroll down until you see “Form”. Once your form box pops up you will have the option to rename your form as well as add additional question boxes by clicking on the + sign.
I also want to add some text next to the form on the left hand side, to give a little explanation for the forms purpose. Hover above your form until the teardrop appears and add a “Text” box with some text. Then drag your text to the left of the form and drop it there.
We also want a header above the text field so hover and click on the short black line that appears directly above your recently created text box. Click on the teardrop and when your different text options show up, click on “B” to make your header bold and add in your text. Now you can see this text will be centered above your previous text and to the left of your form.
If your form is a little bit squished to one side hover over the edge of it and then drag it to the left a bit, then hit “Save”.
And there you have it, your new Squarespace website! If you got stuck on anything watch my step by step video tutorial at the top of the page.
Thanks for reading!