Building a pre-sell page shouldn’t be a complex, time consuming process of coding. You want to be able to quickly build, and test new landing pages. If you are still in the learning phase of becoming a super affiliate. Then you might be struggling with building landing pages for your affiliate campaigns. Its the most common issue that comes up with new publishers. 
 
WYSWYG Web builder is a visual editor, that outputs all the code based on your design. All you have to do is position the text and images where you want them to be. The tool will do all the coding work for you. 
 
They do offer a free 30 day downloadwith no credit card required. So you can try their product, before you buy it. I’ve been using this tool for over 3 years now, and have updated it a few times. Its only a one time fee of 49.99 to buy the software. Making it an incredible value, for the amount of time it saves. The only downside is, its for Windows only.

Page Setup:

Main editor page: You will find almost every tool you need on the left hand menu named Toolbox. This will have all the building blocks you need, to put together a presell landing page. Before you get started with building out a web page. Its recommend that you setup some of the general settings in page proprieties. 


Right click on the editor page, and select Page Properties.

Under the General tab: 
You can set the title, page name, page dimensions, file type, and If you want to center the page.

With the multiple sizes of screens out there these days, I would recommend centering it horizontally and vertically.  This way everything gets aligned to the very center of the screen, and builds out from there.

Even if you don’t need to vertically align it. You’ll still most likely want to align it horizontally. If objects appear off center when previewing them in a browser, it might be due to this. 


Images & Text:

Add Text: Under the Toolbox menu on the left, You will find all the main basic functions of Web Page Builder. 

Select the Text tool, and drag your mouse across the build screen while holding the left mouse button. This will create a new text box to edit. You can format the text with the above menu when you have the text box selected. It will automatically open up the format tab, when editing text. 


Add Images: Select the image icon, and create a image box on the page. The same way as creating a new text box. Holding down the left mouse button, and dragging it across the build page. This will open up the File upload window. 

Alternatively, you can copy and paste a image from the internet into the build page.

If you modify the image in any way in the page builder, it will output a new image in the build files. So if you have a unaltered image, you will have to manually add it into the img folder on the server. 


Previewing work:

If you click on the Preview Icon. It will allow you to view your work in a live internet browser while creating it. This can be extremely helpful when positioning scripts, and designing templates. 


Adding Links:

Text Links:

Highlight the text, and right click on the mouse. 
Select the Link icon, and add the address.

If you are linking out to an external page, like the affiliate link/tracking link.

External Links:
Link to: External Web Address.

Opening Link In a New Tab:
target window or frame
Target: Open In New Browser Window

 

Image Links:

CSS Button Links:


Custom Scripts:

Under the Toolbox menu, you will find the HTML icon. 
This will allow you to insert raw code into the landing page. In this example, we will be using some javascript to show the current time.


Using the preview feature, we can make sure the script is working. Along with confirming its in the correct place on the page.

Note: PHP requires a live web server – and will not work in this preview mode.  


Page Background:

Right click on the build page, and select Page proprieties. 
Under the Style tab, you will find the option to select a background.

Commonly used modes are solid, vertical gradient and image based backgrounds. The only ones I wouldn’t use is texture, and pattern modes. 

Select the style of background you want to use, and hit the Ok button. This will update the main editor page.

Repeating Image Backgrounds


Exporting Work:

Under the File Menu, You will find the publish button. This will bring up the Publish Website menu.

Add the location of the folder by clicking New.
Click on the .. Button in the Publish Location menu.
Select the folder to export the files to.
Click Ok to update the information.
Then Publish.


In the folder you saved the landing page in. You will find the index page ( Or whatever you renamed the page), and the folder of altered images. You will need to manually upload each image to the web server. Don’t forget to included any images that were unchanged when making the presell page. 

Upload these files to your server.
You might try uploading the them into a root folder called lp1, lp2, etc etc etc.
This will keep everything well organized, and only takes a second to do.
Example:  domain.com/lp1/ppvpage.html 

Note: If you have alot of images. You can compress the folder into a zip file. Upload, and extract it on the server side.


Saving Work:

If you are not finished with a project, then make sure to save it as a Web Builder project file. 

Under the files menu:
Select Save Web Site As: WYSIWYG Web Builder Project


Creating A Template:

Templates make life easier, and are a great way to quickly build out presell pages for new offers. We highly recommend saving all new landing page designs as a template. This will make it easier when trying to find what design you are wanting to use. They show a preview of them in the template menu. They also wont get lost or accidentally deleted.  You can always delete them later if they are a poor performer. 

Under the file menu:
Select Save Web Site As: WYSIWYG Web Builder Template


Now you can quickly create a new landing page to test. One that is based on a design you have tested in the past.

Under the file menu:
Select New Website from Template.

This will bring up the preview menu of all the templates saved. Select the design you want to use and start editing the creative.