Tutorial: Add a Custom Page Layout in Power Pages

Tutorial: Add Custom Page Layout to Your Power Pages Site

When you create new webpages using the Pages workspace in Power Pages, you can choose from predefined page layouts. In some scenarios, you may want to create a custom page layout to display information in a specific format or provide a specialized user interface.

In this tutorial, we create a custom page layout using Liquid. The example demonstrates a two-column layout with the main site menu on the left and page content on the right.

What We Will Build

• Create a common base web template with custom layout code
• Create a second web template that extends the base template
• Create a page template referencing the web template
• Create a web page using the custom page layout

Prerequisites

• A Power Pages subscription or trial
• An existing Power Pages site
• Basic knowledge of HTML and Liquid

---

Step 1: Create a Web Template and Write the Liquid Template Code

First, create a base web template that defines the overall page structure. This template includes breadcrumb navigation, page title, and a two-column layout. This base template can be reused and extended by other templates.

1. Go to Power Pages
2. In Design Studio, select ... and choose Portal Management
   
   
   
   
3. In Portal Management, go to Content → Web Templates
4. Select New
5. Name the template Two Column Layout
   
   In source I was not able to add the Liquid code so without adding Source save it.
   Then come to Dataverse table and search web templates and select the table.

         Paste the Liquid Template code(present below the image) as shown below.

Liquid Template Code

<div class="container">
  <div class="page-heading">
    <ul class="breadcrumb">
      {% for crumb in page.breadcrumbs -%}
        <li>
          <a href={{ crumb.url }}>{{ crumb.title }}</a>
        </li>
      {% endfor -%}
      <li class="active">{{ page.title }}</li>
    </ul>

    <div class="page-header">
      <h1>{{ page.title }}</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4 col-lg-3">
      {% block sidebar %}{% endblock %}
    </div>

    <div class="col-sm-8 col-lg-9">
      {% block content %}{% endblock %}
    </div>
  </div>
</div>
  

Select Save once the code is added.

---

Step 2: Create a Web Template That Extends the Base Layout

Now create a second web template that extends the base layout. This template reads the navigation from the associated web page and renders it as a left navigation menu.

1. Go to Content → Web Templates
2. Select New
3. Name the template Weblinks Left Navigation
   
   
   

Web Template Code

{% extends 'Two Column Layout' %}

{% block sidebar %}
  {% assign weblinkset_id = page.adx_navigation.id %}
  {% if weblinkset_id %}
    {% assign nav = weblinks[page.adx_navigation.id] %}
    {% if nav %}
      <div class="list-group">
        {% for link in nav.weblinks %}
          <a class="list-group-item" href={{ link.url }}>
            {{ link.name }}
          </a>
        {% endfor %}
      </div>
    {% endif %}
  {% endif %}
{% endblock %}

{% block content %}
  <div id="mainContent" class="wrapper-body" role="main">
    {% include 'Page Copy' %}
  </div>
{% endblock %}
  

---

Step 3: Create a Page Template Based on the Web Template

A page template makes your custom layout available when creating new web pages.

1. Go to Website → Page Templates
2. Select New

Field	Value
Name	Enter a name
Website	Select your website
Type	Web Template
Web Template	Weblinks Left Navigation
Use Website Header and Footer	Checked
Is Default	Unchecked
Table Name	None
Description	Optional

Select Save.

---

Step 4: Create a Web Page Using the Custom Layout

1. In Design Studio, select Sync
2. Go to Pages → + Page
3. Enter a page name
4. Select your custom layout under Custom layouts
   
   
   
5. Select Add
   
   
   

Add content to the editable sections as required.

---

Additional Page Configuration

To render the left navigation, link a web link set to the page.

1. Open Portal Management → Content → Web Pages
2. Open the root web page created earlier

   

   
   
3. Open the related localized content page
   
   
   
4. In the Miscellaneous section, select a web link set in the Navigation field
   
   
   
5. Save and return to Design Studio
6. Select Preview → Desktop to view the result
   

Your custom two-column Power Pages layout with left navigation is now complete.