Help Center

Menu

Step 6: Add paint layouts

Paint layouts are used as the inner template of a page. They allow more fine-grained control of the layout of inside pages. In this part of the tutorial, you will set up a global paint layout for the site that allows content editors to control whether the heading and right column are printed on the page.

Create a paint layout

  1. In the paint layouts folder, create a paint layout called global paint layout:

    1. Right-click on the paint layouts folder.

    2. Select Create New…​  Design & Layout  Paint Layout.

    3. Enter the name global paint layout.

    4. Select Create.

    This image shows the steps taken to create a new paint layout asset.

  2. Expand the paint layout asset:

    This image shows the Paint Layout folder expanded

  3. Add the following code to the Default Format asset in the Type Formats folder:

<div class="main-column mx-4">
%begin_asset_metadata_show-heading% (1)
<h1>%asset_name%</h1>
%end_asset_metadata_show-heading% (1)
%asset_contents%
</div>
%begin_asset_metadata_right-col%
<div class="right-column"> (2)
%asset_metadata_right-col-include^as_asset:asset_contents_raw%
</div>
%end_asset_metadata_right-col%
1 The %begin_ and %end_ keywords are conditional statements. The HTML code between them will only be printed if the metadata value evaluates to true, i.e. the metadata contains a string other than ‘0’. Read Conditional Keywords for more information.
2 The right column is only shown if the right-col metadata field is set to yes. It then uses a keyword modifier and nested keyword to print the contents of the right-col-include asset in the paint layout.

Using paint layouts

Paint layouts can be applied in various ways, depending on your requirements. You can configure your site to use one paint layout for the landing page and a different paint layout for inside pages. For more information about how you can use paint layouts, see the following:

This example uses a basic site-wide paint layout.

Apply your paint layout

You must apply the paint layout to the site.

  1. Right-click on the site asset.

  2. Select Settings  Paint layouts.

  3. Scroll to the Effective paint layouts section.

  4. Enter the asset ID of the global paint layout into the Paint layout field, or use the asset picker function.

  5. Select Save.

Create a right column include

To test the paint layout functionality, you must first create some content:

  1. Create a new standard page called Opening hours in the design nesters folder.

  2. Add the following content:

    Opening hours

Monday to Friday: 8am to 5pm

Saturdays:  10am to 2pm

Sundays: closed

Closed public holidays

  3. Select Save

This content will be used to test the right column on/off metadata tag.

Test your paint layout functionality

  1. Test your site in a browser using one of two ways:

    • Copy the URL from the site asset and paste it into a browser.

      OR

    • Right-click on the site asset and select Preview  In new window.

      This image shows the drop-down menu that appears when you right-click on the site asset. It shows Preview selected

    You will see your site in the new tab.

  2. View the Contact Us page in the browser.

    This image shows the Contact Us page as it is currently formatted.

  3. Edit the metadata of the page to turn the heading and right column on and off:

    1. Right-click on the Contact Us asset.

    2. Select Metadata.

    3. Select Edit.

    4. Select Yes next to Show right column.

    5. Set Right column include to the asset ID of the Opening hours include asset.

    6. Select Save.

  4. Add some content to the Contact Us page. A text block will enable you to see the distinction between the columns on the page.

    1. Right-click on the Contact Us page.

    2. Select Content.

    3. Select Edit.

    4. Add some content to the page. You can copy a text block from the Lorem Ipsum generator page.

    5. Select Save.

  5. Test your site again by reloading the Contact Us page.

The contact us page after metadata changes