Make a WordPress header using Canva

You’ve set up a free WordPress.com site and chosen a theme. You’ve picked a photo for the background to your header and you’ve got some copy to go on top of it.

But there’s a problem.

The header doesn’t look how you want it to look. It’s the wrong size or you can’t put type in it. There’s a limit to how much manipulating you can do with free themes.

Do you pick a different theme? Pick a different image or do without one?  You could try out theme after theme, trying to find the right combination of header size and type to work with your chosen image. But who has that sort of time? Luckily, there’s an easier way.

Canva to the rescue

You can get around the problem by creating a heading in Canva, an online platform that ‘makes graphic design simple for everyone’. Here’s how you do it.

Step 1: Join Canva

It’s easy to open an account and it really is free. So do that and log in.

Capture

Step 2: Get started with a quick tutorial or two

This step is optional. If you’re pressed for time, just click ‘Create a design’ and start dragging and dropping layouts, backgrounds, images and type in any order that takes your fancy. (But the tutorials are a great way to get some design principles on the fly.)

‘Canva makes graphic design
simple for everyone’

Step 3: Choose your canvas

Capture 1

  • Start creating a design by clicking on the big green button on the left.
  • Set the dimensions of your ‘canvas’  by clicking ‘Use custom dimensions’ in the top right-hand corner.
  • Insert the dimensions of your WordPress site’s header (they’re in the customizing part of the site’s front page, in the ‘Customize theme’ → ‘Header image’ section, above the image).

The dimensions of my header are 980 px x 275 px.

  • Click the green ‘Design!’ button.

Your blank canvas appears.

Step 4: Choose a layout and background

  • Choose a layout from the dropdown menu.

Capture 2

I’ve chosen the second from the top.

Screen Shot 2017-04-06 at 12.12.44 PM

  • Now add a background.

You can choose an image from Canva’s library of colours, patterns and photos. Or you can upload your own image. I’m going to upload my own.

Photo0101

  • Select ‘Uploads’ from the left side menu.
  • Click the green ‘Upload your own image’ button.

Capture 4

  • Drag your image over to the design. If your image takes up the whole canvas, go on to the next step.

I’ve chosen a two-part layout, so I’ll fill in the space to the left of my image. Then I’ll play around with the other side. It’s where I want my text to go, so I’ll experiment with filtering and transparency.

Screen Shot 2017-04-06 at 12.24.51 PM

Screen Shot 2017-04-06 at 12.26.49 PM

  • Step 5: Add text

My site’s title is ‘Beneath the surface’.

  • First I’ll add text.

Capture 8

The result:

Screen Shot 2017-04-06 at 12.32.30 PM

Now for the copy:

Screen Shot 2017-04-06 at 12.39.23 PM

Step 6: tinker (release your inner designer)

This is the fun part: filtering images, repositioning and spacing the type and playing with colours.

My site’s theme uses Exo 2, a Google font, for headings. I decided to use this for my header. Canva offers Exo – near enough. (You could look up font pairs for a font that works your site’s fonts. Or you could change the site’s theme fonts to pair well with your header.)

  • Format your type to suit your theme.
  • Position it on part of the background that doesn’t compete for attention. Use transparency to lighten your photo to make text pop.
  • When you’re done, click ‘Download’ (from the menu at the top of the screen).

Screen Shot 2017-04-06 at 2.08.14 PM

Step 7: Add the design to your site

  • Add the header image in the customizing area of your site.

giphy

That’s it. You’re done.

Advertisements

Leave a Reply

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