How to Design a Cute Blog Header Using Canva

canva-blog-header-tutorial

Hi everyone! Today I decided to put together a really simple and basic tutorial for designing a header for your blog. Whether you're new to blogging, don't feel like messing around with Photoshop, or just want a super simple way to create blog graphics, Canva is an amazing resource for bloggers and designers.

This will be the first installation in a series I plan to continue throughout the next few weeks/months, so stay tuned for more if you found this post helpful! Read below to see how to design a cute blog header using Canva...

1. Determine your blog width

For Blogger: Determining the width of your Blogger header is a little tricky, but it's nothing that a bit of trial and error can't solve. If you want your header to be centered in the middle of the page, a standard size of 1000 X 300 should suffice for most blogs (read step 4 to see how to center your header with CSS). If not, Blogger allows you to easily adjust the width of your blog and sidebar to your desired measurements. 


For Wordpress: Finding your header width with Wordpress depends on which theme you're using. To determine this, go to APPEARANCE >> HEADER and jot down the reccomended dimensions. While some themes allow you to edit/stretch your uploaded image to fill the maximum alloted space, it's best to use the exact suggested measurements. 

For Squarespace: Designing headers is incredibly easy with Squarespace since all images are autosized and formatted once you upload them. For my header, I estimated that I wanted roughly 1000 x 50 px, which I could then crop in photoshop to get rid of extra white space. Depending on how tall you want your header to be, you could raise or lower the height, but 1000 pixels wide should be ideal for most pages on Squarespace (for reference, my current header on my blog is 1000 x 155).

--Once you've determined your header size, open Canva and select "Use Custom Dimensions", then enter your desired width and height (by pixels), and click "Design!"

2. Choose your font & colors

Font: Canva has an amazing assortment of fonts that you can choose from to make your blog header both unique and stylish. From the Canva design home page, click the "T" button on the left to insert a text box onto your blank white canvas. From there, click "Add text", and then play around with the different options, sizes, and arrangements. One of my favorite features is the "Text spacing" slider that allows you to modify the spacing between your letters, which can really give your header a more artistic and professional feel. 


For this example, I chose the "Amatic Small Caps" font (my personal favorite), made the text box the full width of my canvas, changed the font size to 72, and changed my text spacing to around 220. Depending on how long or short your blog title is, these numbers may or may not work for you, but it's really easy to play around with different dimensions and sizes. 

Colors: The text and background colors of your header are completely up to you. If you have a white blog background, you might choose to leave the background of your header white as well, or you can match it to whatever color your background is, or do something different and give it some contrast. Bottom line, do whatever floats your boat. For my blog, my accent color is a grayish teal, so I'm going to use the hex code and choose that for my header text and leave the background white for a clean look. 

To do this, click the text inside your text box, select the color wheel button, and then click the plus sign (+) at the bottom to bring up the color code box. Then just type in or paste your hex code and hit enter! 

3. Design & save your header

Depending on your style and preferences, you may choose to add some more personality to your header. You can either choose from any of Canva's free illustrations (Click SEARCH >> ILLUSTRATIONS >> and then play around with the different options) that are all PNG images, or you can upload your own and edit them to your preferences. To upload a picture, click UPLOADS and then select UPLOAD YOUR OWN IMAGES. 

For my example, I'm using some free hand drawn flower and laurel graphics from Angie Makes. I had to play around with my text size and layout a little in order to make it look right with the flowers, but it's easy to do so don't be afraid of experimenting! Tip: Since the flower graphics are black and you can't change the color of them in Canva (that I know of), I just edited their transparency down to 40% so that they'll appear grey instead of black. 

Once you're satisfied with your design and are ready to save it, click "DOWNLOAD" at the top of your page and then select "AS AN IMAGE". Your image will then be saved to your "Downloads" folder. 

4. Upload header to your blog

For Blogger: You have the option to upload your header either in place of your title and description, or behind your title and description. I recommend the first option. To upload your header, go to DASHBOARD >> LAYOUT >> find your header block (under "Favicon and "Navbar"), and select EDIT.  

A box labeled "Configure Header" will open, and from there you will upload your header by clicking BROWSE, and then locate the image file on your computer. Under that, you have the option of where to place your header (again, I recommend choosing "instead of title and description").  From there, click "SAVE", and then "SAVE ARRANGEMENT" at the top of your layout page, and your header should appear when you preview your blog!

--To center your header in Blogger, go to TEMPLATE >> CUSTOMIZE >> ADVANCED >> ADD CSS and paste the following code into the CSS box (and hit ENTER/RETURN afterwards before saving!).

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

Here's the end result of what my header looks like on Blogger: (click here to see the actual page)

For Wordpress: While I use Wordpress to write my posts for College Fashion, I honestly don't have much experience with the design aspect of this platform. After doing some research, however, it seems fairly easy to upload your header. First, you want to make sure that the theme you've chosen allows you to upload a custom header. Once you're sure that your theme allows you to customize your header, double check the suggested dimensions again to make sure the header you made is the same size. Then, simply select "UPLOAD HEADER", and you should be good to go! 

For Squarespace: If you use Squarespace as your platform, this step honestly couldn't get any easier. First, from your home page, select DESIGN >> LOGO & TITLE >> and then select "ADD A LOGO"  >> SAVE. Your header should then be uploaded to the top center of your page. Piece of cake! 


Thanks so much for reading! Did you find this post helpful? Do you have any questions? Feel free to ask about anything that was unclear or that I forgot to cover and I'll do my very best to help you, and check back soon for more blog design tutorials!