diy websites with squarespace: part 2.

sew social website. / sfgirlbybay

In part 1 of this series, we introduced you to Squarespace and showed you a few of our favorite websites created using their do-it-yourself, customizable layouts. Today, my editorial assistant Kristen is sharing her experience customizing a Squarespace website for her company, Sew Social. i think you’ll find it most helpful when building your own websites!

templates from squarespace. / sfgirlbybay

Hey guys! I’m so excited to share everything I learned while putting together my site with you, so let’s get started. After browsing the Squarespace website templates for a bit, I decided to install about four different options by selecting “Start with this Design” on each template i liked. I did this so that I’d have instant options to choose from, in case I hit a snag with one later. Keene seemed like a good place to start, so I hit “Preview” then “Set as Live Template” and set to work. After removing all of the placeholder images and Pages I didn’t need, I uploading my logo and it became obvious the keene template’s layout wasn’t exactly what I had in mind. The logo placement and size wasn’t ideal and I realized the navigation wasn’t as streamlined as I needed for my website’s purposes.

designing websites with squarespace. / sfgirlbybay

I easily switched to Native and instantly liked how much bigger my logo looked and the template’s simple navigation. I noticed the option to add an “Announcement Bar” and since I’m currently accepting new clients, I thought this might be a great way to advertise that. I linked the bar to my contact page. After that, I changed my site font to Raleway, added a teal color for links, and connected my company’s social networks to the site.

sew social website designed with squarespace. / sfgirlbybay

Next, I decided on the following concise categories for my site’s navigation: Services, Clients, About, Contact, and created a Page for each. This was pretty easy. I simply clicked “Pages“, hit the plus sign in the upper right corner to create them, then dragged them into my preferred order. I did hit one snag here though. There was a Page labeled “Blog” listed and after attempting to delete it, I realized my template’s default homepage was a “Blog Page“. Since I didn’t want that capability for my website, I had to add a new Page to replace it.

coverpage options from sqaurespace. / sfgirlbybay

I decided a “Cover Page” (labeled “Home”) would be best for my homepage, since I wanted a background image to appear there but not on the rest of my site (Cover Pages are styled independently of a site’s template). Apparently, you can also upload multiple images, and they will display one image at time as a slideshow. I didn’t want to do that but I thought it was a cool Squarespace option! I went with “Vangaurd” for my Cover Page and set it as my homepage by clicking “Settings” and “Set as Homepage”. I was then able to delete that pesky default “Blog” Page from my template and I was all good! This is one of the coolest aspects of Squarespace, in my opinion. Even if a template was originally created for one purpose, like blogging, you can make any template into a store or website by changing out the blocks and/or page layout. You can learn more about this here.

diy websites with squarespace. / sfgirlbybay

Next, I went in search of the perfect background image for my homepage. First, I used Squarespace’s Getty Images tool to search for relevant images. There were lots of great photos there but I wasn’t finding what I had in mind. So, I checked Pexels and found two free images to use on my Services and Contact Pages, as well as a promo code (PEXELS10) for Shutterstock. That’s where I found a pretty floral, flat-lay image that was perfect for my homepage (see all of the options i was considering here).

sew social website homepage. / sfgirlbybay

Once that was in place, I decided to test one more template to make sure I was definitely in love with Native. I switched to Aubrey, even though it’s meant to be a wedding website, and after a few tweaks I liked it, too! My logo was bigger and the navigation was just as streamlined as Native. However, after comparing the two templates on my mobile phone, I quickly realized Native was the perfect template for my site and switched back (side-by-side comparison below).

sew social inc. website designed with squarespace. / sfgirlbybay

With my website’s aesthetic locked-in place, I went back through each Page and refined the text to include only the most-important, easy to digest information. Last but not least, I went live and sent the url to a few friends to see how it looked on different sized monitors and different mobile phones. Overall, I felt the Squarespace platform was very user-friendly, and besides selecting a blog template that involved a little bit of extra work, I felt like the process was pretty smooth! I will admit that it took me longer than I thought it would to complete my website, but I think this had more to do with my own indecisiveness than figuring out the platform. I’d estimate I spent somewhere around 6-8 hours building my site over the span of a couple days, and a few more hours browsing for imagery and drafting all of the content for my site. For this reason, I really recommend having all of that done before you start building your website. Having this content ready to go gives you a much better picture of what you’re building and will make the whole process much more streamlined.

I hope this leaves you feeling ready to build your own Squarespace website. Be sure to use coupon ‘SFGIRL’ for 10% off your first purchase!

squarespace websites. / sfgirlbybay

This is a sponsored post in partnership with Squarespace and all words and opinions are my own. Thank you for supporting the brands that help keep sfgirlbybay going with fresh content every day.

1-pix

http://ift.tt/oHloC9

Leave a Reply