⬚Blocks — which one for what

By the content, not by the appearance. The question is not “what looks good here” but “what kind of information is this”.

Three guard rails:

• One thing per section. If you need an “and” in your head to describe the section, it is two.
• The block that brings the structure with it wins. Three services belong in a card grid, not in body text with dashes.
• The simplest one that does the job. A text section that is sufficient is better than a card grid with one card.

How you recognise the wrong block: you start inserting blank lines into the text to create spacing. That is always the sign that the structure is missing.

For the first thing someone sees, and only for that. A hero belongs right at the top, and there is exactly one on a page.

The fields: Heading, Subheading, Background image and up to two buttons.

What the heading has to do: say in one sentence what it is about — not what the company is called. “Painting work in Dresden, clean and punctual” is a heading. “Welcome to Müller & Sons” is not.

The background image should be landscape and at least 1600 pixels wide. A portrait mobile phone photo gets cropped, and precisely at the point where it was interesting.

Two buttons are the maximum; one is usually better. Anyone who has to choose between three routes takes none.

When continuous body text is the right thing — an explanation, a story, a justification. One field, Text, with paragraphs separated by a blank line.

The text section is the block most often used wrongly, because it accepts everything. Rule of thumb: as soon as the text consists of a list of similar things, another block is better — card grid for services, timeline for a sequence, FAQ for questions.

On length: hardly anyone reads more than about 400 words in one go online. Better to split it into two sections with subheadings.

Text + image places text and image side by side, with an Image position (left or right) and optionally a Heading. The plain text section only has text.

When to use which:

• Text + image if the image contributes to understanding — the team, the product, the process.
• Text if the image would only be decoration. A stock photo next to a paragraph does not make it more convincing, only longer.

With several such sections, alternate the image position: left, right, left. That is not an end in itself; it stops the page looking like a table.

Always fill in the alt text. It describes what is in the image — for people who cannot see it, and for search engines.

For several similar things side by side: services, locations, offers, contact persons. Each card has an Icon (emoji), a Title, a Text and optionally a Link.

It is the most used block after text and hero, and the one that makes a page look tidy most quickly.

Two tips from practice:

• Three or six cards look calmer than four or five, because they fill the rows neatly.
• Keep the texts the same length. Cards stand side by side; one with four lines next to one with a single line looks like a mistake.

The emoji is a character, not a sentence. One is enough, and if you cannot think of one, leave it out everywhere — not just on one card.

For several images that belong together: references, a celebration, a building project in pictures. Fields per image: the Image itself and a Description.

In the grid, all images are brought to the same size. That means: different formats are cropped. If the framing matters to you, crop the images yourself beforehand.

How many: eight to twelve make a gallery. Forty make an archive nobody scrolls through — take the best ten. It hurts and makes the page better.

And: every image gets a description. It is the alt text and the caption at the same time.

For the one thing the visitor is meant to do — Heading, Text, Button label and Button link.

A call to action comes at the end of a thought, not in the middle: after the explanation of what you do comes the question of whether the visitor would like to get in touch.

On the label: the button says what happens, not what you do. “Request a quote” is better than “Click here”, and “Donate now” better than “Next”.

One or two calls to action per page. Anyone who is asked to get in touch every three screen heights does not get in touch more often, but leaves.

For the questions you are asked all the time anyway. Fields: a Heading and any number of pairs of Question and Answer.

It is one of the underrated blocks, for two reasons:

• It saves calls. Whatever is on the page, nobody has to ask any more.
• It gets found. People type questions into search engines, and an FAQ section contains exactly that wording.

Write the questions the way they are asked — “How long does it take?”, not “Processing time”. And really answer them: an FAQ in which every answer says “talk to us” is not help but an evasion.

For quotes with names. Fields per entry: Quote, Author, optionally a Photo — plus the setting Rotate automatically.

The website adds the quotation marks itself; write just the sentence.

What makes a quote valuable is being concrete. “Very satisfied, would use again” could be said about any business and therefore looks invented. “Kept to the date, kept to the price, finished after three days” looks genuine, because it claims something that can be checked.

On the legal side: you need the consent of the person quoted, especially with a photo and full name. An email in which they agree is enough — keep it.

For work whose result can be seen: renovation, gardens, cleaning, restoration. Fields: “Before” image, “After” image and a label for each.

For it to work, both images must have the same framing and the same size. From the same position, ideally in similar light. Two photos from different angles cannot be compared, and the visitor notices that immediately.

