Skip to content

Landing Page Models

Overview

The Landing Page module provides a WYSIWYG page builder with GrapesJS editor integration, reusable block library, and MkDocs export functionality.

Models (2): - LandingPage — GrapesJS editor output with MkDocs export - PageBlock — Reusable block library

Key Features: - GrapesJS WYSIWYG editor (desktop only) - Visual + code editor modes - MkDocs export (THEMED vs STANDALONE modes) - SEO metadata (title, description, image) - Reusable block library (6 default blocks) - Jinja2 Material theme integration

See Schema Reference for complete field listings.

Editor Modes

enum EditorMode {
  VISUAL  // GrapesJS visual editor (default)
  CODE    // Raw HTML/CSS code editor
}

MkDocs Export Modes

enum MkdocsExportMode {
  THEMED      // Extends main.html, content block only (default)
  STANDALONE  // Full HTML document, no Jinja2 inheritance
}

THEMED Mode: 

{% extends "main.html" %}
{% block content %}
  <div class="landing-page">
    <!-- Page HTML here -->
  </div>
{% endblock %}

STANDALONE Mode: 

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <!-- Full HTML document -->
</head>
<body>
  <!-- Page HTML here -->
</body>
</html>

Page Blocks (6 default)

1. Hero Section (Headers) - Schema: title, subtitle, backgroundImage, ctaText, ctaUrl - Defaults: "Welcome to Our Campaign", "Get Involved"

2. Text Block (Content) - Schema: heading, body - Defaults: "About Us", "Tell your story here..."

3. Features Grid (Content) - Schema: features[] (title, description, icon) - Defaults: 3 features (Community Action, Advocacy, Volunteer)

4. Call to Action (Actions) - Schema: heading, description, buttonText, buttonUrl - Defaults: "Ready to Take Action?", "Join Now"

5. Testimonials (Content) - Schema: quotes[] (text, author, role) - Defaults: 2 quotes

6. Contact Form (Actions) - Schema: heading, fields[] (name, type, required) - Defaults: Name, Email, Message fields

GrapesJS JSON Format

blocks Field: 

{
  "pages": [
    {
      "id": "page-main",
      "component": {
        "type": "wrapper",
        "components": [
          {
            "tagName": "section",
            "classes": ["hero"],
            "components": [
              {
                "tagName": "h1",
                "content": "Welcome to Our Campaign"
              }
            ]
          }
        ]
      }
    }
  ]
}