2.27.2013

The Wedding Ones: Our Free DIY Blogger Wedding Website

Today we are sharing our awesome (we think) wedding website!  We decided to do this post a bit like a tech-y DIY, so we could possibly help anyone else out there who wants to make their own wedding site.  We went back and forth about whether or not to share our website with you, since it is kind of personal and is really made to give wedding info to our guests.  In the end we decided to go for it, partly since we are so proud of what we made, and partly because we wanted to share the tricks and tips we learned to help other people make their own websites.  I took screenshots of a few pages for this post, but there's more to see on the site itself, so check it all out here if you're curious: www.chrisandjuliahitched.com

The ceremony site is through the redwood trees in this picture Chris took.
We wanted our wedding website to be relatively simple so it would be easy for our relatives and friends to navigate and find all the information they might need, but of course we also wanted it to be pretty and fun, and to set the tone for the wedding itself.  We used Blogger so it would be free (yay free!), but then we decided to buy the domain through Blogger, so it ended up costing $10; you could easily do it for free and just have the .blogspot.com in your URL.  Of course, Blogger is designed to make blogs, but you can easily use it to make all sorts of websites.

I'm more than a little obsessed with A Practical Wedding, and I love their idea that you should figure out what is important to you for your wedding and focus on that, while not worrying about the other stuff as much.  There are tons of websites out there that design websites for people, and you can pay for a cool (or generic if that's your thing) site where you just fill in the information on pages they give you.  For Chris and I (both artists, obviously into the whole internet thing with our blog and online store), the website was something that was important to us.  Plus, we hate spending money on things when we think we can do better.  We're comfortable on Blogger (which hosts our blog), and it's definitely not perfect, but we figured we could make it work.

It definitely helped that I have some web design knowledge... when I had a full time teaching job, they helped me pay to take courses towards a MAT degree, and one of the classes I took was a graduate level website design class for art teachers (basically it was made to familiarize creative but not necessarily very tech savvy people with designing simple websites using the Adobe Creative Suite).  I learned a lot about successful design, picked up a bunch of tricks, and got comfortable enough with html to be able to do little things with it.  This class was super helpful in fixing some things on our blog, and definitely came into play when we wanted to design our own wedding website.

Here's the homepage!  We used the "simple" template on Blogger.  Basically how it works is the homepage is the "blog" according to Blogger, so we made one post, and we changed the post settings so it doesn't show the date, social media sharing stuff, or anything other than the title and comments.  In the post, we wrote the welcome text we wanted to show up on the front page and added a photo.  If you click on the title ("We're getting married!"), it will take you into the blog post itself, which looks exactly the same as the front page just with a different URL.  It's not perfect, but we're not worried about that.  We adjusted the layout, widths, fonts, font colors, etc in the Blogger Template Designer.

All the other pages on the site are just "Pages" in Blogger.  I looked at a bunch of wedding websites to narrow down the pages to what we thought was actually important, and we ended up with four: Our Story, Wedding Info, Where to Stay, and Registry.  On the Layout page, we got rid of the "Pages" widget, so there's no bar with links to the pages like we have on this blog.  Instead, we used those awesome geometric shapes on the left to link to each page.  We'll get into those more later...

For the background, we used a simple white linen paper texture (we used white linen paper for the Save the Dates, too), which we found for free online here.  That website has tons of open source large images that are perfect for backgrounds.  The picture was actually too big for Blogger to accept (you can upload your own image in the Background section of the Blogger Template Designer), so we made it smaller in Photoshop.  Speaking of Photoshop, we used it to make everything for the site, and we definitely recommend investing in Photoshop for everything from general image editing (we use it for every photo you see on our blog) to fancier design stuff like this.

We wanted a cool handwriting-ish font to use for all the title stuff on the site, so we downloaded the mathlete font (for free!) from the awesome website font squirrel.  If you recall our DIY Save the Dates,  you'll notice we used the same font on those, because we just love it that much. 

We decided to round the corners of all the pictures on our website to give it a softer look.  We googled tutorials for how to do this in Photoshop, but once we read them, we realized there was a slightly easier way to do it.  For those of you who use Photoshop, here's how it's done:
1. With your image open in Photoshop, use the rounded rectangle tool to draw a rectangle over where you want the final image to be.  You can adjust how rounded the corners are by changing the pixel number where it says "radius" in the toolbar.
2. In the layers panel, right click on the rounded rectangle layer and choose "Rasterize Layer"
3. Use the magic wand tool to select the rounded rectangle.
4. In the top menu, go to "Select" then "Inverse" (or just hit shift-command-i on a mac)
5. With the area around the rounded rectangle still selected, go to your layers panel and click the layer with the picture.
6. Delete! Then delete the rounded rectangle layer, and you should have a picture with rounded corners!

