Documentation Center

Creating Page Layout (.NET)

Create a new Page Layout, for example to show navigation on the right-hand side instead of on the left-hand side.

Procedure

  1. Create a Page View to define the high level structure in HTML:
    1. In custom Area Views Folder, create a sub Folder called Page.
    2. Add a new View called NavOnRightPage using the following code:
      @model PageModel
      
      <div class="page-row page-row-expanded @Model.HtmlClasses">
        <div class="row">
          <div class="col-sm-12 col-md-9">
            @Html.DxaRegions(exclude: "Left Navigation", containerSize: 9)
          </div>
          <div class="col-sm-12 col-md-3">
           @Html.DxaRegion("Left Navigation")
          </div>
        </div>
      </div>
      

    The code takes the Left Navigation include and renders it in a quarter width column on the right of the Page. All other content is rendered in a three quarter width column on the left of the page.

  2. Create a Page Template that Editors can select when creating or editing pages to use this layout:
    1. In the Content Manager, make a copy of the Content Page Page Template in Building Blocks/Modules/Core/Editor/Templates and put it in Building Blocks/Modules/ModuleName/Editor/Templates (where ModuleName matches the name of the custom area you have created).
    2. Rename it Content Page with Right Navigation.
    3. Open the Page Template for editing.
    4. Edit the Page Template Metadata: update the Page View Name metadata field to match the name of the Area and Page View that you just created separated by a colon, for example MyCompanyExamples:NavOnRightPage.
    5. Save and close the Page Template.
  3. Republish the Publish Settings Page and recycle your Web application—see Refreshing Web application settings.
  4. Edit a Page and switch the layout to use your new Content Page with Right Navigation Page Template.
    When you Republish the Page, you will see that the navigation appears on the right.