Bausteine

Baukasten

Alle Bausteine der Website auf einen Blick. Jeden Block einzeln kopieren und zu deiner Seite zusammensetzen — die Platzhalter in eckigen Klammern ersetzt du mit deinen Inhalten. Beim Einfügen Überschriften-Ebenen anpassen (z. B. die Hero-Headline als h1).

Übersicht

Bausteine

15 Bausteine, gruppiert nach Einsatz. Ein Klick springt zum jeweiligen Block.

  1. 01Hero (dunkel)Einstieg
  2. 02Hero (hell)Einstieg
  3. 03Problem → LösungArgumentation
  4. 04VergleichArgumentation
  5. 05LeistungenInhalt
  6. 06KennzahlenVertrauen
  7. 07AblaufInhalt
  8. 08Split (Bild + Text)Inhalt
  9. 09Text / EditorialInhalt
  10. 10Stack / TechnikTransparenz
  11. 11PreiseAngebot
  12. 12TestimonialVertrauen
  13. 13ProjekteVertrauen
  14. 14FAQVertrauen
  15. 15Kontakt / CTAAbschluss
01

Hero (dunkel) Einstieg

Vollflächiger, farbkräftiger Auftakt mit Headline, Lead und CTA.

[Kicker]

[Hero-Headline]

[Kurzbeschreibung: 1–2 Sätze]

[CTA-Text] [Sekundär-Link]

[Hinweis: z. B. Antwortzeit]

02

Hero (hell) Einstieg

Lichte Alternative mit dezentem Grün-Schein und zentriertem Inhalt.

[Kicker]

[Hero-Headline]

[Kurzbeschreibung: 1–2 Sätze]

[CTA-Text] [Sekundär-Link]

[Hinweis: z. B. Antwortzeit]

03

Problem → Lösung Argumentation

Zweispaltige Gegenüberstellung — das Problem warm getönt, die Lösung grün.

Problem

[Problem: Zwischenüberschrift]

[Problem: Text]

Lösung

[Lösung: Zwischenüberschrift]

[Lösung: Text]

04

Vergleich Argumentation

Gegenüberstellung in Zeilen — die markierte Spalte hebt dein Angebot hervor. Dimensionen und Werte sind Beispiele, beim Einsatz ersetzen.

Vergleich

[Vergleich: Überschrift]

[Angebot: Wir]
[Alternative]
Datenhoheit
[Volle Kontrolle]
[US-Cloud]
Serverstandort
[Österreich / EU]
[Standort]
Open Source
Ja
Nein
DSGVO-konform
Ja
[Prüfung]
Support
[Support-Modell]
[Support-Modell]
Preismodell
[Preis]
[Preis]
05

Leistungen Inhalt

Zwei Karten mit Punkte-Listen — für Angebote oder Leistungsblöcke.

Leistungen

[Leistungen: Überschrift]

[Leistungen: Einleitung]

[Leistung 1: Titel]

  • [Leistung 1: Punkt 1]
  • [Leistung 1: Punkt 2]
  • [Leistung 1: Punkt 3]

[Leistung 2: Titel]

  • [Leistung 2: Punkt 1]
  • [Leistung 2: Punkt 2]
  • [Leistung 2: Punkt 3]
06

Kennzahlen Vertrauen

Zahlen-Reihe als Vertrauensbeleg — 1, 2 oder 4 Kacheln.

Kennzahlen

[Kennzahlen: Überschrift]

[Zahl][Kennzahl 1]
[Zahl][Kennzahl 2]
[Zahl][Kennzahl 3]
[Zahl][Kennzahl 4]
07

Ablauf Inhalt

Nummerierte Schritte nebeneinander — mobil gestapelt.

Ablauf

[Ablauf: Überschrift]

01

[Schritt 1: Titel]

[Schritt 1: Kurztext]

02

[Schritt 2: Titel]

[Schritt 2: Kurztext]

03

[Schritt 3: Titel]

[Schritt 3: Kurztext]

08

Split (Bild + Text) Inhalt

Bild-Platzhalter links, Text rechts — mobil untereinander.

[Bild: Zweck]

[Kicker]

[Split: Überschrift]

[Split: Text]

  • [Punkt 1]
  • [Punkt 2]
  • [Punkt 3]
09

Text / Editorial Inhalt

Einfacher Textabschnitt mit Überschrift und Zwischentiteln.

[Kicker]

[Text: Überschrift]

[Absatz 1]

[Absatz 2]

[Zwischenüberschrift]

[Absatz 3]

10

Stack / Technik Transparenz

Dunkle Karte mit Technik-Liste — signalisiert Transparenz.

Technik & Transparenz

[Technik & Transparenz]

  • [Stack-Eintrag 1] [Kurzbeschreibung]
  • [Stack-Eintrag 2] [Kurzbeschreibung]
  • [Stack-Eintrag 3] [Kurzbeschreibung]
  • [Stack-Eintrag 4] [Kurzbeschreibung]

[Absatz: Betreuung]

11

Preise Angebot

Zwei Preis-Karten mit Leistungsumfang und Hinweiszeile.

Preise

[Preise: Überschrift]

[Preis Migration]

  • [Leistungsumfang: Punkt 1]
  • [Leistungsumfang: Punkt 2]
  • [Leistungsumfang: Punkt 3]

[Preis Managed Hosting]

  • [Leistungsumfang: Punkt 1]
  • [Leistungsumfang: Punkt 2]
  • [Leistungsumfang: Punkt 3]

[Hinweis: unverbindlich]

12

Testimonial Vertrauen

Zentriertes Zitat mit Nennung — für Kundenstimmen.

[Zitat]
[Name] · [Rolle / Firma]
13

Projekte Vertrauen

Referenz-Karten mit Bild-Platzhalter, Titel und Meta-Zeile.

Projekte

[Projekte: Überschrift]

[Projekte: Einleitung]

[Bild: Projekt 1]

[Projekt 1: Titel]

[Projekt 1: Kurzbeschreibung]

[Projekt 1: Kunde/Branche] · [Projekt 1: Jahr]

[Bild: Projekt 2]

[Projekt 2: Titel]

[Projekt 2: Kurzbeschreibung]

[Projekt 2: Kunde/Branche] · [Projekt 2: Jahr]

[Bild: Projekt 3]

[Projekt 3: Titel]

[Projekt 3: Kurzbeschreibung]

[Projekt 3: Kunde/Branche] · [Projekt 3: Jahr]

14

FAQ Vertrauen

Fragen & Antworten als statische Liste (ohne JavaScript).

FAQ

[FAQ: Überschrift]

[Frage 1]

[Antwort 1]

[Frage 2]

[Antwort 2]

[Frage 3]

[Antwort 3]

[Frage 4]

[Antwort 4]

15

Kontakt / CTA Abschluss

Grüne Banderole mit E-Mail-CTA als Abschluss der Seite.

Kontakt

[Kontakt]

[Kurzbeschreibung: Kontakt]

[E-Mail]

[Reaktionszeit-Hinweis]