changemaker.lite/mkdocs/docs/v2/user-guides/content-editor-guide.md

Content Editor Guide

Overview

As a Content Editor, you're responsible for creating and managing public-facing content in Changemaker Lite, including:

• Landing pages: Custom web pages using the visual editor
• Email templates: System email templates (welcome, password reset, shift reminders)
• Media library: Video uploads and organization (if enabled)

This guide will help you create professional, engaging content that drives participation in your campaigns and volunteer activities.

---

Getting Started

Content Editor Access

Content editing features are available to:

• SUPER_ADMIN: Full access to all content features
• INFLUENCE_ADMIN: Email templates (for campaign-related emails)
• MAP_ADMIN: Email templates (for shift-related emails)

Landing pages and media library are typically managed by SUPER_ADMIN only.

Content Areas

1. Landing Pages (/app/pages)

• Custom public pages at /p/[slug]
• Visual editor (GrapesJS) or code editor
• Use for: Campaign pages, donation pages, event pages

2. Email Templates (/app/email-templates)

• System email templates
• HTML + plain text versions
• Use for: Welcome emails, shift reminders, password resets

3. Media Library (/app/media/library, if enabled)

• Video uploads and organization
• Shareable public gallery
• Use for: Testimonials, events, educational content

---

Creating Landing Pages

Landing Page Overview

Landing pages are custom web pages published at /p/[slug]. Use them for:

• Campaign-specific pages: Dedicated page for a major campaign
• Event registration: Custom signup forms for events
• Donation pages: Integrated donation forms
• About pages: "About Us", "Our Team", "Our Mission"
• Volunteer recruitment: Custom volunteer signup pages

Creating a New Page

To create a landing page:

1. Navigate to Content > Landing Pages
2. Click "Create Page"
3. Fill in page details:
   • Title: Page title (shown in browser tab, used for SEO)
   • Slug: URL identifier (e.g., about-us → /p/about-us)
   • Description: Meta description for SEO (160 characters max)
   • Status: DRAFT or PUBLISHED
4. Click "Create"
5. Click "Edit" to open the page editor

Screenshot placeholder: Create Page modal showing title, slug, description, and status fields

Page Editor Overview

The page editor has two modes:

Visual Mode (default):

• Drag-and-drop interface (GrapesJS)
• No coding required
• What-you-see-is-what-you-get (WYSIWYG)
• Best for: Non-technical users, quick page creation

Code Mode:

• HTML/CSS editor
• Full control over markup
• Best for: Experienced users, complex layouts

Switch modes using the tabs at the top of the editor.

Screenshot placeholder: Page editor showing Visual/Code mode tabs and toolbar

!!! warning "Desktop Only" The page editor is designed for desktop use (minimum 1024px width). Mobile users will see a warning to switch to desktop.

---

Using the Visual Editor

Editor Interface

The visual editor has three main areas:

1. Canvas (center):

• Preview of your page
• Click blocks to select
• Drag to reposition

2. Block Toolbar (left):

• Drag blocks onto canvas
• Categories: Layout, Text, Media, Forms, Components

3. Settings Panel (right):

• Style selected block
• Adjust colors, fonts, spacing
• Configure block settings

Screenshot placeholder: Visual editor showing block toolbar, canvas, and settings panel

Adding Blocks

To add a block:

1. Find block in left toolbar (or search)
2. Drag block onto canvas
3. Drop where you want it

Available block categories:

Layout:

• Section: Full-width container
• Container: Centered content wrapper
• Row: Multi-column row
• Column: Single column within row

Text:

• Text: Paragraph text
• Heading: H1, H2, H3 headings
• Quote: Blockquote
• List: Bulleted or numbered list

Media:

• Image: Single image
• Video: Embedded video (YouTube, Vimeo, or self-hosted)
• Icon: Font Awesome icon

Forms:

• Form: Form container
• Input: Text input field
• Textarea: Multi-line text input
• Button: Submit button

Components (custom blocks):

• Hero: Large header with background image and CTA
• Features: Three-column feature grid
• Testimonial: Quote with author photo
• Call to Action: Centered CTA with button
• Stats: Number counter grid

