To add new elements to the builder, please follow these steps:

1. Each of your elements will be placed inside it’s own HTML file (inside elements folder). This means you’ll need to create a separate HTML file for each element (!) Within these HTML files (You can duplicate any existing html element and use it as a base file for the new element, just replace the inner html code), you’ll need to make sure you reference all external resources required for this HTML element to function properly; this could be external CSS files, JS file or images. We suggest you load each HTML file inside your browser to check and make sure it functions and looks correct. Please note that within each HTML file, your element must be a direct child of the same page container element (id=”page”)
2. Edit your HTML skeleton files (elements/skeleton.html and elements/sk2.html). These are the HTML files used to create the final HTML files by the export function. It’s important that within this file, you link to all the proper external resources like stylesheets, javascript files, images, etc.
3. Once you have completed all of your HTML elements, the final step is to edit the JSON file which contains all the element categories and URLs to the HTML elements file. Open the file “elements.json”. For each element you’ll need to specify the height as well, this is important as it’s used to calculate the correct height for the thumbnails as well as the blocks on the canvas.

To make the new sections editable via the builder please add these classes to the elements as following:
.editContent : to edit the text content of the elements
.pix_text : to edit the style of the elements
.pix_text : to edit the input fields of forms
.pix_builder_bg : to edit backgrounds
images (img) will be editable automatically inside the builder