Kadence and GeneratePress Lightweight Theme Setup

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

When to Use

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

Kadence Setup

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

Kadence Blocks (Gutenberg extensions):

• Advanced Heading, Advanced Button, Icon List
• Row Layout (responsive multi-column)
• Testimonials, Accordion, Form (replaces Contact Form 7 for simple forms)
• Table of Contents (good for SEO content)

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

GeneratePress Setup

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

GP Elements examples:

• Custom header element: PHP template + display conditions (specific pages/CPTs)
• Hook element: inject CTA after post content via the_content hook
• Layout element: full-width layout on landing pages without header/footer

Performance Benchmarks

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

Kadence Global Settings

Appearance > Customize > General > Colors:
- Palette Color 1: #2563eb (Primary)
- Palette Color 2: #1e40af (Secondary)
- Palette Color 3: #1f2937 (Text)
- Palette Color 9: #ffffff (Background)

Appearance > Customize > Typography:
- Base Font: Inter 16px
- H1: 48px / 700 weight
- H2: 36px / 700 weight

GeneratePress Color System

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