1. Home
  2. Help Center
  3. Public Portal
  4. Configuring Page Layout

Configuring Page Layout

Overview

The Layout tab gives you control over how content is arranged and displayed on each page. Choose from style variants, adjust border radius, configure header settings, and use the canvas editor for complete layout control.

Style Variants

Each page type offers multiple style variants to match your design preferences:

Feedback Page Variants

  • Modern - Clean, contemporary design with ample spacing
  • Classic - Traditional, business-focused layout
  • Default - Balanced design suitable for most use cases

Roadmap Page Variants

  • Modern - Card-based roadmap with smooth animations
  • Classic - List-based roadmap with clear visual hierarchy
  • Default - Standard kanban-style board layout

Status Page Variants

  • Modern - Polished status indicators with smooth transitions
  • Classic - Simple status text with clear indicators
  • Default - Basic status display

Releases Page Variants

  • Modern - Card-based releases with rich formatting
  • Classic - List-based releases with clear sections
  • Default - Standard release timeline view

Support Page Variants

  • Modern - Clean ticket interface with smooth interactions
  • Classic - Traditional support ticket layout
  • Default - Basic support request form

Help Center Variants

  • Modern - Rich article display with smooth search
  • Classic - Traditional documentation layout
  • Default - Standard help center view

Choosing a Style Variant

  1. Select the page you want to customize
  2. Go to the Layout tab in the customization panel
  3. Find the Style Variant dropdown
  4. Select your preferred variant from the list
  5. The preview updates immediately
  6. Save when satisfied

Border Radius

Adjust the roundness of corners throughout the portal:

  • 0px - Sharp corners (no rounding)
  • 4px - Slight rounding (subtle)
  • 8px - Moderate rounding (balanced)
  • 12px - Soft rounding (modern)
  • 16px - Very soft (friendly)
  • 24px - Maximum rounding (pill-like)

Setting Border Radius

  1. In the Layout tab, find the Radius slider
  2. Drag the slider to adjust border radius from 0 to 24 pixels
  3. The value displays next to the slider
  4. All corners on the page update in real-time
  5. Save when done

Card Styling

Customize the appearance of cards across your pages:

  • Shadow - Choose from None, Small, Medium, or Large shadows
  • Border - Toggle card borders on or off

Header and Footer Settings

Header Options

  • Show Header - Toggle the header visibility
  • Sticky - Make the header stick to the top as users scroll
  • Transparent - Make the header transparent (overlays content)
  • Show Logo - Display the logo in the header

Setting Header Options

  1. In the Layout tab, find the Header/Footer section
  2. Toggle each option on or off using switches
  3. The preview updates immediately
  4. Save when done

Canvas Editor

The Canvas Editor gives you complete control over page layout:

Enabling Canvas Editing

  1. Select the page you want to edit
  2. Click the Enable Canvas Editing button
  3. The canvas editor opens with your current layout

Using the Canvas Editor

  • Add Blocks - Click the + button to add new content blocks
  • Drag and Drop - Rearrange blocks by dragging them to new positions
  • Edit Blocks - Click on a block to edit its content
  • Delete Blocks - Remove blocks you don't need
  • Layout Options - Choose from 1-column, 2-column, or 3-column layouts

Available Blocks

  • Page Heading - Title and description for the page
  • Feedback List - Display wishes and feature requests
  • Roadmap Board - Show roadmap items by status
  • Status Updates - Display system status and incidents
  • Releases List - Show release notes and changelog
  • Support Request - Add a support request form
  • Help Center Blocks - Search, collections, and articles
  • Text - Add custom text content

Exiting Canvas Editing

  1. Click Exit Canvas Editing when done
  2. Your changes are preserved
  3. Use Save to publish changes

Best Practices

  • Keep it consistent - Use the same variant across similar pages
  • Consider your audience - Choose Modern for consumer products, Classic for enterprise
  • Balance roundness - Use consistent border radius across all pages
  • Test accessibility - Ensure layouts work with screen readers
  • Preview on mobile - Check how layouts appear on smaller screens

Next Steps

  • Set up navigation
  • Customize colors and branding
  • Create custom pages