How the page builder works


Pagestead’s page builder allows end-users to use drag and drop to compose web pages. End-users can drag and drop blocks and / or components onto the canvas. The canvas itself essentially an unsorted list (<ul></ul>) in which every list element (<li></li>) represents a block. So every time an end-user drag and drops a new block onto the canvas, an additional <li></li> is added to the list. Whenever a block is removed, an <li></li >is removed. When the order of blocks is changed, the order of the <li></li>’s within the list is changed.


Every block on the canvas is contained in it’s own iframe. So when a page is made up out of four blocks, there are four iframes on the canvas.

Components can be dragged and dropped within and between blocks.

The skeleton file

For exporting and publishing, an additional iframe is used. This iframe is hidden within the page builder and loads a special file named “skeleton.html”. This HTML file loads all the assets used by all of the blocks and is used to turn the blocks on the canvas into a proper web page for exporting or publishing purposes.

When a page is either exported or published, the contents of every block on the canvas is loaded into the contents of the skeleton file, turning it into a fully functional web page.

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.