Screenshot placeholder: Block toolbar showing categories and block preview thumbnails

Configuring Blocks

To configure a block:

1. Click the block on canvas (selects it)
2. Settings panel opens on right
3. Adjust settings (varies by block type)

Common settings:

Style tab:

• Typography: Font family, size, weight, color
• Spacing: Margin, padding
• Background: Color, image, gradient
• Border: Width, color, radius
• Dimensions: Width, height

Settings tab (varies by block):

• Image: URL, alt text, link
• Video: Video URL, autoplay, controls
• Button: Text, link, style
• Form: Action URL, method

Screenshot placeholder: Settings panel showing style options for a selected heading block

Styling Blocks

To change text color:

1. Select text block
2. Settings panel > Style tab
3. Color picker under Typography
4. Choose color or enter hex code

To change background:

1. Select section or container block
2. Settings panel > Style tab
3. Background section
4. Choose color, image, or gradient

To adjust spacing:

1. Select block
2. Settings panel > Style tab
3. Margin/Padding section
4. Adjust top, right, bottom, left values

Screenshot placeholder: Background settings showing color picker, image upload, and gradient options

Using Pre-Built Components

Changemaker Lite includes pre-built components for common page sections:

Hero Component

What it is: Large header section with background image, headline, and call-to-action button

How to use:

1. Drag Hero block from Components category
2. Click headline to edit text
3. Click button to edit text and link
4. Select block, then in settings:
   • Upload background image
   • Adjust overlay opacity
   • Change text color

Screenshot placeholder: Hero component on canvas showing headline, subheading, and CTA button

Features Component

What it is: Three-column grid showcasing features or benefits

How to use:

1. Drag Features block onto canvas
2. Click each feature to edit:
   • Icon (Font Awesome icon name)
   • Heading
   • Description
3. Adjust colors and spacing in settings panel

Screenshot placeholder: Features component showing three columns with icons, headings, and text

Testimonial Component

What it is: Quote with author photo and name

How to use:

1. Drag Testimonial block onto canvas
2. Click quote text to edit
3. Click author name to edit
4. Upload author photo in settings panel

Call to Action Component

What it is: Centered section with headline and button

How to use:

1. Drag Call to Action block onto canvas
2. Edit headline and description
3. Edit button text and link
4. Adjust background color

Saving Your Page

To save changes:

Method 1: Keyboard shortcut

• Press Ctrl+S (Windows/Linux) or Cmd+S (Mac)

Method 2: Save button

• Click "Save" button in editor toolbar

Auto-save:

• Changes are NOT auto-saved
• Save frequently to avoid losing work

!!! tip "Save Often" Use Ctrl+S frequently. Browser crashes or network issues can cause unsaved work to be lost.

Screenshot placeholder: Save button in editor toolbar

---

Using the Code Editor

Switching to Code Mode

To switch to code editor:

1. Click "Code" tab at top of editor
2. HTML code appears in text editor
3. Edit HTML directly
4. Click "Visual" tab to return to visual mode

When to use code mode:

• Need precise control over HTML structure
• Adding custom CSS or JavaScript
• Copying HTML from another source
• Working with complex layouts

Screenshot placeholder: Code editor showing HTML markup in text editor

HTML Structure

Basic page structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <style>
    /* CSS goes here */
  </style>
</head>
<body>
  <!-- Page content goes here -->
</body>
</html>

Recommended structure:

<body>
  <!-- Hero Section -->
  <section class="hero">
    <h1>Welcome to Our Campaign</h1>
    <p>Join us in making a difference.</p>
    <a href="/campaigns/climate-action" class="btn">Take Action</a>
  </section>

  <!-- Features Section -->
  <section class="features">
    <div class="container">
      <div class="row">
        <div class="col">
          <h3>Easy to Use</h3>
          <p>Send emails in under 2 minutes.</p>
        </div>
        <div class="col">
          <h3>High Impact</h3>
          <p>Your voice reaches decision-makers.</p>
        </div>
        <div class="col">
          <h3>Community</h3>
          <p>Join thousands of advocates.</p>
        </div>
      </div>
    </div>
  </section>
