2.4Building an attractive homepage
The essentials in 30 seconds
- The homepage has a few seconds to convince: a hero with a strong headline, a subheading and an action button.
- Each section carries a single message and guides towards the goal: who I am → what I offer → the proof → the action.
- Patterns provide an immediate professional base; you customise them rather than starting from scratch.
Running mini-case — the workshop's homepage
The Atelier Bahja homepage must win visitors over from the first moment: show the beauty of the ceramics, explain the craft work and make them want to visit the shop or contact Hassan. Samir starts from a hero pattern, then adds sections dedicated to the collections, the approach and testimonials. He avoids spreading the whole site over a single page.
Sequel to case 2.3 — the areas are ready, now building the showcase.
1. The hero and the value proposition
The hero section is the big opening of the page: a catchy headline, a subheading that clarifies the offer and a visible action button, often over a background image. In a few seconds, the visitor must understand who the workshop is, what it offers and what they can do next. It is the most important part of the page.
The value proposition must be concrete: "Hand-thrown ceramics in Casablanca" says more than "Welcome to our site". Samir avoids vague slogans and texts centred on the business: he talks about what the client gets.
2. Structuring and converting
An effective homepage follows a progression: who I am, what I offer, the proof (testimonials, figures, gallery), then the action. Each section carries one idea and ideally ends with a call to action. Avoid scattered links: one main goal, a few secondary actions.
Patterns offer ready-made sections — hero, services, testimonials — that you customise. Samir uses them as a base, replaces the texts and images, then checks the logic from top to bottom. He publishes and sets the page as the homepage (section 1.5).
🔎 Concrete example — Composing the workshop's homepage (Samir's case)
Hero: "Ceramics thrown by hand in Casablanca" + button "Discover the collections".
Section 2: three collections (tableware, decoration, garden).
Section 3: the craft process in three steps.
Section 4: customer testimonials.
Final section: "Visit the workshop" + contact.
→ Publish and set as homepage.Result: a smooth journey towards contact or the shop.
Lesson: each section prepares the final action.
Section vocabulary
- Hero section
- The large opening section: headline, subheading, action button, often an image.
Simple example: the headline "Ceramics thrown by hand".
What it is not: opening with a simple logo and no message.
Reflex: the decisive 3 seconds = hero.
- Call to action (CTA)
- A button or link inviting action: quote, purchase, contact, visit.
Simple example: "Discover the collections".
What it is not: multiplying ten competing buttons.
Reflex: one main goal, one clear CTA.
- Pattern
- A ready-made layout (hero, pricing, testimonials) inserted then customised.
Simple example: a testimonials pattern adapted to the workshop.
What it is not: rebuilding every section by hand.
Reflex: pro base = customised pattern.
- Value proposition
- What must be clear at the top of the page: who you are, what you bring, to whom.
Simple example: local craftsmanship, one-off pieces, careful delivery.
What it is not: "Welcome to our site" as the only message.
Reflex: concrete and client-oriented.
- One message per section
- Principle: each section carries a single idea, not a catch-all.
Simple example: one section for the collections, one for the approach.
What it is not: mixing collections, history and contact in a single block.
Reflex: one idea, one section, one action.
In practice — Composing a homepage that converts
- Create or edit the homepage and insert a hero pattern.
- Replace the headline with a clear value proposition and add an action button.
- Add a collections section, a proof section (testimonials) and a contact section.
- Review the progression from top to bottom, publish and set the page as the homepage.
Ready-to-say script — explaining the homepage logic (25 s)
"At the top, the visitor immediately understands what you do and can discover your collections. Then I show your craft, customer reviews, then a button to contact you. Each part brings them closer to the action."
Present the journey as a story, not as a list of blocks.
Copy-paste template — homepage plan
HERO: headline _______________ / subheading _______________ / CTA _______________
SECTION 2: collections / services
SECTION 3: proof (testimonials, figures)
SECTION 4: process or gallery
FINAL SECTION: contact CTA
MAIN GOAL: _______________Craft showcase
Strong photos, the story of the craft, simple contact.
Shop
Product-oriented hero, collections in the foreground, shop CTA.
Local service
Service area, opening hours, call button in evidence.
Portfolio
Gallery as the hero, case studies, contact at the end of the journey.
✓ Best practices
- Write the value proposition before choosing the images.
- One main goal, one dominant CTA.
- Start from a pattern, then customise.
✗ Common pitfalls
- Spreading everything over the homepage with no hierarchy.
- Multiplying competing buttons.
- Writing a vague, self-centred slogan.
Key takeaways
- The hero says who, what, and what to do in 3 seconds.
- Each section carries a single message.
- The progression leads to a clear action.
- Patterns speed up professional composition.
48h Challenge — apply tomorrow
Write a project's value proposition in one sentence, then compose a hero with a button. Add three sections at most and check that each one leads towards the action. 30 minutes.
- I write a clear value proposition.
- I compose a hero with a call to action.
- I structure the homepage as a progression towards the action.
Frequently asked questions
How many sections should the homepage have?
Enough to cover who, what, proof and action — often four to six. Beyond that, the visitor gets lost. It is better to lighten the page and link to dedicated pages for details.
Should the hero have a background image?
Not necessarily. A good professional photo helps, but a plain background with a strong headline and a button can be more readable and faster. What matters is the clarity of the message and the contrast.
How do I set this page as the homepage?
In Settings → Reading, choose "A static page" and select the page you composed. If you keep a blog, assign another page as the posts page.
What should the opening section (hero) of the homepage say?