7226 lines
167 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Build Power. Not Rent It. Own your digital infrastructure.">
<meta name="author" content="Bunker Operations">
<link rel="canonical" href="https://bnkserve.org/v2/user-guides/content-editor-guide/">
<link rel="prev" href="../map-organizer-guide/">
<link rel="next" href="../volunteer-guide/">
<link rel="icon" href="../../../assets/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.1">
<title>Content Editor Guide - Changemaker Lite</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.484c7ddc.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,700,700i%7CJetBrains+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Inter";--md-code-font:"JetBrains Mono"}</style>
<link rel="stylesheet" href="../../../stylesheets/extra.css">
<link rel="stylesheet" href="../../../stylesheets/home.css">
<link rel="stylesheet" href="../../../assets/css/video-player.css">
<script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" />
<meta property="og:title" content="Content Editor Guide - Changemaker Lite" />
<meta property="og:description" content="Build Power. Not Rent It. Own your digital infrastructure." />
<meta property="og:image" content="https://bnkserve.org/assets/images/social/v2/user-guides/content-editor-guide.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://bnkserve.org/v2/user-guides/content-editor-guide/" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Content Editor Guide - Changemaker Lite" />
<meta property="twitter:description" content="Build Power. Not Rent It. Own your digital infrastructure." />
<meta property="twitter:image" content="https://bnkserve.org/assets/images/social/v2/user-guides/content-editor-guide.png" />
</head>
<body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="deep-purple" data-md-color-accent="amber">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#content-editor-guide" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../.." title="Changemaker Lite" class="md-header__button md-logo" aria-label="Changemaker Lite" data-md-component="logo">
<img src="../../../assets/logo.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Changemaker Lite
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Content Editor Guide
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="deep-purple" data-md-color-accent="amber" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="deep-purple" data-md-color-accent="amber" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://gitea.bnkops.com/admin/changemaker.lite" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
changemaker.lite
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../../" class="md-tabs__link">
V2 Documentation
</a>
</li>
<li class="md-tabs__item">
<a href="../../../phil/" class="md-tabs__link">
Philosophy
</a>
</li>
<li class="md-tabs__item">
<a href="../../../v1/" class="md-tabs__link">
V1 Documentation (Legacy)
</a>
</li>
<li class="md-tabs__item">
<a href="../../../blog/" class="md-tabs__link">
Blog
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../.." title="Changemaker Lite" class="md-nav__button md-logo" aria-label="Changemaker Lite" data-md-component="logo">
<img src="../../../assets/logo.png" alt="logo">
</a>
Changemaker Lite
</label>
<div class="md-nav__source">
<a href="https://gitea.bnkops.com/admin/changemaker.lite" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
changemaker.lite
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<div class="md-nav__link md-nav__container">
<a href="../../" class="md-nav__link ">
<span class="md-ellipsis">
V2 Documentation
</span>
</a>
<label class="md-nav__link " for="__nav_2" id="__nav_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
V2 Documentation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_2" >
<div class="md-nav__link md-nav__container">
<a href="../../getting-started/" class="md-nav__link ">
<span class="md-ellipsis">
Getting Started
</span>
</a>
<label class="md-nav__link " for="__nav_2_2" id="__nav_2_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../getting-started/quick-start/" class="md-nav__link">
<span class="md-ellipsis">
Quick Start
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_3" >
<div class="md-nav__link md-nav__container">
<a href="../../architecture/" class="md-nav__link ">
<span class="md-ellipsis">
Architecture
</span>
</a>
<label class="md-nav__link " for="__nav_2_3" id="__nav_2_3_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_3">
<span class="md-nav__icon md-icon"></span>
Architecture
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../architecture/dual-api/" class="md-nav__link">
<span class="md-ellipsis">
Dual API System
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../architecture/authentication/" class="md-nav__link">
<span class="md-ellipsis">
Authentication & Security
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_4" >
<div class="md-nav__link md-nav__container">
<a href="../../backend/" class="md-nav__link ">
<span class="md-ellipsis">
Backend
</span>
</a>
<label class="md-nav__link " for="__nav_2_4" id="__nav_2_4_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_4">
<span class="md-nav__icon md-icon"></span>
Backend
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../backend/modules/" class="md-nav__link">
<span class="md-ellipsis">
Modules
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../backend/services/" class="md-nav__link">
<span class="md-ellipsis">
Services
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../backend/middleware/" class="md-nav__link">
<span class="md-ellipsis">
Middleware
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../backend/utilities/" class="md-nav__link">
<span class="md-ellipsis">
Utilities
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_5" >
<div class="md-nav__link md-nav__container">
<a href="../../frontend/" class="md-nav__link ">
<span class="md-ellipsis">
Frontend
</span>
</a>
<label class="md-nav__link " for="__nav_2_5" id="__nav_2_5_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_5">
<span class="md-nav__icon md-icon"></span>
Frontend
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../frontend/components/" class="md-nav__link">
<span class="md-ellipsis">
Components
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../frontend/layouts/" class="md-nav__link">
<span class="md-ellipsis">
Layouts
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../frontend/pages/" class="md-nav__link">
<span class="md-ellipsis">
Pages
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_6" >
<div class="md-nav__link md-nav__container">
<a href="../../database/" class="md-nav__link ">
<span class="md-ellipsis">
Database
</span>
</a>
<label class="md-nav__link " for="__nav_2_6" id="__nav_2_6_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_6">
<span class="md-nav__icon md-icon"></span>
Database
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../database/schema/" class="md-nav__link">
<span class="md-ellipsis">
Schema Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../database/migrations/" class="md-nav__link">
<span class="md-ellipsis">
Migrations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../database/seeding/" class="md-nav__link">
<span class="md-ellipsis">
Seeding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../database/indexes/" class="md-nav__link">
<span class="md-ellipsis">
Indexes
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../database/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_7" >
<div class="md-nav__link md-nav__container">
<a href="../../features/" class="md-nav__link ">
<span class="md-ellipsis">
Features
</span>
</a>
<label class="md-nav__link " for="__nav_2_7" id="__nav_2_7_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_7">
<span class="md-nav__icon md-icon"></span>
Features
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../features/influence/" class="md-nav__link">
<span class="md-ellipsis">
Influence
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../features/map/" class="md-nav__link">
<span class="md-ellipsis">
Map
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../features/landing-pages/" class="md-nav__link">
<span class="md-ellipsis">
Landing Pages
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../features/email-templates/" class="md-nav__link">
<span class="md-ellipsis">
Email Templates
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../features/media/" class="md-nav__link">
<span class="md-ellipsis">
Media
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../features/newsletter/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../features/observability/" class="md-nav__link">
<span class="md-ellipsis">
Observability
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../features/tunnel/" class="md-nav__link">
<span class="md-ellipsis">
Tunnel
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_8" >
<div class="md-nav__link md-nav__container">
<a href="../../deployment/" class="md-nav__link ">
<span class="md-ellipsis">
Deployment
</span>
</a>
<label class="md-nav__link " for="__nav_2_8" id="__nav_2_8_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_8">
<span class="md-nav__icon md-icon"></span>
Deployment
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../deployment/docker-compose/" class="md-nav__link">
<span class="md-ellipsis">
Docker Compose
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deployment/environment-variables/" class="md-nav__link">
<span class="md-ellipsis">
Environment Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deployment/nginx/" class="md-nav__link">
<span class="md-ellipsis">
Nginx Configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deployment/ssl-tls/" class="md-nav__link">
<span class="md-ellipsis">
SSL/TLS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deployment/tunneling/" class="md-nav__link">
<span class="md-ellipsis">
Tunneling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deployment/monitoring-stack/" class="md-nav__link">
<span class="md-ellipsis">
Monitoring Stack
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deployment/healthchecks/" class="md-nav__link">
<span class="md-ellipsis">
Health Checks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deployment/scaling/" class="md-nav__link">
<span class="md-ellipsis">
Scaling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deployment/backup-restore/" class="md-nav__link">
<span class="md-ellipsis">
Backup & Restore
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_9" >
<div class="md-nav__link md-nav__container">
<a href="../../development/" class="md-nav__link ">
<span class="md-ellipsis">
Development
</span>
</a>
<label class="md-nav__link " for="__nav_2_9" id="__nav_2_9_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_9">
<span class="md-nav__icon md-icon"></span>
Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../development/local-setup/" class="md-nav__link">
<span class="md-ellipsis">
Local Setup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../development/docker-workflow/" class="md-nav__link">
<span class="md-ellipsis">
Docker Workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../development/git-workflow/" class="md-nav__link">
<span class="md-ellipsis">
Git Workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../development/npm-commands/" class="md-nav__link">
<span class="md-ellipsis">
NPM Commands
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../development/migrations/" class="md-nav__link">
<span class="md-ellipsis">
Migrations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../development/typescript/" class="md-nav__link">
<span class="md-ellipsis">
TypeScript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../development/testing/" class="md-nav__link">
<span class="md-ellipsis">
Testing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../development/debugging/" class="md-nav__link">
<span class="md-ellipsis">
Debugging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../development/code-style/" class="md-nav__link">
<span class="md-ellipsis">
Code Style
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_10" >
<div class="md-nav__link md-nav__container">
<a href="../../api-reference/" class="md-nav__link ">
<span class="md-ellipsis">
API Reference
</span>
</a>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_10">
<span class="md-nav__icon md-icon"></span>
API Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_11" checked>
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<span class="md-ellipsis">
User Guides
</span>
</a>
<label class="md-nav__link " for="__nav_2_11" id="__nav_2_11_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_11_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2_11">
<span class="md-nav__icon md-icon"></span>
User Guides
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../admin-guide/" class="md-nav__link">
<span class="md-ellipsis">
Admin Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../campaign-manager-guide/" class="md-nav__link">
<span class="md-ellipsis">
Campaign Manager Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../map-organizer-guide/" class="md-nav__link">
<span class="md-ellipsis">
Map Organizer Guide
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Content Editor Guide
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Content Editor Guide
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#overview" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#getting-started" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
<nav class="md-nav" aria-label="Getting Started">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#content-editor-access" class="md-nav__link">
<span class="md-ellipsis">
Content Editor Access
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#content-areas" class="md-nav__link">
<span class="md-ellipsis">
Content Areas
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#creating-landing-pages" class="md-nav__link">
<span class="md-ellipsis">
Creating Landing Pages
</span>
</a>
<nav class="md-nav" aria-label="Creating Landing Pages">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#landing-page-overview" class="md-nav__link">
<span class="md-ellipsis">
Landing Page Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#creating-a-new-page" class="md-nav__link">
<span class="md-ellipsis">
Creating a New Page
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#page-editor-overview" class="md-nav__link">
<span class="md-ellipsis">
Page Editor Overview
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#using-the-visual-editor" class="md-nav__link">
<span class="md-ellipsis">
Using the Visual Editor
</span>
</a>
<nav class="md-nav" aria-label="Using the Visual Editor">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#editor-interface" class="md-nav__link">
<span class="md-ellipsis">
Editor Interface
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adding-blocks" class="md-nav__link">
<span class="md-ellipsis">
Adding Blocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#configuring-blocks" class="md-nav__link">
<span class="md-ellipsis">
Configuring Blocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#styling-blocks" class="md-nav__link">
<span class="md-ellipsis">
Styling Blocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-pre-built-components" class="md-nav__link">
<span class="md-ellipsis">
Using Pre-Built Components
</span>
</a>
<nav class="md-nav" aria-label="Using Pre-Built Components">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#hero-component" class="md-nav__link">
<span class="md-ellipsis">
Hero Component
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#features-component" class="md-nav__link">
<span class="md-ellipsis">
Features Component
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#testimonial-component" class="md-nav__link">
<span class="md-ellipsis">
Testimonial Component
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#call-to-action-component" class="md-nav__link">
<span class="md-ellipsis">
Call to Action Component
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#saving-your-page" class="md-nav__link">
<span class="md-ellipsis">
Saving Your Page
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#using-the-code-editor" class="md-nav__link">
<span class="md-ellipsis">
Using the Code Editor
</span>
</a>
<nav class="md-nav" aria-label="Using the Code Editor">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#switching-to-code-mode" class="md-nav__link">
<span class="md-ellipsis">
Switching to Code Mode
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#html-structure" class="md-nav__link">
<span class="md-ellipsis">
HTML Structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adding-custom-css" class="md-nav__link">
<span class="md-ellipsis">
Adding Custom CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-variables" class="md-nav__link">
<span class="md-ellipsis">
Using Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#keyboard-shortcuts-in-code-mode" class="md-nav__link">
<span class="md-ellipsis">
Keyboard Shortcuts in Code Mode
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#publishing-pages" class="md-nav__link">
<span class="md-ellipsis">
Publishing Pages
</span>
</a>
<nav class="md-nav" aria-label="Publishing Pages">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#publishing-workflow" class="md-nav__link">
<span class="md-ellipsis">
Publishing Workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#previewing-pages" class="md-nav__link">
<span class="md-ellipsis">
Previewing Pages
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#publishing-a-page" class="md-nav__link">
<span class="md-ellipsis">
Publishing a Page
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#seo-settings" class="md-nav__link">
<span class="md-ellipsis">
SEO Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mkdocs-export" class="md-nav__link">
<span class="md-ellipsis">
MkDocs Export
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#managing-email-templates" class="md-nav__link">
<span class="md-ellipsis">
Managing Email Templates
</span>
</a>
<nav class="md-nav" aria-label="Managing Email Templates">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#email-template-overview" class="md-nav__link">
<span class="md-ellipsis">
Email Template Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#email-template-structure" class="md-nav__link">
<span class="md-ellipsis">
Email Template Structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#editing-an-email-template" class="md-nav__link">
<span class="md-ellipsis">
Editing an Email Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-variables-in-templates" class="md-nav__link">
<span class="md-ellipsis">
Using Variables in Templates
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#html-email-best-practices" class="md-nav__link">
<span class="md-ellipsis">
HTML Email Best Practices
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#testing-email-templates" class="md-nav__link">
<span class="md-ellipsis">
Testing Email Templates
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#managing-the-media-library" class="md-nav__link">
<span class="md-ellipsis">
Managing the Media Library
</span>
</a>
<nav class="md-nav" aria-label="Managing the Media Library">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#media-library-overview" class="md-nav__link">
<span class="md-ellipsis">
Media Library Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#uploading-videos" class="md-nav__link">
<span class="md-ellipsis">
Uploading Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#video-metadata" class="md-nav__link">
<span class="md-ellipsis">
Video Metadata
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#automatic-metadata-extraction" class="md-nav__link">
<span class="md-ellipsis">
Automatic Metadata Extraction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#organizing-videos" class="md-nav__link">
<span class="md-ellipsis">
Organizing Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#filtering-and-searching-videos" class="md-nav__link">
<span class="md-ellipsis">
Filtering and Searching Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#editing-video-metadata" class="md-nav__link">
<span class="md-ellipsis">
Editing Video Metadata
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#deleting-videos" class="md-nav__link">
<span class="md-ellipsis">
Deleting Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#locking-videos" class="md-nav__link">
<span class="md-ellipsis">
Locking Videos
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#sharing-videos-publicly" class="md-nav__link">
<span class="md-ellipsis">
Sharing Videos Publicly
</span>
</a>
<nav class="md-nav" aria-label="Sharing Videos Publicly">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#public-media-gallery" class="md-nav__link">
<span class="md-ellipsis">
Public Media Gallery
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#sharing-videos" class="md-nav__link">
<span class="md-ellipsis">
Sharing Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#managing-shared-media" class="md-nav__link">
<span class="md-ellipsis">
Managing Shared Media
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#public-gallery-customization" class="md-nav__link">
<span class="md-ellipsis">
Public Gallery Customization
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#content-best-practices" class="md-nav__link">
<span class="md-ellipsis">
Content Best Practices
</span>
</a>
<nav class="md-nav" aria-label="Content Best Practices">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#writing-for-the-web" class="md-nav__link">
<span class="md-ellipsis">
Writing for the Web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mobile-optimization" class="md-nav__link">
<span class="md-ellipsis">
Mobile Optimization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#seo-optimization" class="md-nav__link">
<span class="md-ellipsis">
SEO Optimization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#accessibility" class="md-nav__link">
<span class="md-ellipsis">
Accessibility
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#troubleshooting" class="md-nav__link">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
<nav class="md-nav" aria-label="Troubleshooting">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#landing-pages" class="md-nav__link">
<span class="md-ellipsis">
Landing Pages
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#email-templates" class="md-nav__link">
<span class="md-ellipsis">
Email Templates
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#media-library" class="md-nav__link">
<span class="md-ellipsis">
Media Library
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#related-documentation" class="md-nav__link">
<span class="md-ellipsis">
Related Documentation
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../volunteer-guide/" class="md-nav__link">
<span class="md-ellipsis">
Volunteer Guide
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_12" >
<div class="md-nav__link md-nav__container">
<a href="../../troubleshooting/" class="md-nav__link ">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
<label class="md-nav__link " for="__nav_2_12" id="__nav_2_12_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_12">
<span class="md-nav__icon md-icon"></span>
Troubleshooting
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../troubleshooting/faq/" class="md-nav__link">
<span class="md-ellipsis">
FAQ
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../troubleshooting/common-errors/" class="md-nav__link">
<span class="md-ellipsis">
Common Errors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../troubleshooting/auth-issues/" class="md-nav__link">
<span class="md-ellipsis">
Auth Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../troubleshooting/database-issues/" class="md-nav__link">
<span class="md-ellipsis">
Database Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../troubleshooting/docker-issues/" class="md-nav__link">
<span class="md-ellipsis">
Docker Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../troubleshooting/email-issues/" class="md-nav__link">
<span class="md-ellipsis">
Email Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../troubleshooting/geocoding-issues/" class="md-nav__link">
<span class="md-ellipsis">
Geocoding Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../troubleshooting/monitoring-issues/" class="md-nav__link">
<span class="md-ellipsis">
Monitoring Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../troubleshooting/performance-optimization/" class="md-nav__link">
<span class="md-ellipsis">
Performance Optimization
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_13" >
<div class="md-nav__link md-nav__container">
<a href="../../migration/" class="md-nav__link ">
<span class="md-ellipsis">
Migration
</span>
</a>
<label class="md-nav__link " for="__nav_2_13" id="__nav_2_13_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_13_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_13">
<span class="md-nav__icon md-icon"></span>
Migration
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../migration/feature-parity/" class="md-nav__link">
<span class="md-ellipsis">
Feature Parity
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../migration/breaking-changes/" class="md-nav__link">
<span class="md-ellipsis">
Breaking Changes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../migration/api-changes/" class="md-nav__link">
<span class="md-ellipsis">
API Changes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../migration/data-migration/" class="md-nav__link">
<span class="md-ellipsis">
Data Migration
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_14" >
<div class="md-nav__link md-nav__container">
<a href="../../contributing/" class="md-nav__link ">
<span class="md-ellipsis">
Contributing
</span>
</a>
<label class="md-nav__link " for="__nav_2_14" id="__nav_2_14_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_14">
<span class="md-nav__icon md-icon"></span>
Contributing
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../contributing/development-setup/" class="md-nav__link">
<span class="md-ellipsis">
Development Setup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/code-of-conduct/" class="md-nav__link">
<span class="md-ellipsis">
Code of Conduct
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/pull-requests/" class="md-nav__link">
<span class="md-ellipsis">
Pull Requests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/roadmap/" class="md-nav__link">
<span class="md-ellipsis">
Roadmap
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../phil/" class="md-nav__link">
<span class="md-ellipsis">
Philosophy
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../v1/" class="md-nav__link">
<span class="md-ellipsis">
V1 Documentation (Legacy)
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../blog/" class="md-nav__link">
<span class="md-ellipsis">
Blog
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#overview" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#getting-started" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
<nav class="md-nav" aria-label="Getting Started">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#content-editor-access" class="md-nav__link">
<span class="md-ellipsis">
Content Editor Access
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#content-areas" class="md-nav__link">
<span class="md-ellipsis">
Content Areas
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#creating-landing-pages" class="md-nav__link">
<span class="md-ellipsis">
Creating Landing Pages
</span>
</a>
<nav class="md-nav" aria-label="Creating Landing Pages">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#landing-page-overview" class="md-nav__link">
<span class="md-ellipsis">
Landing Page Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#creating-a-new-page" class="md-nav__link">
<span class="md-ellipsis">
Creating a New Page
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#page-editor-overview" class="md-nav__link">
<span class="md-ellipsis">
Page Editor Overview
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#using-the-visual-editor" class="md-nav__link">
<span class="md-ellipsis">
Using the Visual Editor
</span>
</a>
<nav class="md-nav" aria-label="Using the Visual Editor">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#editor-interface" class="md-nav__link">
<span class="md-ellipsis">
Editor Interface
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adding-blocks" class="md-nav__link">
<span class="md-ellipsis">
Adding Blocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#configuring-blocks" class="md-nav__link">
<span class="md-ellipsis">
Configuring Blocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#styling-blocks" class="md-nav__link">
<span class="md-ellipsis">
Styling Blocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-pre-built-components" class="md-nav__link">
<span class="md-ellipsis">
Using Pre-Built Components
</span>
</a>
<nav class="md-nav" aria-label="Using Pre-Built Components">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#hero-component" class="md-nav__link">
<span class="md-ellipsis">
Hero Component
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#features-component" class="md-nav__link">
<span class="md-ellipsis">
Features Component
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#testimonial-component" class="md-nav__link">
<span class="md-ellipsis">
Testimonial Component
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#call-to-action-component" class="md-nav__link">
<span class="md-ellipsis">
Call to Action Component
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#saving-your-page" class="md-nav__link">
<span class="md-ellipsis">
Saving Your Page
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#using-the-code-editor" class="md-nav__link">
<span class="md-ellipsis">
Using the Code Editor
</span>
</a>
<nav class="md-nav" aria-label="Using the Code Editor">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#switching-to-code-mode" class="md-nav__link">
<span class="md-ellipsis">
Switching to Code Mode
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#html-structure" class="md-nav__link">
<span class="md-ellipsis">
HTML Structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adding-custom-css" class="md-nav__link">
<span class="md-ellipsis">
Adding Custom CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-variables" class="md-nav__link">
<span class="md-ellipsis">
Using Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#keyboard-shortcuts-in-code-mode" class="md-nav__link">
<span class="md-ellipsis">
Keyboard Shortcuts in Code Mode
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#publishing-pages" class="md-nav__link">
<span class="md-ellipsis">
Publishing Pages
</span>
</a>
<nav class="md-nav" aria-label="Publishing Pages">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#publishing-workflow" class="md-nav__link">
<span class="md-ellipsis">
Publishing Workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#previewing-pages" class="md-nav__link">
<span class="md-ellipsis">
Previewing Pages
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#publishing-a-page" class="md-nav__link">
<span class="md-ellipsis">
Publishing a Page
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#seo-settings" class="md-nav__link">
<span class="md-ellipsis">
SEO Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mkdocs-export" class="md-nav__link">
<span class="md-ellipsis">
MkDocs Export
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#managing-email-templates" class="md-nav__link">
<span class="md-ellipsis">
Managing Email Templates
</span>
</a>
<nav class="md-nav" aria-label="Managing Email Templates">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#email-template-overview" class="md-nav__link">
<span class="md-ellipsis">
Email Template Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#email-template-structure" class="md-nav__link">
<span class="md-ellipsis">
Email Template Structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#editing-an-email-template" class="md-nav__link">
<span class="md-ellipsis">
Editing an Email Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-variables-in-templates" class="md-nav__link">
<span class="md-ellipsis">
Using Variables in Templates
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#html-email-best-practices" class="md-nav__link">
<span class="md-ellipsis">
HTML Email Best Practices
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#testing-email-templates" class="md-nav__link">
<span class="md-ellipsis">
Testing Email Templates
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#managing-the-media-library" class="md-nav__link">
<span class="md-ellipsis">
Managing the Media Library
</span>
</a>
<nav class="md-nav" aria-label="Managing the Media Library">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#media-library-overview" class="md-nav__link">
<span class="md-ellipsis">
Media Library Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#uploading-videos" class="md-nav__link">
<span class="md-ellipsis">
Uploading Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#video-metadata" class="md-nav__link">
<span class="md-ellipsis">
Video Metadata
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#automatic-metadata-extraction" class="md-nav__link">
<span class="md-ellipsis">
Automatic Metadata Extraction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#organizing-videos" class="md-nav__link">
<span class="md-ellipsis">
Organizing Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#filtering-and-searching-videos" class="md-nav__link">
<span class="md-ellipsis">
Filtering and Searching Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#editing-video-metadata" class="md-nav__link">
<span class="md-ellipsis">
Editing Video Metadata
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#deleting-videos" class="md-nav__link">
<span class="md-ellipsis">
Deleting Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#locking-videos" class="md-nav__link">
<span class="md-ellipsis">
Locking Videos
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#sharing-videos-publicly" class="md-nav__link">
<span class="md-ellipsis">
Sharing Videos Publicly
</span>
</a>
<nav class="md-nav" aria-label="Sharing Videos Publicly">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#public-media-gallery" class="md-nav__link">
<span class="md-ellipsis">
Public Media Gallery
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#sharing-videos" class="md-nav__link">
<span class="md-ellipsis">
Sharing Videos
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#managing-shared-media" class="md-nav__link">
<span class="md-ellipsis">
Managing Shared Media
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#public-gallery-customization" class="md-nav__link">
<span class="md-ellipsis">
Public Gallery Customization
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#content-best-practices" class="md-nav__link">
<span class="md-ellipsis">
Content Best Practices
</span>
</a>
<nav class="md-nav" aria-label="Content Best Practices">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#writing-for-the-web" class="md-nav__link">
<span class="md-ellipsis">
Writing for the Web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mobile-optimization" class="md-nav__link">
<span class="md-ellipsis">
Mobile Optimization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#seo-optimization" class="md-nav__link">
<span class="md-ellipsis">
SEO Optimization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#accessibility" class="md-nav__link">
<span class="md-ellipsis">
Accessibility
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#troubleshooting" class="md-nav__link">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
<nav class="md-nav" aria-label="Troubleshooting">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#landing-pages" class="md-nav__link">
<span class="md-ellipsis">
Landing Pages
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#email-templates" class="md-nav__link">
<span class="md-ellipsis">
Email Templates
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#media-library" class="md-nav__link">
<span class="md-ellipsis">
Media Library
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#related-documentation" class="md-nav__link">
<span class="md-ellipsis">
Related Documentation
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<nav class="md-path" aria-label="Navigation" >
<ol class="md-path__list">
<li class="md-path__item">
<a href="../../.." class="md-path__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-path__item">
<a href="../../" class="md-path__link">
<span class="md-ellipsis">
V2 Documentation
</span>
</a>
</li>
<li class="md-path__item">
<a href="../" class="md-path__link">
<span class="md-ellipsis">
User Guides
</span>
</a>
</li>
</ol>
</nav>
<article class="md-content__inner md-typeset">
<a href="https://gitea.bnkops.com/admin/changemaker.lite/src/branch/main/mkdocs/docs/v2/user-guides/content-editor-guide.md" title="Edit this page" class="md-content__button md-icon" rel="edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg>
</a>
<a href="https://gitea.bnkops.com/admin/changemaker.lite/src/branch/main/mkdocs/docs/v2/user-guides/content-rawor-guide.md" title="View source of this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg>
</a>
<h1 id="content-editor-guide">Content Editor Guide<a class="headerlink" href="#content-editor-guide" title="Permanent link">&para;</a></h1>
<h2 id="overview">Overview<a class="headerlink" href="#overview" title="Permanent link">&para;</a></h2>
<p>As a Content Editor, you're responsible for creating and managing public-facing content in Changemaker Lite, including:</p>
<ul>
<li><strong>Landing pages</strong>: Custom web pages using the visual editor</li>
<li><strong>Email templates</strong>: System email templates (welcome, password reset, shift reminders)</li>
<li><strong>Media library</strong>: Video uploads and organization (if enabled)</li>
</ul>
<p>This guide will help you create professional, engaging content that drives participation in your campaigns and volunteer activities.</p>
<hr />
<h2 id="getting-started">Getting Started<a class="headerlink" href="#getting-started" title="Permanent link">&para;</a></h2>
<h3 id="content-editor-access">Content Editor Access<a class="headerlink" href="#content-editor-access" title="Permanent link">&para;</a></h3>
<p>Content editing features are available to:</p>
<ul>
<li><strong>SUPER_ADMIN</strong>: Full access to all content features</li>
<li><strong>INFLUENCE_ADMIN</strong>: Email templates (for campaign-related emails)</li>
<li><strong>MAP_ADMIN</strong>: Email templates (for shift-related emails)</li>
</ul>
<p>Landing pages and media library are typically managed by SUPER_ADMIN only.</p>
<h3 id="content-areas">Content Areas<a class="headerlink" href="#content-areas" title="Permanent link">&para;</a></h3>
<p><strong>1. Landing Pages</strong> (<code>/app/pages</code>)</p>
<ul>
<li>Custom public pages at <code>/p/[slug]</code></li>
<li>Visual editor (GrapesJS) or code editor</li>
<li>Use for: Campaign pages, donation pages, event pages</li>
</ul>
<p><strong>2. Email Templates</strong> (<code>/app/email-templates</code>)</p>
<ul>
<li>System email templates</li>
<li>HTML + plain text versions</li>
<li>Use for: Welcome emails, shift reminders, password resets</li>
</ul>
<p><strong>3. Media Library</strong> (<code>/app/media/library</code>, if enabled)</p>
<ul>
<li>Video uploads and organization</li>
<li>Shareable public gallery</li>
<li>Use for: Testimonials, events, educational content</li>
</ul>
<hr />
<h2 id="creating-landing-pages">Creating Landing Pages<a class="headerlink" href="#creating-landing-pages" title="Permanent link">&para;</a></h2>
<h3 id="landing-page-overview">Landing Page Overview<a class="headerlink" href="#landing-page-overview" title="Permanent link">&para;</a></h3>
<p>Landing pages are custom web pages published at <code>/p/[slug]</code>. Use them for:</p>
<ul>
<li><strong>Campaign-specific pages</strong>: Dedicated page for a major campaign</li>
<li><strong>Event registration</strong>: Custom signup forms for events</li>
<li><strong>Donation pages</strong>: Integrated donation forms</li>
<li><strong>About pages</strong>: "About Us", "Our Team", "Our Mission"</li>
<li><strong>Volunteer recruitment</strong>: Custom volunteer signup pages</li>
</ul>
<h3 id="creating-a-new-page">Creating a New Page<a class="headerlink" href="#creating-a-new-page" title="Permanent link">&para;</a></h3>
<p><strong>To create a landing page:</strong></p>
<ol>
<li>Navigate to <strong>Content &gt; Landing Pages</strong></li>
<li>Click <strong>"Create Page"</strong></li>
<li>Fill in page details:</li>
<li><strong>Title</strong>: Page title (shown in browser tab, used for SEO)</li>
<li><strong>Slug</strong>: URL identifier (e.g., <code>about-us</code><code>/p/about-us</code>)</li>
<li><strong>Description</strong>: Meta description for SEO (160 characters max)</li>
<li><strong>Status</strong>: DRAFT or PUBLISHED</li>
<li>Click <strong>"Create"</strong></li>
<li>Click <strong>"Edit"</strong> to open the page editor</li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Create Page modal showing title, slug, description, and status fields</em></p>
<h3 id="page-editor-overview">Page Editor Overview<a class="headerlink" href="#page-editor-overview" title="Permanent link">&para;</a></h3>
<p>The page editor has two modes:</p>
<p><strong>Visual Mode</strong> (default):</p>
<ul>
<li>Drag-and-drop interface (GrapesJS)</li>
<li>No coding required</li>
<li>What-you-see-is-what-you-get (WYSIWYG)</li>
<li>Best for: Non-technical users, quick page creation</li>
</ul>
<p><strong>Code Mode</strong>:</p>
<ul>
<li>HTML/CSS editor</li>
<li>Full control over markup</li>
<li>Best for: Experienced users, complex layouts</li>
</ul>
<p><strong>Switch modes</strong> using the tabs at the top of the editor.</p>
<p><strong>Screenshot placeholder</strong>: <em>Page editor showing Visual/Code mode tabs and toolbar</em></p>
<div class="admonition warning">
<p class="admonition-title">Desktop Only</p>
<p>The page editor is designed for desktop use (minimum 1024px width). Mobile users will see a warning to switch to desktop.</p>
</div>
<hr />
<h2 id="using-the-visual-editor">Using the Visual Editor<a class="headerlink" href="#using-the-visual-editor" title="Permanent link">&para;</a></h2>
<h3 id="editor-interface">Editor Interface<a class="headerlink" href="#editor-interface" title="Permanent link">&para;</a></h3>
<p>The visual editor has three main areas:</p>
<p><strong>1. Canvas</strong> (center):</p>
<ul>
<li>Preview of your page</li>
<li>Click blocks to select</li>
<li>Drag to reposition</li>
</ul>
<p><strong>2. Block Toolbar</strong> (left):</p>
<ul>
<li>Drag blocks onto canvas</li>
<li>Categories: Layout, Text, Media, Forms, Components</li>
</ul>
<p><strong>3. Settings Panel</strong> (right):</p>
<ul>
<li>Style selected block</li>
<li>Adjust colors, fonts, spacing</li>
<li>Configure block settings</li>
</ul>
<p><strong>Screenshot placeholder</strong>: <em>Visual editor showing block toolbar, canvas, and settings panel</em></p>
<h3 id="adding-blocks">Adding Blocks<a class="headerlink" href="#adding-blocks" title="Permanent link">&para;</a></h3>
<p><strong>To add a block:</strong></p>
<ol>
<li>Find block in left toolbar (or search)</li>
<li>Drag block onto canvas</li>
<li>Drop where you want it</li>
</ol>
<p><strong>Available block categories:</strong></p>
<p><strong>Layout:</strong></p>
<ul>
<li><strong>Section</strong>: Full-width container</li>
<li><strong>Container</strong>: Centered content wrapper</li>
<li><strong>Row</strong>: Multi-column row</li>
<li><strong>Column</strong>: Single column within row</li>
</ul>
<p><strong>Text:</strong></p>
<ul>
<li><strong>Text</strong>: Paragraph text</li>
<li><strong>Heading</strong>: H1, H2, H3 headings</li>
<li><strong>Quote</strong>: Blockquote</li>
<li><strong>List</strong>: Bulleted or numbered list</li>
</ul>
<p><strong>Media:</strong></p>
<ul>
<li><strong>Image</strong>: Single image</li>
<li><strong>Video</strong>: Embedded video (YouTube, Vimeo, or self-hosted)</li>
<li><strong>Icon</strong>: Font Awesome icon</li>
</ul>
<p><strong>Forms:</strong></p>
<ul>
<li><strong>Form</strong>: Form container</li>
<li><strong>Input</strong>: Text input field</li>
<li><strong>Textarea</strong>: Multi-line text input</li>
<li><strong>Button</strong>: Submit button</li>
</ul>
<p><strong>Components</strong> (custom blocks):</p>
<ul>
<li><strong>Hero</strong>: Large header with background image and CTA</li>
<li><strong>Features</strong>: Three-column feature grid</li>
<li><strong>Testimonial</strong>: Quote with author photo</li>
<li><strong>Call to Action</strong>: Centered CTA with button</li>
<li><strong>Stats</strong>: Number counter grid</li>
</ul>
<p><strong>Screenshot placeholder</strong>: <em>Block toolbar showing categories and block preview thumbnails</em></p>
<h3 id="configuring-blocks">Configuring Blocks<a class="headerlink" href="#configuring-blocks" title="Permanent link">&para;</a></h3>
<p><strong>To configure a block:</strong></p>
<ol>
<li>Click the block on canvas (selects it)</li>
<li>Settings panel opens on right</li>
<li>Adjust settings (varies by block type)</li>
</ol>
<p><strong>Common settings:</strong></p>
<p><strong>Style tab:</strong></p>
<ul>
<li><strong>Typography</strong>: Font family, size, weight, color</li>
<li><strong>Spacing</strong>: Margin, padding</li>
<li><strong>Background</strong>: Color, image, gradient</li>
<li><strong>Border</strong>: Width, color, radius</li>
<li><strong>Dimensions</strong>: Width, height</li>
</ul>
<p><strong>Settings tab</strong> (varies by block):</p>
<ul>
<li><strong>Image</strong>: URL, alt text, link</li>
<li><strong>Video</strong>: Video URL, autoplay, controls</li>
<li><strong>Button</strong>: Text, link, style</li>
<li><strong>Form</strong>: Action URL, method</li>
</ul>
<p><strong>Screenshot placeholder</strong>: <em>Settings panel showing style options for a selected heading block</em></p>
<h3 id="styling-blocks">Styling Blocks<a class="headerlink" href="#styling-blocks" title="Permanent link">&para;</a></h3>
<p><strong>To change text color:</strong></p>
<ol>
<li>Select text block</li>
<li>Settings panel &gt; Style tab</li>
<li>Color picker under Typography</li>
<li>Choose color or enter hex code</li>
</ol>
<p><strong>To change background:</strong></p>
<ol>
<li>Select section or container block</li>
<li>Settings panel &gt; Style tab</li>
<li>Background section</li>
<li>Choose color, image, or gradient</li>
</ol>
<p><strong>To adjust spacing:</strong></p>
<ol>
<li>Select block</li>
<li>Settings panel &gt; Style tab</li>
<li>Margin/Padding section</li>
<li>Adjust top, right, bottom, left values</li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Background settings showing color picker, image upload, and gradient options</em></p>
<h3 id="using-pre-built-components">Using Pre-Built Components<a class="headerlink" href="#using-pre-built-components" title="Permanent link">&para;</a></h3>
<p>Changemaker Lite includes pre-built components for common page sections:</p>
<h4 id="hero-component">Hero Component<a class="headerlink" href="#hero-component" title="Permanent link">&para;</a></h4>
<p><strong>What it is:</strong> Large header section with background image, headline, and call-to-action button</p>
<p><strong>How to use:</strong></p>
<ol>
<li>Drag <strong>Hero</strong> block from Components category</li>
<li>Click headline to edit text</li>
<li>Click button to edit text and link</li>
<li>Select block, then in settings:</li>
<li>Upload background image</li>
<li>Adjust overlay opacity</li>
<li>Change text color</li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Hero component on canvas showing headline, subheading, and CTA button</em></p>
<h4 id="features-component">Features Component<a class="headerlink" href="#features-component" title="Permanent link">&para;</a></h4>
<p><strong>What it is:</strong> Three-column grid showcasing features or benefits</p>
<p><strong>How to use:</strong></p>
<ol>
<li>Drag <strong>Features</strong> block onto canvas</li>
<li>Click each feature to edit:</li>
<li>Icon (Font Awesome icon name)</li>
<li>Heading</li>
<li>Description</li>
<li>Adjust colors and spacing in settings panel</li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Features component showing three columns with icons, headings, and text</em></p>
<h4 id="testimonial-component">Testimonial Component<a class="headerlink" href="#testimonial-component" title="Permanent link">&para;</a></h4>
<p><strong>What it is:</strong> Quote with author photo and name</p>
<p><strong>How to use:</strong></p>
<ol>
<li>Drag <strong>Testimonial</strong> block onto canvas</li>
<li>Click quote text to edit</li>
<li>Click author name to edit</li>
<li>Upload author photo in settings panel</li>
</ol>
<h4 id="call-to-action-component">Call to Action Component<a class="headerlink" href="#call-to-action-component" title="Permanent link">&para;</a></h4>
<p><strong>What it is:</strong> Centered section with headline and button</p>
<p><strong>How to use:</strong></p>
<ol>
<li>Drag <strong>Call to Action</strong> block onto canvas</li>
<li>Edit headline and description</li>
<li>Edit button text and link</li>
<li>Adjust background color</li>
</ol>
<h3 id="saving-your-page">Saving Your Page<a class="headerlink" href="#saving-your-page" title="Permanent link">&para;</a></h3>
<p><strong>To save changes:</strong></p>
<p><strong>Method 1: Keyboard shortcut</strong></p>
<ul>
<li>Press <strong>Ctrl+S</strong> (Windows/Linux) or <strong>Cmd+S</strong> (Mac)</li>
</ul>
<p><strong>Method 2: Save button</strong></p>
<ul>
<li>Click <strong>"Save"</strong> button in editor toolbar</li>
</ul>
<p><strong>Auto-save:</strong></p>
<ul>
<li>Changes are NOT auto-saved</li>
<li>Save frequently to avoid losing work</li>
</ul>
<div class="admonition tip">
<p class="admonition-title">Save Often</p>
<p>Use Ctrl+S frequently. Browser crashes or network issues can cause unsaved work to be lost.</p>
</div>
<p><strong>Screenshot placeholder</strong>: <em>Save button in editor toolbar</em></p>
<hr />
<h2 id="using-the-code-editor">Using the Code Editor<a class="headerlink" href="#using-the-code-editor" title="Permanent link">&para;</a></h2>
<h3 id="switching-to-code-mode">Switching to Code Mode<a class="headerlink" href="#switching-to-code-mode" title="Permanent link">&para;</a></h3>
<p><strong>To switch to code editor:</strong></p>
<ol>
<li>Click <strong>"Code"</strong> tab at top of editor</li>
<li>HTML code appears in text editor</li>
<li>Edit HTML directly</li>
<li>Click <strong>"Visual"</strong> tab to return to visual mode</li>
</ol>
<p><strong>When to use code mode:</strong></p>
<ul>
<li>Need precise control over HTML structure</li>
<li>Adding custom CSS or JavaScript</li>
<li>Copying HTML from another source</li>
<li>Working with complex layouts</li>
</ul>
<p><strong>Screenshot placeholder</strong>: <em>Code editor showing HTML markup in text editor</em></p>
<h3 id="html-structure">HTML Structure<a class="headerlink" href="#html-structure" title="Permanent link">&para;</a></h3>
<p><strong>Basic page structure:</strong></p>
<div class="language-html highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
</span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Page Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span><span id="__span-0-6"><a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
</span><span id="__span-0-7"><a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a><span class="w"> </span><span class="c">/* CSS goes here */</span>
</span><span id="__span-0-8"><a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a><span class="w"> </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</span><span id="__span-0-9"><a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span><span id="__span-0-10"><a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span><span id="__span-0-11"><a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a> <span class="cm">&lt;!-- Page content goes here --&gt;</span>
</span><span id="__span-0-12"><a id="__codelineno-0-12" name="__codelineno-0-12" href="#__codelineno-0-12"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span><span id="__span-0-13"><a id="__codelineno-0-13" name="__codelineno-0-13" href="#__codelineno-0-13"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</span></code></pre></div>
<p><strong>Recommended structure:</strong></p>
<div class="language-html highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a> <span class="cm">&lt;!-- Hero Section --&gt;</span>
</span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a> <span class="p">&lt;</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;hero&quot;</span><span class="p">&gt;</span>
</span><span id="__span-1-4"><a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Welcome to Our Campaign<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span><span id="__span-1-5"><a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Join us in making a difference.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-1-6"><a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/campaigns/climate-action&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn&quot;</span><span class="p">&gt;</span>Take Action<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</span><span id="__span-1-7"><a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a> <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
</span><span id="__span-1-8"><a id="__codelineno-1-8" name="__codelineno-1-8" href="#__codelineno-1-8"></a>
</span><span id="__span-1-9"><a id="__codelineno-1-9" name="__codelineno-1-9" href="#__codelineno-1-9"></a> <span class="cm">&lt;!-- Features Section --&gt;</span>
</span><span id="__span-1-10"><a id="__codelineno-1-10" name="__codelineno-1-10" href="#__codelineno-1-10"></a> <span class="p">&lt;</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;features&quot;</span><span class="p">&gt;</span>
</span><span id="__span-1-11"><a id="__codelineno-1-11" name="__codelineno-1-11" href="#__codelineno-1-11"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container&quot;</span><span class="p">&gt;</span>
</span><span id="__span-1-12"><a id="__codelineno-1-12" name="__codelineno-1-12" href="#__codelineno-1-12"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row&quot;</span><span class="p">&gt;</span>
</span><span id="__span-1-13"><a id="__codelineno-1-13" name="__codelineno-1-13" href="#__codelineno-1-13"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col&quot;</span><span class="p">&gt;</span>
</span><span id="__span-1-14"><a id="__codelineno-1-14" name="__codelineno-1-14" href="#__codelineno-1-14"></a> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>Easy to Use<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
</span><span id="__span-1-15"><a id="__codelineno-1-15" name="__codelineno-1-15" href="#__codelineno-1-15"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Send emails in under 2 minutes.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-1-16"><a id="__codelineno-1-16" name="__codelineno-1-16" href="#__codelineno-1-16"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span><span id="__span-1-17"><a id="__codelineno-1-17" name="__codelineno-1-17" href="#__codelineno-1-17"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col&quot;</span><span class="p">&gt;</span>
</span><span id="__span-1-18"><a id="__codelineno-1-18" name="__codelineno-1-18" href="#__codelineno-1-18"></a> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>High Impact<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
</span><span id="__span-1-19"><a id="__codelineno-1-19" name="__codelineno-1-19" href="#__codelineno-1-19"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Your voice reaches decision-makers.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-1-20"><a id="__codelineno-1-20" name="__codelineno-1-20" href="#__codelineno-1-20"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span><span id="__span-1-21"><a id="__codelineno-1-21" name="__codelineno-1-21" href="#__codelineno-1-21"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col&quot;</span><span class="p">&gt;</span>
</span><span id="__span-1-22"><a id="__codelineno-1-22" name="__codelineno-1-22" href="#__codelineno-1-22"></a> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>Community<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
</span><span id="__span-1-23"><a id="__codelineno-1-23" name="__codelineno-1-23" href="#__codelineno-1-23"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Join thousands of advocates.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-1-24"><a id="__codelineno-1-24" name="__codelineno-1-24" href="#__codelineno-1-24"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span><span id="__span-1-25"><a id="__codelineno-1-25" name="__codelineno-1-25" href="#__codelineno-1-25"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span><span id="__span-1-26"><a id="__codelineno-1-26" name="__codelineno-1-26" href="#__codelineno-1-26"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span><span id="__span-1-27"><a id="__codelineno-1-27" name="__codelineno-1-27" href="#__codelineno-1-27"></a> <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
</span><span id="__span-1-28"><a id="__codelineno-1-28" name="__codelineno-1-28" href="#__codelineno-1-28"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></code></pre></div>
<h3 id="adding-custom-css">Adding Custom CSS<a class="headerlink" href="#adding-custom-css" title="Permanent link">&para;</a></h3>
<p><strong>To add custom styles:</strong></p>
<ol>
<li>In code mode, add a <code>&lt;style&gt;</code> block in the <code>&lt;head&gt;</code>:</li>
</ol>
<div class="language-html highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
</span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="w"> </span><span class="p">.</span><span class="nc">hero</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-2-4"><a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="nb">linear-gradient</span><span class="p">(</span><span class="mi">135</span><span class="kt">deg</span><span class="p">,</span><span class="w"> </span><span class="mh">#667eea</span><span class="w"> </span><span class="mi">0</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mh">#764ba2</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">);</span>
</span><span id="__span-2-5"><a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">white</span><span class="p">;</span>
</span><span id="__span-2-6"><a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">px</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
</span><span id="__span-2-7"><a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a><span class="w"> </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
</span><span id="__span-2-8"><a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-2-9"><a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a>
</span><span id="__span-2-10"><a id="__codelineno-2-10" name="__codelineno-2-10" href="#__codelineno-2-10"></a><span class="w"> </span><span class="p">.</span><span class="nc">hero</span><span class="w"> </span><span class="nt">h1</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-2-11"><a id="__codelineno-2-11" name="__codelineno-2-11" href="#__codelineno-2-11"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="kt">rem</span><span class="p">;</span>
</span><span id="__span-2-12"><a id="__codelineno-2-12" name="__codelineno-2-12" href="#__codelineno-2-12"></a><span class="w"> </span><span class="k">margin-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
</span><span id="__span-2-13"><a id="__codelineno-2-13" name="__codelineno-2-13" href="#__codelineno-2-13"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-2-14"><a id="__codelineno-2-14" name="__codelineno-2-14" href="#__codelineno-2-14"></a>
</span><span id="__span-2-15"><a id="__codelineno-2-15" name="__codelineno-2-15" href="#__codelineno-2-15"></a><span class="w"> </span><span class="p">.</span><span class="nc">btn</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-2-16"><a id="__codelineno-2-16" name="__codelineno-2-16" href="#__codelineno-2-16"></a><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#ff6b6b</span><span class="p">;</span>
</span><span id="__span-2-17"><a id="__codelineno-2-17" name="__codelineno-2-17" href="#__codelineno-2-17"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">white</span><span class="p">;</span>
</span><span id="__span-2-18"><a id="__codelineno-2-18" name="__codelineno-2-18" href="#__codelineno-2-18"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
</span><span id="__span-2-19"><a id="__codelineno-2-19" name="__codelineno-2-19" href="#__codelineno-2-19"></a><span class="w"> </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
</span><span id="__span-2-20"><a id="__codelineno-2-20" name="__codelineno-2-20" href="#__codelineno-2-20"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
</span><span id="__span-2-21"><a id="__codelineno-2-21" name="__codelineno-2-21" href="#__codelineno-2-21"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">inline-block</span><span class="p">;</span>
</span><span id="__span-2-22"><a id="__codelineno-2-22" name="__codelineno-2-22" href="#__codelineno-2-22"></a><span class="w"> </span><span class="k">margin-top</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
</span><span id="__span-2-23"><a id="__codelineno-2-23" name="__codelineno-2-23" href="#__codelineno-2-23"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-2-24"><a id="__codelineno-2-24" name="__codelineno-2-24" href="#__codelineno-2-24"></a>
</span><span id="__span-2-25"><a id="__codelineno-2-25" name="__codelineno-2-25" href="#__codelineno-2-25"></a><span class="w"> </span><span class="p">.</span><span class="nc">btn</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-2-26"><a id="__codelineno-2-26" name="__codelineno-2-26" href="#__codelineno-2-26"></a><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#ee5a52</span><span class="p">;</span>
</span><span id="__span-2-27"><a id="__codelineno-2-27" name="__codelineno-2-27" href="#__codelineno-2-27"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-2-28"><a id="__codelineno-2-28" name="__codelineno-2-28" href="#__codelineno-2-28"></a><span class="w"> </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</span><span id="__span-2-29"><a id="__codelineno-2-29" name="__codelineno-2-29" href="#__codelineno-2-29"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></code></pre></div>
<h3 id="using-variables">Using Variables<a class="headerlink" href="#using-variables" title="Permanent link">&para;</a></h3>
<p>Landing pages support variable interpolation:</p>
<p><strong>Available variables:</strong></p>
<ul>
<li><code>{{SITE_NAME}}</code> — Organization name (from settings)</li>
<li><code>{{SITE_URL}}</code> — Website URL</li>
<li><code>{{USER_NAME}}</code> — Logged-in user's name (if authenticated)</li>
</ul>
<p><strong>Example usage:</strong></p>
<div class="language-html highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Welcome to {{SITE_NAME}}, {{USER_NAME}}!<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></code></pre></div>
<p>Renders as:</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a>Welcome to Community Action Network, John Smith!
</span></code></pre></div>
<h3 id="keyboard-shortcuts-in-code-mode">Keyboard Shortcuts in Code Mode<a class="headerlink" href="#keyboard-shortcuts-in-code-mode" title="Permanent link">&para;</a></h3>
<ul>
<li><strong>Ctrl+S</strong> / <strong>Cmd+S</strong>: Save</li>
<li><strong>Ctrl+F</strong> / <strong>Cmd+F</strong>: Find</li>
<li><strong>Ctrl+H</strong> / <strong>Cmd+H</strong>: Find and replace</li>
<li><strong>Tab</strong>: Indent</li>
<li><strong>Shift+Tab</strong>: Unindent</li>
</ul>
<hr />
<h2 id="publishing-pages">Publishing Pages<a class="headerlink" href="#publishing-pages" title="Permanent link">&para;</a></h2>
<h3 id="publishing-workflow">Publishing Workflow<a class="headerlink" href="#publishing-workflow" title="Permanent link">&para;</a></h3>
<p><strong>Draft → Published:</strong></p>
<ol>
<li>Create page (status: DRAFT)</li>
<li>Build page in editor</li>
<li>Preview page (see below)</li>
<li>Publish page (change status to PUBLISHED)</li>
</ol>
<p><strong>Draft pages:</strong></p>
<ul>
<li>Not visible to public</li>
<li>Only accessible to admins via direct URL</li>
<li>Use for: Work in progress, testing</li>
</ul>
<p><strong>Published pages:</strong></p>
<ul>
<li>Visible at <code>/p/[slug]</code></li>
<li>Accessible to anyone</li>
<li>Indexed by search engines (if SEO configured)</li>
</ul>
<h3 id="previewing-pages">Previewing Pages<a class="headerlink" href="#previewing-pages" title="Permanent link">&para;</a></h3>
<p><strong>To preview a page before publishing:</strong></p>
<ol>
<li>Save the page (Ctrl+S)</li>
<li>Click <strong>"Preview"</strong> button in editor toolbar</li>
<li>Page opens in new tab at <code>/p/[slug]?preview=true</code></li>
</ol>
<p><strong>OR:</strong></p>
<ol>
<li>Navigate to <strong>Content &gt; Landing Pages</strong></li>
<li>Click page title to view published version</li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Preview button in editor toolbar</em></p>
<h3 id="publishing-a-page">Publishing a Page<a class="headerlink" href="#publishing-a-page" title="Permanent link">&para;</a></h3>
<p><strong>To publish a draft page:</strong></p>
<ol>
<li>Navigate to <strong>Content &gt; Landing Pages</strong></li>
<li>Find the page in the table</li>
<li>Click <strong>"Edit"</strong> in Actions column</li>
<li>Change status from DRAFT to PUBLISHED</li>
<li>Click <strong>"Save"</strong></li>
</ol>
<p><strong>To unpublish a page:</strong></p>
<ol>
<li>Change status from PUBLISHED to DRAFT</li>
<li>Save</li>
</ol>
<p>Unpublishing removes the page from public access but preserves all content.</p>
<h3 id="seo-settings">SEO Settings<a class="headerlink" href="#seo-settings" title="Permanent link">&para;</a></h3>
<p><strong>To optimize for search engines:</strong></p>
<ol>
<li>Edit the page</li>
<li>Fill in SEO fields:</li>
<li><strong>Title</strong>: Page title (shown in search results, max 60 characters)</li>
<li><strong>Description</strong>: Meta description (shown in search results, max 160 characters)</li>
<li><strong>Keywords</strong>: Comma-separated keywords (e.g., "climate action, advocacy, environment")</li>
<li><strong>OG Image</strong>: Social media share image (Facebook, Twitter)</li>
</ol>
<p><strong>Best practices:</strong></p>
<ul>
<li><strong>Title</strong>: Include primary keyword near beginning</li>
<li><strong>Description</strong>: Compelling, action-oriented, includes keyword</li>
<li><strong>Keywords</strong>: 5-10 relevant keywords</li>
<li><strong>OG Image</strong>: 1200x630 px, high-quality, relevant to page content</li>
</ul>
<p><strong>Screenshot placeholder</strong>: <em>SEO settings form showing title, description, keywords, and OG image fields</em></p>
<h3 id="mkdocs-export">MkDocs Export<a class="headerlink" href="#mkdocs-export" title="Permanent link">&para;</a></h3>
<p><strong>What it is:</strong> Export landing page as Jinja2 template for MkDocs (static site generator)</p>
<p><strong>Use case:</strong> Publish landing pages on your static documentation site</p>
<p><strong>To export:</strong></p>
<ol>
<li>Navigate to <strong>Content &gt; Landing Pages</strong></li>
<li>Click <strong>"Export"</strong> in Actions column</li>
<li>Choose export format:</li>
<li><strong>Jinja2 Template</strong>: Wraps HTML in MkDocs Material theme layout</li>
<li><strong>Standalone HTML</strong>: Raw HTML (no wrapper)</li>
<li>File is saved to MkDocs <code>docs/overrides/</code> directory</li>
<li>Access via MkDocs site navigation</li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Export modal showing Jinja2/Standalone options</em></p>
<hr />
<h2 id="managing-email-templates">Managing Email Templates<a class="headerlink" href="#managing-email-templates" title="Permanent link">&para;</a></h2>
<h3 id="email-template-overview">Email Template Overview<a class="headerlink" href="#email-template-overview" title="Permanent link">&para;</a></h3>
<p>Email templates control the content and formatting of system-generated emails:</p>
<p><strong>System templates:</strong></p>
<ul>
<li><strong>Welcome Email</strong>: Sent to new users after registration</li>
<li><strong>Password Reset</strong>: Sent when user requests password reset</li>
<li><strong>Shift Confirmation</strong>: Sent when volunteer signs up for shift</li>
<li><strong>Shift Reminder</strong>: Sent day before shift</li>
<li><strong>Response Verification</strong>: Sent to verify campaign response</li>
</ul>
<p><strong>Custom templates:</strong></p>
<ul>
<li>Create custom templates for specific campaigns or events</li>
<li>Use in shift emails, follow-up campaigns, etc.</li>
</ul>
<h3 id="email-template-structure">Email Template Structure<a class="headerlink" href="#email-template-structure" title="Permanent link">&para;</a></h3>
<p>Each template has three parts:</p>
<p><strong>1. Subject Line</strong></p>
<ul>
<li>Text shown in email inbox</li>
<li>Supports variables (e.g., <code>{{USER_NAME}}</code>, <code>{{SHIFT_TITLE}}</code>)</li>
<li>Keep under 60 characters</li>
</ul>
<p><strong>2. HTML Body</strong></p>
<ul>
<li>Rich-formatted email (colors, images, links)</li>
<li>What users see in modern email clients</li>
<li>Supports variables</li>
</ul>
<p><strong>3. Plain Text Body</strong></p>
<ul>
<li>Unformatted text version</li>
<li>Fallback for old email clients or user preference</li>
<li>Should convey same information as HTML</li>
</ul>
<h3 id="editing-an-email-template">Editing an Email Template<a class="headerlink" href="#editing-an-email-template" title="Permanent link">&para;</a></h3>
<p><strong>To edit a template:</strong></p>
<ol>
<li>Navigate to <strong>Content &gt; Email Templates</strong></li>
<li>Click <strong>"Edit"</strong> for the template you want to modify</li>
<li>Edit subject, HTML body, and/or plain text body</li>
<li>Click <strong>"Preview"</strong> to see rendered email</li>
<li>Click <strong>"Save"</strong></li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Email template editor showing subject field, HTML editor, and plain text editor</em></p>
<h3 id="using-variables-in-templates">Using Variables in Templates<a class="headerlink" href="#using-variables-in-templates" title="Permanent link">&para;</a></h3>
<p>Variables are placeholders that get replaced with real data when the email is sent.</p>
<p><strong>Available variables:</strong></p>
<p><strong>User variables:</strong></p>
<ul>
<li><code>{{USER_NAME}}</code> — User's full name</li>
<li><code>{{USER_EMAIL}}</code> — User's email address</li>
</ul>
<p><strong>Shift variables:</strong></p>
<ul>
<li><code>{{SHIFT_TITLE}}</code> — Shift name</li>
<li><code>{{SHIFT_START}}</code> — Start date/time (formatted)</li>
<li><code>{{SHIFT_END}}</code> — End date/time (formatted)</li>
<li><code>{{SHIFT_LOCATION}}</code> — Meeting location</li>
<li><code>{{SHIFT_CUT}}</code> — Cut name</li>
</ul>
<p><strong>Campaign variables:</strong></p>
<ul>
<li><code>{{CAMPAIGN_TITLE}}</code> — Campaign name</li>
<li><code>{{CAMPAIGN_URL}}</code> — Link to campaign page</li>
</ul>
<p><strong>System variables:</strong></p>
<ul>
<li><code>{{SITE_NAME}}</code> — Organization name (from settings)</li>
<li><code>{{SITE_URL}}</code> — Website URL</li>
<li><code>{{RESET_LINK}}</code> — Password reset link (password reset emails only)</li>
<li><code>{{VERIFICATION_LINK}}</code> — Verification link (response verification emails only)</li>
</ul>
<p><strong>Example template:</strong></p>
<p><strong>Subject:</strong></p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-5-1"><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a>Welcome to {{SITE_NAME}}, {{USER_NAME}}!
</span></code></pre></div>
<p><strong>HTML Body:</strong></p>
<div class="language-html highlight"><pre><span></span><code><span id="__span-6-1"><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Welcome, {{USER_NAME}}!<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span><span id="__span-6-2"><a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a>
</span><span id="__span-6-3"><a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Thank you for joining {{SITE_NAME}}. We&#39;re excited to have you as part of our community.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-6-4"><a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a>
</span><span id="__span-6-5"><a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Here&#39;s what you can do next:<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-6-6"><a id="__codelineno-6-6" name="__codelineno-6-6" href="#__codelineno-6-6"></a><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
</span><span id="__span-6-7"><a id="__codelineno-6-7" name="__codelineno-6-7" href="#__codelineno-6-7"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{SITE_URL}}/campaigns&quot;</span><span class="p">&gt;</span>Take action on a campaign<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span><span id="__span-6-8"><a id="__codelineno-6-8" name="__codelineno-6-8" href="#__codelineno-6-8"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{SITE_URL}}/shifts&quot;</span><span class="p">&gt;</span>Sign up for a volunteer shift<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span><span id="__span-6-9"><a id="__codelineno-6-9" name="__codelineno-6-9" href="#__codelineno-6-9"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{SITE_URL}}/app&quot;</span><span class="p">&gt;</span>Explore your dashboard<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span><span id="__span-6-10"><a id="__codelineno-6-10" name="__codelineno-6-10" href="#__codelineno-6-10"></a><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</span><span id="__span-6-11"><a id="__codelineno-6-11" name="__codelineno-6-11" href="#__codelineno-6-11"></a>
</span><span id="__span-6-12"><a id="__codelineno-6-12" name="__codelineno-6-12" href="#__codelineno-6-12"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>If you have questions, reply to this email or visit our <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{SITE_URL}}/docs&quot;</span><span class="p">&gt;</span>help center<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-6-13"><a id="__codelineno-6-13" name="__codelineno-6-13" href="#__codelineno-6-13"></a>
</span><span id="__span-6-14"><a id="__codelineno-6-14" name="__codelineno-6-14" href="#__codelineno-6-14"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Together, we can make a difference!<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-6-15"><a id="__codelineno-6-15" name="__codelineno-6-15" href="#__codelineno-6-15"></a>
</span><span id="__span-6-16"><a id="__codelineno-6-16" name="__codelineno-6-16" href="#__codelineno-6-16"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>— The {{SITE_NAME}} Team<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></code></pre></div>
<p><strong>Plain Text Body:</strong></p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-7-1"><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a>Welcome, {{USER_NAME}}!
</span><span id="__span-7-2"><a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a>
</span><span id="__span-7-3"><a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a>Thank you for joining {{SITE_NAME}}. We&#39;re excited to have you as part of our community.
</span><span id="__span-7-4"><a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a>
</span><span id="__span-7-5"><a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a>Here&#39;s what you can do next:
</span><span id="__span-7-6"><a id="__codelineno-7-6" name="__codelineno-7-6" href="#__codelineno-7-6"></a>- Take action on a campaign: {{SITE_URL}}/campaigns
</span><span id="__span-7-7"><a id="__codelineno-7-7" name="__codelineno-7-7" href="#__codelineno-7-7"></a>- Sign up for a volunteer shift: {{SITE_URL}}/shifts
</span><span id="__span-7-8"><a id="__codelineno-7-8" name="__codelineno-7-8" href="#__codelineno-7-8"></a>- Explore your dashboard: {{SITE_URL}}/app
</span><span id="__span-7-9"><a id="__codelineno-7-9" name="__codelineno-7-9" href="#__codelineno-7-9"></a>
</span><span id="__span-7-10"><a id="__codelineno-7-10" name="__codelineno-7-10" href="#__codelineno-7-10"></a>If you have questions, reply to this email or visit our help center: {{SITE_URL}}/docs.
</span><span id="__span-7-11"><a id="__codelineno-7-11" name="__codelineno-7-11" href="#__codelineno-7-11"></a>
</span><span id="__span-7-12"><a id="__codelineno-7-12" name="__codelineno-7-12" href="#__codelineno-7-12"></a>Together, we can make a difference!
</span><span id="__span-7-13"><a id="__codelineno-7-13" name="__codelineno-7-13" href="#__codelineno-7-13"></a>
</span><span id="__span-7-14"><a id="__codelineno-7-14" name="__codelineno-7-14" href="#__codelineno-7-14"></a>— The {{SITE_NAME}} Team
</span></code></pre></div>
<h3 id="html-email-best-practices">HTML Email Best Practices<a class="headerlink" href="#html-email-best-practices" title="Permanent link">&para;</a></h3>
<p><strong>Do:</strong></p>
<ul>
<li>✅ Use inline CSS (not external stylesheets)</li>
<li>✅ Use tables for layout (old email clients don't support flexbox/grid)</li>
<li>✅ Test in multiple email clients (Gmail, Outlook, Apple Mail)</li>
<li>✅ Include alt text for images</li>
<li>✅ Use web-safe fonts (Arial, Verdana, Georgia)</li>
<li>✅ Keep width under 600px (mobile friendly)</li>
<li>✅ Always provide plain text version</li>
</ul>
<p><strong>Don't:</strong></p>
<ul>
<li>❌ Use JavaScript (email clients strip it)</li>
<li>❌ Use CSS positioning (absolute, fixed)</li>
<li>❌ Use background images (not universally supported)</li>
<li>❌ Rely on external resources (may be blocked)</li>
<li>❌ Use tiny fonts (&lt; 14px)</li>
</ul>
<h3 id="testing-email-templates">Testing Email Templates<a class="headerlink" href="#testing-email-templates" title="Permanent link">&para;</a></h3>
<p><strong>To test a template:</strong></p>
<ol>
<li>Click <strong>"Send Test Email"</strong> button in editor</li>
<li>Enter your email address</li>
<li>Click <strong>"Send"</strong></li>
<li>Check your inbox (may take 1-2 minutes)</li>
</ol>
<p>The test email uses sample data for variables:</p>
<ul>
<li><code>{{USER_NAME}}</code> → "Test User"</li>
<li><code>{{SHIFT_TITLE}}</code> → "Sample Shift"</li>
<li>etc.</li>
</ul>
<p><strong>Test in multiple email clients:</strong></p>
<ul>
<li>Gmail (web)</li>
<li>Outlook (Windows)</li>
<li>Apple Mail (Mac/iOS)</li>
<li>Outlook.com (web)</li>
</ul>
<p>Look for:</p>
<ul>
<li>✅ Formatting intact (no broken layout)</li>
<li>✅ Images loading</li>
<li>✅ Links working</li>
<li>✅ Variables replaced correctly</li>
<li>✅ Readable on mobile (check phone)</li>
</ul>
<p><strong>Screenshot placeholder</strong>: <em>Send Test Email modal showing email address input and send button</em></p>
<hr />
<h2 id="managing-the-media-library">Managing the Media Library<a class="headerlink" href="#managing-the-media-library" title="Permanent link">&para;</a></h2>
<div class="admonition note">
<p class="admonition-title">Optional Feature</p>
<p>Media features must be enabled via <strong>Settings &gt; Feature Toggles &gt; ENABLE_MEDIA_FEATURES</strong>. Contact your administrator if this option is not visible.</p>
</div>
<h3 id="media-library-overview">Media Library Overview<a class="headerlink" href="#media-library-overview" title="Permanent link">&para;</a></h3>
<p>The media library allows you to:</p>
<ul>
<li><strong>Upload videos</strong>: MP4, MOV, AVI, MKV, WebM, M4V, FLV</li>
<li><strong>Organize by directory</strong>: Folder structure for categorization</li>
<li><strong>Edit metadata</strong>: Title, description, producer, creator, tags</li>
<li><strong>Share publicly</strong>: Publish videos to public gallery at <code>/media</code></li>
<li><strong>Lock videos</strong>: Prevent accidental deletion of important content</li>
</ul>
<p><strong>Use cases:</strong></p>
<ul>
<li>Event recordings (rallies, town halls, speeches)</li>
<li>Testimonials (supporter stories)</li>
<li>Educational content (issue explainers, how-to guides)</li>
<li>Promotional videos (recruitment, fundraising appeals)</li>
</ul>
<h3 id="uploading-videos">Uploading Videos<a class="headerlink" href="#uploading-videos" title="Permanent link">&para;</a></h3>
<p><strong>To upload a video:</strong></p>
<ol>
<li>Navigate to <strong>Content &gt; Media &gt; Library</strong></li>
<li>Click <strong>"Upload Video"</strong> button (top-right)</li>
<li>Either:</li>
<li>Drag and drop video file into upload area, OR</li>
<li>Click to browse and select file</li>
<li>Fill in metadata (see below)</li>
<li>Click <strong>"Upload"</strong></li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Upload Video modal showing drag-drop area and metadata form</em></p>
<p><strong>Supported formats:</strong></p>
<ul>
<li>MP4 (recommended, best compatibility)</li>
<li>MOV (Apple QuickTime)</li>
<li>AVI (older format, large file size)</li>
<li>MKV (Matroska, open format)</li>
<li>WebM (web-optimized)</li>
<li>M4V (Apple iTunes)</li>
<li>FLV (Flash video, legacy)</li>
</ul>
<p><strong>File size limit:</strong> 10 GB per file</p>
<p><strong>Upload time:</strong> Varies by file size and connection speed. A 1 GB file takes ~5-10 minutes on typical broadband.</p>
<h3 id="video-metadata">Video Metadata<a class="headerlink" href="#video-metadata" title="Permanent link">&para;</a></h3>
<p><strong>Metadata fields:</strong></p>
<p><strong>Title</strong> (required):</p>
<ul>
<li>Video title</li>
<li>Displayed in library and public gallery</li>
<li>Example: "Climate Rally - June 2024"</li>
</ul>
<p><strong>Description</strong> (optional):</p>
<ul>
<li>Longer description of video content</li>
<li>Supports HTML (bold, links, etc.)</li>
<li>Displayed on video detail page</li>
</ul>
<p><strong>Producer</strong> (optional):</p>
<ul>
<li>Organization or individual who produced the video</li>
<li>Example: "Community Action Network"</li>
</ul>
<p><strong>Creator</strong> (optional):</p>
<ul>
<li>Videographer or director</li>
<li>Example: "John Smith"</li>
</ul>
<p><strong>Tags</strong> (optional):</p>
<ul>
<li>Comma-separated keywords for search/filtering</li>
<li>Example: "climate, rally, 2024, toronto"</li>
</ul>
<p><strong>Directory</strong> (optional):</p>
<ul>
<li>Folder path for organization</li>
<li>Use forward slashes for nested folders</li>
<li>Examples: "events/2024", "testimonials", "educational"</li>
</ul>
<p><strong>Screenshot placeholder</strong>: <em>Metadata form showing title, description, producer, creator, tags, and directory fields</em></p>
<h3 id="automatic-metadata-extraction">Automatic Metadata Extraction<a class="headerlink" href="#automatic-metadata-extraction" title="Permanent link">&para;</a></h3>
<p>When you upload a video, the system automatically extracts:</p>
<ul>
<li><strong>Duration</strong>: Length in seconds (shown as MM:SS)</li>
<li><strong>Dimensions</strong>: Width x height in pixels (e.g., 1920x1080)</li>
<li><strong>Orientation</strong>: PORTRAIT, LANDSCAPE, or SQUARE</li>
<li><strong>Quality</strong>: SD, HD, FULL_HD, or 4K</li>
<li><strong>Has Audio</strong>: Boolean (detected from audio track)</li>
<li><strong>File Size</strong>: Bytes (shown as MB/GB)</li>
</ul>
<p><strong>Quality detection:</strong></p>
<ul>
<li><strong>SD</strong> (Standard Definition): Height &lt; 720px</li>
<li><strong>HD</strong> (High Definition): Height 720-1079px</li>
<li><strong>FULL_HD</strong> (1080p): Height 1080-2159px</li>
<li><strong>4K</strong> (Ultra HD): Height ≥ 2160px</li>
</ul>
<p><strong>Orientation detection:</strong></p>
<ul>
<li><strong>PORTRAIT</strong>: Height &gt; Width (e.g., 1080x1920, vertical phone video)</li>
<li><strong>LANDSCAPE</strong>: Width &gt; Height (e.g., 1920x1080, standard video)</li>
<li><strong>SQUARE</strong>: Width = Height (e.g., 1080x1080, Instagram video)</li>
</ul>
<p>You cannot edit these fields manually—they're extracted automatically.</p>
<h3 id="organizing-videos">Organizing Videos<a class="headerlink" href="#organizing-videos" title="Permanent link">&para;</a></h3>
<p><strong>Directory structure:</strong></p>
<p>Use directories to organize videos by:</p>
<ul>
<li><strong>Type</strong>: "events", "testimonials", "educational", "promotional"</li>
<li><strong>Year</strong>: "2024", "2023"</li>
<li><strong>Campaign</strong>: "climate-campaign", "housing-campaign"</li>
<li><strong>Combination</strong>: "events/2024", "testimonials/climate"</li>
</ul>
<p><strong>Example directory structure:</strong></p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-8-1"><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a>events/
</span><span id="__span-8-2"><a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a> 2024/
</span><span id="__span-8-3"><a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a> rally-june.mp4
</span><span id="__span-8-4"><a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a> townhall-july.mp4
</span><span id="__span-8-5"><a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a> 2023/
</span><span id="__span-8-6"><a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a> rally-september.mp4
</span><span id="__span-8-7"><a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a>testimonials/
</span><span id="__span-8-8"><a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a> climate/
</span><span id="__span-8-9"><a id="__codelineno-8-9" name="__codelineno-8-9" href="#__codelineno-8-9"></a> jane-smith.mp4
</span><span id="__span-8-10"><a id="__codelineno-8-10" name="__codelineno-8-10" href="#__codelineno-8-10"></a> john-doe.mp4
</span><span id="__span-8-11"><a id="__codelineno-8-11" name="__codelineno-8-11" href="#__codelineno-8-11"></a> housing/
</span><span id="__span-8-12"><a id="__codelineno-8-12" name="__codelineno-8-12" href="#__codelineno-8-12"></a> maria-garcia.mp4
</span><span id="__span-8-13"><a id="__codelineno-8-13" name="__codelineno-8-13" href="#__codelineno-8-13"></a>educational/
</span><span id="__span-8-14"><a id="__codelineno-8-14" name="__codelineno-8-14" href="#__codelineno-8-14"></a> climate-101.mp4
</span><span id="__span-8-15"><a id="__codelineno-8-15" name="__codelineno-8-15" href="#__codelineno-8-15"></a> how-to-canvass.mp4
</span></code></pre></div>
<p><strong>To move videos between directories:</strong></p>
<ol>
<li>Select videos in library (checkboxes)</li>
<li>Choose <strong>"Move"</strong> from bulk actions</li>
<li>Enter new directory path</li>
<li>Click <strong>"Move"</strong></li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Library showing directory tree sidebar and video grid</em></p>
<h3 id="filtering-and-searching-videos">Filtering and Searching Videos<a class="headerlink" href="#filtering-and-searching-videos" title="Permanent link">&para;</a></h3>
<p><strong>To find videos:</strong></p>
<p><strong>Search:</strong></p>
<ul>
<li>Enter keywords in search box</li>
<li>Searches title, description, tags, producer, creator</li>
</ul>
<p><strong>Filters:</strong></p>
<ul>
<li><strong>Directory</strong>: Show only videos in specific directory</li>
<li><strong>Quality</strong>: Filter by SD, HD, FULL_HD, 4K</li>
<li><strong>Orientation</strong>: Filter by portrait, landscape, square</li>
<li><strong>Locked</strong>: Show only locked or unlocked videos</li>
</ul>
<p><strong>Sort:</strong></p>
<ul>
<li>Upload date (newest first, oldest first)</li>
<li>Title (A-Z, Z-A)</li>
<li>Duration (shortest first, longest first)</li>
</ul>
<p><strong>Screenshot placeholder</strong>: <em>Library filters showing directory dropdown, quality checkboxes, and sort options</em></p>
<h3 id="editing-video-metadata">Editing Video Metadata<a class="headerlink" href="#editing-video-metadata" title="Permanent link">&para;</a></h3>
<p><strong>To edit a video:</strong></p>
<ol>
<li>Click on video thumbnail (or click "Edit" in actions menu)</li>
<li>Edit metadata fields</li>
<li>Click <strong>"Save"</strong></li>
</ol>
<p><strong>Editable fields:</strong></p>
<ul>
<li>Title</li>
<li>Description</li>
<li>Producer</li>
<li>Creator</li>
<li>Tags</li>
<li>Directory</li>
</ul>
<p><strong>Non-editable fields</strong> (auto-extracted):</p>
<ul>
<li>Duration</li>
<li>Dimensions</li>
<li>Orientation</li>
<li>Quality</li>
<li>Has Audio</li>
<li>File Size</li>
</ul>
<h3 id="deleting-videos">Deleting Videos<a class="headerlink" href="#deleting-videos" title="Permanent link">&para;</a></h3>
<p><strong>To delete a video:</strong></p>
<ol>
<li>Select video in library</li>
<li>Click <strong>"Delete"</strong> (trash icon)</li>
<li>Confirm deletion</li>
</ol>
<div class="admonition danger">
<p class="admonition-title">Permanent Deletion</p>
<p>Deleting a video is permanent. The video file is removed from the server and cannot be recovered.</p>
</div>
<p><strong>Locked videos cannot be deleted</strong> (unlock first).</p>
<h3 id="locking-videos">Locking Videos<a class="headerlink" href="#locking-videos" title="Permanent link">&para;</a></h3>
<p><strong>What is locking?</strong></p>
<p>Locked videos cannot be:</p>
<ul>
<li>Deleted</li>
<li>Moved to a different directory</li>
<li>Unshared from public gallery (if already shared)</li>
</ul>
<p><strong>When to lock:</strong></p>
<ul>
<li>✅ Important historical videos</li>
<li>✅ Videos currently shared publicly</li>
<li>✅ Videos linked from landing pages or campaigns</li>
</ul>
<p><strong>To lock a video:</strong></p>
<ol>
<li>Select video</li>
<li>Click <strong>"Lock"</strong> (padlock icon)</li>
</ol>
<p><strong>To unlock:</strong></p>
<ol>
<li>Select locked video</li>
<li>Click <strong>"Unlock"</strong></li>
</ol>
<p><strong>Screenshot placeholder</strong>: <em>Video card showing lock icon badge</em></p>
<hr />
<h2 id="sharing-videos-publicly">Sharing Videos Publicly<a class="headerlink" href="#sharing-videos-publicly" title="Permanent link">&para;</a></h2>
<h3 id="public-media-gallery">Public Media Gallery<a class="headerlink" href="#public-media-gallery" title="Permanent link">&para;</a></h3>
<p>The public media gallery (<code>/media</code>) showcases videos to the public. It's organized by categories.</p>
<p><strong>Categories:</strong></p>
<ul>
<li><strong>TESTIMONIAL</strong>: Personal stories from supporters</li>
<li><strong>EVENT</strong>: Rally videos, town halls, speeches</li>
<li><strong>EDUCATIONAL</strong>: Issue explainers, how-to guides</li>
<li><strong>PROMOTIONAL</strong>: Recruitment, fundraising appeals</li>
</ul>
<h3 id="sharing-videos">Sharing Videos<a class="headerlink" href="#sharing-videos" title="Permanent link">&para;</a></h3>
<p><strong>To share videos publicly:</strong></p>
<ol>
<li>Navigate to <strong>Content &gt; Media &gt; Shared Media</strong></li>
<li>Click <strong>"Share Videos"</strong> button</li>
<li>Select videos from library (search, filter, select)</li>
<li>Choose category (TESTIMONIAL, EVENT, EDUCATIONAL, PROMOTIONAL)</li>
<li>Click <strong>"Share"</strong></li>
</ol>
<p>Videos immediately appear on public gallery at <code>/media</code>.</p>
<p><strong>Screenshot placeholder</strong>: <em>Share Videos modal showing library selector, category dropdown, and share button</em></p>
<h3 id="managing-shared-media">Managing Shared Media<a class="headerlink" href="#managing-shared-media" title="Permanent link">&para;</a></h3>
<p><strong>To view shared videos:</strong></p>
<ol>
<li>Navigate to <strong>Content &gt; Media &gt; Shared Media</strong></li>
</ol>
<p>Table shows:</p>
<ul>
<li>Video title</li>
<li>Category</li>
<li>Shared date</li>
<li>View count (if tracking enabled)</li>
<li>Actions: Unshare, change category</li>
</ul>
<p><strong>To unshare videos:</strong></p>
<ol>
<li>Select videos in table</li>
<li>Click <strong>"Unshare"</strong></li>
<li>Confirm</li>
</ol>
<p>Videos are removed from public gallery but remain in library.</p>
<p><strong>To change category:</strong></p>
<ol>
<li>Click <strong>"Edit"</strong> for video</li>
<li>Select new category</li>
<li>Click <strong>"Save"</strong></li>
</ol>
<h3 id="public-gallery-customization">Public Gallery Customization<a class="headerlink" href="#public-gallery-customization" title="Permanent link">&para;</a></h3>
<p><strong>Gallery settings</strong> (managed by admin):</p>
<ul>
<li>Gallery title (e.g., "Our Videos")</li>
<li>Category order</li>
<li>Videos per page</li>
<li>Allow reactions (like, love, etc.)</li>
</ul>
<p>Ask your administrator to configure these settings.</p>
<hr />
<h2 id="content-best-practices">Content Best Practices<a class="headerlink" href="#content-best-practices" title="Permanent link">&para;</a></h2>
<h3 id="writing-for-the-web">Writing for the Web<a class="headerlink" href="#writing-for-the-web" title="Permanent link">&para;</a></h3>
<p><strong>Scannable:</strong></p>
<ul>
<li>Use headings and subheadings</li>
<li>Short paragraphs (2-3 sentences)</li>
<li>Bulleted lists</li>
<li>Bold key points</li>
</ul>
<p><strong>Actionable:</strong></p>
<ul>
<li>Clear call to action on every page</li>
<li>Tell users what to do next</li>
<li>Use action verbs (Join, Donate, Sign Up, Learn More)</li>
</ul>
<p><strong>Accessible:</strong></p>
<ul>
<li>Use alt text for images</li>
<li>Sufficient color contrast (WCAG AA: 4.5:1 for text)</li>
<li>Descriptive link text (not "click here")</li>
<li>Readable font size (≥ 16px)</li>
</ul>
<h3 id="mobile-optimization">Mobile Optimization<a class="headerlink" href="#mobile-optimization" title="Permanent link">&para;</a></h3>
<p><strong>Mobile traffic</strong> is 50-70% of web traffic. Optimize for mobile:</p>
<p><strong>Responsive design:</strong></p>
<ul>
<li>Use mobile-friendly templates</li>
<li>Test on actual phones (not just desktop browser resize)</li>
</ul>
<p><strong>Touch targets:</strong></p>
<ul>
<li>Buttons at least 44x44 px</li>
<li>Adequate spacing between links (avoid accidental taps)</li>
</ul>
<p><strong>Load time:</strong></p>
<ul>
<li>Compress images (use tools like TinyPNG)</li>
<li>Minimize video file sizes</li>
<li>Avoid large background images</li>
</ul>
<p><strong>Readability:</strong></p>
<ul>
<li>Large font (≥ 16px)</li>
<li>Short paragraphs</li>
<li>Simple navigation</li>
</ul>
<h3 id="seo-optimization">SEO Optimization<a class="headerlink" href="#seo-optimization" title="Permanent link">&para;</a></h3>
<p><strong>On-page SEO:</strong></p>
<ol>
<li><strong>Title tag</strong>: Include primary keyword, under 60 characters</li>
<li><strong>Meta description</strong>: Compelling, includes keyword, under 160 characters</li>
<li><strong>Headings</strong>: Use H1 for main title, H2 for sections, H3 for subsections</li>
<li><strong>Keywords</strong>: Use naturally in content (don't stuff)</li>
<li><strong>Internal links</strong>: Link to other pages on your site</li>
<li><strong>External links</strong>: Link to authoritative sources</li>
<li><strong>Image alt text</strong>: Describe images for screen readers and SEO</li>
</ol>
<p><strong>Technical SEO:</strong></p>
<ul>
<li>Fast load time (&lt; 3 seconds)</li>
<li>Mobile-friendly</li>
<li>HTTPS (secure)</li>
<li>Clean URLs (e.g., <code>/p/about-us</code>, not <code>/p/page?id=123</code>)</li>
</ul>
<h3 id="accessibility">Accessibility<a class="headerlink" href="#accessibility" title="Permanent link">&para;</a></h3>
<p><strong>WCAG 2.1 Level AA compliance:</strong></p>
<p><strong>Perceivable:</strong></p>
<ul>
<li>Alt text for images</li>
<li>Captions for videos</li>
<li>Color contrast (4.5:1 for text, 3:1 for large text)</li>
</ul>
<p><strong>Operable:</strong></p>
<ul>
<li>Keyboard navigation (all interactive elements reachable via Tab)</li>
<li>Skip links (skip to main content)</li>
<li>No keyboard traps</li>
</ul>
<p><strong>Understandable:</strong></p>
<ul>
<li>Clear language (avoid jargon)</li>
<li>Consistent navigation</li>
<li>Error messages explain how to fix</li>
</ul>
<p><strong>Robust:</strong></p>
<ul>
<li>Valid HTML (no unclosed tags, proper nesting)</li>
<li>Semantic markup (use <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;article&gt;</code>, not just <code>&lt;div&gt;</code>)</li>
</ul>
<hr />
<h2 id="troubleshooting">Troubleshooting<a class="headerlink" href="#troubleshooting" title="Permanent link">&para;</a></h2>
<h3 id="landing-pages">Landing Pages<a class="headerlink" href="#landing-pages" title="Permanent link">&para;</a></h3>
<p><strong>Issue: Page editor won't load</strong></p>
<p><strong>Solutions:</strong></p>
<ol>
<li>Check browser console for errors (F12)</li>
<li>Try different browser (Chrome recommended)</li>
<li>Clear browser cache (Ctrl+Shift+Delete)</li>
<li>Disable browser extensions (ad blockers may interfere)</li>
</ol>
<hr />
<p><strong>Issue: Changes not saving</strong></p>
<p><strong>Solutions:</strong></p>
<ol>
<li>Check internet connection</li>
<li>Try Ctrl+S (keyboard shortcut)</li>
<li>Check browser console for errors</li>
<li>Try refreshing and re-editing</li>
</ol>
<hr />
<p><strong>Issue: Page looks different when published</strong></p>
<p><strong>Causes:</strong></p>
<ul>
<li>Preview mode shows editor styles (not exact public view)</li>
<li>Browser caching old version</li>
</ul>
<p><strong>Solutions:</strong></p>
<ol>
<li>Hard refresh published page (Ctrl+Shift+R)</li>
<li>Test in incognito/private window</li>
<li>Clear browser cache</li>
</ol>
<hr />
<h3 id="email-templates">Email Templates<a class="headerlink" href="#email-templates" title="Permanent link">&para;</a></h3>
<p><strong>Issue: Variables not replacing</strong></p>
<p><strong>Symptoms:</strong> Email shows <code>{{USER_NAME}}</code> instead of actual name</p>
<p><strong>Causes:</strong></p>
<ul>
<li>Variable name misspelled</li>
<li>Variable not supported in this template type</li>
<li>Email sent via test (test uses sample data)</li>
</ul>
<p><strong>Solutions:</strong></p>
<ol>
<li>Check variable spelling (case-sensitive)</li>
<li>Consult variable reference (see "Using Variables" above)</li>
<li>Send real email (not test) to see actual data</li>
</ol>
<hr />
<p><strong>Issue: Email looks broken in Outlook</strong></p>
<p><strong>Causes:</strong> Outlook uses Microsoft Word rendering engine (poor CSS support)</p>
<p><strong>Solutions:</strong></p>
<ol>
<li>Use table-based layout (not flexbox/grid)</li>
<li>Use inline CSS (not external styles)</li>
<li>Test specifically in Outlook (use Litmus or Email on Acid)</li>
</ol>
<hr />
<h3 id="media-library">Media Library<a class="headerlink" href="#media-library" title="Permanent link">&para;</a></h3>
<p><strong>Issue: Video won't upload</strong></p>
<p><strong>Solutions:</strong></p>
<ol>
<li>Check file size (max 10 GB)</li>
<li>Check file format (must be MP4, MOV, AVI, MKV, WebM, M4V, or FLV)</li>
<li>Check internet connection (large files need stable connection)</li>
<li>Try different browser</li>
</ol>
<hr />
<p><strong>Issue: Metadata extraction failed</strong></p>
<p><strong>Symptoms:</strong> Duration shows "Unknown", quality shows "N/A"</p>
<p><strong>Causes:</strong></p>
<ul>
<li>Video file is corrupted</li>
<li>Unsupported codec</li>
<li>FFprobe service not running (server issue)</li>
</ul>
<p><strong>Solutions:</strong></p>
<ol>
<li>Try re-encoding video (use HandBrake or similar)</li>
<li>Convert to MP4 with H.264 codec (most compatible)</li>
<li>Contact administrator (may be server configuration issue)</li>
</ol>
<hr />
<p><strong>Issue: Video won't play on public gallery</strong></p>
<p><strong>Causes:</strong></p>
<ul>
<li>Video not shared (still in library only)</li>
<li>Unsupported codec in browser</li>
<li>Video file missing (deleted from server)</li>
</ul>
<p><strong>Solutions:</strong></p>
<ol>
<li>Verify video is shared (Content &gt; Media &gt; Shared Media)</li>
<li>Re-encode as H.264 MP4 (best browser compatibility)</li>
<li>Check server logs (ask administrator)</li>
</ol>
<hr />
<h2 id="related-documentation">Related Documentation<a class="headerlink" href="#related-documentation" title="Permanent link">&para;</a></h2>
<ul>
<li><strong><a href="../admin-guide/">Admin Guide</a></strong>: Full administrator guide</li>
<li><strong><a href="../campaign-manager-guide/">Campaign Manager Guide</a></strong>: Campaign-specific content (email templates)</li>
<li><strong><a href="../features/landing-pages.md">Landing Pages Feature</a></strong>: Technical documentation on GrapesJS editor</li>
<li><strong><a href="../features/media.md">Media Library Feature</a></strong>: Technical documentation on video upload and storage</li>
<li><strong><a href="../api/pages.md">API Reference</a></strong>: Pages API endpoints</li>
</ul>
<hr />
<p><strong>Last updated</strong>: February 2026 (V2 complete)</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../map-organizer-guide/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Map Organizer Guide">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Map Organizer Guide
</div>
</div>
</a>
<a href="../volunteer-guide/" class="md-footer__link md-footer__link--next" aria-label="Next: Volunteer Guide">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
Volunteer Guide
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2024 The Bunker Operations <a href="#__consent">Change cookie settings</a>
</div>
</div>
<div class="md-social">
<a href="https://gitea.bnkops.com/admin" target="_blank" rel="noopener" title="Gitea Repository" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
<a href="https://listmonk.bnkops.com/subscription/form" target="_blank" rel="noopener" title="Newsletter" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M536.4-26.3c9.8-3.5 20.6-1 28 6.3s9.8 18.2 6.3 28l-178 496.9c-5 13.9-18.1 23.1-32.8 23.1-14.2 0-27-8.6-32.3-21.7l-64.2-158c-4.5-11-2.5-23.6 5.2-32.6l94.5-112.4c5.1-6.1 4.7-15-.9-20.6s-14.6-6-20.6-.9l-112.4 94.3c-9.1 7.6-21.6 9.6-32.6 5.2L38.1 216.8c-13.1-5.3-21.7-18.1-21.7-32.3 0-14.7 9.2-27.8 23.1-32.8z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate": null, "base": "../../..", "features": ["announce.dismiss", "content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tooltips", "navigation.expand", "navigation.footer", "navigation.indexes", "navigation.path", "navigation.prune", "navigation.sections", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../../../assets/javascripts/bundle.79ae519e.min.js"></script>
<script src="../../../javascripts/home.js"></script>
<script src="../../../javascripts/github-widget.js"></script>
<script src="../../../javascripts/gitea-widget.js"></script>
<script src="../../../assets/js/env-config.js"></script>
<script src="../../../assets/js/video-player.js"></script>
</body>
</html>