</body>

Adding Custom CSS

To add custom styles:

1. In code mode, add a <style> block in the <head>:

<head>
  <style>
    .hero {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 100px 20px;
      text-align: center;
    }

    .hero h1 {
      font-size: 3rem;
      margin-bottom: 20px;
    }

    .btn {
      background: #ff6b6b;
      color: white;
      padding: 15px 40px;
      text-decoration: none;
      border-radius: 5px;
      display: inline-block;
      margin-top: 20px;
    }

    .btn:hover {
      background: #ee5a52;
    }
  </style>
</head>

Using Variables

Landing pages support variable interpolation:

Available variables:

• {{SITE_NAME}} — Organization name (from settings)
• {{SITE_URL}} — Website URL
• {{USER_NAME}} — Logged-in user's name (if authenticated)

Example usage:

<p>Welcome to {{SITE_NAME}}, {{USER_NAME}}!</p>

Renders as:

Welcome to Community Action Network, John Smith!

Keyboard Shortcuts in Code Mode

• Ctrl+S / Cmd+S: Save
• Ctrl+F / Cmd+F: Find
• Ctrl+H / Cmd+H: Find and replace
• Tab: Indent
• Shift+Tab: Unindent

---

Publishing Pages

Publishing Workflow

Draft → Published:

1. Create page (status: DRAFT)
2. Build page in editor
3. Preview page (see below)
4. Publish page (change status to PUBLISHED)

Draft pages:

• Not visible to public
• Only accessible to admins via direct URL
• Use for: Work in progress, testing

Published pages:

• Visible at /p/[slug]
• Accessible to anyone
• Indexed by search engines (if SEO configured)

Previewing Pages

To preview a page before publishing:

1. Save the page (Ctrl+S)
2. Click "Preview" button in editor toolbar
3. Page opens in new tab at /p/[slug]?preview=true

OR:

1. Navigate to Content > Landing Pages
2. Click page title to view published version

Screenshot placeholder: Preview button in editor toolbar

Publishing a Page

To publish a draft page:

1. Navigate to Content > Landing Pages
2. Find the page in the table
3. Click "Edit" in Actions column
4. Change status from DRAFT to PUBLISHED
5. Click "Save"

To unpublish a page:

1. Change status from PUBLISHED to DRAFT
2. Save

Unpublishing removes the page from public access but preserves all content.

SEO Settings

To optimize for search engines:

1. Edit the page
2. Fill in SEO fields:
   • Title: Page title (shown in search results, max 60 characters)
   • Description: Meta description (shown in search results, max 160 characters)
   • Keywords: Comma-separated keywords (e.g., "climate action, advocacy, environment")
   • OG Image: Social media share image (Facebook, Twitter)

Best practices:

• Title: Include primary keyword near beginning
• Description: Compelling, action-oriented, includes keyword
• Keywords: 5-10 relevant keywords
• OG Image: 1200x630 px, high-quality, relevant to page content

Screenshot placeholder: SEO settings form showing title, description, keywords, and OG image fields

MkDocs Export

What it is: Export landing page as Jinja2 template for MkDocs (static site generator)

Use case: Publish landing pages on your static documentation site

To export:

1. Navigate to Content > Landing Pages
2. Click "Export" in Actions column
3. Choose export format:
   • Jinja2 Template: Wraps HTML in MkDocs Material theme layout
   • Standalone HTML: Raw HTML (no wrapper)
4. File is saved to MkDocs docs/overrides/ directory
5. Access via MkDocs site navigation

Screenshot placeholder: Export modal showing Jinja2/Standalone options

---

Managing Email Templates

Email Template Overview

Email templates control the content and formatting of system-generated emails:

System templates:

• Welcome Email: Sent to new users after registration
• Password Reset: Sent when user requests password reset
• Shift Confirmation: Sent when volunteer signs up for shift
• Shift Reminder: Sent day before shift
• Response Verification: Sent to verify campaign response

Custom templates:

• Create custom templates for specific campaigns or events
• Use in shift emails, follow-up campaigns, etc.

Email Template Structure

Each template has three parts:

1. Subject Line

