Please enable JavaScript to view this site.

Navigation: Using ASPRunner.NET > Page Designer

Page layout and Grid type

Scroll Prev Next More

Page layout

You can select two types of page layout for the regular pages: top menu and left bar. Click change on the List page properties to select the page layout:

pd_page_layout

Layout options

Each layout has its own set of options.

Top menu layout options

Menu width. You can choose the width of the top menu bar. Full - full window width. Standard - about 2/3 of a page width at its maximum.

Body width. Body width sets how the page content uses the browser window space. Full - the page always stretches to the entire browser width. Compact - the content uses as little space as possible. Standard - the content stretches to about 2/3 of a page.

Body align. This option lets you choose whether the page body aligns to the left or the center.

 

Additional top bar options can be found on the Editor screen. Additional options include top bar color, fixed top bar etc.

 

An example of the top menu page layout. Full menu, standard body width, left alignment:

pd_page_layout_top_menu_ex

Left bar layout options:

Body width. Body width sets how the page content uses the browser window space. Full - the page always stretches to the entire browser width. Compact - the content uses as little space as possible. Standard - the content stretches to about 2/3 of a page.

 

Additional side  bar options can be found on the Editor screen. Additional options include side bar width, compact or full size, fixed or collapsible etc.

 

An example of the left bar layout. Compact body width, left bar width - 150 px, fixed top/side bar, collapsible left bar:

pd_page_layout_left_bar_ex

Grid type

Page Designer can change the appearance of the grid type.

 

You can choose one of three grid types: horizontal, vertical or columns in Simple or Advanced grid mode. In the Advanced grid mode, you can easily change the properties of labels, cells, and columns when you need to set specific formatting. If you don't change anything in advanced mode, the generated pages look the same as in the simple mode.

 

To switch to Advanced grid mode, press the button above the grid:

pd_layout_advanced_grid

 

To switch back to a Simple grid type, click Change under the page properties on the right side, and choose one of the simple grid types.

page_layout_simple_grid

 

Example of a horizontal grid:

pd_page_layout_hor_grid_ex

 

Example of a vertical grid:

pd_page_layout_vert_grid_ex

 

Example of a columns grid with three columns:

pd_page_layout_columns_ex

Page Designer articles:

About Page Designer

Working with common pages

Working with table pages

Working with cells

Working with page elements

Working with additional pages

Tabs and sections

Insert custom button

Insert code snippet

Insert map

Insert Text / Image

Insert standard button

"View as" settings

"Edit as" settings

"Filter as" settings

See also:

Choose pages screen

Choose fields screen

Miscellaneous settings

Editor screen

Event editor