Introduction

What it is PixBuilder is a Javascript script which allows users to customise HTML templates in a quick and easy way. PixBuilder allows basic content editing, allowing users to changes link text, headers and other written content.

HTML Builder runs (almost) entirely in the browser. The only server side code is in the form of a single PHP file used for exporting HTML markup.

What it's not (!)
PixBuilder is NOT a CMS (content management system). It does not provide a way for end-users to work on live websites and make changes to such websites.

For more information visit our support center

Requirements

To be able to use HTML Builder, you must have the following:

• PHP
• Apache webserver (Windows servers will probably work, but are not supported)
• An FTP tool to upload the files - Download Free FTP tool from here (FileZilla)

Installing the HTML Builder is simply a matter uploading the "builder" folder to a server/hosting account. Once uploaded, point your browser to builder's directory and the builder will work.
For example: www.yoursite.com/builder

*Note: don't upload the .zip file you downloaded from themeforest directly to your server, first unzip it, then upload the folder "builder" which is inside it.

Builder Update

To update the builder to the latest version please follow these steps:

1. Download all the images in the directory "/elements/images/uploads/".
2. Delete all the files of the old builder.
3. Upload the new builder files to your server.
4. Upload all the downloaded images from the old builder to the same directory at "/elements/images/uploads/".
5. The builder is ready to use now.

*Note: please make a copy of your work before updating the builder by expoting it as .pixbuilder project.

Drag and drop

HTML Builder allows users to drag HTML elements onto a canvas and drop them where they'd like them to appear. Once dropped onto the canvas, the position can be changed by dragging and dropping as well. Elements can be delete individually or all elements on the current page can be deleted in one go.

Content editing

The HTML Builder script can also be used to edit written content inside each element (simply by setting the "building mode" to "content"). HTML Builder uses a rich text editor, allowing to make changes to the written content. Depending on what type of element you're editing, certain options will be disabled in the editor. Editable text elements will need to be configured through "/js/builder.js", and depending on the exact configuration, certain text elements might not be editable.

Style/detail editing

The HTML Builder script also allows for basic CSS editing and link editing. Using the built-in CSS editor, end-users can customise whatever CSS attributes the script's admin has configured. When editing a link, the end-user can point the link to either an internal page or an (external) URL.

Link editing

The HTML Builder script allows user to edit links as well. To be able to edit links, firstly the link selectors will need to be added to the "editableItems" array in the /js/builder.js file. To edit links on the canvas, firstly select the Details building mode, this will allow you to select links. When selected, a "link" tab will be visible in the left panel, allowing you to either choose a page to link to or enter a URL manually.

Linking within a single page
When building a one-page website, you might want to link to sections within a single page rather then to a separate page. To do this, simply edit the link and use the second dropdown to choose the block you'd like to link to. The ID's to which can be linked, have to be configured within the block HTML files, and the ID attribute should be assigned to the first child element of the main container (for an example, please have a look at any of the bundled block files).

Image editing

The HTML Builder script allows user to edit images as well. To edit images on the canvas, firstly select the Details building mode, this will allow you to select images. When selected, a "image" tab will be visible in the left panel, allowing you to either upload an image or enter a URL manually.
- To change the image, input new image url inside url(), for example:
url(yourdomain.com/image.png)
- To remove the image, just input "url()"




* To make the background image parallax, set the "background-size to cover" and "background-attachment to fixed".

Video Background

To change section's background video, open the source code of the section and input the video url in the src attribute of the source tag, also input an alternative (poster) image that show in mobile devices instead of the video in the poster attribute in the video tag.

Cloning items

Items which have been setup in the "editableItems" array in /js/builder.js can be cloned. Switch to "Details" building mode, select the item which you want to clone and finally click the clone button from the left panel. Please note that cloned items will be inserted into the canvas right next to the original item.

Export HTML

Whenever the user is happy with the final result, the created markup can be exported by click the green export button. The export feature will grab all the used HTML elements for each created page. Once all pages are completed, all the HTML files are bundled into a ZIP archive together with the other external resources like stylesheets, Javascript files and images which will be downloaded by the end user.

Export & Import .pixbuilder Projects

You can at any time export a copy of the landing page project you are working on as a "project.pixbuilder" file which you can import it later to the builder and continue editing.
To export or import a project open the left sidebar and click on the button "Export & Import" in the bottom of the sidebar.
*Note: after the import process all the current landing pages will be deleted! so make sure to make a copy of your current work by exporting it from the export button above it in the same window (project.pixbuiledr) file.

Preview HTML

To preview a page click on the preview button in the top bar, you can only preview a single page; links to other pages won't work. When you make changes to your page, reloading the preview won't work, instead you'll have to use the "Preview" button again.

Pages

The HTML Builder script allows users to create multiple pages at once. To add a new page, simply click the green button labeled "+ Add" just below the current pages list. You can alter the page names as well (please use names without the .html extension, these are added automatically during the export). When exporting the markup, the pages will use the same names. To delete a page, simply click the little delete icon next to the page you'd like to delete.

Popups

If you want to add a popup to your landing page, the popup's script should be included in the page's code in order to work, but in case you are using one of the predefined popup sections in the builder, here you don't need to add the popup's script to the page, because it's already exist in the section's source, and if you want to add this popup to another links and buttons in the page, just switch to Details mode, press on the link or the button, then put the #popup_id in the link field, for example #popup_1.

