Heroes
The thirteen hero patterns that turn up most often across marketing, service, product and content sites, each built from native Beaver Builder rows and the AnoLogix design system. Every hero is one row with bb-hero and a variant class, so the layout, spacing and type come from the system rather than from per-row settings. On this page each example uses an h2 so the page keeps one h1; on a real page the hero title is the h1.
1. Centered
Text only: badge, headline, one line of support, two actions and a reassurance note, all centred. The most common hero on the web and the fastest to load. Use it when the message is the product.
New Spring maintenance slots are open
Repairs and renovations, done right the first time
One team for the small fixes and the big projects, with a written quote before any work starts and a 90-day workmanship guarantee after it ends.
No call-out fee · Fully licensed and insured · Rated 4.9 by 1,200 clients
2. Split (copy and image)
Copy on one side, a photo on the other, six columns each. The workhorse for service and local-business sites: the image shows the work while the copy sells it. Stacks copy first on phones.
Residential and commercial
Building work you can plan around
Fixed prices, agreed start dates and a project manager who answers the phone. We keep the site tidy and you informed from survey to handover.
3. Full-bleed image
A photograph fills the whole hero, with a dark scrim so white copy stays readable. The copy holds to the left seven columns. Best when one strong image tells the story better than words.
4. Product showcase
Centred copy above a framed screenshot that runs off the bottom of the hero into the next section. The standard for software, apps and client portals, where seeing the product is the pitch.
Client portal
Every job, from quote to handover, in one place
Approve quotes, see progress photos, track the schedule and pay invoices online. Included free with every project.
5. Video background
A short, silent, looping clip behind centred copy, with the same scrim as the image hero. Adds motion and atmosphere; phones get the still fallback photo instead of the video.
6. Lead capture form
The form sits in the hero itself, beside the reasons to fill it in (seven columns of copy, five of form). Common for quotes, demos and consultations, where the first conversion is the whole job of the page.
Free site survey
Get a fixed-price quote in 48 hours
Tell us about the job and a surveyor will call to book a visit. No obligation and no sales pressure.
Request your quote
Takes about a minute. Fields marked (Required) must be filled in.
7. Floating card
A photograph fills the hero and the copy sits in a white card on top of it. Gives the image room to breathe without a scrim and keeps dark text on white, so contrast never depends on the photo.
Outdoor living
Pools, decks and gardens built to last
Design, engineering and construction under one contract.
8. Split screen (edge to edge)
Two halves that run to the edges of the window: a solid brand panel with the copy, and a photo filling the other half. Bolder than the contained split, and common for agencies, studios and campaign pages.
Design studio
Drawings that get approved first time
Planning drawings, building regulations and structural detail from an in-house team that builds what it draws.
9. Image collage
Copy beside a mosaic of three photos (five columns of copy, seven of images). Shows range rather than a single moment, so it suits portfolios, hospitality and anyone with varied work to show.
Interiors
Rooms that feel finished
Kitchens, living spaces and full-floor refits, specified and built by one team.
10. Social proof
Headline and actions over a band of hard numbers. Leads with credibility for established firms, where years, projects and ratings do more selling than adjectives.
Since 2004
The builder your neighbours recommend
Most of our work comes from referrals. Here is why.
20+years in business
1,200projects completed
4.9average review score
98%finished on schedule
11. Search
A headline and one search field over a photo, with popular searches beneath. The entry point for help centres, directories, listings and knowledge bases, where the visitor already knows what they want.
12. Typographic
No imagery at all: one oversized statement in display type, with the supporting line and actions below a rule. Confident and quick to load, and suited to studios, agencies and campaigns with a strong line.
AnoLogix build
Built properly. Finished on time.
Two decades of renovations, extensions and new builds, delivered to a fixed price and an agreed date.
13. Page header
The compact hero for interior pages: breadcrumb, title and one line of context, no actions. Keeps the brand consistent below the home page without pushing the content down.
Roof repairs
Leaks, storm damage and slipped tiles fixed fast, with photos of every repair and a 10-year guarantee on the work.