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 script is simply a matter uploading the script files to a server/hosting account. Once uploaded, point your browser to said server/hosting and your script will work.

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()"

Video editing

To change the video in any section, copy the embed code from youtube or vimeo, then click "Source" button on the section, then replace the current iframe embed code with the new one.

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.

In some situations, you might want to have the parent of the original item cloned, rather then the item itself. Consider the example of an unsorted list with "a" tags inside "li" tags. In this case, it's the containing "li" element which should be cloned, not the "a" element itself. To make this happen, make sure to add the class name "propClone" to the parent element in your element's .html file. For an example, please have a look at the navigation of the element "header1.html".

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.

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.

Normal Contact & Subscripe forms

To set up the normal contact & subscribe forms, simple you need to fill in your email address that you want to receive the leeds at and the subject of the received emails.
To setup the normal FLATPACK pages (not the export file from the builder), open the folder "pix_mail" and edit the file inside it "contact_me_x.php" where x is the template number, when you open it change lines 4 and 5 which are:

If you want to setup the forms for the export html files from the PIXBUILDER, open (after export) the folder "pix_mail", then open the file "config.php" and input your email and subject in line 7 and 8.

<form class="subscription-form mailchimp form-inline wow fadeInRight animated" data-wow-offset="10" data-wow-duration="1.5s" role="form" id="contact_form">

<input type="text" name="FNAME" id="FNAME"  id="subscriber-name" placeholder="Enter Your Full Name">
<input type="email" name="email" id="subscriber-email" placeholder="Your Email" class="form-control input-box">

<button type="submit" id="subscribe-button" class="btn btn-default standard-button subscribe_btn pix_text">SUBSCRIBE NOW</button>

<h4 class="subscription-success"></h4>
<div class="subscription-error "></div>

</form>