You can watch this video for Editing & Customizing PixBuilder Predefined Popups:
https://www.youtube.com/watch?v=-AEWipK9HR8&list=PLhuQqRln0YTH0bk1_akRxB62iYwTIM81r

If you are not using any of the predefined popup sections in the builder, then you have to add the popup's code to the page, and to do that just copy the popup's code from the knowledge base article and paste it in any section's source in the builder after the existing code and the popup will work in the entire page, then to add the popup to links and buttons, just switch to Details mode, press on the link or the button, then put the #popup_id in the link field, for example #popup_1.

To edit the popup just switch to Content mode, press on popup's link or button, then switch to Details mode and customize the popup style as usual.

For more information please check our knowledge base article about adding new Popups to your landing page:
http://support.pixfort.com/knowledgebase/popups/

Setting up forms in the Builder

To set up all the forms used inside the builder, simply you just need to choose the mail service provided (Form Type) when you click on the export button inside the builder, then you fill the required information for the email service provided that you choosed (the info for the other email service providers is not required).

Form Type:

1- Custom Email:

When you choose "Custom Email" as a form type in you landing page you will receive all the suscription submited in the forms directly to your email that you choose in the email field, also you should input the subject of the received emails in the subject field.

2- MailChimp:

To send the submited date to your MailChimp account you should input the following informatio:
Your API key from here - http://admin.mailchimp.com/account/api
List unique id from here - http://admin.mailchimp.com/lists/
And you should make sure that each field of the form has the same name in your mailchimp account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

3- Campaign Monitor:

To send the submited date to your Campaign Monitor account you should input the following informatio:
Your API key (change your-username with your own username) - https://your-username.createsend.com/admin/account/
List id from here - https://www.campaignmonitor.com/api/getting-started/#listid
And you should make sure that each field of the form has the same name in your Campaign Monitor account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

4- GetResponse:

To send the submited date to your GetResponse account you should input the following informatio:
Your API key from here - https://app.getresponse.com/my_api_key.html
Campaign name from here - https://app.getresponse.com/campaign_list.html
And you should make sure that each field of the form has the same name in your GetResponse account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

5- AWeber:

To send the submited date to your AWeber account you should input the following informatio:
Your Authcode from here - https://auth.aweber.com/1.0/oauth/authorize_app/647b2efd
List name from here - https://www.aweber.com/users/autoresponder/manage
And you should make sure that each field of the form has the same name in your AWeber account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

6- ActiveCampaign:

To send the submited date to your ActiveCampaign account you should input the following informatio:
Your API URL Go to My Settings -> Developers
API Key: Go to My Settings -> Developers
List id
And you should make sure that each field of the form has the same name in your ActiveCampaign account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

7- MailerLite:

To send the submited date to your MailerLite account you should input the following informatio:
Your API Key from here - https://app.mailerlite.com/integrations/api/
List ID from here - https://app.mailerlite.com/integrations/api/
And you should make sure that each field of the form has the same name in your MailerLite account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

7- FreshMail:

To send the submited date to your FreshMail account you should input the following informatio:
Your API Key from here - https://app.freshmail.com/en/settings/integration/
API Secret from here - https://app.freshmail.com/en/settings/integration/
List ID: Go to list -> Parameters
And you should make sure that each field of the form has the same name in your FreshMail account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

8- Sendloop:

To send the submited date to your Sendloop account you should input the following informatio:
Your API Key: Go to Settings -> API Settings
Your subdomain
List ID: Go to list -> Parameters
And you should make sure that each field of the form has the same name in your Sendloop account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

9- Sendy:

To send the submited date to your Sendy account you should input the following informatio:
Your API Key: Go to Settings -> API Settings
Your subdomain
List ID: Go to list -> Parameters
And you should make sure that each field of the form has the same name in your Sendloop account, to change field's name simply switch the builder to the "Details" mode then click on the fields, then open "Field Builder" tab and here you can change field's name, place holder and change if it's requiered or not.

Using Multiple Email Service Provideders in the same page:

If you want to use multiple email service provideres in the same page simply switch the builder to the "Details" mode then click on each form then open "Form Builder" tab and then choose "Form Type" for this form.
Don't forget to input the requiered information for the email service provider before exporting the landing page (click on the export button in the builder and fill the required information the export HTML).

Adding new fields to the Form:

To add new fields to the forms simply switch the builder to the "Details" mode then click on any field then click on the "clone" button, after that you can click on the new generted field and change it's options (name, placeholder,...).

You can watch this video for Adding new fields to the Form:
https://www.youtube.com/watch?v=GcYjUQ82XeI&feature=em-upload_owner

<input type="hidden" name="amount" value="15.00">

<select name="os0" required="" aria-required="true">
	<option value="">Choose a Plan</option>
	<option value="Normal">Normal $9.99 USD</option>
	<option value="Premium">Premium $14.99 USD</option>
	<option value="Pro">Pro $24.99 USD</option>
</select>

<input type="hidden" name="option_select0" value="Normal">
<input type="hidden" name="option_amount0" value="9.99">
<input type="hidden" name="option_select1" value="Premium">
<input type="hidden" name="option_amount1" value="14.99">
<input type="hidden" name="option_select2" value="Pro">
<input type="hidden" name="option_amount2" value="24.99">
<input type="hidden" name="option_index" value="0">

<select name="quantity" required="" aria-required="true">
	<option value="">Choose Quantity</option>
	<option value="1">1 Ticket</option>
	<option value="2">2 Ticket</option>
	<option value="3">3 Ticket</option>
</select>