Patterns are your theme's growth engine. The best ones combine clear hierarchy with copy guidance and zero‑JS polish. This playbook turns patterns into repeatable conversions for any niche.
1) Visual hierarchy that guides action
- Above the fold: one promise, one CTA. Keep headlines 6–10 words.
- Scanning lines: use 60–75ch line-length and strong contrast.
- CTA density: 1 primary per section; secondary links live in the body.
F‑pattern layout example
Lead with a bold left‑aligned headline, proof strip below, CTA on the right at the fold.
2) Motion with intention
- Prefer CSS transitions over JS. Animate within reserved containers to avoid CLS.
- Reduce motion for users with
prefers-reduced-motion. - Use 150–250ms durations; faster for micro-interactions, slower for context shifts.
3) Content guardrails
Ship pattern notes: suggested headline length, image crops, and copy examples to keep quality high. Include placeholders with tone guidance (e.g., benefit, proof, CTA).
Copy template
Headline: {Promise in 8 words}
Subhead: {Outcome + Time}
CTA: {Action verb} + {Outcome}4) Accessible defaults
- Contrast ≥ 4.5:1 for body text; ≥ 3:1 for large headings.
- Focusable CTAs with visible focus rings; button labels not icons alone.
- Semantic HTML: use lists, headings in order, and proper landmarks.
5) Measure and iterate
Track CTA clicks and scroll depth. Retire patterns that don't convert and promote winners to demos in your theme.
6) Examples that work
- Hero + social proof strip
- Feature grid with outcome‑focused copy
- Testimonial carousel (no auto‑play)
FAQ
Which patterns convert best?
Hero + proof strip, feature grid with outcomes, and testimonial carousel are consistent winners.
Conclusion
Design patterns as products: opinionated, accessible, and fast by default. See more in WP Theme.
