This article is for the cloud and self-hosted versions of Campaign Pro.
Setting the logo
Campaign Pro allows you to have complete control of your logo. You can even set different logos for mobile, tablet and desktop!
In this section:
- Logo basics
- Head over to the header theme settings
- Click the header and the settings panel will appear
- Click “Display header” and open the logo accordion
- Click “add image”
- Select logo
- Add a 2x logo (optional)
- Add tablet/mobile logo (optional)
- Click “Update”
1. Logo basics
Your logo is often the first thing people associate with your brand, so spend a bit of time crafting a good ‘un. A maximum width of 200px works best (because otherwise it will be resized), and ideally in landscape (is wider than it is tall). The best format for the logo is png, but jpeg should be fine.
2. Head over to the header theme settings
Visit the knowledge base article about the Header to learn more about building the perfect header.
Head over to the fonts settings page by going to Theme Settings >> Header (self-hosted version) or Campaign Pro Settings >> Header (cloud version).
3. Click the header and the settings panel will appear
You’re now on the Header settings page. Simply click on the header [1] and the settings panel will appear.
4. Click “Display header” and open the logo accordion
If this is your first time changing a setting on the Header then you will need to turn on the Header by simply clicking Display header [1]. To view the logo settings open the Site Logo accordion [2] by clicking on it.
5. Click “add image”
To add your logo simply click “add image“, this will bring up the Media Library.
6. Select logo
Select your logo from the Media Library by clicking on it and then clicking Select (at the bottom of the Media Library) and your logo will then be set. Simples!
Your logo will now appear in the Header and once you click Update will display on your site for the world to see. Before you go ahead and save, you may want to add a 2x version of your logo, see below for more info.
7. Add a 2x logo (optional)
A 2x logo is optional, although recommended to avoid possible blur on high res displays.
2x logos are for high res displays, like iPhone, high-end Android and some laptops and MacBooks. Apple came up with ‘retina’ monitors, and since then, more and more devices are ‘retina’. They basically cram more pixels in to the same space (pixel density), and because of this, “normal-res” stuff can look blurry, to avoid this, simply add the same logo, but double the size, so if your logo is 150x75px then the 2x version would be 300x150px.
To add a 2x logo simply click Add 2x version [1] and add your logo [2].
8. Add tablet/mobile logo (optional)
Tablet/mobile logos are completely optional, for most folks, just one logo will be enough, but if you’re a logo connoisseur, the option is always there 🙂
A tablet/mobile logo will only display below the resolution you set, so for example you could have a big(er) logo for desktop, and a small(er) logo for tablet/mobile. Take a look at responsivelogos.co.uk for some inspiration.
Click the tablet [1] and mobile [2] tabs and uncheck the toggle [3], you’ll then be able to add your tablet/mobile logo.
Simply add the logo (as above) [1], and click the settings button [2] to set the maximum resolution for the logo, and add a 2x version [3].
9. Click “Update”
Once you’ve added your logo simply click Update and your logo will display on your site.
And that’s it! You’ve now mastered managing your most important brand asset with Campaign Pro 🙂