Layout Editor

Design a unique channel experience with FrontRow's powerful visual layout editor.

Overview

The Layout Editor is a drag-and-drop interface that allows you to customize the appearance and organization of your FrontRow channel. With this tool, you can create a unique brand experience, highlight your best content, and optimize for viewer engagement without writing any code.

Key Features

Visual Design Tools

• Drag-and-Drop Interface: Easily position and resize elements
• Live Preview: See changes in real-time as you edit
• Responsive Design: Automatically adapts to different screen sizes
• Theme Editor: Customize colors, fonts, and visual styles

Content Organization

• Custom Sections: Create unique content groupings
• Featured Content: Highlight important videos or playlists
• Dynamic Shelves: Automatically populate with newest or most popular content
• Grid Layouts: Arrange content in various grid patterns

Getting Started

Accessing the Layout Editor

1. Navigate to your channel dashboard
2. Select "Appearance" from the main menu
3. Click "Edit Layout" to open the editor
4. Choose to edit desktop, tablet, or mobile layouts

Basic Layout Structure

Your channel layout consists of several key components:

• Header: Channel branding, navigation, and search
• Hero Section: Featured content or welcome message
• Content Shelves: Horizontal rows of content cards
• Sidebar: Additional navigation or promotional elements
• Footer: Links, legal information, and secondary navigation

Layout Components

Content Shelves

The primary way to organize and display your content:

// Create a new content shelf via API
const newShelf = await frontrow.layout.createShelf({
  channelId: 'ch_123456',
  name: 'Latest Tutorials',
  type: 'dynamic',
  contentFilter: {
    tags: ['tutorial'],
    sort: 'publish_date',
    order: 'desc',
    limit: 10
  },
  style: {
    cardSize: 'medium',
    showTitles: true,
    showDuration: true
  }
});

Hero Banners

Create eye-catching featured sections:

• Video Heroes: Autoplay video backgrounds
• Carousel Heroes: Rotating featured content
• Split Heroes: Multiple featured items side by side
• Text Overlays: Add titles, descriptions, and call-to-action buttons

Custom Widgets

Add specialized functionality to your layout:

• Member Benefits: Showcase membership tiers
• Live Status: Display currently live content
• Community Feed: Show recent community activity
• Upcoming Events: Calendar of scheduled content

Theme Customization

Brand Colors

Define your channel's color palette:

• Primary brand color
• Secondary accent colors
• Text colors
• Background colors
• Gradient options

Typography

Customize your channel's fonts:

• Headings font family
• Body text font family
• Font sizes and weights
• Line spacing and letter spacing

Visual Elements

Add personality with custom visual elements:

• Background patterns or images
• Custom icons
• Dividers and separators
• Animation effects

Advanced Techniques

Conditional Layouts

Display different layouts based on user attributes:

// Create a conditional layout section
await frontrow.layout.createConditionalSection({
  channelId: 'ch_123456',
  name: 'Member Welcome',
  conditions: [
    { field: 'is_member', operator: 'equals', value: true }
  ],
  content: {
    type: 'hero',
    title: 'Welcome Back, Member!',
    subtitle: 'Check out your exclusive content below',
    backgroundImage: 'https://assets.frontrow.com/images/member-hero.jpg',
    actions: [
      {
        label: 'Exclusive Content',
        link: '/members-only'
      }
    ]
  }
});

A/B Testing

Test different layouts to optimize engagement:

1. Create multiple versions of a layout section
2. Assign audience segments to each version
3. Monitor performance metrics
4. Implement the winning design

Best Practices

1. Mobile-First Design: Ensure your layout works well on smaller screens
2. Clear Hierarchy: Guide viewers to important content with visual hierarchy
3. Consistent Branding: Maintain visual consistency with your brand identity
4. Performance Optimization: Avoid too many complex elements that could slow loading
5. Regular Updates: Refresh featured content and seasonal elements

Troubleshooting

Common Issues

• Layout Conflicts: Elements overlapping or misaligned
• Responsive Problems: Layout breaking on certain screen sizes
• Performance Issues: Slow loading due to complex layouts
• Preview Discrepancies: Differences between editor preview and live site

Support Resources

• Layout Editor documentation and tutorials
• Pre-built templates and examples
• Community forums for layout inspiration
• Direct support for complex layout issues

Next Steps

• Explore UI Components for additional customization options
• Learn about Channel Content organization strategies
• Set up Analytics to measure layout performance