Guest Post by Liz Jamieson
Caroline was using WordPress and she wanted help with the layout of a sales page aimed at selling a special Halloween graphics package.
Doesn't The WordPress Visual Editor Make Things Easier?
As she tried to put her sales page together, no matter what she did, nothing would sit on the page exactly as she wanted it to.
I could tell from the layout of the sales page that she was using the Visual Editor and pointed out that in my opinion, the use of the Visual Editor in WordPress makes page layout more difficult, not less so - and I suggested that she dump it.
I also promised to show her how I might have built the same page using some graphics, the HTML Editor and some CSS...
So What's Wrong With The Visual Editor?
I think that using the Visual Editor doesn't help us to create persuasive pages. If the Visual Editor is all you know it's like wearing a webpage straitjacket. Here is my reasoning.
- Lack Of Consistency. The HTML editor in collaboration with CSS is more efficient for you. If you need to make a new style you do it in CSS. Some Visual Editors encourage you to change styles on the fly, so you have to do the same work every time you want to change a style on every post.
- Poor Code Quality. Google wants us to reduce code bloat. The visual editor is capable of producing a lot of extra code that is not needed especially when you re-work your posts again and again as you write them. If you use the HTML editor this problem is eliminated.
- Lack Of Confidence. Many people who use the Visual Editor do so because they believe it is a real alternative to learning HTML. But many of us need to know HTML to confidently handle affiliate links, to make minor changes to our websites and to handle some aspects of social media effectively.
- Getting Left Behind. If you only rely on the Visual Editor you can't make use of the latest technologies like CSS3. (This is demonstrated later in this post).
- What About Responsiveness?Responsive sites are all the rage now. Is it possible to maintain a responsive site if you use only the Visual Editor? Responsive sites rely heavily on the correct CSS classes being invoked. The Visual Editor does not encourage well behaved markup.
- A Non-Existent Problem The Visual Editor is limiting. It is after all trying to make it easy for you to use HTML and CSS by shielding you from HTML and CSS. But 99% of the time HTML and CSS are already easy to use. It's like trying to solve a problem that doesn't really exist. Yet we are brainwashed into thinking there is a real problem.
One of the things I persuade all my clients to do it dump the Visual Editor immediately. If you learn HTML you will not only have better pages, but generally, you'll find you're able to cope online a lot better than you did before. I hope to demonstrate with my sales page makeover that creating a page with HTML and CSS is not all that difficult.
OK so let's get on with the makeover.
Caroline's Original Sales Page
Caroline may well make changes to her sales page over time, but she has created a dummy copy of it so that we can refer to it here, whatever happens to the original.
What Are The Changes I Set Out To Make?
When I started, I wanted to transform the original sales page (which you can see there on the right) in my own way. That does not mean that my suggested layout is right or wrong, it is just a vehicle for me demonstrate and to encourage others to take more control of their pages by dumping the Visual Editor. Quite how you will lay something out is up to you! But if I had a Halloween offer just like Caroline's, this is what I'd do.
- In my new version of the page, I want to create a sales page without a header from the main site. This is supposed to help reduce distraction by keeping the look and feel of the page dedicated to what you are selling and away from your site's main imagery (and links).
- I wanted to give the sales page a very definite Halloween look and feel.
- Also, due to the fact that people are now using mobile devices I wanted to try to make the sales page presented pretty well on iPads and iPhones (and hopefully on most Android devices too).
- I also realised that the layout of the page would necessarily be slightly less exciting than I might like if I also wanted to make it show reasonably well on mobile devices, with minimal effort and plugins.
- I wanted to reduce the number of colours used to a minimum, to give the page a coherent feel, train the visitor very quickly to find the headings on the page and draw attention to the main points.
- Lastly, I wanted to make use of the space the video occupied while and so add value while it was not being played. There are other things that I could do, but in the time allocated for this hypothetical project these are all I can fit in. I have paid no attention to the load time of the sales page for example, as it is not a real sales page.
My Version Of The Sales Page
I built my version of Caroline's Sales page on my website at DIYWebmastery. You can view my version here.
The Steps I Took To Build My Page
I Used WordPress With The News Genesis Child Theme
I used the News child theme (from Genesis) because that was what my site was already running. The News child theme also has a built in Landing Page template, which meant I didn't have to do any work to remove my sidebars and header. That part works out of the box!
I Made Sure To Choose A Responsive Theme
I only use responsive themes from Genesis nowadays, and recommend that you do too. This means the themes re-arrange themselves to look good on mobile devices.
I Stuck To A Minimum Number Of Colors
Apart from black and white, I have used blue, orange and yellow. I use a color picker tool to help me find colors that harmonize and in this case I wanted to see if the two main colors - blue and orange could be convincing on their own without too much else going on.
Using the HTML editor and CSS made sticking to the minimum colors very easy. Once the styles were defined, I just kept using them. This brought about consistency.
I usually use this free tool if I am starting from scratch Color Scheme Designer to help me with colors.
I Used Photoshop And Free Brushes
Photoshop is not cheap, BUT it is probably the best value for money of any software I have ever bought, period.
I used Photoshop to create the Halloween themed background. It took just a few minutes and required no skill whatsoever. I'll show you how I did it in this video :
I Used CSS Generation Websites
I got the CSS to draw this yellow testimonial bubble from a CSS Generation website.
I like to do as much of the page as I can in CSS only, so as to avoid the use of background graphics where possible - I did Caroline's testimonials, like the one above, using CSS. I also use CSS for clickable buttons (like the Buy Now buttons). Here are some useful CSS Generation Websites.
- CSS Backgrounds - This one is good for generating the code for the backgrounds of DIVs
- CSS Buttons - I used this one to create the Buy Buttons on the sales page.
I Gave The Video A Thumbnail
The original sales page had a video on it, but when it was not playing it presented just as a black window. If you host your video files at YouTube or at Vimeo, (and probably elsewhere too), you can create covers for your videos (video thumbnails) so that the space looks attractive and continues to help sell your message even when the video is not actually playing.
I created this graveyard themed cover in Photoshop (using a brush!) and added it to Vimeo, where I am hosting the video file - see below.
Although Vimeo isn't as good as YouTube for publicizing videos, they have some nice features in the PRO account. For example when the video has finished playing it can be made to go back to to the beginning, or even offer a clickable link. In the case of the Halloween sales page, I have had it return to the beginning of the video.
I Used Google Fonts
Web pages used to be limited to only those fonts that we could be sure a visitor would already have loaded onto their computers. This meant we were stuck with boring (but readable) fonts like Arial, Verdana and Times New Roman.
But with Google's Google Fonts service we can make our text a bit more exciting, so I used them for the graphic header image I drew in Photoshop, as well as the live text in sales page itself.
This enabled me to use a "scary" font as shown above as real text - not as an image. This makes the page a lot easier to change and to tweak.
I Didn't Use The Visual Editor At All
If I had I would have been doomed from the start. I still have to optimize the CSS, but in general, all I did was to decide on the font sizes, and then set up the CSS to reflect each part of the sales page. I have CSS for the headings, CSS for the bullet points and the lists, and so on.
The video shows you what I did :
A Final Word
I hope you enjoyed the post, and to those of you that don't know me, my name is Liz Jamieson and every video I produce has the sound of my dogs snoring in the background (in case you were wondering.)
I specialise in WordPress self-sufficiency and encouraging others to become more self-sufficient so that they don't have to find someone to help them for every tiny thing. If you are interested in learning more about what you can do with Genesis and WordPress, join the Genesis Club for lots of advice and help with your Genesis site.
