⬚Bausteine — welcher wofür

Nach dem Inhalt, nicht nach dem Aussehen. Die Frage lautet nicht „was sieht hier gut aus“, sondern „was ist das für eine Information“.

Drei Leitplanken:

• Eine Sache je Abschnitt. Wenn Sie im Kopf ein „und“ brauchen, um den Abschnitt zu beschreiben, sind es zwei.
• Der Baustein, der die Struktur mitbringt, gewinnt. Drei Leistungen gehören ins Kartenraster, nicht in einen Fließtext mit Bindestrichen.
• Der einfachste, der reicht. Ein Textabschnitt, der genügt, ist besser als ein Kartenraster mit einer Karte.

Woran Sie den falschen Baustein erkennen: Sie fangen an, im Text Leerzeilen einzufügen, um Abstände zu erzeugen. Das ist immer das Zeichen, dass die Struktur fehlt.

Für das Erste, was jemand sieht, und nur dafür. Ein Held gehört ganz nach oben, und auf einer Seite steht genau einer.

Die Felder: Überschrift, Unterzeile, Hintergrundbild und bis zu zwei Buttons.

Was die Überschrift leisten muss: In einem Satz sagen, worum es geht — nicht, wie das Unternehmen heißt. „Malerarbeiten in Dresden, sauber und pünktlich“ ist eine Überschrift. „Willkommen bei Müller & Söhne“ ist keine.

Das Hintergrundbild sollte quer und mindestens 1600 Pixel breit sein. Ein hochkantes Handyfoto wird beschnitten, und zwar an der Stelle, an der es interessant war.

Zwei Buttons sind das Maximum, einer meistens besser. Wer sich zwischen drei Wegen entscheiden muss, geht keinen.

Wenn zusammenhängender Fließtext das Richtige ist — eine Erklärung, eine Geschichte, eine Begründung. Ein Feld, Text, Absätze durch eine Leerzeile getrennt.

Der Textabschnitt ist der Baustein, der am häufigsten falsch eingesetzt wird, weil er alles aufnimmt. Faustregel: Sobald der Text aus einer Aufzählung gleichartiger Dinge besteht, ist ein anderer Baustein besser — Kartenraster für Leistungen, Zeitstrahl für einen Verlauf, FAQ für Fragen.

Zur Länge: Über etwa 400 Wörter am Stück liest online kaum jemand. Teilen Sie lieber in zwei Abschnitte mit Zwischenüberschriften.

Text-mit-Bild stellt Text und Bild nebeneinander, mit einer Bild-Position (links oder rechts) und optional einer Überschrift. Der reine Textabschnitt hat nur Text.

Wann welcher:

• Text-mit-Bild, wenn das Bild etwas zum Verständnis beiträgt — das Team, das Produkt, der Ablauf.
• Text, wenn das Bild nur Dekoration wäre. Ein Symbolfoto neben einem Absatz macht ihn nicht überzeugender, sondern nur länger.

Wechseln Sie bei mehreren solchen Abschnitten die Bild-Position ab: links, rechts, links. Das ist kein Selbstzweck, sondern verhindert, dass die Seite wie eine Tabelle wirkt.

Den Alt-Text füllen Sie immer aus. Er beschreibt, was auf dem Bild ist — für Menschen, die es nicht sehen können, und für Suchmaschinen.

Für mehrere gleichartige Dinge nebeneinander: Leistungen, Standorte, Angebote, Ansprechpartner. Jede Karte hat ein Icon (Emoji), einen Titel, einen Text und optional einen Link.

Das ist der meistgebrauchte Baustein nach Text und Held, und der, der eine Seite am schnellsten ordentlich aussehen lässt.

Zwei Hinweise aus der Praxis:

• Drei oder sechs Karten wirken ruhiger als vier oder fünf, weil sie sauber in Reihen aufgehen.
• Halten Sie die Texte gleich lang. Karten stehen nebeneinander; eine mit vier Zeilen neben einer mit einer Zeile sieht nach Versehen aus.

