Creating A Layout

Kooboo layout is a master page. It contains regular HTML/CSS code and one or more place holders that you can insert components into later.

To create a layout

Go to "Developments" -- "Layouts"

Click "Create" button to create a new layout

The default template has some sample code. It has two modes, preview and source code mode. Default is preview mode.

Place holder

The most important action of creating a layout is to convert a certain area to into a place holder that will be rendered with components. This can be done by the "Convert to position" action button in the preview mode or manually add HTML tag attributes in the source code mode.

Preview Mode

Mouse over the preview dom element will highlight the element, click on the element will mark it with red border and open the editing options on the right panel.

You can convert the selected area into a place holder by the "Convert to position" action button. Prepend or append a place holder above or below the selected area are two other options.

Source Code Mode

Click the Source Code tab at the bottom to switch to source code mode.

In the source code mode, you are free to manually convert any element to a place holder by using the k-placeholder tag attribute. You may also use Kooboo HTML syntax or kScript.

For example:

<html> 
<head></head>
<body>
    <view id="viewtwo"></view>
    <div k-placeholder="main_content">
        <p> Sample text inside the layout placeholder </p>
    </div>
</body> 
</html>