A few posts back I mentioned the importance of white space (especially in your background), but that if you are worried about it making your design too boring, do not fear! There are other ways to add panache to your site – ways that enhance rather than distract from your content. The banner and the sidebar we have already discussed – and today we’ll be talking about something that I consider to be often overlooked design-wise: your menu of stand-alone pages.
When I refer to “stand-alone” pages, I’m talking about pages you create that don’t shift down in order like regular blog posts – these are pages that stand on their own. For instance, the “About Me” page is a very common example of a stand-alone page. You can see my menu of stand alone pages right below my banner – each with my own pen and ink illustration. Personally, I think that menu is one of the main things that helps my blog design to be unique and branded. Plus, it helps with navigation, as several of those pages are designed to highlight particularly useful posts (like in the Tips & Tutorial gallery or on the Printables page).
In today’s post, I’m going to be sharing my thoughts with you on important and helpful ways to use pages, as well as tips ranging from practical to the more panache on how to set them up – and, as always, demonstrating on Lori’s new site for her blog, In My Kitchen, In My Life. And I’m reeeeeeeeeeeeeally excited about Lori’s new menu of buttons which I will be showing later in this post! The possibilities are fairly endless on how you might choose to use your pages. But here are my suggestions as a couple “must-haves” in your pages … as well as a list of ideas for “maybe-haves”, depending on what kind of blog you have.
An “about” page is HUGELY important for a blog. I’ve heard statistics that, in general, the “about me” page is one of the most highly visited pages on a site. Why? Because people want to know who you are and what the site is about! People like to talk and visit with someone they know. Use your “about” page to let people get to know you. Let’s say you run a weight-loss blog. Why do you? Is it because you have a touching story of how you lost a lot of weight yourself, and you want to help others? Or is it because you see the growing trend of overweight children in America and you want to help parents keep their kids healthy? People love to hear your story.
Here are a few fun ideas for ways you might approach your “about” page:
‣ ‣ ‣ Photographs and descriptions of you doing things pertaining to your blog subject
‣ ‣ ‣ A bullet list of interesting facts about you
‣ ‣ ‣ The story of how you got involved in whatever activity it is that you blog about
‣ ‣ ‣ A video for your about page
‣ ‣ ‣ Your own personal mission statement, and the things that matter most to you
‣ ‣ ‣ Humorous interview style
‣ ‣ ‣ Stories/pictures from your childhood that help define you
‣ ‣ ‣ Separate “about” pages for your blog itself, as well as each writer on your blog
‣ ‣ ‣ Etc! Have fun with it!
Some things to probably avoid on your “about” page…
‣ ‣ ‣ Writing in the third person. Unless you have highly unusual circumstances on your blog that make it extremely formal, write in the first person. We all know it’s you writing it. Imagine you are talking to your readers when you write it … and how odd it would sound to talk in the third person.
‣ ‣ ‣ Making it reeeeeeeeeeeeeeally long. It doesn’t have to be your WHOLE life story, just give people a glimpse into your life and a taste of your personality.
‣ ‣ ‣ Résumé style. People want to “meet” you on your about page … not feel like they’re being sold to or that you’re trying to prove something. Highlighting some accomplishments is fine, but try to keep it casual and personable. Awards/features/accomplishments can, in fact, have their own page, like a “Press” page.
But one way or another, have an “About” page on your blog! You visitors are looking for it.
Your contact information should be easy to find from any page a visitor may be viewing. A good way to do this is to have your contact page in your pages menu. There are any number of reasons a visitor to your site may want to get in touch with you – they may want to advertise on your site, they may be interested in guest posting, they may spot an embarrassing typo they want to alert you to, they may want to keep in touch with you on social media sites, they may just want to say hi! Have that contact info easy to find. How much contact info you share is completely up to you. I’ve seen people on large blogs even including their home address so people can send them gifts! Personally, an email address is the most personal info I put on my site … and even that is my “professional” email address, which gets screened through a couple filters before it gets forwarded to my personal email, to weed out the spammers. Also – helpful hint here if you’re concerned about bots scanning your site – you can always include your info in an image rather than in type. That way a real visitor will be able to see it, but it won’t get scanned the same way by bots and crawlers. Or you could always set up a “contact form” where people submit their questions/messages right on your site rather than providing contact info. But at the very least, it is a good place to share your links for how to contact you on other sites – for instance, your Twitter, your blog’s Facebook page, your Pinterest, etc.
Ok, so now you have an About page and a Contact page. What other pages might you want? Really, the possibilities are endless. Here is a list of ideas – and not all of these will be applicable to everyone and you wouldn’t want this many anyway – but hopefully this list of ideas will help get your mind rolling…
‣ ‣ ‣ Home/Blog Page (helpful, because a lot of people won’t be landing on your most recent post, if they’re coming from Pinterest or anywhere else that linked to a previous post)
‣ ‣ ‣ About Blog Page (in addition to an “about me” page)
‣ ‣ ‣ Welcome Page (where you can give first time visitors a tour)
‣ ‣ ‣ Shop Page (where you sell your wares)
‣ ‣ ‣ Press Page (where you highlight places you/your blog have been featured/awarded/etc.)
‣ ‣ ‣ Sponsor Page (info on advertising/sponsoring your blog)
‣ ‣ ‣ FAQ’s Page (your answers to frequently asked questions)
‣ ‣ ‣ Highlight Content Page (pages like my “printables” page or “tips and tutorials” page that highlight especially relevant content from your blog)
‣ ‣ ‣ Outside Pages (including a button in your menu that doesn’t lead to a stand-alone page, but rather links directly to a site outside of your website – for instance my “Cafe” button in my menu takes you to my Etsy shop, FlourishCafe – or another example would be a button that takes you to a subscription form)
‣ ‣ ‣ Links Page (a page that includes links to other pages, like if you want to recommend other blogs/books/resources/etc.)
‣ ‣ ‣ Map Page (a sitemap to help people get around your blog)
‣ ‣ ‣ Etc! The sky is the limit.
First, we’ll go over the basics – and next, how to get that extra panache with images and such. Since in this series we’re moving Lori’s blog from Blogger to WordPress, most of the tech stuff in this series is about how to do things on WordPress. However, in this instance, I actually wrote a blog post a while back when I was on Blogger myself about how to make stand-alone pages in Blogger. You can click here for that post … it’s like a glimpse into the past because it’s from my old blog. :)
Here are the instructions for WordPress. Sign into your WordPress dashboard. On the left-hand menu, you’ll see the option “Pages”. From there, you can select “add new”. This is what you’ll see (minus my notes, of course ;)
Super easy. Now let’s take it to the next level by creating a menu of buttons for our pages!
So, now you’ve made your pages. And we discussed in an earlier post how to make your own graphics that fit your branding and design choices, and these buttons are no different. If you want to make a button for each page in the menu (such as I have under my banner) make sure each image file is exactly the same size – or at the very least, all the same height. You want your menu to look uniform and even. Go to the “Media” section of your WordPress dashboard and upload all the buttons you have made for your menu.
Next, in your WordPress dashboard, go to Appearance -> Menus. Name your new menu (I called mine “top menu”), and save it. Next, look for the “custom links” box:
In the URL box, put the link you want it to go to. If it’s leading to one of your stand-alone pages, like your about page, put the URL for that page in this box. Or, if you’re wanting to link to an outside page, such as your Etsy shop or your subscription form, just put that link here – this is how you include a button to other sites!
Then, in the “Label” box, you will want to use the following code to make it display your button image:
<div style=”background-image: url(‘http://www.inmykitcheninmylife.com/wp-content/uploads/2012/08/about.jpg‘);background-repeat: no-repeat;padding: 116px 0 0 120px;”></div>
.. only you will want to edit this code. For one thing, you will need to change the address in green to the URL of the image file you uploaded. (to get the url of an image you uploaded: go to “Media”, hover over the image, click “edit”, then scroll down to “file URL” and copy it.) Also, the numbers after “padding” will need to be adjusted to fit the size of the image you uploaded. For instance, Lori’s buttons were 120×116, your’s will be a different size, most likely. Once you’ve adjusted the code as needed, and have put it in the “Label” box, click “add to menu”. (As I’ve explained before, I’m no coding wizard … I just tweak. For a more full explanation on this particular bit of code, you can check out this blog post where I found it.)
Repeat with each button you want to make! Rearrange order by dragging and dropping. Click “save menu”. Make sure that in the box at the top of the page that your new menu is selected to make it active:
(Or, alternately, if you don’t want to use it as the main menu at the top of the page, and you want to use it else where, you can add it as a widget on your widgets page.)
Let’s say, though, that on one of the buttons, you don’t want the button itself to link to anywhere, but instead you want a drop-down menu of options to come available. Here is how you would do that…
Make the button the same way, only leave the area for a URL blank. But input the image code the same way. Add to menu. So the button is ready, and doesn’t lead anywhere. Now to make the drop down menu, look for this box on the left hand side:
This is a list of all the pages you have made. Find the pages that you want to show up in the drop-down menu, select them, and click “Add to menu”. Then drag and drop those newly added pages under the button you want to be at the top – make sure you drop them so they are indented:
And now a menu will pop up with those options when someone hovers over the top button! Nifty, eh?
So *drum roll* … here is Lori’s site, now with menu buttons! She can always change them around to her own needs and desires, but for starters, here is how I’ve set it up:
She mentioned some types of pages she wanted, so she now has the following buttons:
– Blog
– About
– Recipes
– Printables
– Life Lessons (which goes into a drop down menu where she can feature any special series she chooses)
– Contact
… and, as we’ve discussed over and over again, any graphics you design for your site, like these buttons, should fit with your branding statement and design choices (style, medium, colors, etc.)
So what do you think about how things are coming along? Do you use your menu of pages as a design element? Also, I’d love to hear what pages you have set up on your own site, it would be interesting to see the variety of types of pages different bloggers have! Leave your thoughts and comments below, I love to hear from you!
If you’ve missed the other posts in this series on DIY blog redesign, here they are:
Part 1: Discover your branding with “The Drawing Board” Printable
Part 2: WordPress vs. Blogger
Part 3: Design Tips + Design Worksheet
Part 4: Themes, Coding and Stylesheets
Part 5: Making your own graphics
Part 6: 7 Blog Layout Tips to Engage your Reader
Part 7: Blog Page: The Must-haves and the Panache (This is this one!)
Part 8: 25 Tips for using WordPress
Part 9: The Big Reveal
Part 10: 7 Ways to Promote and Market Your Blog
i feel like you have so much fun writing this post ^^
i don’t agree when you say to describe without using the third person: in my head, i’d like to let other person describing me, but instead of that, i think that using the third person let us describing ourself as other people would see us… as i heard long time ago, “when you want to know more about a person, don’t ask him, but ask at other people what they think about him”…
and then, from school, i always feel so embarassed to talk about me in first person haha ^___^
Hey Fede! :D Yeah, there is certainly a time and place where third person writing has its value and merits. I tend to think in general that place is in more formal areas than a blog … but to each her own! That is one of the really neat things about blogging – each of our sites is our own and we can make it our own! :)
So glad I found you..boy does my blog need help! I am Blogger though not WordPress but the general ideas are still the same..just different steps to get there.
Hi Julia! So glad this has been helpful for you! Yes, while some of the more tech aspects are for WordPress, my intention was that the design and layout tips and such could be fairly universal to any platform. If you haven’t seen the previous posts from the series, you should check them out! They are listed at the end of the post :)
Oh my gosh! I never made a contact page! I have my email address all over the place, but maybe I should stick it somewhere official. (Duh, Paige!) Thanks for the lightbulb moment!
Yay for lightbulb moments! Although, if you have your contact info clearly visible in other places, it’s probably not *quite* as urgent … but I do still definitely recommend it, I think in general a contact page is the first thing people look for if they want to contact a blogger. :)
I can’t to see the newly designed blog! I think you are doing a great job and I love Lori’s blog so I’m just excited to see it all come together when you are done!
Thanks, Angela! I’m having a ton of fun designing it — I hope Lori likes how it comes out in the end! And we can always tweak it more after the series as needed to fit any particular desires/wishes she has … she gave me pretty free reign design-wise so that I could finish this series on time, which was really kind! :)
Another great post! I really need to put some work into my About page. It’s very basic right now (a pic and one very short paragraph), but it does get quite a few views. Thanks for another great post!
I was curious, so I went and checked out your about page … cute photo! But yeah, you can definitely inject a lot of personality and getting-to-know-you-ness in the writing! You’ll have to come back and let me know how it goes, it would be fun to see a before and after :) My about page used to be waaaaaaaaaaaay too long .. it was ridiculous! Mine still isn’t perfect, of course, but it is an improvement to what it used to be, haha :)
I can’t tell you how helpful this is as I am going through the tedious and overwhelming task of overhauling my site(s). I thought I had a pretty good grasp of WP but you’re opening up whole new worlds for me with things like a graphic nav bar. Wow! And thanks!!
Oh, wonderful, I’m so glad it’s helpful to you! Yes, the amount of customization you can do in WordPress is pretty limitless, I love it :)
Funny you posted this today…I just changed my about me page. I like your points, I think you are right on.
Ha, neat!! I tried to go check out your new about page … but the link attached to your name in the comment box isn’t working..? If you stop back by, be sure to adjust your link when you comment, I’d love to check it out! :)
Hmmm not sure why? It’s http://www.abernathycrafts.com
Ah, that link works! The website typed in with your name (you’ll see it if you click on your name) was http://www.abernathystudios.com … so that explains the difference! Thanks for stopping back by with the link, I appreciate it! Uber-cute etsy shop, btw! :)
Ah, I see! That’s my Etsy shop.
This is such a helpful post for a new blogger like me. Thanks so much! Now I’m no longer too lost. Haha! :)
Great, I’m so glad it was helpful, Michelle! Be sure to check out the rest of the posts from this series, as shown at the end of the post .. if you’re a new blogger there should be a lot of useful info in those posts for you! :)
Thanks for posting this April. It helped me SO much! You are awesome!!
LOVE following you on Pinterest :)
Meegan
Thanks for stopping by, Meegan! :D
LOVE the buttons on Mrs. Lori’s blog! They absolutely make it all come together! The asparagus… the blueberries… just PERFECT! Everything is just so well balanced. Loving this series, April! Very helpful stuff all along the way. Thanks!
Aw, thanks Heather! :D
I love your tips and tricks and look forward to using them to tweak and upgrade a blog I started for school (and want to keep going). I’ve been trying to create a menu with graphics using your tips and I can’t get it to work. Every time I click add to menu the box that shows up says “pending” and nothing ever loads. Any idea what I could be doing wrong?
Hm, I’m not positive, but it since it never stops pending, it sounds like a computer loading problem rather than a “doing it wrong” problem to me. Maybe try it on a different computer? I’m sorry I don’t have a more definitive answer. Have you tried adding different types of things to the menu just to see if anything would work? (Like adding a category or a page to the menu?) That might clue us in on whether it’s just not working in general, or if there is something off with the graphic button way you’re doing it.
I tried creating a custom pictures for my menu link, but nothing shows up. Is it because I’m using a different theme maybe?
Maybe … I’m just not very familiar with other themes. My thought, though, is that it should work on at least some other themes, but I guess it would depend. I tried to check out your site to see what theme you were using, but it went to blogger. I take it you also have a WordPress blog? This tutorial is definitely for WordPress.
Found you while looking for blogging tips on Pinterest! Sure glad I did!! You have a beautiful place here =) I will definitely be coming back! Thanks for all your tips, tricks and advice. God bless!
Yes, having the same issues as Bethe. I made my images 115px by 115px, and I get zippo on my website. I will try maybe a 5px by 5px picture next as an experiment.
Hey, I think that I didn’t have the code display: inline; in there, so it was putting it on the next line. I got it to work, now I think I may not use this function after all, but at least I have the option. Thanks for the post.
I have been working on setting up a new wordpress blog. I am currently adding pages but am stumped on the first one! How do you simply make the home button on the menu link back to your home page?
Thanks for the tutorial with pictures of WHICH things to click! So clear and easy. Just pinned it to our “Blogging Pro” board!
Hey there,
Thanks for this awesome series. It’s helping me with my new blog. However, I cannot get the navigation images to work at all. They don’t show up. I tried a different code, and they did show up, but were in weird places.
Also, do you have any tutorials for changing the appearance of them when hovered? or changing the look of a drop down item when hovered?
Thank you!
Thank you for this series of posts. I have just started a WordPress blog. I have a home page, about page and two short test posts. It definitely takes time to get it set up just the way you want it. I can’t wait to get it ready to go.
WOW just what I was searching for. Came here by searching
for facebook like template
Thank you, I’ve just been searching for info approximately this subject for a long time and
yours is the best I have discovered till now. However, what in regards to the bottom line?
Are you certain about the supply?
You will be glad to find that these ACLS course Seattle is now available
online. Remember that although a vital job, it is not one without stress.
They provide professional customer service to
ensure that their customers are satisfied with the placements that they receive.
People waiting for the start of the anticipated flick can enjoy
a variety of activities before the opening credits begin. Referrals can be an excellent source of new business.
If writing is your stronger skill, blogging can help your website get a wider exposure oon the world wikde web.
If you’re interested in this option, do your homework.
Just when you think you’re ready to sell them,
perhaps you can just ddo something about the appearance
oof youhr site orr better perhaps if you’re using e – Bay then you
will noo longer have to worry about it. Achieving financial success,
especially onn the internet, requires quick aand meaningful action to
be taken. and Do it you become another statistic
in the industry. Thhe best approach is to go for something that you are passionate about or at least havee an interest
in; otherwise, chances are that you would fed up quickly and
would just leave eberything aftewr investing many of your precious hours.
Find more poker details at and for tournament schedules click.
It’s just like hold’em except instead of starting with two cards, you start with three.
Article Source: Bisterre has worked as an independent travel guide in Eastern Europe.
wonderful points altogether, you just gained a logo new
reader. What would you recommend in regards to your
submit that you made a few days ago? Any certain?
Or even to choose to have no food at all is possible.
Server features: – Lifts: – Right click on the carry
signal to have it. Currently, gamers can only
enjoy Minecraft’s mash-up packs on Microsoft consoles.
April! What a fantastic series! I read it from start to finish after finding it on Pinterest one sleepless night. I keep coming back to your highlights page, i just love it. I can’t figure out how to get my images to line up nicely next to one another, can you help me?
You have my wheels turning and this series was perfect as I am right smack in the middle of a redsign.
Hello every one, here every one is sharing
such familiarity, thus it’s nice to read this blog, and I
used to go to see this website every day.
Excellent post! We are linking to this great article
on our website. Keep up the good writing.
Hi there I am so glad I found your blog, I really found you
by error, while I was searching on Digg for something else,
Regardless I am here now and would just like to say many thanks for a incredible post and a all round entertaining blog (I also love the
theme/design), I don’t have time to read through it all at the minute but I have saved it and also
added in your RSS feeds, so when I have time I
will be back to read more, Please do keep up
the awesome b.
This is a great tip particularly to those fresh
to the blogosphere. Brief but very accurate information… Thanks for sharing this one.
A must read post!
It also works well for individuals who might be too embarrassed about their need to be tutored.
These instructors should motivate the students and work towards building
up their self-confidence. It’s important that your email marketing complies with
CAN-SPAM regulations.
Hey would you mind letting me know which hosting
company you’re using? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot faster then most.
Can you recommend a good hosting provider at a reasonable price?
Thanks, I appreciate it!
Esta iniciativa es posible merced al trabajo y esmero
conjunto de AMIA y la fundación educativa Junior Achievement Argentina.
Thankfulness to my father who shared with me regarding this blog,
this weblog is in fact awesome.
I love this! I am still working on getting all my pages complete, but especially the part on WordPress stand alone pages was so helpful! I’ll definitely read the rest of this series :D
This is amazing! Very informative and I am glad I found you LOL. I like how you were very detailed in the menu button section and I am going to be following your steps for my blog. Thank you again April!
Hi to every one, the contents existing at this web site are actually remarkable
for people knowledge, well, keep up the good work fellows.
This article offers clear idea in favor of thhe new viewers of blogging, that really how to do running a blog.
Creative suggestions , I was enlightened by the specifics ! Does someone know if my business can get ahold of a fillable IRS 943 form to work with ?
Hi DAWNA SHORE ! my work colleague acquired a fillable IRS 943 example using this “http://goo.gl/kU6rXP”.