Das Emoji ist ein Zeichen, kein Satz. Ein einziges reicht, und wenn Ihnen keines einfällt, lassen Sie es überall weg — nicht nur bei einer Karte.

Für mehrere Bilder, die zusammengehören: Referenzen, ein Fest, ein Bauvorhaben in Bildern. Felder je Bild: das Bild selbst und eine Beschreibung.

Im Raster werden alle Bilder auf dieselbe Größe gebracht. Das heißt: unterschiedliche Formate werden beschnitten. Wenn Ihnen der Ausschnitt wichtig ist, schneiden Sie vorher selbst zu.

Wie viele: Acht bis zwölf sind eine Galerie. Vierzig sind ein Archiv, durch das niemand scrollt — nehmen Sie die besten zehn. Es tut weh und macht die Seite besser.

Und: Jedes Bild bekommt eine Beschreibung. Sie ist der Alt-Text und gleichzeitig die Bildunterschrift.

Für die eine Sache, die der Besucher tun soll — Überschrift, Text, Button-Beschriftung und Button-Link.

Ein Handlungsaufruf steht am Ende eines Gedankens, nicht mittendrin: nach der Erklärung, was Sie tun, kommt die Frage, ob man sich melden möchte.

Zur Beschriftung: Der Button sagt, was passiert, nicht was man tut. „Angebot anfordern“ ist besser als „Klicken Sie hier“, und „Jetzt spenden“ besser als „Weiter“.

Ein bis zwei Handlungsaufrufe je Seite. Wer alle drei Bildschirmhöhen aufgefordert wird, sich zu melden, meldet sich nicht öfter, sondern geht.

Für die Fragen, die Ihnen ohnehin ständig gestellt werden. Felder: eine Überschrift und beliebig viele Paare aus Frage und Antwort.

Das ist einer der unterschätzten Bausteine, aus zwei Gründen:

• Er spart Anrufe. Was auf der Seite steht, muss niemand mehr fragen.
• Er wird gefunden. Menschen tippen Fragen in Suchmaschinen, und ein FAQ-Abschnitt enthält genau diese Formulierungen.

Schreiben Sie die Fragen so, wie sie gestellt werden — „Wie lange dauert das?“, nicht „Bearbeitungsdauer“. Und beantworten Sie sie wirklich: Ein FAQ, in dem bei jeder Antwort „sprechen Sie uns an“ steht, ist keine Hilfe, sondern eine Ausweichbewegung.

Für Zitate mit Namen. Felder je Eintrag: Zitat, Autor, optional ein Foto — dazu die Einstellung Automatisch durchwechseln.

Anführungszeichen setzt die Website selbst; schreiben Sie den reinen Satz.

Was ein Zitat wertvoll macht, ist die Konkretheit. „Sehr zufrieden, gerne wieder“ könnte über jedem Betrieb stehen und wirkt deshalb erfunden. „Termin stand, Preis stand, nach drei Tagen fertig“ wirkt echt, weil es etwas behauptet, das nachprüfbar ist.

Zum Rechtlichen: Sie brauchen die Zustimmung der zitierten Person, erst recht mit Foto und vollem Namen. Eine Mail, in der sie zustimmt, genügt — heben Sie sie auf.

Für Arbeiten, deren Ergebnis man sieht: Renovierung, Garten, Reinigung, Restaurierung. Felder: Bild „Vorher“, Bild „Nachher“ und je eine Beschriftung.

Damit es wirkt, müssen beide Bilder denselben Ausschnitt und dieselbe Größe haben. Aus derselben Position, möglichst bei ähnlichem Licht. Zwei Fotos aus verschiedenen Winkeln lassen sich nicht vergleichen, und der Besucher merkt das sofort.

