Custom Page Builder

The Custom Page Builder is a powerful Pro+ feature that lets you create professional, branded viewer experiences for your display. Using an intuitive visual editor, you can design custom landing pages that viewers see when they scan your QR code or visit your display link.

Getting Started

The page builder replaces the simple URL redirect feature with a fully integrated design tool. To access the page builder:

1. Navigate to your display in the dashboard
2. Click on Custom Display Page
3. Select Open Page Builder to launch the visual editor

Page Builder Interface

Canvas Area

The main workspace where you design your page. You can:

• Drag and drop components
• Resize elements by dragging handles
• Preview your page in real-time
• Switch between desktop and mobile views

Component Panel

Located on the left side, containing:

• Basic Components: Text, images, buttons, dividers
• Media Components: Video players, image galleries
• Layout Components: Columns, rows, containers
• Interactive Elements: Countdown timers, maps

Style Panel

On the right side, customize:

• Colors and backgrounds
• Typography and fonts
• Spacing and alignment
• Borders and shadows
• Responsive settings

Top Toolbar

Quick access to:

• Save and publish buttons
• Undo/redo actions
• Preview mode
• Device viewport toggle
• Page settings

Using Templates

Start quickly with pre-designed templates optimized for different display types:

Holiday Display Template

• Festive design elements
• Snow animation effects
• Event schedule sections
• Sponsor recognition area

Drive-Through Template

• Clear navigation instructions
• Audio sync instructions
• Safety information
• Queue time estimates

Community Event Template

• Event details and timeline
• Performer information
• Venue map integration
• Social media links

Blank Canvas

Start from scratch with full creative control.

To use a template:

1. Click Templates in the page builder
2. Browse available options
3. Click Use This Template
4. Customize with your content

Managing Assets

Upload and organize your media files directly in the page builder:

Uploading Assets

1. Click the Assets tab in the component panel
2. Drag files or click Upload
3. Supported formats:
   • Images: JPG, PNG, GIF, WebP (max 10MB)
   • Videos: MP4, WebM (max 50MB)

Asset Library

• Automatically organizes uploaded files
• Search by filename
• Filter by file type
• Delete unused assets to save space

Asset Optimization

The page builder automatically:

• Compresses images for faster loading
• Generates responsive image sizes
• Converts to web-optimized formats
• Lazy loads off-screen content

Adding Content

Text Elements

1. Drag a text component to your canvas
2. Double-click to edit content
3. Use the toolbar for formatting:
   • Bold, italic, underline
   • Headings and paragraphs
   • Lists and quotes
   • Text alignment

Images

1. Drag image component to canvas
2. Click to select from asset library or upload
3. Adjust settings:
   • Alt text for accessibility
   • Link URL (optional)
   • Border radius
   • Shadow effects

Buttons

1. Add button component
2. Edit button text
3. Configure:
   • Link destination
   • Open in new tab option
   • Button style (solid, outline, ghost)
   • Hover effects

Embedded Content

Add rich content via embed codes:

• YouTube/Vimeo videos
• Google Maps
• Social media posts
• Custom HTML

Responsive Design

Your pages automatically adapt to different screen sizes, but you can fine-tune the experience:

Device Preview

Toggle between views:

• Desktop (1920px)
• Tablet (768px)
• Mobile (375px)

Responsive Settings

For each element, customize:

• Visibility per device
• Different layouts for mobile
• Adjusted font sizes
• Optimized spacing

Mobile-First Best Practices

1. Test on actual devices
2. Keep text readable (16px minimum)
3. Make buttons tap-friendly (44px minimum)
4. Optimize images for mobile data

Publishing Your Page

Preview Mode

Before publishing:

1. Click Preview to see the live version
2. Test all links and interactions
3. Check mobile responsiveness
4. Verify load times

Publishing

1. Click Publish when ready
2. Choose publication options:
   • Publish immediately
   • Schedule for later
3. Your page goes live at your display URL

Version History

The page builder automatically saves versions:

• Auto-save every 30 seconds
• Manual save points
• Restore previous versions if needed
• Compare changes between versions

Advanced Features

Custom CSS

For advanced users:

1. Access Page Settings
2. Select Custom CSS
3. Add your styles
4. Preview changes instantly

SEO Settings

Optimize for search engines:

• Page title and description
• Social media preview cards
• Custom meta tags
• Structured data

Analytics Integration

Track visitor behavior:

• Page views
• Button clicks
• Time on page
• Device breakdown

Custom Fonts

Upload your brand fonts:

1. Go to Settings → Typography
2. Upload font files (TTF, OTF, WOFF)
3. Apply to text elements

Best Practices

Design Tips

1. Keep It Simple: Don't overwhelm viewers
2. Clear Call-to-Action: Make the sync button prominent
3. Fast Loading: Optimize images and limit video
4. Consistent Branding: Use your colors and logos
5. Mobile Priority: Most viewers use phones

Content Guidelines

• Include clear sync instructions
• Add your display schedule
• Provide parking/venue information
• Include safety guidelines if needed
• Add sponsor recognition

Performance Optimization

• Compress images before uploading
• Limit video autoplay
• Use web fonts sparingly
• Minimize custom scripts
• Test page load speed

Troubleshooting

Page Not Loading

• Check your subscription status (Pro+ required)
• Verify the page is published
• Clear browser cache
• Check for custom code errors

Images Not Displaying

• Verify file format is supported
• Check file size limits
• Ensure asset uploaded successfully
• Try re-uploading the image

Mobile Layout Issues

• Use device preview to identify problems
• Check responsive settings
• Test on actual devices
• Simplify complex layouts for mobile

Slow Page Load

• Optimize image sizes
• Remove autoplay videos
• Limit custom fonts
• Check third-party embeds

Subscription Notes

The Page Builder is available with:

• Pro Plan: Full page builder access
• Commercial Plan: Unlimited pages and storage
• Starter Plan: Upgrade to Pro for this feature

Pages remain live if you downgrade, but you can't edit them until you upgrade again.

Related Topics

• Display Codes - Direct access codes for your display
• QR Codes - Generate QR codes for your custom page
• Multi-Display - Manage pages for multiple displays