The key to having the background of your website show up behind a picture with rounded corners (or any picture that's not a perfect rectangle, like the geometric shapes in the sidebar), is to save the image as a png.  If you save your image as a jpg, it will probably show up with a white background, but with a png you can have a transparent background.

I'm not going to go too far into the details of how we put together all the pictures and text, because it's really just messing around with the photos, shapes (changing opacity for the caption backgrounds), and text in Photoshop.  We just kept cropping, resizing text, changing the color of the text, and wiggling everything around until it looked good.  In general, we tried to stick with a consistent color palette and to keep everything clean and lined up neatly.

One little trick I found to clean up the look of the website was to get rid of the annoying drop shadow the Simple template (and several other Blogger templates) puts around the pictures.  You can get rid of the outlines in the Advanced section of the Blogger Template Designer, but that pesky little shadow is harder to remove.  For those of you who have been reading our blog for awhile and are super observant, you may have noticed that we got rid of the drop shadows on this blog, too!  I think it just looks much cleaner and more professional this way.  To make it happen, I used the "deleting CSS" instruction on this website, but there are tons of tutorials out there on the interwebs, so you can find one that you understand.  I think I just did a google search for "how to remove shadow around pictures in blogger" or something like that.  It takes a little bit of finagling with the html, but it's really a rather simple fix.


One of the features we love most about our site are the geometric shapes, which basically act as the site's "menu."  When you mouse over each image, there is a rollover image effect, meaning the picture changes to reveal the name of the page it links to when you click on it.  When you mouse off the picture, it goes back to being just the shape.  It's kindof hard to explain in words, so I recommend going over to our website and playing with them (it's really fun... I do it all the time).

I learned about rollovers in my web design class, and I thought it would be really cool in combination with crystal shapes like the stamp we used for our Save the Dates.  We just made four different crystal shapes and added our wedding colors with the paint bucket tool to make the first images.  Then we placed the text where we thought it would fit best and used the eraser tool to carve out an opening for it to make the rollover images.

I nabbed the code for the rollover image effect from this very helpful tutorial.  Here's the code, but if you need further instructions, go to their site to get all the details:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

That code not only makes the picture have a rollover image effect, but it also acts as a link to the page of your choosing--you just plug in the URL of the appropriate page on your website.  We put each image in the sidebar of the website by going to the Layout page, deleting any gadgets in the sidebar we didn't want, and adding an html/javascript gadget with the rollover html code for each separate picture/link.  You will need to upload your photos onto the internet somewhere so they have URLs;  I just used my google+ account.

Well, that's all I can think of to explain about how we made our site, and hopefully it's helpful for someone else looking to make their own wedding website!  We've implemented a few of these tricks on our blog, and we're thinking of doing some more redesigning soon, so maybe you'll be seeing more of this type of stuff on our blog soon.

What do you think of our wedding website?  Did you have a self-designed website when you got married?  Do you think the rollovers are as much fun as we do?
We're not web design experts by any means, but if you have any questions about how we did something on our wedding website (or this blog while we're at it), just ask and we'll be happy to help!

15 comments:

  1. Thanks for sharing! I'm not getting married any time soon, but it never occurred to me to use Blogger to make a website (rather than a blog). You guys did a great job!

    ReplyDelete
  2. Looks really good- you are both so creative!

    ReplyDelete
  3. I love how it looks! Thanks for sharing a look into your website, and for sharing the rollover code too. I plan on using it on my blog!

    ReplyDelete
  4. Wow, it's awesome! You guys are going to have the coolest wedding!

    ReplyDelete
  5. Looks gorgeous and will be a great resource for what I'm sure will be your fabulous wedding!

    ReplyDelete
  6. It is simple and clean. The website consist a good colour usage and user interface. I am sure you will get millions of visitors.

    ReplyDelete
  7. As soon as I noticed this site I went on reddit to share some of the love with them.

    ReplyDelete
  8. Marvelous posting! I quite enjoyed reading it, you may be a great author.I will ensure that I bookmark your blog and will eventually come back in the foreseeable future..
    Bay Area Website Design

    ReplyDelete
  9. Fantastic Information !! I appreciate your work.Thanks for sharing with us.
    Web Design Birmingham

    ReplyDelete

  10. Its simply amazing, i just love your blog.. Great work man!

    ReplyDelete
  11. great thanks for shearing. Wedding day is very much spacial in every one life. great work

    ReplyDelete
  12. Hello there! I must tell you the blog post is really good. It is very informative. I want to mention one thing that I like the way you write the post to the point. I really appreciate and keep writing!

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete

Note: Only a member of this blog may post a comment.

Related Posts Plugin for WordPress, Blogger...