Praktischer Rat: Machen Sie das Vorher-Foto bevor Sie anfangen — nicht, wenn schon die Hälfte gemacht ist. Der häufigste Grund, warum dieser Baustein leer bleibt, ist, dass niemand daran gedacht hat.

Für alles, was eine Reihenfolge in der Zeit hat: die Geschichte des Betriebs, der Ablauf eines Projekts, die Schritte einer Zusammenarbeit. Felder je Station: Datum/Jahr, Titel, Text.

Das Datum darf grob sein — „2024“ oder „Mai 2024“ reicht, und bei einem Ablauf kann dort auch „Schritt 1“ stehen.

Zwei typische Anwendungen:

• Firmengeschichte. Gründung, Umzug, zweiter Standort, Übergabe an die nächste Generation. Wirkt bei Handwerk und Familienbetrieben.
• „So läuft es ab.“ Anfrage, Termin vor Ort, Angebot, Ausführung, Abnahme. Nimmt Kunden die Unsicherheit, was auf sie zukommt.

Fünf bis sieben Stationen sind genug. Ein Zeitstrahl mit zwanzig Einträgen ist eine Liste.

Für Zahlen, die für sich sprechen. Je Kennzahl: Wert, Beschriftung, optional Einheit und ein Icon (Emoji).

Typisch bei Vereinen — „12.400 gepflanzte Bäume“ — und bei Betrieben: Jahre am Markt, betreute Objekte, Mitarbeitende.

Drei Regeln, damit es nicht ins Gegenteil kippt:

• Nur Zahlen, die stimmen. Eine gerundete Zahl ist in Ordnung, eine geschätzte nicht.
• Nur Zahlen, die beeindrucken. „3 Mitarbeiter“ ist eine Angabe, keine Kennzahl.
• Drei bis vier Stück. Sechs Zahlen nebeneinander liest niemand, und keine bleibt hängen.

Und: Aktualisieren Sie sie. Eine Kennzahl, die seit drei Jahren dasselbe sagt, verrät, wann die Seite zuletzt gepflegt wurde.

Sie zeigt Ihre neuesten Blogbeiträge auf einer beliebigen Seite. Felder: Überschrift, Kategorie (leer = alle) und Anzahl Beiträge.

Der übliche Einsatz ist die Startseite: drei aktuelle Beiträge weit unten, als Zeichen, dass hier jemand arbeitet.

Zwei Dinge dazu:

• Die Liste füllt sich selbst. Sie müssen nach jedem neuen Beitrag nichts anfassen.
• Sie ist leer, wenn es keine Beiträge gibt — und ein leerer Abschnitt sieht schlechter aus als gar keiner. Setzen Sie ihn erst, wenn die ersten zwei, drei Beiträge stehen.

Über die Kategorie lassen sich getrennte Listen bauen: Neuigkeiten auf der Startseite, Fachbeiträge im Leistungsbereich.

Es zeigt Ihre angelegten Projekte als Karten. Felder: Überschrift, Max. Anzahl und ein Filter — alle Projekte, nur laufende oder nur abgeschlossene.

Der Unterschied zum gewöhnlichen Kartenraster: Die Inhalte kommen aus den Projekten selbst, nicht aus dem Abschnitt. Sie pflegen ein Projekt an einer Stelle, und es erscheint überall dort, wo ein Projektraster steht.

Für Vereine ist die Aufteilung nützlich: laufende Projekte auf der Startseite (dort soll gespendet werden), abgeschlossene auf einer eigenen Seite (dort wird Rechenschaft abgelegt). Beides sind dieselben Daten, zweimal gefiltert.

Für die direkte Spende ohne Umweg. Felder: Überschrift, Text, vorgeschlagene Beträge (kommagetrennt), Minimal- und Maximalbetrag.

Die vorgeschlagenen Beträge sind wichtiger, als sie aussehen: Sie sind die Antwort auf die Frage „wie viel ist üblich?“, die sich jeder still stellt. Drei Stufen wirken gut — etwa 10, 25, 50 —, und die mittlere wird am häufigsten gewählt.

