Page layouts

  Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic! Mail us feedback on this topic!  

A page layout consists of the HTML layout of the page template and web part zones that specify regions where web parts can be placed. You will use page layouts to define the layout and design of your site.

 

The easiest way to edit a page layout is to switch to the Design tab of the page and click the Edit layout (EditLayout) button at the top-right:

 

devguide_clip0247

 

devguide_clip0248

 

The web part zones are defined by the following tag:

 

<cc1:CMSWebPartZone ID="xy" runat="server" />

 

The ID value must be unique within the given layout.

 

As you can see, the layout code is standard HTML. It means you have full control over rendered HTML code and you can choose between table and CSS layout.

 

 

 

Editing the layout in your favorite editor

 

Editing of HTML code in a plain text area may not be very comfortable. However, you can use the Check out to file button to save the layout code to the disk and open it in your favorite HTML editor.

 

Please note: The file is saved on the disk where the web application is running.

 

Managing pre-defined page layouts

 

When you are creating a new blank page, you can choose from pre-defined page layouts:

 

devguide_clip0249

 

The Copy this layout to my page template option allows you to decide whether you will be using the shared layout or if you create a copy of the layout specific for your page template only. If you choose the shared layout and make changes to the HTML layout code, they will affect all pages that use the same shared page layout, so it's better to use a copy of the layout in most cases.

 

You can manage the pre-defined page layouts in Site Manager -> Development -> Page layouts. You can configure the following properties:

 

Layout display name

The name of the layout displayed to the users.

Layout code name

The name of the layout used in the code.

Layout description

Optional description.

Page layout thumbnail

Upload field for the layout preview image (available only when editing an existing layout). This image is used in the page layout selection dialog shown when creating a new blank page as seen in the image above.

Layout code

ASCX code of the page layout.

 

Sample layout code

 

The following sample page layout code uses a table to define a two-column layout:

 

<table>

<tr>

  <td>

    <cc1:CMSWebPartZone ID="zoneLeft" runat="server" />    

  </td>

  <td>

    <cc1:CMSWebPartZone ID="zoneRight" runat="server" />    

  </td>

</tr>

</table>

 

The following layout code defines the same two-column layout, but using DIV elements and CSS styles:

 

<div style="width: 50%;">

<div style="width: 80%; float: left;">

  <cc1:CMSWebPartZone ID="zoneLeft" runat="server" />    

</div>

<div style="width: 50%; float: right;">

  <cc1:CMSWebPartZone ID="zoneRight" runat="server" />    

</div>

</div>

 

Page url: http://devnet.kentico.com/docs/5_5r2/devguide/index.html?page_layouts.htm