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.
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.
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.
Link to: External Web Address.
Opening Link In a New Tab:
target window or frame
Target: Open In New Browser Window
Adding links to images is the same process as described above.
Right click on the image, and select link.
Change link to: External Web Address.
Insert the URL, and hit Ok.
CSS Button Links:
Adding a link to a button requires a slightly different method.
Right click on the button, and select button properties.
Under the Events Tab.
Add a new event.
Under the Toolbox menu, you will find the HTML icon.
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.
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
In this example, rather than a full colored background. We are going to add a expanding header to the website. Because it will be one soild color, we can just create it in paint like the example above.
If you click on mode, and select image. You will be giving the option to select an image for your local computer.
Repeating Header Image:
Repeat: Repeat in a horizontal direction.
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.
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.
Note: If you have alot of images. You can compress the folder into a zip file. Upload, and extract it on the server side.
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.