Documentation Center

Creating Region Layout

Create a new Region Layout, for example to offer a six-column layout to Editors when adding Teasers to the Page.

Procedure

  1. Create the Region View to define the container HTML mark up:
    1. In the custom Area Views Folder, create a subfolder called Region.
    2. Add a new View called SixColumn with the following code:
      @model RegionModel
      <div @Html.DxaRegionMarkup()>
        @for (int i = 0; i < Math.Ceiling(Model.Entities.Count / 6.0); i++)
        { 
          <div class="row">
            @for (int j = 0; j < 6 && ( 6 * i + j < Model.Entities.Count); j++)
            {
              <div class="col-sm-6 col-md-2">
                @Html.DxaEntity(Model.Entities[6 * i + j], containerSize: 2)
              </div>
            }
          </div>
        }
      </div>
      
      The code splits the content items (entities) added to the region into rows (divs) containing six elements each.
  2. Create a Component Template which can be used to add elements into your new Region.
    1. In the Content Manager make a copy of the Teaser [3-Column] Component Template in Building Blocks/Modules/Core/Editor/Templates and put it in Building Blocks/Modules/ModuleName/Editor/Templates Folder, where ModuleName matches the name of the custom area you have created.
    2. Rename it Teaser [SixColumn].
    3. Open the Component Template for editing.
    4. Edit the MVC Metadata: update the Region View Name metadata field to match the name of the Area and Region view that you just created separated by a colon, for example MyCompanyExamples:SixColumn.
    5. Save and close the Component Template.
  3. Edit a Page containing teasers and switch the layout of all teasers to use your new Teaser [SixColumn] Component Template (add additional teasers as required).
  4. Republish the Page.
    The content is laid out using the new six-column layout.

What to do next

If there are other types of content you want to allow in the six-column layout, create corresponding copies of existing Component Templates, rename them to have [SixColumn] in the title, and update the metadata to map to your new Region.