Fast To Launch
A focused build window with weekly checkpoints, so nothing stalls in review.
Variation C · PowerPack Module Companion Library
Interactive module reference — six modules, three treatments each.
A neutral, unbranded reference so agency stakeholders can preview Beaver Builder PowerPack module styling variations, viewport collapse behaviour, and micro-interactions in real time.
Not yet approved — do not build against this.
Palette is unresolved. Placeholder greyscale. Not a client palette — generate the Palette option set, get one approved, then paste its hexes here and date the decision.
Record the approved choice in src/data/project-decisions.ts — the one file edited per project. Every route, library entry and export reads from it.
Not yet approved — do not build against this.
Typography is unresolved. Native system stack placeholder — no webfont request. Generate the Typography option set; verify every weight EXISTS before specifying it (browsers round silently).
Record the approved choice in src/data/project-decisions.ts — the one file edited per project. Every route, library entry and export reads from it.
Registered Modules
Core Repeating Beaver Builder & PowerPack Layouts
Every entry renders at true full width, then documents its Beaver Builder row structure, compiled styling tokens, and content schema. Tokens resolve from the live variables in src/styles.css.
Module 01 · HERO
Content Page Masthead A
Opens an interior page with one sentence naming what the visitor wants, plus a direct and a transitional action.
POWERPACKFULL WIDTH ROW / FIXED CONTENT WIDTH 1024PXComponentRow | Content Page Masthead A [C]
Live Preview · Full Width Stage
Services
Your Site Should Win Work While You Sleep
You already do great work. The website just has to say so — clearly, quickly, and in your customer's words.
xl · ≤1200pxHeadline steps down to 36px; layout unchanged.
lg · ≤992pxContent width fills the row gutters; padding tightens to 32px.
md · ≤768pxHeadline 30px, buttons stack full-width, vertical padding drops to 48px.
Module 02 · UTILITY
Section Heading With Support Note
Announces a new beat on a long page and gives the reader a one-line reason to keep going.
POWERPACKFIXED / FIXED CONTENT WIDTH 1024PXGlobalRow | Section Heading With Support Note [G]
Live Preview · Full Width Stage
What We Do
Built Once, Edited By You Forever
Every page ships as editable Beaver Builder rows, so your team keeps control after handoff.
xl · ≤1200pxUnchanged.
lg · ≤992pxColumns stack; support note sits below the headline.
md · ≤768pxHeadline 30px; padding 48px / 24px.
Module 03 · CONTENT
Info Box Row — 3 Column
Presents three parallel offers or capabilities at equal weight so no single one dominates the scan.
POWERPACKFULL WIDTH ROW / FIXED CONTENT WIDTH 1024PXComponentRow | Info Box Row 3 Column [C]
Live Preview · Full Width Stage
Safe To Edit
Locked global rows and clear module names keep the layout intact after handoff.
Made To Convert
One primary action per screen, repeated with identical wording every time.
xl · ≤1200pxThree columns hold.
lg · ≤992pxCollapses to a single stacked column.
md · ≤768pxSingle column, 24px padding.
Module 04 · CONTENT
Info List — Checked Deliverables
States exactly what is included in an engagement so the reader can judge scope without asking.
POWERPACKFIXED / FIXED CONTENT WIDTH 1024PXComponentRow | Info List Checked Deliverables [C]
Live Preview · Full Width Stage
Included
Everything In The Base Build
- A homepage that names the problem in your customer's words
- Service pages that answer the three questions you get on every call
- A contact flow that qualifies leads before they reach your inbox
- Training video so your team can edit any page without a developer
xl · ≤1200pxUnchanged.
lg · ≤992pxHeading stacks above the list; gap drops to 32px.
md · ≤768pxFull-width list items, 48px band padding.
Module 05 · CONTENT
Advanced Tabs — Pill Navigation
Lets one section carry several audiences or process steps without lengthening the page.
POWERPACKFULL WIDTH ROW / FIXED CONTENT WIDTH 1024PXComponentRow | Advanced Tabs Pill Navigation [C]
Live Preview · Full Width Stage
How It Works
Three Steps, No Surprises
We map what your best customers actually search for, then write the page around that language instead of internal jargon.
xl · ≤1200pxUnchanged.
lg · ≤992pxPills stay on one row; panel padding unchanged.
md · ≤768pxPills wrap to multiple rows, 44px minimum touch target retained.
Module 06 · LISTING
Content Grid — Post Cards
Renders a looped post query as scannable cards for an index, archive, or resource library.
POWERPACKFIXED / FIXED CONTENT WIDTH 1024PXGlobalRow | Content Grid Post Cards [G]
Live Preview · Full Width Stage
Guide
What A Small Business Site Really Costs
6 min read
Checklist
Nine Things To Fix Before You Redesign
4 min read
Case Note
Why Fewer Pages Sold More Work
5 min read
xl · ≤1200pxThree columns.
lg · ≤992pxTwo columns.
md · ≤768pxOne column, full-bleed cards inside 24px gutters.
Module 07 · LISTING
Content Tiles — Feature + Support
Gives one offer visual dominance while keeping a secondary offer reachable in the same band.
POWERPACKFULL WIDTH ROW / FIXED CONTENT WIDTH 1024PXComponentRow | Content Tiles Feature Plus Support [C]
Live Preview · Full Width Stage
The Flagship Tile
One dominant tile sets hierarchy; the supporting tile carries secondary weight without competing for the same click.
Supporting Tile
Use for a secondary offer, a resource, or a transitional call to action.
xl · ≤1200px2/3 + 1/3 holds.
lg · ≤992pxTiles stack full width, feature first.
md · ≤768pxStacked, padding drops to 24px.
Module 08 · CONTENT
Split Feature — Media + Proof
Establishes the brand as the guide — empathy paired with authority proof and a supporting portrait.
POWERPACKFIXED / FIXED CONTENT WIDTH 1024PXComponentRow | Split Feature Media Plus Proof [C]
Live Preview · Full Width Stage
The Guide
We Have Rebuilt This Exact Site Before
You do not need a bigger website. You need the four pages that answer the questions your buyers already ask.
- Fixed scope and fixed price
- Weekly review call
- Editable after handoff
xl · ≤1200px50/50 holds.
lg · ≤992pxImage stacks above copy; gap 32px.
md · ≤768pxStacked, button becomes full width.
Module 09 · CTA
The Plan 3-Card CTA Block
Reduces the engagement to three numbered verb-led steps and closes on the direct action.
POWERPACKFULL WIDTH ROW / FIXED CONTENT WIDTH 1024PXComponentRow | The Plan 3 Card CTA [C]
Live Preview · Full Width Stage
The Plan
Three Steps To A Site That Sells
Book a Call
Twenty minutes. We listen, you talk, nobody pitches.
Approve the Plan
A fixed scope, a fixed price, and a date on the calendar.
Launch and Own It
You go live with a site your team can edit the same week.
xl · ≤1200pxThree columns hold.
lg · ≤992pxCards stack in order 01 / 02 / 03.
md · ≤768pxStacked; CTA becomes full width, band padding 48px.
Module 10 · CONTENT
Testimonial Row — 3 Column
Carries third-party authority proof in the client's own words, directly before or after the guide beat.
POWERPACKFIXED / FIXED CONTENT WIDTH 1024PXGlobalRow | Testimonial Row 3 Column [G]
Live Preview · Full Width Stage
Placeholder testimonial copy. Replace with an approved client quote before launch.
Placeholder testimonial copy. Replace with an approved client quote before launch.
Placeholder testimonial copy. Replace with an approved client quote before launch.
xl · ≤1200pxThree columns.
lg · ≤992pxSingle column stack.
md · ≤768pxSingle column, 24px gutters.
Module 11 · LISTING
Pricing Table — 3 Tier
Makes a productized service comparable at a glance with one tier visibly recommended.
POWERPACKFULL WIDTH ROW / FIXED CONTENT WIDTH 1024PXComponentRow | Pricing Table 3 Tier [C]
Live Preview · Full Width Stage
Starter
$3,500
One-page site for a new venture.
- Single page
- Contact form
- Basic SEO
Standard
$7,500
The four pages most businesses need.
- Up to 5 pages
- Lead routing
- Copy support
- Training video
Growth
$12,000
Multi-service site with content system.
- Up to 12 pages
- Blog system
- Landing templates
- Quarterly review
xl · ≤1200pxThree columns.
lg · ≤992pxStacked, featured tier keeps its badge and border.
md · ≤768pxStacked, CTA full width.
Module 12 · CONTENT
FAQ Accordion
Answers the objections that stop a ready buyer, immediately before the final CTA.
POWERPACKFIXED / FIXED CONTENT WIDTH 768PX (JCD_WIDTH_NARROW)GlobalRow | FAQ Accordion [G]
Live Preview · Full Width Stage
Questions
Answered Before You Ask
Most projects run four to six weeks from kickoff to launch, assuming copy and photos arrive on schedule.
xl · ≤1200pxUnchanged.
lg · ≤992pxUnchanged.
md · ≤768pxPadding 24px; question wraps to two lines without clipping the chevron.
Module 13 · UTILITY
Logo Bar — 4 Column
Provides lightweight recognition proof under the masthead without asking for any reading effort.
POWERPACKFULL WIDTH ROW / FIXED CONTENT WIDTH 1024PXGlobalRow | Logo Bar 4 Column [G]
Live Preview · Full Width Stage
Trusted By Placeholder Client Names
Client One
Client Two
Client Three
Client Four
xl · ≤1200pxFour across.
lg · ≤992pxTwo across, two rows.
md · ≤768pxTwo across; cells keep the 64px height.
Module 14 · CTA
Full-Width CTA Band
Closes the page by naming the cost of inaction and repeating the primary action verbatim.
POWERPACKFULL WIDTH ROW / FULL WIDTH (JCD_BLEED), INNER WRAPPER 1024PXGlobalRow | Full Width CTA Band [G]
Live Preview · Full Width Stage
Every Week Without It Costs You Work
The quote you did not get was someone who could not tell what you do in five seconds.
xl · ≤1200pxUnchanged.
lg · ≤992pxCopy stacks above the button, left aligned.
md · ≤768pxButton becomes full width; padding 48px / 24px.
Module 15 · CTA
Transitional CTA — Resource Download
Offers a low-risk asset to the visitor who is interested but not yet ready to book.
POWERPACKFIXED / FIXED CONTENT WIDTH 1024PXComponentRow | Transitional CTA Resource Download [C]
Live Preview · Full Width Stage
Free Resource
The Nine-Point Website Checklist
Not ready to talk yet? Take the checklist we run on every audit and score your own site in ten minutes.
xl · ≤1200pxUnchanged.
lg · ≤992pxForm stacks below the copy.
md · ≤768pxInner box padding drops to 24px; input and button go full width.
Variation Studies
Three Treatments Per PowerPack Module
Module 01
Info Box
Icon, headline, description, and CTA — arranged three ways.
A · Icon Top-Centered
Instant Deployment
Push structural updates to production surfaces in seconds — no rebuild windows, no downtime.
Learn moreB · Icon Left-Aligned
Hardened Security
Layered controls with role scoping, audit trails, and encryption at rest by default.
Review policiesC · Framed / Boxed w/ Hover Lift
Elevated Craft
A framed presentation with tactile lift — ideal for premium feature rows and hero-adjacent cards.
ExploreUXFitts's Law: CTAs sit at the visual base of every card with a 44px+ hit target so the pointer trajectory is always short and predictable.
WP · PowerPackConfigure natively via the PowerPack Info Box module — Icon Position (Top/Left), Background Style (Framed), and Hover Shadow toggles all map 1:1.
Module 02
Info List
Vertical timeline lists with numeric or icon badges.
A · Left Numeric Badges
- 01
Discovery
Map goals, audiences, and structural constraints.
- 02
Blueprint
Approve information architecture and module plan.
- 03
Build
Ship modules in Beaver Builder with PowerPack presets.
- 04
Launch
QA across breakpoints, publish, and monitor.
B · Alternating Sides
- 1
Discovery
Map goals, audiences, and structural constraints.
- 2
Blueprint
Approve information architecture and module plan.
- 3
Build
Ship modules in Beaver Builder with PowerPack presets.
- 4
Launch
QA across breakpoints, publish, and monitor.
C · Minimalist Divider List
- Step 1
Discovery
Map goals, audiences, and structural constraints.
- Step 2
Blueprint
Approve information architecture and module plan.
- Step 3
Build
Ship modules in Beaver Builder with PowerPack presets.
- Step 4
Launch
QA across breakpoints, publish, and monitor.
UXMiller's Law: Each list keeps items chunked to 4 — a comfortable working-memory span for scannable step-throughs.
WP · PowerPackRecreate via the PowerPack Info List module — set Icon Position, choose the Timeline connector style, and adjust divider weight in Typography > Spacing.
Module 03
Advanced Tabs
Interactive tab navigation — horizontal, vertical, and segmented.
A · Horizontal Top Tabs
Core module architecture, purpose, and high-level layout options for stakeholder review.
B · Vertical Left Sidebar
Core module architecture, purpose, and high-level layout options for stakeholder review.
C · Segmented Pill Controller
Core module architecture, purpose, and high-level layout options for stakeholder review.
UXDoherty Threshold: Tab panels swap instantly on click (<100ms perceived), preserving user flow without spinners or reloads.
WP · PowerPackPowered by the PowerPack Advanced Tabs module — Layout (Horizontal/Vertical), Style (Boxed/Underline/Pills), and Responsive Breakpoint controls.
Module 04
Content Grid
Responsive media grid — 3 → 2 → 1 columns across our breakpoints.
A · Traditional Blog Grid (3 / 2 / 1)
B · Borderless Masonry Style
Systems
Design tokens as a shared contract
6 min read
Process
Auditing legacy WordPress builds
4 min read
Motion
Micro-interactions that respect attention
5 min read
C · Modern Overlay Gradient
Craft · 7 min read
Editorial spacing for long-form content
Read articleOps · 9 min read
Shipping module libraries at agency scale
Read articleResearch · 5 min read
Applying Miller's Law to nav depth
Read articleUXJakob's Law: Card grids match the mental model established by editorial and marketplace patterns, so scan behaviour is immediate.
WP · PowerPackUse the PowerPack Content Grid module — set Columns (Desktop 3 / Tablet 2 / Mobile 1) to match 1200/992/768 collapse points exactly.
Module 05
Content Tiles
Asymmetric bento layouts — feature + support tiles.
A · High-Contrast Split w/ Overlay Text
Feature Tile
Systemic thinking, from architecture to atoms.
A neutral canvas ready for your brand tokens, typography pair, and imagery library.
Support Tile
Composition
Structural harmony across scales.
Support Tile
Rhythm
Predictable spacing at every viewport.
B · Masonry Geometric Layout
Systems
Craft
Ops
Motion
Insights
C · Hover Mask Reveal
Discovery
Discovery
Audit, interviews, and constraint mapping.
Structure
Structure
IA, sitemap, and modular blueprints.
Delivery
Delivery
Build, launch, and continuous refinement.
UXVon Restorff Effect: A single dominant tile establishes visual hierarchy; the supporting tiles carry secondary weight without competing.
WP · PowerPackRecreate via the PowerPack Content Tiles module — Layout Preset (2×2, Feature-Left, Bento) and Overlay Style options ship out of the box.
Module 06
Headings
Editorial heading treatments with eyebrows, rules, and dual-tone.
A · Micro-Text Eyebrow
Design Systems · 2026
Neutral scaffolding, ready for brand.
A discreet eyebrow anchors the section within the taxonomy without competing with the headline.
B · Bottom Accent Rule
A structural marker beneath the title.
A short rule signals hierarchy and section start without adding chrome or color.
C · Dual-Tone Combined Weight
Structural clarity paired with editorial calm.
A single family carries the whole line — weight and tone alone establish the hierarchy.
UXConsistency & Standards: Heading treatments stay within a shared type scale so hierarchy remains legible across page templates.
WP · PowerPackPowered by the PowerPack Heading module — configure the Sub-Heading position (Top/Bottom), the Separator element, and the dual-color tokens inline.