# 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 Page Title ``` **Recommended structure:** ```html

Welcome to Our Campaign

Join us in making a difference.

Take Action

Easy to Use

Send emails in under 2 minutes.

High Impact

Your voice reaches decision-makers.

Community

Join thousands of advocates.

``` ### Adding Custom CSS **To add custom styles:** 1. In code mode, add a ` ``` ### 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

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

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

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:

If you have questions, reply to this email or visit our help center.

Together, we can make a difference!

— The {{SITE_NAME}} Team

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