Thursday, August 22, 2024

Choosing the Right Blocks for Your Website

Yassine TEJJANI
What are we building today?

Salam, friend.

So you've signed up, you're staring at your new website, and you're wondering: what do I do with all these blocks?

Don't worry. By the end of this article, you'll understand exactly what each block does and when to use it. No design degree required.

Think of blocks like furniture for your website. You wouldn't put a bed in the kitchen or a dining table in the bathroom. Each piece has a purpose and a place where it makes sense. Blocks work the same way.

Let's walk through them.

Headers

What it is: The navigation bar at the top of your website. Usually contains your logo, menu links, and sometimes a button.

When to use it: Every page needs one. It's how visitors move around your site.

Tips:

  • Keep your menu simple. 3-5 links maximum. Nobody wants to read a dictionary up there.
  • Make sure your logo is visible but not giant. It should guide, not dominate.
  • If you have one main action you want visitors to take (like "Get Started" or "Buy Now"), put it as a button in your header.

Hero Sections

What it is: The big, bold section visitors see first when they land on your page. Usually has a headline, a short description, and a button.

When to use it: At the top of your homepage or any landing page. This is your first impression — make it count.

Tips:

  • Your headline should answer one question: "What do you offer and why should I care?"
  • Keep the description short. Two to three sentences maximum.
  • One clear button. Not three. One. Tell visitors exactly what to do next.
  • Avoid vague headlines like "Welcome to my website." Say something specific like "Learn Graphic Design in 30 Days" or "IPTV Subscriptions Delivered Instantly."

Features

What it is: A section that highlights what you offer or what makes your product special. Usually displayed as a grid with icons or images and short descriptions.

When to use it: After your hero section. Once visitors know what you offer, they want to know the details.

Tips:

  • Three to four features is the sweet spot. More than six gets overwhelming.
  • Lead with benefits, not technical details. Instead of "PDF format," say "Download and start reading instantly."
  • Each feature should answer: "What's in it for me?"

Testimonials

What it is: Quotes from happy customers or clients. Social proof that builds trust.

When to use it: After you've explained what you offer. Testimonials reassure visitors that real people have bought from you and were satisfied.

Tips:

  • Real names and photos work better than anonymous quotes. Ask your customers if they're comfortable being featured.
  • Specific testimonials beat generic ones. "I made my first sale within a week" is stronger than "Great product!"
  • Don't have testimonials yet? Skip this block for now. Add it once you have real feedback. Fake testimonials do more harm than good.

Pricing

What it is: A section displaying your products or plans with prices and what's included.

When to use it: When you have different options to present — like subscription tiers, product bundles, or service packages.

Tips:

  • Keep it scannable. Visitors should understand their options within seconds.
  • Highlight your recommended option if you have one. A simple "Most Popular" label helps people decide.
  • Be transparent. Hidden fees or confusing terms kill trust.

FAQ

What it is: Frequently Asked Questions. A list of common questions with answers.

When to use it: Near the bottom of your page, before the footer. It catches visitors who are almost ready to buy but have lingering doubts.

Tips:

  • Answer real questions. Think about what your customers actually ask you on WhatsApp or social media.
  • Keep answers short and direct. This isn't the place for essays.
  • Common questions to include: How does payment work? How do I access the product? Can I get a refund? How do I contact support?

Galleries

What it is: A visual grid displaying images — useful for showcasing work, products, or results.

When to use it: When your product is visual. Photographers, designers, course creators showing certificates, before/after results.

Tips:

  • Quality matters. Blurry or stretched images make your whole site look unprofessional.
  • Don't overload. Six to twelve images is usually enough. You're showcasing, not overwhelming.
  • If your product isn't visual, skip this block. Not every website needs a gallery.

A Simple Structure That Works

Not sure where to start? Here's a proven structure for a landing page that sells:

  1. Header — Navigation and logo
  2. Hero — What you offer and why it matters
  3. Features — The details and benefits
  4. Testimonials — Proof from real customers
  5. Pricing — What it costs and what they get
  6. FAQ — Answer the hesitations
  7. Footer — Contact info and links

You don't need all these blocks on every page. A simple product page might just need a hero, pricing, and FAQ. A homepage might use all of them.

Start with the template we provide, see what fits your needs, and adjust from there.

Light Mode or Dark Mode?

Every block can be toggled between light and dark mode. There's no right answer — it depends on your brand and what feels right for your audience.

A quick guideline:

  • Light mode feels clean, open, and professional. Good for education, coaching, services.
  • Dark mode feels bold, modern, and premium. Good for entertainment, gaming, tech products.

Whichever you choose, stay consistent. Mixing randomly looks messy.

The Most Important Rule

Your website isn't about looking impressive. It's about making it easy for visitors to understand what you offer and take action.

Every block should earn its place. If a section doesn't help your visitor decide, remove it.

Simple, clear, and focused beats fancy and cluttered. Every time.

Now go build something.

Warmly,

Yassine