• Text shown in email inbox
• Supports variables (e.g., {{USER_NAME}}, {{SHIFT_TITLE}})
• Keep under 60 characters

2. HTML Body

• Rich-formatted email (colors, images, links)
• What users see in modern email clients
• Supports variables

3. Plain Text Body

• Unformatted text version
• Fallback for old email clients or user preference
• Should convey same information as HTML

Editing an Email Template

To edit a template:

1. Navigate to Content > Email Templates
2. Click "Edit" for the template you want to modify
3. Edit subject, HTML body, and/or plain text body
4. Click "Preview" to see rendered email
5. Click "Save"

Screenshot placeholder: Email template editor showing subject field, HTML editor, and plain text editor

Using Variables in Templates

Variables are placeholders that get replaced with real data when the email is sent.

Available variables:

User variables:

• {{USER_NAME}} — User's full name
• {{USER_EMAIL}} — User's email address

Shift variables:

• {{SHIFT_TITLE}} — Shift name
• {{SHIFT_START}} — Start date/time (formatted)
• {{SHIFT_END}} — End date/time (formatted)
• {{SHIFT_LOCATION}} — Meeting location
• {{SHIFT_CUT}} — Cut name

Campaign variables:

• {{CAMPAIGN_TITLE}} — Campaign name
• {{CAMPAIGN_URL}} — Link to campaign page

System variables:

• {{SITE_NAME}} — Organization name (from settings)
• {{SITE_URL}} — Website URL
• {{RESET_LINK}} — Password reset link (password reset emails only)
• {{VERIFICATION_LINK}} — Verification link (response verification emails only)

Example template:

Subject:

Welcome to {{SITE_NAME}}, {{USER_NAME}}!

HTML Body:

<h1>Welcome, {{USER_NAME}}!</h1>

<p>Thank you for joining {{SITE_NAME}}. We're excited to have you as part of our community.</p>

<p>Here's what you can do next:</p>
<ul>
  <li><a href="{{SITE_URL}}/campaigns">Take action on a campaign</a></li>
  <li><a href="{{SITE_URL}}/shifts">Sign up for a volunteer shift</a></li>
  <li><a href="{{SITE_URL}}/app">Explore your dashboard</a></li>
</ul>

<p>If you have questions, reply to this email or visit our <a href="{{SITE_URL}}/docs">help center</a>.</p>

<p>Together, we can make a difference!</p>

<p>— The {{SITE_NAME}} Team</p>

Plain Text Body:

Welcome, {{USER_NAME}}!

Thank you for joining {{SITE_NAME}}. We're excited to have you as part of our community.

Here's what you can do next:
- Take action on a campaign: {{SITE_URL}}/campaigns
- Sign up for a volunteer shift: {{SITE_URL}}/shifts
- Explore your dashboard: {{SITE_URL}}/app

If you have questions, reply to this email or visit our help center: {{SITE_URL}}/docs.

Together, we can make a difference!

— The {{SITE_NAME}} Team

HTML Email Best Practices

Do:

