Skip to content

Template Development

How to create custom video templates.

Template Introduction

Video templates use HTML to define the layout and style of video frames. Pixelle-Video provides multiple preset templates covering different video dimensions and style requirements.

Built-in Template Preview

Portrait Templates (1080x1920)

Suitable for TikTok, Kuaishou, Xiaohongshu, and other short video platforms.

  • Blur Card

    blur_card

    Blurred background card style, suitable for graphic content display

  • Cartoon

    cartoon

    Cartoon style, suitable for light and lively content

  • Default

    default

    Default template, simple and versatile

  • Elegant

    elegant

    Elegant style, suitable for artistic and intellectual content

  • Fashion Vintage

    fashion_vintage

    Retro fashion style, suitable for nostalgic themes

  • Life Insights

    life_insights

    Life insight style, suitable for inspirational content

  • Modern

    modern

    Modern minimalist style, suitable for business and tech content

  • Neon

    neon

    Neon style, suitable for fashion and trendy content

  • Psychology Card

    psychology_card

    Psychology card style, suitable for knowledge popularization

  • Purple

    purple

    Purple theme, suitable for dreamy and mysterious styles

  • Simple

    simple

    Minimalist style, highlighting the content itself

Landscape Templates (1920x1080)

Suitable for YouTube, Bilibili, and other video platforms.

  • Ultrawide Minimal

    ultrawide_minimal

    Ultrawide minimalist style, suitable for desktop viewing

  • Wide Darktech

    wide_darktech

    Dark tech style, suitable for technology and gaming content

Square Templates (1080x1080)

Suitable for Instagram, WeChat Moments, and other platforms.

  • Minimal Framed

    minimal_framed

    Minimalist framed style, suitable for social media sharing

Template Naming Convention

Templates follow a unified naming convention to distinguish different types:

  • static_*.html: Static templates
  • No AI-generated media content required
  • Pure text style rendering

  • Suitable for quick generation and low-cost scenarios

  • image_*.html: Image templates

  • Uses AI-generated images as background
  • Invokes ComfyUI image generation workflows

  • Suitable for content requiring visual illustrations

  • video_*.html: Video templates

  • Uses AI-generated videos as background
  • Invokes ComfyUI video generation workflows
  • Creates dynamic video content with enhanced expressiveness

Template Structure

Templates are located in the templates/ directory, grouped by size:

templates/
├── 1080x1920/  # Portrait
│   ├── static_*.html   # Static templates
│   ├── image_*.html    # Image templates
│   └── video_*.html    # Video templates
├── 1920x1080/  # Landscape
│   └── image_*.html    # Image templates
└── 1080x1080/  # Square
    └── image_*.html    # Image templates

Creating Custom Templates

Steps

  1. Copy an existing template file from the templates/ directory
  2. Modify HTML and CSS styles
  3. Save to the corresponding size directory with .html extension
  4. Use the new template name in configuration or Web interface

Template Variables

Templates support the following Jinja2 variables:

  • {{ title }} - Video title (optional)
  • {{ text }} - Current scene text content
  • {{ image }} - Current scene image (if any)

Example Template

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            width: 1080px;
            height: 1920px;
            margin: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Arial', sans-serif;
        }
        .content {
            text-align: center;
            color: white;
            padding: 40px;
        }
        .text {
            font-size: 48px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="text">{{ text }}</div>
    </div>
</body>
</html>

Template Development Tips

1. Responsive Sizing

Ensure the template's body size matches the target video dimensions:

  • Portrait: width: 1080px; height: 1920px;
  • Landscape: width: 1920px; height: 1080px;
  • Square: width: 1080px; height: 1080px;

2. Text Typography

  • Use appropriate font sizes and line heights for readability
  • Add shadows or backgrounds to text for better contrast
  • Control text length to avoid overflow

3. Image Handling

  • Use object-fit: cover to ensure image filling
  • Add gradients or overlay layers to improve text readability
  • Consider fallback solutions for image loading failures

4. Performance Optimization

  • Avoid overly complex CSS animations
  • Optimize background image sizes
  • Use system fonts or web-safe fonts

More Information

For template development questions, feel free to ask in GitHub Issues.