Practical advice: take the before photo before you start — not when half of it is already done. The most common reason this block stays empty is that nobody thought of it.

For anything that has an order in time: the history of the business, the course of a project, the steps of working together. Fields per milestone: Date/year, Title, Text.

The date can be rough — “2024” or “May 2024” is enough, and for a process it can also say “Step 1”.

Two typical uses:

• Company history. Founding, move, second location, handover to the next generation. Works well for trades and family businesses.
• “How it works.” Enquiry, on-site appointment, quote, execution, acceptance. Takes away customers’ uncertainty about what lies ahead.

Five to seven milestones are enough. A timeline with twenty entries is a list.

For figures that speak for themselves. Per figure: Value, Label, optionally Unit and an Icon (emoji).

Typical for clubs — “12,400 trees planted” — and for businesses: years in the market, properties looked after, employees.

Three rules so that it does not backfire:

• Only figures that are true. A rounded figure is fine; an estimated one is not.
• Only figures that impress. “3 employees” is a detail, not a key figure.
• Three or four of them. Nobody reads six figures side by side, and none sticks.

And: update them. A key figure that has said the same thing for three years gives away when the page was last maintained.

It shows your latest blog posts on any page. Fields: Heading, Category (empty = all) and Number of posts.

The usual place is the home page: three current posts well down the page, as a sign that someone is working here.

Two points:

• The list fills itself. You do not have to touch anything after each new post.
• It is empty if there are no posts — and an empty section looks worse than none at all. Only add it once the first two or three posts are there.

The Category lets you build separate lists: news on the home page, specialist articles in the services area.

It shows the projects you have created as cards. Fields: Heading, Max. number and a Filter — all projects, ongoing only or completed only.

The difference from the ordinary card grid: the content comes from the projects themselves, not from the section. You maintain a project in one place, and it appears wherever there is a project grid.

For clubs the split is useful: ongoing projects on the home page (that is where people should donate), completed ones on a page of their own (that is where you account for what was done). Both are the same data, filtered twice.

For a direct donation without detours. Fields: Heading, Text, Suggested amounts (comma-separated), Minimum and Maximum amount.

The suggested amounts are more important than they look: they answer the question “how much is usual?” that everyone silently asks. Three levels work well — say 10, 25, 50 — and the middle one is chosen most often.

The Text should say what happens to the money. “Your donation helps” does not help. “25 € pays for a tree including its protective guard” does.

A minimum amount prevents tiny donations whose fees cost more than the amount brings in.

The donation form accepts general donations. The fundraising appeal is tied to a specific target and shows progress towards it.

The appeal block has two fields: the Fundraising appeal — where “Active appeal” automatically shows the one currently running — and an optional Heading.

The “Active appeal” setting is the practical one: you place the block on the home page once, and when you start a new appeal in the autumn, the content changes by itself. Without this setting, you would have to edit the page every time.

On fundraising success: a visible progress bar measurably increases willingness to donate — but only if it moves. A bar that has been stuck at 8% for weeks works against you.

For collecting addresses. Fields: Heading, Text, Email placeholder, Consent text and the Button label.

The Consent text is not decoration but the legal basis. It must say what the address is used for and that people can unsubscribe at any time. A pre-ticked box is not consent.

On the text above it: say what is in it and how often. “Subscribe to the newsletter” brings little; “Once a month, what happened on the building site” brings sign-ups.

And do not put the section on every page. Once on the home page, once below the blog posts — that is enough.

With the Form block. It has exactly one field: the choice of which form is shown. The forms are built under Forms; the responses end up there too.

There is a reason for this separation: a form can be on several pages, and all responses still come together in one place. You change the form once, not three times.

If no form is available for selection in the block, you have not created one yet — that is the most common stumbling block.

It shows your upcoming events. Fields: Heading and Max. number.

The list fetches the events itself and only shows those still to come — past ones disappear by themselves. That is the real advantage over a list maintained by hand, which nobody tidies up and which then shows events from last year.

For clubs and businesses with regular events, the block belongs on the home page. Three to five events are enough; anyone who wants to see more goes to the events page.

This block does not accept registrations — that is what the event registration is for.

With the Event registration block. Fields: the Event ID, Heading, Text, Button label and a GDPR text.

You copy the event ID from the event list — that is the only slightly technical step. It tells the block which event the registration belongs to.

The GDPR text says what happens to the data of the people registering: what it is collected for, how long it is kept. For an event registration that is quickly said — participant list, deleted afterwards.

