Written by 
February 2016 Website Journey – website header, Global Content Blocks plugin and a logo with a transparent background
February 2016 was one of those months which involved a lot of testing; trying to improve the website visually so it’d be more pleasing to the eye.
I knew what I was aiming for, but I wasn’t quite sure how to format it
I needed to:
- change my website header
- quickly input blocks of regularly used text/images – for which I now use the Global Content Blocks plugin
- create a logo with a transparent background so that it could be placed over a coloured background
1. Changing the website header
Up until recently, my website header was the green logo on the left, next to the word logo for PeasOnToast.co.uk. I liked this header’s layout, but it didn’t explain what the website was about.
With the website including reviews as well as a blog, I wanted the content to be obvious to visitors.
Website content shouldn’t be a guessing game – make it clear from the outset
So I changed the header to a jigsaw image which had “Household & Fintech product reviews” and “Website Journey blog & tutorials” written on two jigsaw pieces, and included the green logo on the left.
At least this header explained what to expect when visiting PeasOnToast.
But…
The concept was fine (the two jigsaw pieces explained what the website was about) but it wasn’t easy on the eyes. It was too “busy” to look at and the layout didn’t work properly on mobile screens – the green logo covered the two jigsaw pieces so you couldn’t read the words.
I decided I needed to remove the green logo and upload a header that included the website name as well as what PeasOnToast was about. For that, I used a free image from Pixabay and formatted it using the free design platform at Canva.
So, I had the design….
What seemed (and no doubt looks!) like such a small formatting change took a while to sort out having to go back and forth tweaking the image – it was either in the correct place but wasn’t clickable, or there weren’t enough pixels so the image was blurry, or it took up too much space.
At first, I uploaded the image as the “header”. I didn’t include the red subscribe button as I wanted the image at the very top of my screen like a normal header image. Unfortunately I couldn’t get it to span the width of the website.
Then I tried to upload the image as the “logo”. That almost worked but:
- the height and width spanned the entire screen (literally) and, as it was uploaded as a “logo”, it meant that huge image appeared on every post and page. That would have been a nuisance for anyone visiting the website
- to have such a huge logo spanning the entire screen would have been a waste of space without the ability to include a call to action (“CTA”) for people to click and subscribe
Back to the drawing board.
I then realised that I could use the image by including it as a header widget. This had two benefits:
- it would always appear near the top of the website “above the fold” (ie without people having to scroll down) so that whichever page people first visited, they could see what the website’s about
- I could add the CTA as the widget areas have the ability to be clickable
I uploaded the green logo in the centre, with the widgets below:
The only issue with including banners in the widget area is that I needed to update my disclosure placement so that it could be seen at the same time as the affiliate links, in accordance with US law – although I’m based in the UK, it’s best that I work in accordance with US rules too as I often get US visitors.
I dealt with it by mentioning the affiliate links in the cookie bar at the top of the screen.
2. Global Content Blocks plugin
There’s certain text and images that I regularly use in my posts for PeasOnToast, such as:
- the green edged “Tip” boxes
- the share banner at the end of each post
- the disclaimer wording at the end of each post
Usually I have to open another post with the text/image I require, and copy the HTML into my current post. That process slows down the flow of work.
Recently I came across the free Global Content Blocks plugin by David Liske which allows you to create your own short codes (without the need to know any coding) for any repetitive text, images or formatting used.
It’s as easy as clicking the Global Content Blocks plugin icon in the post toolbar, and selecting the Content Block that you’d like to use.
Oh wow!
This plugin has made my post drafting so much easier and quicker. I recommend you install the plugin if you have a website which uses a lot of the same images, text and formatting.
3. Creating a logo with a transparent background
Unless you’re a talented designer (or have access to one), most images or logos created yourself would have a background. That’s all well and good if the background matches where you propose placing the image, but not ok if it doesn’t.
When I started my website, I used the PeasOnToast logo and wording in my header (see first image in “Changing my website header”). My header was white so you couldn’t tell that my word logo had a white background.
But…
Once I’d decided to change my header and include the logo wording in the widget area (see third image in “Changing my website header), I needed to get rid of the white background so that the text was a standalone image.
As usual when deciding to do something new on the website, I searched the internet for more information. Apparently it’s only images in the .png format that can have transparent backgrounds. I mentioned in my first Website Diary that I initially used Serif DrawPlus Starter Edition but found that the free program had too many restrictions – one of which was you couldn’t create a .png with a transparent background.
I soon came across Inkscape which is free but much more generous with its accessible features.
Having watched some YouTube tutorials, I created my logo’s transparent background.
If you’re looking for a cheap (free) and easy way to create text/image logos with transparent backgrounds, I recommend using Inkscape. Visit their website to download the program.
4. Summary
What’s been learned?
- website formats are continually evolving and what suits you now, may not be ideal in the future
- use trial and error to make the website look as you’ve imagined it should
- remember to put your website into Maintenance Mode whilst changing your website so that visitors don’t see all your changes happening in real-time (I used the Easy Pie Maintenance Mode plugin by Bob Riley)
- there’s an easier way than having to continually type repetitive text in each post – just use the Global Content Blocks plugin
- don’t assume you’ll need to hire a graphic designer at the outset – oftentimes, if you have the time to search, you’ll find cheap quality software and tutorials to do it yourself
Honest stats – February 2016
Monthly website traffic matched December 2015’s level of about 1,300+. Interestingly, most of my website visitors are via search engines, with the Revolut review continuing to be the most popular. My monthly traffic remains similar regardless of whether or not I’m active on social media – this month I’ve hardly used it.
So, that’s my update for February 2016.
Note: this blog post is intended to be a general resource only.
.png)
- reviews to save you time looking for good value, quality household/fintech products
- blog/tutorials for any of you website newbies to follow my PeasOnToast learning curve
- Monzo Bank review – 100% smartphone banking exceeds expectations - 16th October 2016
- Atom Bank review – the new player on the banking field - 4th September 2016
- How to use SendinBlue email automation – step-by-step guide - 19th August 2016
