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:**

```html
<!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:**

```html
<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>`:

```html
<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:**

```html
<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:**

```html
<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](admin-guide.md)**: Full administrator guide
- **[Campaign Manager Guide](campaign-manager-guide.md)**: Campaign-specific content (email templates)
- **[Landing Pages Feature](../features/landing-pages.md)**: Technical documentation on GrapesJS editor
- **[Media Library Feature](../features/media.md)**: Technical documentation on video upload and storage
- **[API Reference](../api/pages.md)**: Pages API endpoints

---

**Last updated**: February 2026 (V2 complete)