Morten Sæther

← Blog

Episode 6: Basic Page Creation

9 February 2026

Building Engaging Content Pages with the Design Studio

Introduction

With your data sources secured and configured, it’s time to create the pages where users will interact with your portal. The Power Pages design studio provides powerful tools for creating professional, responsive pages without requiring coding expertise. This episode teaches you how to use the design studio effectively, add and configure components for rich user experiences, and manage page properties for optimal performance and discoverability.

Key Concepts

Learning Objectives

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

Why Effective Page Creation Matters

Your pages are the primary interface between your organization and external users. Well-designed pages guide users efficiently toward their goals, while poorly designed pages create confusion and abandonment. The design studio enables you to create professional pages that reflect your brand and serve your users effectively.

Step-by-Step Guide

1. Accessing the Design Studio

  1. Navigate to Your Site:

    • Open the Power Pages design studio
    • Select your site from the environment
    • Click Edit to enter the design studio

  2. Understanding the Interface:

    • Canvas: The main editing area where you build your page
    • Toolbox: Components you can add to your page
    • Properties Panel: Settings for selected components
    • Preview: Real-time preview of your page

2. Creating Your First Page

  1. Add a New Page:

    • Click Pages in the left navigation
    • Click + New page
    • Choose a template or start with a blank page
    • Name your page (e.g., “Customer Dashboard”)

  2. Configure Basic Page Settings:

    • Page name: Internal name for the page
    • Partial URL: The URL segment for this page
    • Page template: Choose the appropriate layout template
    • Parent page: Set page hierarchy if needed

3. Adding and Configuring Components

Text Components:

Media Components:

Interactive Components:

Layout Components:

4. Component Configuration Best Practices

For Text Components:

<!-- Example: Properly structured heading hierarchy -->
<h1>Customer Support Portal</h1>
<h2>Submit a Support Request</h2>
<h3>Required Information</h3>
<p>Please provide the following details to help us assist you quickly...</p>

For Images:

For Buttons:

5. Managing Page Properties

SEO Settings:

Security Settings:

Performance Settings:

Practical Example: Customer Dashboard Page

Let’s create a customer dashboard page for TechStart Solutions:

Page Structure:

Header Section
├── Welcome message with customer name
├── Account summary cards
└── Quick action buttons

Main Content
├── Recent support cases (list component)
├── Account information (form component)
└── Knowledge base shortcuts (button grid)

Footer Section
├── Contact information
└── Additional resources

Component Configuration:

  1. Welcome Section:

    • Heading component: “Welcome, {{user.fullname}}”
    • Text component: Brief overview of available services
    • Container component: Responsive grid for summary cards

  2. Account Summary Cards:

    • Section components for each card
    • Dynamic text showing account metrics
    • Button components for drill-down actions

  3. Support Cases List:

    • List component connected to Case table
    • Filtered to show only current user’s cases
    • Configured with appropriate columns and actions

Responsive Design Considerations

Mobile-First Approach:

Touch-Friendly Design:

Performance Optimization:

Advanced Page Creation Techniques

Dynamic Content:

<!-- Example: Showing different content based on user role -->
{% if user.roles contains 'Premium Customer' %}
  <div class="premium-content">
    <h2>Premium Features</h2>
    <!-- Premium-specific content -->
  </div>
{% else %}
  <div class="standard-content">
    <h2>Standard Features</h2>
    <!-- Standard content -->
  </div>
{% endif %}

Conditional Display:

Interactive Elements:

Troubleshooting Common Issues

Problem: Components not displaying correctly on mobile Solution: Check responsive settings and test on actual devices

Problem: Page loading slowly Solution: Optimize images, minimize components, enable caching

Problem: Content not updating dynamically Solution: Verify data connections and refresh the page cache

Problem: Layout breaking on different screen sizes Solution: Use responsive containers and test across multiple devices

Page Creation Best Practices

  1. Start with User Needs: Design pages around user tasks, not organizational structure
  2. Keep It Simple: Don’t overwhelm users with too many options on one page
  3. Maintain Consistency: Use the same components and styling across your site
  4. Test Thoroughly: Verify functionality across browsers and devices
  5. Monitor Performance: Regularly check page load times and user engagement

Summary

Effective page creation balances visual appeal with functional design and optimal performance. Master the design studio tools, understand how components work together, and always consider the user experience when building pages. Remember that great pages guide users naturally toward their goals while reflecting your organization’s brand and values.

In the next episode, you’ll learn how to display your carefully secured data using the powerful list component, enabling users to find and interact with information efficiently.