|
||
This dialog allows you to create new shared page layouts or edit existing ones.
The following actions are available in the header:
• Save - click this button to confirm any changes made to the page layout.
• Check out - locks the layout, so that other users cannot modify it at the same time. After you finish your edits, you can allow other users to modify the layout again using the Check in button or you can cancel the checkout by clicking Undo checkout.
• Preview - allows you to edit the layout side-by-side with a preview of how it appears on the live site. See the Design preview help topic for additional details about the preview mode.
You can configure the page layout using the fields described below:
General |
|
Display name |
Name of the layout displayed in the page layout list. |
Code name |
A unique name that serves as an identifier for the page layout (e.g. in the API). |
Description |
Allows you to enter an optional text description of the page layout. |
Thumbnail |
Upload field for the layout preview image. Users see this image in the page layout selection dialog when creating new blank pages.
After uploading a file, two icons are displayed next to it:
•Edit () - if the file is an image, clicking the icon opens the image in the built-in image editor. If the file is not an image (which would not make sense as no thumbnail could be displayed), the metadata editor is opened after clicking the icon. •Delete () - removes the file from the field. |
Is convertible |
If enabled, you can use automatic mapping to assign replacement layouts that the system loads instead of the current layout for specific device profiles. |
Number of zones |
Indicates how many web part zones the layout uses. The number of zones helps users find appropriate matches when mapping layouts for device profiles.
The system automatically counts the number of zones in the layout code, but you can manually override the value (for example in the case of conditional layouts or layouts that load web part zones dynamically). |
Define the structure of the page layout by entering the layout code. The Layout type selector allows you to choose between two types of layout code:
Layout type |
Description |
ASCX |
This type of layout code supports both HTML and ASCX markup, i.e. the same syntax that you would use to edit a standard web form or user control, including inline code.
Important: For security reasons, ASCX layouts may only be edited by users who have the Edit ASCX code permission for the Design module.
You can Insert the following types of layout elements (as control tags):
•Web part zone <cms:CMSWebPartZone ZoneID="zoneA" runat="server" />
Defines an area where developers can place web parts in Design mode. The zones then display the web part content on the live site.
•Conditional layout <cms:CMSConditionalLayout runat="server" ID="ConditionLayout" > ... </cms:CMSConditionalLayout>
The page layout renders the content between the CMSConditionalLayout tags only if the conditions specified by the properties are fulfilled. See also: Conditional layouts
•Device layout <cms:CMSDeviceLayout runat="server" ID="DeviceLayout" VisibleForDeviceProfiles="" > ... </cms:CMSDeviceLayout>
The content between the CMSDeviceLayout tags is only visible for visitors who match the specified device profiles. |
HTML |
The system processes the layout code as basic HTML. This means that ASCX markup, such as controls or inline code, is not functional when the layout is rendered.
You can Insert web part zones into HTML layouts as macro expressions:
{^WebPartZone|(id)zoneA^}
|
Page layouts allow you to directly define any CSS classes used within the layout code.
Requirement: The Allow CSS from components setting must be enabled in Site Manager -> Settings -> System -> Performance.
1. Click Add CSS styles below the page layout's code. The CSS styles editor appears.
2. Enter the definitions of the required CSS classes.
3. Click Save.
All pages that use the layout automatically load the specified styles.
•Developer's Guide -> Development -> Mobile development
•Developer's Guide -> Development -> Team development -> Object locking
•Developer's Guide -> Development -> CSS stylesheets and design -> CSS for page components