Tips for the Conversion Oriented Designer
When coming to create landing page templates you need to make sure they comply with online marketing empiric knowledge, gathered through thousands of successful and/or failed landing page campaigns.
If you’d really like to jump on this hot online marketing wagon, and are aspiring to be able to design conversion oriented landing page templates - you should read on:
Basic Elements That Every Landing Page Must Have
There are five basic elements that must be laid out on every landing page:
- Headline + sub Headline
- Call-to-action (CTA) button/form
- Feature/Benefit subsections
- Credibility builders
- Bottom line summary
(1 - 2) The two most prominent elements on your page should be the headline + sub Headline and your CTA. The first gets your visitors in the door and the second gives them (and the campaign) the pay-off.
“Above the fold” - on an online page is everything that can be seen without having to scroll down. In this area, your visitor should see your headline + sub Headline; this is the copy that draws them in with a promise and delivers the key benefit of your offer.
If your offer isn’t complex and/or the typical reader is already very familiar with your offer, it’s probably helpful to place your first CTA button/form right near the headline + subhead line above the fold. In other words, everything a motivated visitor needs to validate their decision for coming to your landing page in the first place is front and center. They don’t need to search around to take further action. They came. They saw. They clicked.
Reduce the friction – make it easy for them.
How easily can visitors to your landing page find your call-to-action (CTA) button? If your answer wasn’t “How can they miss it?!” – then you may have some work to do.
The color of the CTA button needs to stand-out from the rest of the color scheme of the page. So an orange CTA button may work well on page made up of shades of blue, but less so on a page where red is dominant. Look at the screen where you’ve placed a CTA button. What’s the first thing that attracts your eyes? If it’s not your CTA button, changing the color may be a good tweak to make in variant you provide with your template bundle.
(3 - 5) The manner in which you choose to layout your landing page’s feature list and benefits, its credibility builders and bottom line summary is entirely up to you. You will have to find a way to blend those into your design, while taking extra care not to fade out your two most prominent element. Remember those two from a few sentences back?
Naturally, people who purchase your template are going to need to have room for copy to elaborate about their offer’s features. They’re also going to need to be able to place some social proof such as:
- Testimonials or tweets from real people.
- Influencer validation, which may include the influencer’s company logo or badge.
- Include security seals like PayPal verified and others to give the comfort it is safeto purchase on your page.
- Provide complete contact information including a phone number, email address, and social media badges. They can reach you if they need to.
If your template suddenly becomes over packed, remember: Landing page design clutter is confusing and gives your visitors nowhere to focus. White space is your friend, and will assist you in making your template clearer and more conversion-oriented.
No Navigation!
The purpose of creating a landing page stands against the inclusion of a navigation bar.
Remember: You are not designing a website.
The only purpose your landing page should focus on is converting its visitors.
If you offer them options to wander around, your primary goal is hampered. When the conversion funnel has multiple choices, a potential customer is less likely to act upon what he/she is directed to by the campaign’s director. This is the simple logic behind why you should not place a navigation menu on your landing page design.
Your First Pagewiz Landing Page
Once you create your Pagewiz account and want to begin exporting your template design over to Pagewiz – login to your account and click the big red + Create New Landing Page button at the top right hand side:
You’ll then be prompted to choose the landing page campaign type: Desktop or Mobile.
The campaign type you select will influence your template’s page width: Desktop landing page templates are usually 960px wide on Pagewiz, while mobile templates are at a recommended width of 320px (even though you can always change it later).
It is important that you start your custom template design by choosing the blank template to have the easiest start, and not have to remove anything prior to getting started:
Using Sections to Construct Your Page
It is now time to use sections to wisely divide your landing page template, so it is easier to control and customize:
Once I have a new section in place I can set a texture, background-color or image as its background. I’ll use one of the many textures available inside Pagewiz:
Then I click the Expand button to have it stretch to the screen’s full width (beyond my page’s width, which is 960px):
I could also set an image as a background for that section if I wanted to, by selecting the section I’d like to apply a background image to and clicking on Texture > Use an image as a texture.
Positioning and Aligning Elements
When you add an element to your page it is positioned absolutely, wherever you choose to place it. Pagewiz will not prompt you about placing one element on top of another, or about placing it in a non-aligned fashion. It will simply place it.
Having said that, Pagewiz has some advanced positioning helper tools to make sure everything is accurately positioned, just the way you like it:
X, Y Positioning
Positioning coordinates are available for you to customize many things. Every element you place on your page has Top(y) and Left(x) values, which you can customize from the top menu, according to the measurements on your Photoshop/Illustrator file.
This way your designs are kept accurate to the very pixel.
Elements’ Alignment
Another great way to make sure elements you position on your page are accurately aligned to one another is to use the Pagewiz built-in alignment tools. These tools are shown when you multi-select elements by Ctrl+Clicking on them. Once you have more than one element selected you may use the alignment tools to align the selected elements’ edges or centers.
See video:
Adding and Customizing a Form
You can add a form element to your landing page template to make it a Lead Generation Landing Page, by dragging a Form element from the toolbar at the left:
Customize your form fields and settings however you like:
Click-Through Landing Page = No Form
Are you designing a Click-through landing page template? Then it should not have a form on it, but merely a CTA button to click on. For that purpose, drag a button element onto your landing page design, and customize it to your liking.
Textual Elements
For your headers please use the Headline element, and for your paragraphs’ text please use the rich text element – both are on the left hand side toolbar, ready for you to drag them over to your design.
Fonts
The entire Google Fonts library is at your disposal when you come to choose the font type you’d like to use on your templates:
Preview Your Creation
The Pagewiz landing page builder has a big Preview button to let you constantly check what your template design looks like. It is important to take a look at the preview before actually publishing your template because you may find that different browsers render your page differently, and you will probably want to take care of any imprecision that may have occurred.
Mobilize Your Template!
Important: do not leave your template lacking a mobile landing page version. Landing page template shoppers are expecting it, and may very well refrain from purchasing your design (however appealing it may be), just because you neglected to include the mobile version for it.
It has been proven time and time again that many potential leads who land on a landing page will either bounce or simply not convert if it doesn’t display properly on their mobile device.
If that doesn’t convince you of the importance in designing a mobile-friendly landing page - you’re still not thinking like an online marketer..
How to make your template mobile-friendly:
There are two ways to do this:
#1 Create another blank landing page and choose the Mobile Landing Page Template Base for a template optimized for all types of mobile device browsers.
This will allow you to design the mobile version from scratch. You can then bundle that mobile optimized landing page together with the regular (960px wide) landing page you’ve created.
#2 The other (quicker) way is to duplicate the page you’ve created for desktop browsers.
When you’ve duplicated your design, you can then set a new (mobile) width to it. The recommended width for mobile pages is 320 pixels.
Once you’ve set the page’s new width to 320px - you’ll have to make sure no element is left outside of the 320 pixel width boundaries by dragging them inside and modifying their size according to the design’s requirements:
Preparing Your Bundle for A/B Testing
Efforts towards a great campaign do not end on launch day. Once the campaign is running, unlimited A/B testing can be performed on Pagewiz to maximize conversion, and you can increase your template buyers’ satisfaction by providing them with different versions of your landing page template, or in other words: variants to test with.
You could bundle several different pages together, and thus provide your buyers with different coloring, or different types of ways to convert on your template, i.e. a click-through page and a lead-generation page (that includes a form). Maybe bundle another version that centers attention on a video?
When you bundle your landing page template with some well thought out variants for your marketer shoppers to use on their campaign – your reputation as a conversion oriented template designer should spread, and marketers are likely to want to do business with you more often!
Pagewiz Design Tips and Tricks
Full width hero images have become very common, and are often used on landing pages. They can help the design communicate a certain feeling while visiting the page.
In order to create a full width hero background-image you need to have a wide, high quality image, which we recommend you optimize for the web, prior to uploading it to the Pagewiz servers.
To actually use it on your design, first create a new section by dragging the section element from the left side elements menu:
To set the section’s background image:
- Select the section by clicking it once
- Click on the Texture button, on the top ribbon.
- Choose to Use an image as a texture in order to open the media library
- Upload your wide high-quality image, and select it as the section background image.
Next, you may control the background-image’s position, which you can do from the bottom of the Texture menu:
- Click on the Texture button again, on the top ribbon.
- At its bottom is the Texture Properties controls. Click Background Position to define how you want the image to be positioned. We mostly center with center center property.
- Make sure that the Background Repeat property is set to No Repeat, if you don’t need it.
- In order to resize the section - you can drag the small section arrows at its borders:
One last thing you will need to do is expand the section to full width by clicking theExpand button:
Your section now has a full-width background image.
Customize Your Design Grid
On top of elements’ X and Y positioning coordinates, the Pagewiz landing page builder also provides you with Rulers and Guides, so that you’re able to create a grid (just like in Photoshop, or any other design oriented software) into which you can pour your design.
Click the Rulers icon inside the landing page builder to activate rulers:
Drag as many ruler guides as you need (from the right/left side) to create your grid:
Packaging Your Design for ThemeForest
In order to increase your sales on Envato Market we highly recommend that you create a template with more than one version included in the pack:
- Mobile version
- Lead Generation version (with a form)
- Click-through version
Each version should be exported separately, and archived as a .zip file. Pagewiz lets you export your landing page to the ThemeForest Marketplace. In order to use the export functionality you will need to have an Envato Author account on Pagewiz. You can apply for one by registering on this registration page.
In order to export a landing page first navigate to landing pages, then click thesettings link under the name of the page you wish to export:
Click the Export button.
A Pagewiz file will be downloaded to your computer.
Conclusion
Hopefully, this tutorial will have provided you with the necessary information about landing page campaigns’ main goals, and an introduction to the Pagewiz way of creating them. You now also know how to package your Pagewiz template bundles for sale on ThemeForest.
posted by: http://webdesign.tutsplus.com
Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.
ReplyDeleteOnline Landing Page Builder