One block per event. For the next event, you swap the ID or create a new section.

It shows a login field for the members’ area. Fields: Heading, Text, Button label and a “Become a member” text for everyone who is not one yet.

The block belongs on a page of its own that does not draw attention — not on the home page. A login field right at the top unsettles visitors who do not need an account at all.

On scope: this is a simple members’ area, not a portal. It separates public from internal content. Anyone who needs roles, rights and groups needs something else.

With the Map block. Fields: Latitude, Longitude and Zoom — that is, the position of the map centre, for example 52.52 for Berlin.

You can find the coordinates in any map service: right-click on the place and the two numbers appear. Latitude is the north–south value and comes first.

Why coordinates and not an address: because an address means a query to a third-party service — including the IP address of every visitor. Two numbers do not need that.

Set the zoom so that people can find their bearings: close in for a shop address, wide for a service area.

With the Video block. One field: the Video URL as an embed link, for example from YouTube or Vimeo.

For YouTube, use the address with youtube-nocookie.com instead of youtube.com. It is the same film, but without identifiers being set as soon as it loads — which simplifies your privacy notice considerably.

Videos are not stored with you, but stay with the video service. That is intentional: a video easily weighs a hundred megabytes, and a video player that works on every device is a product in its own right.

Think of the people who cannot hear the sound: a video without subtitles excludes them.

For a short notice right at the top above the page. Fields: Announcement text, optionally Button and Button link, plus Show from and Show until.

The two date fields are the real value: you enter the company holidays from 22 December to 6 January in November, and the banner appears and disappears by itself. You do not have to remember anything.

Typical occasions: company holidays, changed opening hours, an emergency service, a promotion with a deadline.

A banner that is always there is no longer read. Use it sparingly — then it stands out when it does appear.

It shows the available language versions of your site for switching. The block has no fields — it knows by itself which languages have been created.

Only add it once there really is a second language. A switcher with a single language is confusing.

The usual place is one spot: at the top in the header area or right at the bottom. In the same place on every page, so that people can find it again.

What the switcher does not do: translate. It switches between versions that exist. If a page is missing in the second language, it cannot be reached there.

It inserts a reusable section that you have maintained once under Symbols. One field: which one.

The point: whatever is meant to look the same on ten pages — the donation appeal, the contact block, the note with the emergency number — you maintain once. A change there takes effect everywhere.

Without it, the following inevitably happens: the phone number changes, someone changes it on three pages, and on the fourth it is still wrong a year later.

Rule of thumb: as soon as the same section is needed for the third time, it becomes a symbol.

It embeds HTML code as is. One field, no checking, no assistance.

It is the emergency exit for things there is no block for: a booking tool, a map service with a special view, a third-party form.

Avoid it where there is a proper block. Three reasons:

• It looks different. Inserted HTML does not know your theme and breaks it up.
• It can break. Faulty code can disturb the display of everything else.
• It fetches third-party content. Whatever you embed often loads from third-party servers and has to go into the privacy notice.

If you do use it: check the result on a mobile phone. Third-party HTML is rarely responsive by itself.

With the arrows on the section. The section moves one position up or down, and the preview shows it immediately.

One thought helps when rearranging: a page is read from top to bottom, and most people stop before the end. Whatever is at the bottom is seen by roughly a fifth of those who started at the top.

From this follows the usual order:

1. What is this (hero).
2. What is in it for me (services, benefits).
3. Why you of all people (testimonials, key figures, history).
4. What should I do (call to action, form).

Everything else belongs on pages of its own, not at the end of the home page.

It is gone — with its texts and settings. The images stay in the media library; they do not disappear with it.

There are two cases in which deleting is the wrong answer:

• You only do not need it for the time being. Then do not publish it rather than deleting it — the draft keeps it.
• It is a symbol (reusable section). Here you only delete the inserted instance; the original remains and stays on other pages.

And the advice that always applies: if you are unsure, copy the text somewhere beforehand. That takes ten seconds and saves you wondering what it said.

Three routes, in this order:

1. Check whether it really has to be a block. Very often what you want can be built from existing ones — a price overview from a card grid, a process from a timeline.
2. Solve it differently. An appointment booking system does not belong on the page but should be linked: a button to the booking service is more honest and works more reliably than an embedded window.
3. HTML section — as a last resort, with all the drawbacks mentioned.

And then there is the fourth route: report it. A block that several people are missing is a candidate for the next version. A block that a single business is missing is usually a special case that is better linked.