{"slug":"kadence-generatepress-setup","title":"Kadence and GeneratePress Lightweight Theme Setup","tags":["kadence","generatepress","block-theme","performance","gutenberg"],"agent_summary":"Kadence and GeneratePress theme setup: global colors and fonts, block-based layouts via Kadence Blocks and GP Premium Elements, performance benchmarks vs Elementor and Divi, and when to use each theme.","trigger_phrases":["kadence theme","generatepress setup","kadence blocks","gp premium","lightweight wordpress theme","block theme wordpress","kadence vs elementor","generatepress vs divi"],"runnable":true,"markdown":"\nKadence and GeneratePress are lightweight block-theme alternatives to Elementor. Use when performance outweighs design flexibility.\n\n## When to Use\n\n| Theme | Best For |\n|-------|----------|\n| Kadence | Block-based builds, Gutenberg editing, WooCommerce stores |\n| GeneratePress | Maximum performance, developer-controlled, simple content |\n| Elementor | Client drag-and-drop editing, complex layouts, template kits |\n| Divi | Maintenance of existing Divi sites |\n\n## Kadence Setup\n\n1. Install Kadence Theme (free) + Kadence Blocks (free)\n2. Appearance > Customize: Set global colors, fonts, header layout\n3. Kadence > Starter Templates: Import a template kit matching your niche\n4. Global design: Kadence > Design Library > Global Colors / Global Fonts\n5. Header: Appearance > Customize > Header — drag-drop row/column/element builder\n\n**Kadence Blocks (Gutenberg extensions):**\n- Advanced Heading, Advanced Button, Icon List\n- Row Layout (responsive multi-column)\n- Testimonials, Accordion, Form (replaces Contact Form 7 for simple forms)\n- Table of Contents (good for SEO content)\n\n**Kadence WooCommerce Plugin:** custom product page layouts, mini cart drawer, loop customization.\n\n## GeneratePress Setup\n\n1. Install GeneratePress (free core theme)\n2. Purchase GP Premium for full control ($59/yr)\n3. Appearance > Customize > Global Colors — set brand palette\n4. Appearance > Customize > Typography — set font stacks\n5. GP Elements (GP Premium): inject custom PHP/HTML at hook locations\n\n**GP Elements examples:**\n- Custom header element: PHP template + display conditions (specific pages/CPTs)\n- Hook element: inject CTA after post content via `the_content` hook\n- Layout element: full-width layout on landing pages without header/footer\n\n## Performance Benchmarks\n\n| Theme | TTFB | LCP (Mobile) | JS Size |\n|-------|------|-------------|---------|\n| GeneratePress | ~200ms | ~1.1s | ~10KB |\n| Kadence | ~250ms | ~1.2s | ~15KB |\n| Elementor (Hello theme) | ~300ms | ~1.5s | ~60KB |\n| Divi | ~350ms | ~2.0s | ~180KB |\n\n## Kadence Global Settings\n\n```\nAppearance > Customize > General > Colors:\n- Palette Color 1: #2563eb (Primary)\n- Palette Color 2: #1e40af (Secondary)\n- Palette Color 3: #1f2937 (Text)\n- Palette Color 9: #ffffff (Background)\n\nAppearance > Customize > Typography:\n- Base Font: Inter 16px\n- H1: 48px / 700 weight\n- H2: 36px / 700 weight\n```\n\n## GeneratePress Color System\n\n```\nAppearance > Customize > Global Colors:\n--color-primary: #2563eb\n--color-secondary: #f59e0b\n--color-text: #1f2937\n--color-background: #ffffff\n```\n","html":"

Kadence and GeneratePress are lightweight block-theme alternatives to Elementor. Use when performance outweighs design flexibility.

\n

When to Use

\n

| Theme | Best For |\n|-------|----------|\n| Kadence | Block-based builds, Gutenberg editing, WooCommerce stores |\n| GeneratePress | Maximum performance, developer-controlled, simple content |\n| Elementor | Client drag-and-drop editing, complex layouts, template kits |\n| Divi | Maintenance of existing Divi sites |

\n

Kadence Setup

\n
    \n
  1. Install Kadence Theme (free) + Kadence Blocks (free)
    2. \n
  2. Appearance > Customize: Set global colors, fonts, header layout
    3. \n
  3. Kadence > Starter Templates: Import a template kit matching your niche
    4. \n
  4. Global design: Kadence > Design Library > Global Colors / Global Fonts
    5. \n
  5. Header: Appearance > Customize > Header — drag-drop row/column/element builder
    6. \n
\n

Kadence Blocks (Gutenberg extensions):

\n\n

Kadence WooCommerce Plugin: custom product page layouts, mini cart drawer, loop customization.

\n

GeneratePress Setup

\n
    \n
  1. Install GeneratePress (free core theme)
    2. \n
  2. Purchase GP Premium for full control ($59/yr)
    3. \n
  3. Appearance > Customize > Global Colors — set brand palette
    4. \n
  4. Appearance > Customize > Typography — set font stacks
    5. \n
  5. GP Elements (GP Premium): inject custom PHP/HTML at hook locations
    6. \n
\n

GP Elements examples:

\n\n

Performance Benchmarks

\n

| Theme | TTFB | LCP (Mobile) | JS Size |\n|-------|------|-------------|---------|\n| GeneratePress | ~200ms | ~1.1s | ~10KB |\n| Kadence | ~250ms | ~1.2s | ~15KB |\n| Elementor (Hello theme) | ~300ms | ~1.5s | ~60KB |\n| Divi | ~350ms | ~2.0s | ~180KB |

\n

Kadence Global Settings

\n
Appearance > Customize > General > Colors:\n- Palette Color 1: #2563eb (Primary)\n- Palette Color 2: #1e40af (Secondary)\n- Palette Color 3: #1f2937 (Text)\n- Palette Color 9: #ffffff (Background)\n\nAppearance > Customize > Typography:\n- Base Font: Inter 16px\n- H1: 48px / 700 weight\n- H2: 36px / 700 weight\n
\n

GeneratePress Color System

\n
Appearance > Customize > Global Colors:\n--color-primary: #2563eb\n--color-secondary: #f59e0b\n--color-text: #1f2937\n--color-background: #ffffff\n
\n"}