DIY Design #5: WordPress Design Part 1

Time for another DIY Design post! Clara did number four which was on free photos and design resources. My post is going to be part one of WordPress design. Today I’ll be going over blog headers and blog buttons. This isn’t neccesarily just for WordPress, but I will be going over how to put headers on your WordPress blog and how to link buttons on a WordPress page.

Another thing real quick, I mention PicMonkey a lot in here and I LOVE using it for it’s easy-to-use format and amazing editing and design tools. That being said, unfortunately it isn’t free. I still think it’s worth it though! (Especially when you share your account and the costs with your sister. ;)) So if you want to go ahead and sign up for it I’d appreciate you using this link to do so, because PicMonkeys gives me a bit when you do! 🙂

When making a blog header, you can see what size to make it by going to your blog and clicking “Customize.” (You can find the customize button beside “themes” on the My Site page.) When the customizer tools have loaded, click “Header Image.” Up at the top you can see the recommended header size. Recommended header sizes vary with different themes.

Keep in mind that some blog themes let you do any size of header. I usually like to make the length at least 2000 pixels. For my theme, I’d just multiply both the width and the length by 2 and make the header 2320 x 500 pixels.

When you’ve found the correct size of header, or deicided on a size you want, go to PicMonkey.com. Under “design” click “custom size”. Enter your length x width and click “make it!”

This is where combinations come in handy. Once you choose your blog’s font and color combinations, it should be a lot easier to design your header. Choose your main font for your header and add your accent font for your tagline (if you have one). Remember, the key to font pairing is to pair opposites!

I made my example header very simple. It’s just text with one color and no graphics. Here are some different headers I have made for bloggers that have some more variety. (Click on the header image to see the blog.)

Another thing that isn’t necessary, but can improve the look of your header, is to make the background transparent. I find that the header is often slightly fuzzy when it has a colored background. You can make the background of your header transparent by checking the transparency box in “Canvas Color”. I like to do this after I’m done making the header, because the checkered background (this means that your image’s background is transparent) can be distracting.

Putting your header on your blog is simple. Go to your customizer, click “Header Image” and click “add new image”. Upload your header to your media library, and then click “Select and Crop”. If your header is the suggested size, then you can go ahead and click “crop image”.

However, if it’s not the suggested size, then you’ll need to click “skip cropping”. If your theme doesn’t have a “skip cropping” button, then try dragging the selection so that it covers the whole image. If you can’t do this either, then you are going to have to make your header the suggested size or else pick a new theme.

When you click “crop image”/”skip cropping” your header should appear in your blog. But, chance are, there will also be your site title and tagline below or above your header. You can easily fix this by going to “Site Identity” and unchecking the “Display Site Title and Tagline” box.

Ta-da! You now have yourself a blog header.

Blog buttons are kind of like square headers, but they are used in a different way. Many bloggers have a page on their blog with their button, and the buttons of other blogs beneath that. This spreads the word of your blog. When you have a button, you can comment on someone’s blog page and ask to swap buttons. They’ll put yours on their page and you can put theirs on your page. Sometimes bloggers will just have a button on their sidebar and no page. You can “grab their button” and put it on your page if you want.

For a blog button, you can go to PicMonkey and click design. This should automatically open a 2000 x 2000 pixel image in the editor. Go to canvas color and make your square the color you want (think of your color combinations!).

Then go to text and add the title of your blog. Taglines are nice too, and I like adding the URL of my blog just in case the link doesn’t work. 🙂 Keep in mind where you are putting your graphics/clipart. (Yes, I did change the background color for this next picture.)

Add your clipart for the finishing touch!

Again, here are some more examples of buttons I’ve designed.

For a circle button, do all the steps mentioned above. At the end, go to the frames section in PicMonkey. The top option is called “Shape Cutouts” and you can click on that, make your circle 74% – the maximum size for a circle as long as you want it to stay within the square – and click apply. Just make sure you have a transparent or white background! You’ll probably need to rearrange your text and graphics. (The curved text on my example is a PicMonkey Royale feature and is quite handy.)

When you put a button (either yours or someone else’s) on your page, make sure to add a link to the person’s blog. You can do this by clicking on the button image and then clicking the link icon and adding a link just like you would for text.

I hope you enjoyed the fifth topic of DIY Design. Clara will be doing the last part (WordPress Design Pt. 2) next week, so make sure to check that post out!

do you have a blog button?

have you been enjoying diy design so far?