Task: Make a custom banner/header for your WordPress site
Points: 5
Banners (aka header images or headers) are usually the first thing readers see when your site loads. They’re often at the very top of the page, and make a quick impression.
However, the free version of WordPress only offers a select few to start with:
As sleek as these images are, to the seasoned web surfer, they begin to lose their luster the 20th time they show up on a blog. And because these images are important to your brand, it’s important to think about ways you can use them to make your site not seem so template-driven.
Most themes allow you to change the header image and this tutorial is meant to help you design a banner that reflects the identity you are trying to project. If you are using a theme that does not allow for changes to headers, you can choose a different one or look for slightly different wording in the admin panels. For instance, once of my blogs does not allow me to change the header, but I can change something called “logo.”
Follow the steps below and/or watch my YouTube tutorial on how to upload a custome banner on WordPress.
Step 1: Find out the resolution for your header image.
- To change the header image, go to the Customizer and look for Header Image. If you don’t see that, go to Site Identity and look for the section titled “Logo.”
- Note the resolution requirements at the top. It’ll say something like “Your theme works best with an image with a header size of 1440 × 221 pixels — you’ll be able to crop your image once you upload it for a perfect fit.” This means that you’ll be looking for an image that is about this large (larger might be okay too as we’ll see in a second). If you go smaller, though, your banner will look distorted and pixelated, not smooth and high def. If you plan to use your own image, you can skip the next step but do make sure it’s large enough to use as a header.
Step 2: Use Google Image to find images.
- If you’re looking for an image for your header, go to Google Images and enter a keyword or phrase of images you’d like for your blog. If you are planning to add text on top of your image, you might look for something abstract, impressionistic, and wordless.
- Once you get your search results, click Settings > Advanced Search.
- Under the section titled “Then narrow your results by…”, play around with the image size options. Since my blog header suggests 1440 × 221 pixels, I chose “Larger than 1024 x 768.” You can also play around with the other search filters if you are looking for an image with a certain aspect ratio, particular color scheme, use license.
- Browse the new results by clicking on images. Once images are revealed in the right sidebar, you can hover the cursor over them to reveal their resolution.
Step 3: Adjust your image.
- Once your image is downloaded, you can use an image editor to crop it for WordPress and add text as desired. I’m going to use Apple’s Preview since its free on every Mac, but if you have PC there are several free image editors out there. Most folks recommend GIMP.
- You can adjust the size of your image a few ways. In Preview you can choose the crop tool and that will tell you the pixels you are cropping to in the corner. You can also go to Tools > Adjust Size. Deselect the “scale proportionately” option if you want to get the image to the exact size for WordPress.
- If you want to superimpose the title of your blog over your image, select the [T] button and add text. To edit the size, color, and font choose the ?∨ button.
- If the text and background bleed together too much, you can also play around with the Adjust Color options to make the contrast more stark. [Also note that you can make your site even more idiosyncratic by downloading and installing custom fonts. In the image below I installed the free Tiny Hand font, inspired by Trump’s handwriting.]
Step 4: Upload the image to WordPress.
- Once your image is ready, go back to the Customize > Header Image screen in WordPress.
- Click Add New Image and upload your image to your media library.
- Crop your image further if necessary and save changes. Note that you can re-crop and play around with this as needed.