Kepler Builder’s Canvas is your space for limitless possibilities; you can set your website width dynamically to preview any device type, so you have complete freedom on how you set up your page layouts.

• Elements placed within a Canvas follow a 12-column grid.
• The canvas automatically inserts missing containers and sections around new elements.
• The top of the Canvas contains the Canvas Resizer. 
• Elements placed on the Canvas can be dragged to any desired location.

Kepler Builder has an easy visual UI to adjust Margin and Padding of any element on the Canvas. Adjust Margin and Padding in real-time.

• Each element has a set of draggable handles on each of its sides.
• The outer yellow handle adjusts the element’s Margin in that direction.

• The inner green handle adjusts the element’s Padding in that direction.

You can right click on the Canvas to reveal the Context Menu.

• You can Duplicate, Copy, Paste and Select a Parent or Subordinate Layers.
• The Clipboard is capable of copying and pasting elements and groups across different Pages on the Site.

The Canvas follows a Responsive Grid that actively arranges all of the elements dragged onto the Canvas in a way that they display correctly under different Viewport widths and heights.

• Any element dragged on to the canvas will sit inside an auto-generated Column.
• Columns lie within Rows, Rows within Containers, Containers within Sections, and finally, Sections lie within the single Page Body. This hierarchy is illustrated below:

Page Body → Section → Container → Row → Column → Element

• Columns create gutters (gaps between Column content).
• Columns are stacked for mobile device screens.
• Containers maintain the width for your content
• Sections break the contents of your page into distinct blocks and generally occupy the full width of the Page Body.

Have more questions? Visit our community, its open to everyone!