Episode 9: Basic Page Templates and Layouts

2 March 2026

Creating Consistent, Professional Page Designs that Scale Across Your Portal

Introduction

Consistent page layouts are the foundation of professional-looking portals. Users expect a predictable experience where navigation, content areas, and functionality appear in logical, familiar locations. This episode teaches you how to create reusable page templates that maintain design consistency while accommodating different content types and user scenarios.

Key Concepts

Page Templates: Reusable layouts that define the structure and styling for different page types
Content Areas: Designated regions for dynamic content within templates
Responsive Design: Layouts that adapt seamlessly to different screen sizes and devices
Template Inheritance: How templates can extend or override base template functionality
Component Integration: Embedding lists, forms, and other components within template structures

Learning Objectives

By the end of this episode, you will be able to:

Design page templates that create a cohesive user experience across your portal
Implement responsive layouts that work well on all devices
Create specialized templates for different content types (forms, lists, detail pages)
Use template inheritance to maintain consistency while allowing customization
Integrate Power Pages components seamlessly within custom layouts

Why Template Design Matters

Inconsistent page layouts confuse users and make your portal feel unprofessional. External users often have limited time and patience—if they can’t quickly understand how to navigate and use your portal, they’ll abandon their tasks. Well-designed templates also make your portal easier to maintain and extend as requirements evolve.

Step-by-Step Guide

1. Understanding Power Pages Template Structure

Template Hierarchy:

Base Template (foundation)
├── Layout Template (structure)
├── Page Template (specific content areas)
└── Content Templates (reusable blocks)

Essential Template Elements:

Header: Logo, navigation, user account controls
Navigation: Primary menu, breadcrumbs, utility links
Content Area: Main page content with flexible layouts
Sidebar: Secondary navigation, related content, calls-to-action
Footer: Copyright, legal links, contact information

2. Creating Your Base Template

Setting Up Template Structure:

Navigate to Portal Management:
- Go to Web Templates
- Create new template: “Base Layout”
- Set Type: Layout
Define Base HTML Structure:

<!DOCTYPE html>
<html lang="{% localized_html_lang %}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% snippet "Portal Name" %}{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    {% block css %}
        <link rel="stylesheet" href="~/css/portal-theme.css">
    {% endblock %}
    
    <!-- Portal required CSS -->
    {{ page.adx_copy | liquid }}
</head>
<body class="{% block body_class %}{% endblock %}">
    <!-- Skip to main content for accessibility -->
    <a class="skip-link" href="#main-content">Skip to main content</a>
    
    {% include 'Header' %}
    
    <main id="main-content" role="main">
        {% block breadcrumbs %}
            {% include 'Breadcrumbs' %}
        {% endblock %}
        
        {% block content %}
            <!-- Page content goes here -->
        {% endblock %}
    </main>
    
    {% include 'Footer' %}
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    {% block scripts %}
        <!-- Custom JavaScript -->
    {% endblock %}
</body>
</html>

3. Building Specialized Page Templates

List Page Template (for data display pages):

{% extends 'Base Layout' %}

{% block title %}{{ page.title }} - {% snippet "Portal Name" %}{% endblock %}

{% block body_class %}list-page{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- Main content area -->
        <div class="col-lg-9">
            <div class="page-header">
                <h1>{{ page.title }}</h1>
                {% if page.description %}
                    <p class="lead">{{ page.description }}</p>
                {% endif %}
            </div>
            
            <!-- Action buttons -->
            <div class="page-actions mb-4">
                {% block page_actions %}
                    <!-- Default actions like "Create New" button -->
                {% endblock %}
            </div>
            
            <!-- Main content block -->
            <div class="list-container">
                {% block list_content %}
                    {{ page.adx_copy | liquid }}
                {% endblock %}
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-3">
            <div class="sidebar">
                {% block sidebar %}
                    {% include 'List Sidebar' %}
                {% endblock %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

4. Creating Responsive Design Systems

CSS Framework Setup:

/* Portal Theme CSS (portal-theme.css) */

/* Custom CSS Variables for Consistent Theming */
:root {
    --primary-color: #0066cc;
    --secondary-color: #f8f9fa;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --text-color: #333333;
    --border-color: #dee2e6;
    --border-radius: 8px;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Layout Components */
.page-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.sidebar {
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    height: fit-content;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .page-actions {
        flex-direction: column;
    }
    
    .sidebar {
        margin-top: 2rem;
    }
}

Summary

Well-designed page templates create a professional, cohesive experience that builds user confidence and trust. By investing time in creating a solid template foundation, you’ll make future development faster and more consistent. Focus on user needs, mobile experience, and maintainability as you build your template system.

In the next episode, you’ll learn how to add rich styling and branding that makes your portal uniquely yours while maintaining the professional functionality your users expect.