Der Text sollte sagen, was mit dem Geld passiert. „Ihre Spende hilft“ hilft nicht. „25 € finanzieren einen Baum samt Schutzgitter“ schon.

Ein Mindestbetrag verhindert Kleinstspenden, deren Gebühren mehr kosten als der Betrag einbringt.

Das Spendenformular nimmt allgemeine Spenden an. Die Spendenaktion ist an ein konkretes Ziel gebunden und zeigt den Fortschritt dorthin.

Der Aktionsbaustein hat zwei Felder: die Spendenaktion — wobei „Aktive Aktion“ automatisch die gerade laufende zeigt, und eine optionale Überschrift.

Die Einstellung „Aktive Aktion“ ist die praktische: Sie setzen den Baustein einmal auf die Startseite, und wenn Sie im Herbst eine neue Aktion starten, wechselt der Inhalt von selbst. Ohne diese Einstellung müssten Sie jedes Mal die Seite bearbeiten.

Zum Sammelerfolg: Ein sichtbarer Fortschrittsbalken erhöht die Spendenbereitschaft messbar — aber nur, wenn er sich bewegt. Ein Balken, der seit Wochen bei 8 % steht, wirkt gegen Sie.

Für das Einsammeln von Adressen. Felder: Überschrift, Text, E-Mail-Platzhalter, Einwilligungs-Text und die Button-Beschriftung.

Der Einwilligungs-Text ist kein Zierrat, sondern die rechtliche Grundlage. Er muss sagen, wofür die Adresse verwendet wird und dass man sich jederzeit abmelden kann. Ein vorangekreuztes Kästchen ist keine Einwilligung.

Zum Text darüber: Sagen Sie, was drinsteht und wie oft. „Newsletter abonnieren“ bringt wenig; „Einmal im Monat, was auf der Baustelle passiert ist“ bringt Anmeldungen.

Und legen Sie den Abschnitt nicht auf jede Seite. Einmal auf der Startseite, einmal unter den Blogbeiträgen — das reicht.

Mit dem Baustein Formular. Er hat genau ein Feld: die Auswahl, welches Formular gezeigt wird. Gebaut werden die Formulare unter Formulare; die Einträge landen ebenfalls dort.

Diese Trennung hat einen Grund: Ein Formular kann auf mehreren Seiten stehen, und alle Einträge laufen trotzdem an einer Stelle zusammen. Sie ändern das Formular einmal und nicht dreimal.

Wenn im Baustein kein Formular zur Auswahl steht, haben Sie noch keines angelegt — das ist der häufigste Stolperstein.

Sie zeigt Ihre kommenden Termine. Felder: Überschrift und Max. Anzahl.

Die Liste zieht sich die Termine selbst und zeigt nur die, die noch bevorstehen — Vergangenes verschwindet von allein. Das ist der eigentliche Vorteil gegenüber einer von Hand gepflegten Liste, die niemand aufräumt und die dann Veranstaltungen vom letzten Jahr zeigt.

Für Vereine und Betriebe mit regelmäßigen Terminen gehört der Baustein auf die Startseite. Drei bis fünf Termine reichen; wer mehr sehen will, geht auf die Terminseite.

Anmeldungen nimmt dieser Baustein nicht entgegen — dafür gibt es die Terminanmeldung.

Mit dem Baustein Terminanmeldung. Felder: die Termin-ID, Überschrift, Text, Button-Beschriftung und ein DSGVO-Text.

Die Termin-ID kopieren Sie aus der Terminliste — das ist der einzige etwas technische Handgriff daran. Sie sagt dem Baustein, zu welchem Termin die Anmeldung gehört.

Der DSGVO-Text sagt, was mit den Daten der Angemeldeten geschieht: wozu sie erhoben werden, wie lange sie bleiben. Bei einer Veranstaltungsanmeldung ist das schnell gesagt — Teilnehmerliste, danach gelöscht.

