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.

blog headers text

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.

diydesignheader

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!”

diydesignheader1

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!

diydesignheader4

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.)

Julia's Journal

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.

diydesignheader3

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.

diydesignheader6

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.

diydesignheader5

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

blog buttons text

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!).

diydesignbutton1

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.)

diydesignbutton2

Add your clipart for the finishing touch!

DIY Design Button.jpg

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

IMG_7766.JPG

small dolls big hearts button.jpg

image.png

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.)

diy design button circle.png.jpg

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?

megan signoff

Advertisements

69 thoughts on “DIY Design #5: WordPress Design Part 1

      1. Sorry for the late response ! 😳 Um, could you make it like watercolor blue and teal? And a little mint green? Oh and for the font can it be “brusher” or like that paint/calligraphy like font? Thanks! 😋😂💕

        Like

      2. Yes,that would be awesome! And please make sure that it’s just one word “foodandfunstuff”. Thanks! 💕😋

        Like

      3. Oh,I see it!!!!! That’s PERFECT!!!!! 😻😻😻😻😻😻😻😻😻😻 Is it too late to ask you to help me redo my whole blog ??? I’ll give you credit!

        Like

      1. Wow! XD I usually do about half of my post at first, forget about it, and then rush to finish it 5 minutes before I post it. 😛

        Like

  1. That was a great tutorial! I’ve learnt to become obsessed with designing on PhotoShop over this year, even though it means cramming my system with fonts and design tools. I’ve just been on vacation for about a month and I’ve got a huuuge list of fonts and stuff waiting to be devoured once I get back. XD
    I must say I quite enjoy DIY Design!

    Like

  2. Could you make me a header?
    I’d like it to say Dolls by the Dozen with a pretty red font, and a turquoise water color splash like you did for the other person. My blog is in blogger. I don’t know how to pay you for it though.
    I loved the post!

    Like

Leave a Comment! (Please, keep it clean. No "OMG" or cursing/swearing/taking God's name in vain please.)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s