Back to Customization

Layout Options

Customize how information is displayed and organized in your competitions to create the best experience for your participants and viewers.

Available Layout Features

Available Now
Layout customization features you can use today

Layout Width Settings Premium

  • Full width or contained layouts
  • Predefined width options (Small to Extra Large)
  • Custom width values
  • Border radius customization

Responsive Design

  • Automatic mobile responsiveness
  • Cross-device compatibility
  • Optimized leaderboard display
  • Touch-friendly interfaces

How to Customize Layout Settings

1

Access Layout Tab

Open the leaderboard studio, navigate to the “Appearance” tab, then select “Custom Styling” and click on the “Layout” tab.

2

Choose Width Setting

Select from preset width options (Small, Medium, Large, etc.) or enter a custom width value for precise control.

3

Adjust Border Radius

Set the border radius to control how rounded the corners of your leaderboard components appear.

Available Layout Width Options

Width Settings
Control the maximum width of your leaderboard content
Available Options
  • Full Width: Content spans the entire container
  • Small (768px): Compact layout for focused content
  • Medium (1024px): Balanced layout for most use cases
  • Large (1280px): Spacious layout for detailed information
  • Extra Large (1536px): Maximum content area
  • Custom Width: Enter any specific pixel value
Responsive Behavior
How layouts adapt across different devices
Automatic Adaptations
  • Mobile Devices: Single-column, touch-optimized layout
  • Tablets: Responsive adjustments for medium screens
  • Desktop: Full layout with chosen width constraints
  • Content Reflow: Elements adjust to available space
  • Centered Layout: Content centers when using width limits

Planned Layout Enhancements

Enhanced Layout OptionsPlanned
  • Grid-based layout options
  • Multi-column arrangements
  • Card-based participant display
  • Compact and detailed view modes
Interactive ElementsPlanned
  • Advanced sorting and filtering
  • Expandable sections and details
  • Dynamic content organization
  • Customizable information hierarchy

Layout Use Cases

Audience-Focused Layouts
Optimize for different viewer types
Participants

Detailed views with personal progress, goals, and comprehensive information to help participants track their performance and improvement.

Spectators

Clean, easy-to-read displays focusing on key rankings and highlights, perfect for public viewing and following competition progress.

Administrators

Comprehensive dashboards with management tools, detailed analytics, and control interfaces for running and monitoring competitions.

Purpose-Specific Layouts
Layouts optimized for specific goals
Live Events

Real-time updating layouts with emphasis on current standings, recent changes, and dynamic information for active competitions.

Historical Records

Archive-focused layouts highlighting past achievements, trends, and historical data for reference and analysis purposes.

Public Displays

Large-format, high-visibility layouts designed for projection screens, digital signage, and public viewing scenarios.

Layout Best Practices

Visual Hierarchy

  • Prioritize Important Information: Place key data like rankings and scores prominently
  • Use Consistent Spacing: Maintain regular spacing patterns throughout your layout
  • Group Related Items: Keep similar information together for easier scanning
  • Create Clear Sections: Use visual separation to organize different types of content
  • Guide the Eye: Design layouts that naturally guide viewers to important information

User Experience

  • Consider Your Audience: Design for the primary users of your competition
  • Test Across Devices: Ensure layouts work well on all screen sizes
  • Minimize Cognitive Load: Don't overwhelm users with too much information
  • Provide Context: Include enough information for users to understand the data
  • Ensure Accessibility: Design layouts that work for users with different abilities

Current Layout Capabilities

Width Control: Choose from predefined width options (Small to Extra Large) or set custom pixel values to control how your leaderboard content is displayed and centered.

Border Radius: Customize the corner roundness of your leaderboard components to match your design preferences and brand aesthetic.

Responsive Design: Your leaderboards automatically adapt to different screen sizes with optimized layouts for mobile, tablet, and desktop viewing.

Premium Feature Access: Layout customization options are available as part of premium plans, providing advanced control over your leaderboard presentation.