*This is a paid post from an APW Sponsor*
The problem with most wedding websites is that they assume you either have design skills, or if you don’t have design skills, that you don’t care enough about design to want something pretty. Which, every lazy girl in the house knows is patently untrue. I would like to both have my cake and eat it too, without needing a degree in culinary arts pleaseandthankyou.
Having no formal training in anything except watching TV and talking about it, any technological know-how I posses is entirely self-taught. Which means that with limited capital and a small business to run, I’ve had the pleasure (read: hair-pulling) of creating a website on all the most popular inexpensive website platforms. The upside to being self taught, other than fierce Google-fu, is that I get to make all the mistakes first, and then can break complicated stuff down for people who have less time and patience at their disposal. (You’re welcome, Mom.) So when Squarespace approached us about teaming up again, I knew I wanted to deconstruct the process of creating a wedding website into something that involves fewer mistakes and less hair pulling for you.
Before I get into the details, let’s talk about who Squarespace is a good fit for:
- Design is your top priority (and you don’t have a million dollars.) Most wedding websites are a variation on the old school blog format. You get a background, and some color options, and it’s all very heavily themed (Beach wedding! Hot pink wedding! Stripes!) Squarespace is a much more minimal, modern platform. They don’t have hundreds of templates to choose from, but the ones they do offer have a beautiful, streamlined aesthetic that’s a serious departure from the standard wedding fare.
- You want control, but not too much. You don’t need any coding knowledge to use Squarespace (and for the purposes of this tutorial, I’m going to pretend you don’t have any. If you do, you’re already a hundred steps ahead of me.) No coding means that using Squarespace is really easy to use, but it also means that you want to approach your wedding website with the idea of modifying an existing template, rather than starting from the ground up. Having created a few websites of my own, I actually find this really liberating. When you’re not well versed in development or design, it’s nice to have all that structure built in, so that all you have to do is improve the foundation with your own accents (pictures, fonts, colors, etc.) Think of it like moving into a house that already has all the architecture, fixtures and design elements you love. You’re just there to move your furniture in and paint the walls a pretty color.
- You want your own URL. Squarespace isn’t a free platform, but the $8 a month you spend on your wedding website gets you a pretty awesome perk (in addition to all that lovely design): your own URL. So if having yoursandmyname.com is something you care about, Squarespace is an easy way to make that happen without having to think about hosting somewhere else (offsite hosting felt impossible to figure out when I was just starting to learn about building websites.)
So now you’re ready to start building your wedding website! What do you do now?
pick a template: Squarespace has a whole list of recommendations for which templates are best suited to wedding websites, right over here. For the purposes of this tutorial, I picked a template that utilized one big picture as the main focal point (it’s called “Aviator”). We’ll have follow-up posts in the next few months on how to create a wedding website if you want to show off lots of photos, and how to create a typography-based site if you don’t have any photos, but for the basic how-to, we wanted to work with something that had fewer moving parts. When choosing your template, here’s what you want to keep an eye out for:
- You should like the general layout of the main page. Try not to get distracted by things like color schemes or fonts, because those are very easy to change. You just want to make sure you like the layout (i.e. where the text is, where the menus live, and what the main design element looks like.) Things like menu placement and galleries are often not things you can change.
- Look at what other people have done with the layout you’ve chosen. This will help you get a feel for what kind of changes you can make, and can help guide your own choices
- If you choose a template and decide you don’t like it after tinkering a bit, it’s no big deal at all. In the “settings” section of your website’s editing module, there’s a menu option called “templates.” From inside there you can install a new template, preview it with your site’s logo, and then change it up if you like the way it looks. You can always go back to your old template or choose another one, because Squarespace’s templates are all free with the platform.
Name it: Squarespace is going to take you through the steps to change the name and tagline of your website. A good recommendation from Squarespace: make the title your name and your partner’s name, and the tagline your wedding date and location. The title and tagline show up on every page of your site, which takes the place of a logo if you don’t have one.
Customize! This is the part you’re really here for. Customizing with Squarespace is super easy, but it does take a little getting used to their editing software. (I spent half an hour looking for the button that lets you change your background image, because… see… this is not what I’m trained to do. Don’t worry, I’ll show you where it lives.) If you’re having a hard time following along, Squarespace created a twenty-minute wedding website tutorial video that is absolutely worth watching (seriously it’ll save you way more than twenty minutes of looking around.)
For the purposes of this tutorial, we’re going to focus on getting things to look the way you want. The video I just linked to will give you a much better overview of other more logistical stuff like setting up a registry page that can accept donations, for example, or creating an online RSVP. But the design part requires a bit more trial and error, so here are some tips, tricks and cheats to help you along the way:
- Editing your main page: Most of the editing I did on the main page of my website was in the live preview mode of Squarespace (Squarespace calls this the Style Editor. You can see how changes look as you’re making them.) The preview button is the one that looks like an eyeball. Once you’re in the Style Editor, the paintbrush icon in the bottom right hand corner is how you change fonts, colors, photos, etc. and the pencil icon next to it is how you make text and content changes. I ended up using the paintbrush icon much more than the pencil one, and only really used the pencil icon on interior pages.
- Choosing a photo: The photos that worked best for me were ones that didn’t have a lot of contrast and provided enough negative space for my text to stand out (your mileage may vary, depending on what color and size fonts you use.) If you have a photo you love and it’s too bright or has too much contrast for lightly colored text, the style editor lets you add a color overlay to your home page image (in my sample website above, there’s a subtle grey overlay that helps my text show up better.) Don’t have any good photos of you and your partner? No problem. You can find a photo on Flickr that fits the theme of your wedding by searching for things that have “Creative Commons” use (just be careful to pay attention to the license associated with your creative commons photo to see if you need to attribute the photo or give credit otherwise. Look for the words “some rights reserved.”) In just a few minutes of searching, I was able to find a really cool picture of string lights, one of disco balls, cool film photos of New York, and even some scans of vintage postcards from where we got married, all with Creative Commons Licenses.) If you want a more indie-feeling site, search for photos with “film” in the description.
- Changing your background photo: This took me forever to figure out, so I’ll just give it to you here. In the Squarespace Style Editor, there’s a pre-existing background image already loaded into your template. If you click on it, you’ll see a small trash can (it’s tiny and white, but it’s there.) Delete the photo that’s already in there, and it’ll be replaced with an upload button. Any time you want to change that image, just delete the old one and upload a new one.
- Choosing your colors: If you’re not well versed in color theory, the easiest way to choose colors is to work with what’s already in your photo. Google Chrome has a great (free) extension called “colorzilla” that can analyze the color in any web page just by hovering over it. So for my menu color, I used Colorzilla to grab the color code of the pants in my photo, then I input that color code into the Style Editor for my menu text and increased the brightness a bunch so it was more legible.
Once you’ve got your main image, your colors and a general feel for your website, the rest of the game is going to be about consistency (making sure you use the same fonts across your website, the same accent colors, etc.) If you get stuck, Squarespace has 24/7 customer support, plus a ton of video tutorials, and a surprisingly helpful forum (the questions that were stumping me the most were easily found through a quick search of one of the forums, or a Google search that led me back to the Squarespace forums.) It’s worth mentioning that I did all of this work without ever having to give Squarespace my credit card (just an email address to create my login.) So if you aren’t sure you’re even capable of making a wedding website you’ll like, but you want to try, you can try Squarespace out for free for 14 days. No strings attached.
We’ll be back next month with an in-depth tutorial on using those lovely engagement photos to make a kickass wedding website. In the meantime, if you’ve been struggling to create a wedding website and want more advice in our next tutorial, leave it in the comments. And if you created a wedding website using Squarespace and want to share it with us, leave a link over on our Facebook page so we can show off your hard work (and maybe steal some of your ideas.)