Websites

Homepage sections: what 13 planned home pages contain

A small business homepage usually needs six to eight sections: a hero, the offer in image and text rows, proof such as stats, how it works, live items such as classes or products, and a closing call to action. Across 11 planned website home pages the median was 7 sections, and every one had a hero, image rows and a call to action band.

Indunil Asanka · Co-founder

4 min read · Published 21 October 2026

A small business homepage works with six to eight sections: a hero, the offer in image and text rows, how it works, items that change, and a closing call to action. In 11 AI planned website home pages, the median was 7 sections, and all 11 had a hero, image and text rows and a call to action band.

Where the sections come from

OneCraft plans a website before writing code, and the plan lists the sections of each page in order. The table groups the home page’s section lines from OneCraft’s development project on 21 October 2026, one plan per business, the latest completed pipeline run: a yoga studio, a second yoga studio, a pilates studio, a pottery studio, a ceramics shop, a kayak hire, a running club, a branding agency, a sourdough course, a dog hotel and a dog walker. That is 11 home pages with 78 section lines between them, counted as the plans list them, a footer included where a plan named one.

Caveats: n is 11; the briefs were written by the team, several with many features; all on one environment; the grouping into kinds is by hand from the planner’s own words. These are plans, and the built page can differ slightly. The two phone app plans are described separately below because a Home tab is a different thing.

The three sections every plan had

A hero. Seven plans used a full bleed photo with the headline over a scrim, usually bottom left, three used a split layout with the photo beside the headline, and the branding agency used a large typographic statement. Most carried two actions, such as Book a class and See the timetable. The hero is what loads first, so it decides the page’s Largest Contentful Paint and what a visitor sees above the fold. What a hero section is covers the parts.

Image and text rows. Every plan described its services, classes or making process in alternating photo and text rows. It is the plainest way to give each offer its own picture and paragraph without a wall of cards.

A closing call to action band. Every plan ended with a band holding a photo and one action: book, join, start a free lesson, get a quote. What a call to action is explains why one clear action beats several.

The sections most plans added

How it works steps appeared on 7 home pages, nearly all for booking: create an account, pick a class, manage the booking. Live items from the site’s own database appeared on 6: featured products in a grid or carousel, the next classes, the latest journal posts or podcast episodes. Each was planned with loading, empty and error states, which matters because a homepage that shows a blank box while data loads looks broken.

Stats or prices strips (5) put the brief’s real numbers in big type: 8 reformers, 12 spots per class, a $50 deposit. Offer teasers (5) promoted memberships, class packs, a pre-order run of 80 sets or a fundraiser with its progress. Contact details sat on 5 home pages directly, and 4 used a slowly moving marquee strip. A homepage is also where a business usually describes itself to search engines, with its name, address and opening hours as structured data; what JSON-LD is covers that, and it belongs to the page even though no visitor sees it.

The app Home screens

The two app plans, a yoga studio and a cleaning company’s staff app, had 5 and 4 sections on Home. Both led with what the person needs now: a next class card with a Book button, or a today card with the next shift and a large Clock in button. Then a short row of choices and a note. An app tab is opened by people who already chose the business, so it skips the pitch.

A homepage outline you can copy

Hero: what you do, where, one sentence, one or two actions.
Your offers as image and text rows, one each.
A strip of real numbers: prices, places, years.
How it works, in three or four steps, if the action has steps.
Something live: next dates, new products, latest posts.
One offer teaser, if you have a pack, membership or season.
A closing call to action band with contact details.

For pages beyond the home page, how many pages a small business website needs and the multi page website builder go further; for a single page site, see the one page website maker. The AI website builder plans these sections from your brief, and font pairings for websites covers the type the same plans chose.

Kinds of section on the home page of each plan, latest completed pipeline job per business, dev project, read 21 October 2026 (n = 11 website home pages, 78 sections; the 2 app Home screens are counted apart in the text). Grouping of the planner's section lines by hand
Section	Home pages with it (of 11)	What the plans put in it
Hero	11	7 full bleed photo heroes, 3 split heroes with a photo beside the headline, 1 typographic statement hero; two actions in most
Image and text rows	11	Services, classes or how pieces are made, alternating photo and text
Closing call to action band	11	A band with a photo and one action: book, join, get a quote
How it works steps	7	3 or 4 numbered steps with their own icons
Live items from the database	6	Featured products, next classes, latest posts, with loading and empty states
Stats or prices strip	5	Big numbers from the brief: spots per class, a deposit, a price
Offer teaser	5	Memberships, class packs, a pre-order run or a fundraiser with its progress
Marquee strip	4	A moving line of styles, products or promises
Contact details	5	Email, phone or address on the home page itself
Bento grid	3	Tiles linking to the main parts of the site
Photo strip or gallery	2	A wide photo strip or a carousel
FAQ	1	Area, what to bring, weather, meet and greet

Questions people ask

How many sections should a homepage have?

Enough to answer what you offer, why trust you, how it works and what to do next, which is usually six to eight. The 11 plans here listed 6 to 8, with a median of 7, counting a footer where the plan named one. Fewer is fine for a one service business; more than about ten usually means the homepage is doing the job of other pages.

What should go in a homepage hero?

A headline that says what you do and where, one supporting sentence, and one or two actions such as Book a class and See the timetable. Most plans here used a full bleed photo behind the text, three put the photo beside it, and the agency used big type alone. Keep the main action visible without scrolling on a phone.

Should a homepage show live data?

If the business has something that changes, yes: the next classes, new products, the latest posts. Six of 11 plans did, each with a loading, empty and error state planned. It gives returning visitors a reason to look again. A business whose offer rarely changes is fine with fixed copy.

Do I need a How it works section?

When the action has more than one step or is unfamiliar, it helps. Seven of 11 plans had one, mostly for booking: sign in, pick a class, join the waitlist, cancel by the cutoff. For a simple contact or a shop people already understand, a short line under the call to action can do the same job.

How is a phone app's Home screen different?

It is shorter and more personal. The two app plans had 4 and 5 sections on Home: a next class or today card with one big action, a short row of choices, and a note. An app is opened by people who already know the business, so it leads with what they need now rather than a pitch.

Written by

Indunil Asanka · Co-founder

Builds the generation pipelines behind OneCraft: the slide, flyer and poster layout engines, the document grid and the render workers that turn a written brief into a finished file.

LinkedIn profile

Sources

Written and checked by the OneCraft team. Last checked 21 October 2026.

Make your own website

Describe what you need and the generator writes and designs it, then you edit anything you like.

See what it can make