Ein Baustein je Termin. Für die nächste Veranstaltung tauschen Sie die ID aus oder legen einen neuen Abschnitt an.

Er zeigt ein Anmeldefeld für den Mitgliederbereich. Felder: Überschrift, Text, Button-Beschriftung und ein Text „Mitglied werden“ für alle, die noch keines sind.

Der Baustein gehört auf eine eigene, unauffällige Seite — nicht auf die Startseite. Ein Anmeldefeld ganz oben verunsichert Besucher, die gar kein Konto brauchen.

Zum Umfang: Das ist ein einfacher Mitgliederbereich, kein Portal. Er trennt öffentliche von internen Inhalten. Wer Rollen, Rechte und Gruppen braucht, braucht etwas anderes.

Mit dem Baustein Karte. Felder: Breitengrad, Längengrad und Zoom — also die Position des Kartenmittelpunkts, etwa 52.52 für Berlin.

Die Koordinaten finden Sie in jedem Kartendienst: Rechtsklick auf den Ort, die beiden Zahlen erscheinen. Der Breitengrad ist die Nord-Süd-Angabe und steht zuerst.

Warum Koordinaten und keine Adresse: Weil eine Adresse eine Abfrage bei einem fremden Dienst bedeutet — mitsamt der IP-Adresse jedes Besuchers. Zwei Zahlen brauchen das nicht.

Den Zoom stellen Sie so ein, dass man sich orientieren kann: Bei einer Ladenadresse eng, bei einem Einsatzgebiet weit.

Mit dem Baustein Video. Ein Feld: die Video-URL als Embed-Link, etwa von YouTube oder Vimeo.

Nehmen Sie bei YouTube die Adresse mit youtube-nocookie.com statt youtube.com. Das ist derselbe Film, aber ohne dass beim Laden schon Kennungen gesetzt werden — was Ihre Datenschutzerklärung erheblich vereinfacht.

Videos werden nicht bei Ihnen gespeichert, sondern bleiben beim Videodienst. Das ist gewollt: Ein Video wiegt schnell hundert Megabyte, und ein Videoplayer, der auf jedem Gerät funktioniert, ist ein eigenes Produkt.

Denken Sie an die Menschen, die den Ton nicht hören können: Ein Video ohne Untertitel schließt sie aus.

Für einen kurzen Hinweis ganz oben über der Seite. Felder: Ankündigungs-Text, optional Button und Button-Link, dazu Anzeigen ab und Anzeigen bis.

Die beiden Datumsfelder sind der eigentliche Wert: Betriebsferien vom 22. Dezember bis 6. Januar tragen Sie im November ein, und das Band erscheint und verschwindet von selbst. Sie müssen an nichts denken.

Typische Anlässe: Betriebsferien, geänderte Öffnungszeiten, ein Notdienst, eine Aktion mit Frist.

Ein Band, das immer da ist, wird nicht mehr gelesen. Verwenden Sie es sparsam — dann fällt es auf, wenn es einmal da ist.

Sie zeigt die verfügbaren Sprachfassungen Ihrer Seite zum Umschalten. Der Baustein hat keine Felder — er weiß von selbst, welche Sprachen angelegt sind.

Setzen Sie ihn erst, wenn es wirklich eine zweite Sprache gibt. Eine Umschaltung mit einer einzigen Sprache verwirrt.

Üblich ist eine Stelle: oben im Kopfbereich oder ganz unten. Auf jeder Seite an derselben Stelle, damit man sie wiederfindet.

Was die Umschaltung nicht tut: übersetzen. Sie wechselt zwischen Fassungen, die es gibt. Fehlt eine Seite in der zweiten Sprache, ist sie dort nicht erreichbar.

Er setzt einen wiederverwendbaren Abschnitt ein, den Sie unter Bausteine einmal gepflegt haben. Ein Feld: welchen.