• ✅ Use inline CSS (not external stylesheets)
• ✅ Use tables for layout (old email clients don't support flexbox/grid)
• ✅ Test in multiple email clients (Gmail, Outlook, Apple Mail)
• ✅ Include alt text for images
• ✅ Use web-safe fonts (Arial, Verdana, Georgia)
• ✅ Keep width under 600px (mobile friendly)
• ✅ Always provide plain text version

Don't:

• ❌ Use JavaScript (email clients strip it)
• ❌ Use CSS positioning (absolute, fixed)
• ❌ Use background images (not universally supported)
• ❌ Rely on external resources (may be blocked)
• ❌ Use tiny fonts (< 14px)

Testing Email Templates

To test a template:

1. Click "Send Test Email" button in editor
2. Enter your email address
3. Click "Send"
4. Check your inbox (may take 1-2 minutes)

The test email uses sample data for variables:

• {{USER_NAME}} → "Test User"
• {{SHIFT_TITLE}} → "Sample Shift"
• etc.

Test in multiple email clients:

• Gmail (web)
• Outlook (Windows)
• Apple Mail (Mac/iOS)
• Outlook.com (web)

Look for:

• ✅ Formatting intact (no broken layout)
• ✅ Images loading
• ✅ Links working
• ✅ Variables replaced correctly
• ✅ Readable on mobile (check phone)

Screenshot placeholder: Send Test Email modal showing email address input and send button

---

Managing the Media Library

!!! note "Optional Feature" Media features must be enabled via Settings > Feature Toggles > ENABLE_MEDIA_FEATURES. Contact your administrator if this option is not visible.

Media Library Overview

The media library allows you to:

• Upload videos: MP4, MOV, AVI, MKV, WebM, M4V, FLV
• Organize by directory: Folder structure for categorization
• Edit metadata: Title, description, producer, creator, tags
• Share publicly: Publish videos to public gallery at /media
• Lock videos: Prevent accidental deletion of important content

Use cases:

• Event recordings (rallies, town halls, speeches)
• Testimonials (supporter stories)
• Educational content (issue explainers, how-to guides)
• Promotional videos (recruitment, fundraising appeals)

Uploading Videos

To upload a video:

1. Navigate to Content > Media > Library
2. Click "Upload Video" button (top-right)
3. Either:
   • Drag and drop video file into upload area, OR
   • Click to browse and select file
4. Fill in metadata (see below)
5. Click "Upload"

Screenshot placeholder: Upload Video modal showing drag-drop area and metadata form

Supported formats:

• MP4 (recommended, best compatibility)
• MOV (Apple QuickTime)
• AVI (older format, large file size)
• MKV (Matroska, open format)
• WebM (web-optimized)
• M4V (Apple iTunes)
• FLV (Flash video, legacy)

File size limit: 10 GB per file

Upload time: Varies by file size and connection speed. A 1 GB file takes ~5-10 minutes on typical broadband.

Video Metadata

Metadata fields:

Title (required):

• Video title
• Displayed in library and public gallery
• Example: "Climate Rally - June 2024"

Description (optional):

• Longer description of video content
• Supports HTML (bold, links, etc.)
• Displayed on video detail page

Producer (optional):

• Organization or individual who produced the video
• Example: "Community Action Network"

Creator (optional):

• Videographer or director
• Example: "John Smith"

Tags (optional):

• Comma-separated keywords for search/filtering
• Example: "climate, rally, 2024, toronto"

Directory (optional):

• Folder path for organization
• Use forward slashes for nested folders
• Examples: "events/2024", "testimonials", "educational"

Screenshot placeholder: Metadata form showing title, description, producer, creator, tags, and directory fields

Automatic Metadata Extraction

When you upload a video, the system automatically extracts:

• Duration: Length in seconds (shown as MM:SS)
• Dimensions: Width x height in pixels (e.g., 1920x1080)
• Orientation: PORTRAIT, LANDSCAPE, or SQUARE
• Quality: SD, HD, FULL_HD, or 4K
• Has Audio: Boolean (detected from audio track)
• File Size: Bytes (shown as MB/GB)

Quality detection:

• SD (Standard Definition): Height < 720px
• HD (High Definition): Height 720-1079px
• FULL_HD (1080p): Height 1080-2159px
• 4K (Ultra HD): Height ≥ 2160px

Orientation detection:

• PORTRAIT: Height > Width (e.g., 1080x1920, vertical phone video)
• LANDSCAPE: Width > Height (e.g., 1920x1080, standard video)
• SQUARE: Width = Height (e.g., 1080x1080, Instagram video)

You cannot edit these fields manually—they're extracted automatically.

Organizing Videos

Directory structure:

Use directories to organize videos by:

• Type: "events", "testimonials", "educational", "promotional"
• Year: "2024", "2023"
• Campaign: "climate-campaign", "housing-campaign"
• Combination: "events/2024", "testimonials/climate"

Example directory structure:

events/
  2024/
    rally-june.mp4
    townhall-july.mp4
  2023/
    rally-september.mp4
testimonials/
  climate/
    jane-smith.mp4
    john-doe.mp4
  housing/
    maria-garcia.mp4
educational/
  climate-101.mp4
  how-to-canvass.mp4

To move videos between directories:

1. Select videos in library (checkboxes)
2. Choose "Move" from bulk actions
3. Enter new directory path
4. Click "Move"

Screenshot placeholder: Library showing directory tree sidebar and video grid

Filtering and Searching Videos

To find videos:

Search:

• Enter keywords in search box
• Searches title, description, tags, producer, creator

Filters:

• Directory: Show only videos in specific directory
• Quality: Filter by SD, HD, FULL_HD, 4K
• Orientation: Filter by portrait, landscape, square
• Locked: Show only locked or unlocked videos

Sort:

• Upload date (newest first, oldest first)
• Title (A-Z, Z-A)
• Duration (shortest first, longest first)

Screenshot placeholder: Library filters showing directory dropdown, quality checkboxes, and sort options

Editing Video Metadata

To edit a video:

1. Click on video thumbnail (or click "Edit" in actions menu)
2. Edit metadata fields
3. Click "Save"

Editable fields:

• Title
• Description
• Producer
• Creator
• Tags
• Directory

Non-editable fields (auto-extracted):

• Duration
• Dimensions
• Orientation
• Quality
• Has Audio
• File Size

Deleting Videos

To delete a video:

1. Select video in library
2. Click "Delete" (trash icon)
3. Confirm deletion

!!! danger "Permanent Deletion" Deleting a video is permanent. The video file is removed from the server and cannot be recovered.

Locked videos cannot be deleted (unlock first).

Locking Videos

What is locking?

Locked videos cannot be:

• Deleted
• Moved to a different directory
• Unshared from public gallery (if already shared)

When to lock:

• ✅ Important historical videos
• ✅ Videos currently shared publicly
• ✅ Videos linked from landing pages or campaigns

To lock a video:

1. Select video
2. Click "Lock" (padlock icon)

To unlock:

1. Select locked video
2. Click "Unlock"

Screenshot placeholder: Video card showing lock icon badge

---

Sharing Videos Publicly

Public Media Gallery

The public media gallery (/media) showcases videos to the public. It's organized by categories.

Categories:

• TESTIMONIAL: Personal stories from supporters
• EVENT: Rally videos, town halls, speeches
• EDUCATIONAL: Issue explainers, how-to guides
• PROMOTIONAL: Recruitment, fundraising appeals

Sharing Videos

To share videos publicly:

1. Navigate to Content > Media > Shared Media
2. Click "Share Videos" button
3. Select videos from library (search, filter, select)
4. Choose category (TESTIMONIAL, EVENT, EDUCATIONAL, PROMOTIONAL)
5. Click "Share"

Videos immediately appear on public gallery at /media.

Screenshot placeholder: Share Videos modal showing library selector, category dropdown, and share button

Managing Shared Media

To view shared videos:

1. Navigate to Content > Media > Shared Media

Table shows:

• Video title
• Category
• Shared date
• View count (if tracking enabled)
• Actions: Unshare, change category

To unshare videos:

1. Select videos in table
2. Click "Unshare"
3. Confirm

Videos are removed from public gallery but remain in library.

To change category:

1. Click "Edit" for video
2. Select new category
3. Click "Save"

Public Gallery Customization

Gallery settings (managed by admin):

• Gallery title (e.g., "Our Videos")
• Category order
• Videos per page
• Allow reactions (like, love, etc.)

Ask your administrator to configure these settings.

---

Content Best Practices

Writing for the Web

Scannable:

• Use headings and subheadings
• Short paragraphs (2-3 sentences)
• Bulleted lists
• Bold key points

Actionable:

• Clear call to action on every page
• Tell users what to do next
• Use action verbs (Join, Donate, Sign Up, Learn More)

Accessible:

• Use alt text for images
• Sufficient color contrast (WCAG AA: 4.5:1 for text)
• Descriptive link text (not "click here")
• Readable font size (≥ 16px)

Mobile Optimization

Mobile traffic is 50-70% of web traffic. Optimize for mobile:

Responsive design:

• Use mobile-friendly templates
• Test on actual phones (not just desktop browser resize)

Touch targets:

• Buttons at least 44x44 px
• Adequate spacing between links (avoid accidental taps)

Load time:

• Compress images (use tools like TinyPNG)
• Minimize video file sizes
• Avoid large background images

Readability:

• Large font (≥ 16px)
• Short paragraphs
• Simple navigation

SEO Optimization

On-page SEO:

1. Title tag: Include primary keyword, under 60 characters
2. Meta description: Compelling, includes keyword, under 160 characters
3. Headings: Use H1 for main title, H2 for sections, H3 for subsections
4. Keywords: Use naturally in content (don't stuff)
5. Internal links: Link to other pages on your site
6. External links: Link to authoritative sources
7. Image alt text: Describe images for screen readers and SEO

Technical SEO:

• Fast load time (< 3 seconds)
• Mobile-friendly
• HTTPS (secure)
• Clean URLs (e.g., /p/about-us, not /p/page?id=123)

Accessibility

WCAG 2.1 Level AA compliance:

Perceivable:

• Alt text for images
• Captions for videos
• Color contrast (4.5:1 for text, 3:1 for large text)

Operable:

• Keyboard navigation (all interactive elements reachable via Tab)
• Skip links (skip to main content)
• No keyboard traps

Understandable:

• Clear language (avoid jargon)
• Consistent navigation
• Error messages explain how to fix

Robust:

• Valid HTML (no unclosed tags, proper nesting)
• Semantic markup (use <nav>, <main>, <article>, not just <div>)

---

Troubleshooting

Landing Pages

Issue: Page editor won't load

Solutions:

1. Check browser console for errors (F12)
2. Try different browser (Chrome recommended)
3. Clear browser cache (Ctrl+Shift+Delete)
4. Disable browser extensions (ad blockers may interfere)

---

Issue: Changes not saving

Solutions:

1. Check internet connection
2. Try Ctrl+S (keyboard shortcut)
3. Check browser console for errors
4. Try refreshing and re-editing

---

Issue: Page looks different when published

Causes:

• Preview mode shows editor styles (not exact public view)
• Browser caching old version

Solutions:

1. Hard refresh published page (Ctrl+Shift+R)
2. Test in incognito/private window
3. Clear browser cache

---

Email Templates

Issue: Variables not replacing

Symptoms: Email shows {{USER_NAME}} instead of actual name

Causes:

• Variable name misspelled
• Variable not supported in this template type
• Email sent via test (test uses sample data)

Solutions:

1. Check variable spelling (case-sensitive)
2. Consult variable reference (see "Using Variables" above)
3. Send real email (not test) to see actual data

---

Issue: Email looks broken in Outlook

Causes: Outlook uses Microsoft Word rendering engine (poor CSS support)

Solutions:

1. Use table-based layout (not flexbox/grid)
2. Use inline CSS (not external styles)
3. Test specifically in Outlook (use Litmus or Email on Acid)

---

Media Library

Issue: Video won't upload

Solutions:

1. Check file size (max 10 GB)
2. Check file format (must be MP4, MOV, AVI, MKV, WebM, M4V, or FLV)
3. Check internet connection (large files need stable connection)
4. Try different browser

---

Issue: Metadata extraction failed

Symptoms: Duration shows "Unknown", quality shows "N/A"

Causes:

• Video file is corrupted
• Unsupported codec
• FFprobe service not running (server issue)

Solutions:

1. Try re-encoding video (use HandBrake or similar)
2. Convert to MP4 with H.264 codec (most compatible)
3. Contact administrator (may be server configuration issue)

---

Issue: Video won't play on public gallery

Causes:

• Video not shared (still in library only)
• Unsupported codec in browser
• Video file missing (deleted from server)

Solutions:

1. Verify video is shared (Content > Media > Shared Media)
2. Re-encode as H.264 MP4 (best browser compatibility)
3. Check server logs (ask administrator)

---

Related Documentation

• Admin Guide: Full administrator guide
• Campaign Manager Guide: Campaign-specific content (email templates)
• Landing Pages Feature: Technical documentation on GrapesJS editor
• Media Library Feature: Technical documentation on video upload and storage
• API Reference: Pages API endpoints

---

Last updated: February 2026 (V2 complete)