Page Design Interface

Philosophy of Designing a page in ZenDevX Design Studio.

As this stage it would help to understand as to how Design Studio generates and handles page layouts. The framework that powers the web pages generated by Design Studio is Bootstrap. So each page will have to follow the rules of design as defined by the creators of Bootstrap.

Here every page is divided into Sections. A section will contain contain Rows and Columns.

By default every Row should contain at least one Column. A Row can contain maximum 12 columns.

Add Section

Sections are the basic and the most import building blocks of a page in ZenDevX Design Studio.

To add a Section click on the Add button in Ribbon bar. This will add a section.

You can add as many sections as needed in a page. A section can be either Normal or Modal.

If the Section Type is Normal that is appears in the web page but if the Section Type is Modal then it will not appear in the web page. To show such sections you will have to call the Show Modal functionality. This will be covered late in the documentation.

If you do not want to show a Section it can be set to be Hidden by busing the Show/Hide switch.

To the right of each section you will find the number of Components contained in a Section as well as the number of Actions contained.

To edit a Section click on the right arrow button next to Component or Double click anywhere on the section. This will open Layout view. Here you can design your page layout.

If you are opening a new Section it will contain one Row and one Column by default.

Edit Section

To Edit a Section select a section and then click on Edit button. Doing this will open Layout view. Here you can edit your page layout.

Move Section

At times it may be necessary to reorder your Sections. You can do this using the Move button. On clicking on this button a menu will open in which you can select Move Up to move a section one step up in the hierarchy or Move Down to move a section one step down.

Remove Section

To remove a Section select the Section by clicking on it and then click on the Remove button and click Yes in the confirm dialog box.