Der Sinn: Was auf zehn Seiten gleich aussehen soll — der Spendenaufruf, der Kontaktblock, der Hinweis auf die Notdienstnummer —, pflegen Sie einmal. Eine Änderung dort wirkt überall.

Ohne das passiert unweigerlich Folgendes: Die Telefonnummer ändert sich, jemand ändert sie auf drei Seiten, auf der vierten steht sie noch ein Jahr später falsch.

Faustregel: Sobald derselbe Abschnitt zum dritten Mal gebraucht wird, wird er ein Baustein.

Er bettet HTML-Code eins zu eins ein. Ein Feld, keine Prüfung, keine Hilfestellung.

Er ist der Notausgang für das, wofür es keinen Baustein gibt: ein Buchungswerkzeug, ein Kartendienst mit Spezialansicht, ein Formular eines Drittanbieters.

Meiden Sie ihn, wo es einen richtigen Baustein gibt. Drei Gründe:

• Er sieht anders aus. Eingefügtes HTML kennt Ihre Gestaltung nicht und bricht sie auf.
• Er kann kaputtgehen. Fehlerhafter Code kann die Darstellung des Rests stören.
• Er holt fremde Inhalte. Was Sie einbetten, lädt oft von fremden Servern und muss in die Datenschutzerklärung.

Wenn Sie ihn benutzen: Prüfen Sie das Ergebnis auf dem Handy. Fremdes HTML ist selten von sich aus anpassungsfähig.

Über die Pfeile am Abschnitt. Der Abschnitt wandert damit eine Position nach oben oder unten, und die Vorschau zeigt es sofort.

Beim Umsortieren hilft ein Gedanke: Eine Seite wird von oben nach unten gelesen, und die meisten hören vorher auf. Was unten steht, sieht ungefähr ein Fünftel derer, die oben angefangen haben.

Daraus folgt die übliche Reihenfolge:

1. Was ist das hier (Held).
2. Was habe ich davon (Leistungen, Nutzen).
3. Warum ausgerechnet Sie (Kundenstimmen, Kennzahlen, Geschichte).
4. Was soll ich tun (Handlungsaufruf, Formular).

Alles Weitere gehört auf eigene Seiten, nicht ans Ende der Startseite.

Er ist weg — samt seinen Texten und Einstellungen. Die Bilder bleiben in der Mediathek, die verschwinden nicht mit.

Es gibt zwei Fälle, in denen Löschen die falsche Antwort ist:

• Sie brauchen ihn nur vorübergehend nicht. Dann veröffentlichen Sie ihn nicht mit, statt ihn zu löschen — der Entwurf behält ihn.
• Er ist ein Baustein (wiederverwendbarer Abschnitt). Löschen Sie hier nur das Einsetzen; die Vorlage bleibt und steht auf anderen Seiten weiter.

Und der Rat, der immer gilt: Wenn Sie unsicher sind, kopieren Sie den Text vorher irgendwohin. Das dauert zehn Sekunden und erspart die Frage, wie es noch mal hieß.

Drei Wege, in dieser Reihenfolge:

1. Prüfen, ob es wirklich einer sein muss. Sehr oft lässt sich das Gewünschte aus vorhandenen bauen — eine Preisübersicht aus einem Kartenraster, ein Ablauf aus einem Zeitstrahl.
2. Anders lösen. Ein Terminbuchungssystem gehört nicht auf die Seite, sondern verlinkt: ein Button zum Buchungsdienst ist ehrlicher und funktioniert zuverlässiger als ein eingebettetes Fenster.
3. HTML-Abschnitt — als letzter Ausweg, mit allen genannten Nachteilen.

Und dann gibt es noch den vierten Weg: melden. Ein Baustein, der mehreren fehlt, ist ein Kandidat für die nächste Fassung. Ein Baustein, der einem einzigen Betrieb fehlt, ist meistens ein Sonderfall, den man besser verlinkt.