Pagewiz was designed to enable professional marketers, business owners and affiliates launch landing page campaigns from scratch, within minutes, and easily optimize them towards a high conversion rate. This tutorial will guide you through designing landing pages with Pagewiz, ultimately helping you to package and sell your Pagewiz templates on Envato Market.
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:
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.
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:
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.
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.
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:
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.
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.
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:
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.
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..
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:
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!
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:
Next, you may control the background-image’s position, which you can do from the bottom of the Texture menu:
One last thing you will need to do is expand the section to full width by clicking the Expand button:
Your section now has a full-width background image.
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:
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:
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 the settings link under the name of the page you wish to export:
Click the Export button.
A Pagewiz file will be downloaded to your computer.
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.