25 Website-Layout-Beispiele (mit kommentierten Wireframes)

25 Website-Layout-Beispiele aus der We.Inc-Vorlagenbibliothek, jeweils mit einem Box-Wireframe der Seitenstruktur, einer Design-Vorschau, warum das Layout funktioniert und für welche Unternehmen es sich eignet. Enthält eine Anleitung zur Layout-Auswahl.

Ein Website-Layout ist die Reihenfolge und Anordnung der Abschnitte auf einer Seite: was zuerst kommt, was nebeneinander steht und wo der Hauptbutton ist. Nachfolgend finden sich 25 Layouts, jedes als einfaches Box-Wireframe und als Vorschau des vollständigen Designs. Alle 25 sind We.Inc-Vorlagendesigns, keine Kundenseiten, gruppiert nach der Art des Unternehmens, für das sie sich eignen. Das blaue Kästchen im jeweiligen Wireframe ist der Haupt-Call-to-Action.

So liest man die Wireframes

Jede Reihe von Kästchen ist ein Band der Seite, von oben nach unten beim Scrollen. Nebeneinanderstehende Kästchen befinden sich auf einem Desktop-Bildschirm nebeneinander; auf einem Smartphone stapeln sie sich in derselben Reihenfolge, sodass das linke Kästchen zuerst erscheint. Diese Seite behandelt die gesamte Seitenanordnung. Speziell für den oberen Seitenbereich, siehe Beispiele für Hero-Bereiche; für Menüs, siehe Navigationsbeispiele.

Fünf Layout-Muster in einer Tabelle

Muster	Reihenfolge der Abschnitte	Am besten wenn	Beispiele unten
Dienstleistungstrichter	Hero, Leistungen, Nachweis, Formular	Besucher benötigen ein Angebot oder eine Buchung	1-8
Besuch	Hero, Menü, Geschichte, Öffnungszeiten und Karte	Menschen kommen persönlich zu Ihnen	9-14
Buchen oder beitreten	Hero, Preise oder Zeitplan, Buchung	Termine, Kurse, Mitgliedschaften	15-19
Raster	Hero, Raster mit Einträgen, Details, Anfrage	Inserate, Produkte, Portfolio	20-24
Leser	Hero, Arbeit, Über uns, Anmeldung	Das Ziel ist ein wiederkehrendes Publikum	25

Layouts für Dienstleistungsunternehmen

1. Notfallhandwerk: dringendes Band unter dem Hero

Vorlage: Ironpeak Roofing (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Ein vollbreites farbiges Band direkt unter dem Hero spricht Menschen mit einem dringenden Problem (Sturmschäden) an, bevor sie weiterscrollen. Geeignet für: Dachdecker, Sanierungsbetriebe, Schlüsseldienste, Abschleppdienste.

2. Multi-Handwerk mit einem Servicegebietsblock

Vorlage: Summit Trades (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Drei gleichwertige Leistungskarten und danach eine namentliche Liste der Servicegebiete beantwortet „Machen Sie das auch hier?" in zwei Scrolls. Geeignet für: Alle Unternehmen mit einem definierten Servicegebiet.

3. Leistungsliste mit hervorgehobener Spezialität

Vorlage: Voltline Electric (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Eine hochwertige Leistung erhält ihren eigenen Abschnitt, sodass die Seite den Auftrag, den Sie am meisten wollen, bewirbt, ohne die übrigen zu verbergen. Geeignet für: Handwerksbetriebe mit einer besonders profitablen Spezialität.

4. Checkliste und Sofortangebot

Vorlage: Brightwell Cleaning (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Eine sichtbare Checkliste der enthaltenen Leistungen beantwortet die Hauptfrage (Was genau bekomme ich?) noch vor dem Preisformular. Geeignet für: Reinigungsunternehmen, Gartenservice, Poolservice.

5. Geschichte eines lokalen Handwerkers

Vorlage: Halden Woodworks (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Der Ortsname in der Überschrift und der Ablauf „Wie ein Auftrag abläuft" schafft Vertrauen für große Einzelaufträge. Geeignet für: Schreiner, Bauunternehmer, Renovierungsbetriebe.

6. Professionelles Büro: Tätigkeitsbereiche und Mitarbeiter

Vorlage: Sterling & Vance LLP (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Man wählt eine Kanzlei zuerst nach Rechtsgebiet und dann nach Person – das Layout folgt dieser Reihenfolge. Geeignet für: Kanzleien, Steuerberater, Finanzberatung.

7. Beratungsunternehmen: zuerst der Nachweis

Vorlage: Linden Consult (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Der Nachweis steht direkt nach dem Hero, danach formuliert die Seite Leistungen als Probleme, die der Käufer kennt. Geeignet für: Berater, Coaches, B2B-Dienstleistungen.

8. Kurze Steuerberater-Seite

Vorlage: Ledgerline CPA (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Vier Abschnitte. Für einen Kunden, der bereits weiß, dass er einen Steuerberater braucht, ist weniger schneller. Geeignet für: Alle Leistungen, bei denen der Kunde bereits entschlossen ist.

Layouts für Gastronomie und Hotellerie

9. Café: Menü, Geschichte, Besuch

Vorlage: Ember & Roast (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Zuerst die Speisekarte, zuletzt die Besuchsinformationen: Die Leute prüfen zuerst das Angebot, dann wo und wann. Geeignet für: Cafés, Bäckereien, Bars.

10. Bäckerei mit Vorbestellung

Vorlage: Flour & Fern (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Ein dedizierter Bestellbereich verwandelt Stöbern in Vorbestellungen. Geeignet für: Bäckereien, Metzger, Meal-Prep-Anbieter.

11. Restaurant mit langem Scroll

Vorlage: Azafran (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Bei einem Destination-Restaurant verkauft die Atmosphäre die Reservierung – die Seite erzählt daher erst eine Geschichte, bevor sie zum Handeln auffordert. Geeignet für: Gourmetrestaurants, Degustationsmenüs, Veranstaltungsorte.

12. Restaurant mit drei Abschnitten

Vorlage: Crust (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Hero, Speisekarte, Besuch. Die wenigsten Abschnitte, die ein Restaurant haben kann und trotzdem alle Fragen beantwortet. Geeignet für: Casual-Restaurants, Imbisse.

13. Zeitplan zuerst

Vorlage: ROAM (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Wenn sich der Standort täglich ändert, ist „Wo sind Sie heute?" die wichtigste Frage – sie steht daher direkt unter dem Hero. Geeignet für: Food-Trucks, Märkte, Pop-up-Stände.

14. Veranstaltungsservice mit Anfageformular

Vorlage: Harvest & Vine (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Veranstaltungsarten ganz oben helfen dem Besucher, sich selbst einzuordnen; ein Beispielmenü macht den Preis greifbar. Geeignet für: Caterer, Eventplaner, Veranstaltungsorte.

Layouts für Buchungen und Mitgliedschaften

15. Buchungsorientierter Salon

Vorlage: Lumé Salon & Beauty Spa (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Eine Preisliste und ein Buchungsbereich sind alles, was die meisten Salonbesucher benötigen. Geeignet für: Salons, Barbiere, Nagel- und Wimpernstudios.

16. Kursplan und Preise

Vorlage: Tidewater Yoga (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Zeitplan, dann Preise, dann ein Erstbesuchsangebot – das entspricht dem Entscheidungsprozess eines neuen Schülers. Geeignet für: Yoga, Pilates, Tanz, Kampfkünste.

17. Fitnessstudio mit Programmen und Tarifen

Vorlage: Iron (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Mitgliedschaftsstufen nebeneinander erleichtern den Vergleich; eine kostenlose erste Einheit senkt die Hemmschwelle. Geeignet für: Fitnessstudios, Vereine, Mitgliedschaftsmodelle.

18. Klinik: Behandlung, Team, Standort

Vorlage: Verdant Family Health (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Patienten wollen wissen, was behandelt wird, wen sie sehen werden und wie sie hinkommen. Geeignet für: Kliniken, Zahnärzte, Physiotherapeuten.

19. Tierarzt mit Notfallhinweis

Vorlage: Meadowpaw Veterinary (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Der Besuchsabschnitt weist Notfälle an zu telefonieren, sodass das Buchungsformular nicht für Notfälle verwendet wird. Geeignet für: Tierärzte, Notaufnahmen, alle Dienste mit Notfalleinsätzen.

Raster-Layouts: Inserate, Shops und Portfolios

20. Insertionsraster

Vorlage: Keystone Realty (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Käufer erhalten das Raster; Verkäufer bekommen einen eigenen Bereich und einen separaten Call-to-Action. Geeignet für: Immobilien, Vermietungen, Autohändler.

21. Einzelprodukt-Seite

Vorlage: Verre Halo (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Der Preis steht in der Menüleiste und am Ende; alles dazwischen beantwortet „Ist es das wert?" Geeignet für: Einzelprodukt-Marken, Launches, crowdgefinanzierte Produkte.

22. Kleinserienshop

Vorlage: Cellar & Rowan (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Zuerst die Produkte, dann die Geschichte, die den Preis rechtfertigt, dann eine Anmeldung für die nächste Charge. Geeignet für: Hersteller, Kerzen, Keramik, Lebensmittel.

23. Produkt-Drop

Vorlage: Loop (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Die nächste Veröffentlichung steht vorne; das Shop-Raster bedient Kunden, die jetzt etwas wollen. Geeignet für: Limitierte Auflagen, Bekleidung, Sammlerstücke.

24. Portfolio-Raster zuerst

Vorlage: Drafthouse (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Sechs Projekte direkt nach der Überschrift – die Arbeit übernimmt den Verkauf. Geeignet für: Architekten, Designer, Fotografen.

Layouts für Privatpersonen und Creator

25. Autor mit Newsletter

Vorlage: Plume (ein We.Inc-Vorlagendesign, keine Kundenseite).

Warum es funktioniert: Arbeit, dann Newsletter-Anmeldung: Das Ziel sind Leser, die wiederkommen, nicht eine einmalige Anfrage. Geeignet für: Autoren, Creator, Redner.

So wählt man ein Layout

1. Benennen Sie die eine Aktion, die die meisten Besucher ausführen sollen (anrufen, buchen, kaufen, anfragen, abonnieren). Das wird das blaue Kästchen.
2. Listen Sie die drei Fragen auf, die ein Besucher stellt, bevor er diese Aktion ausführt (zum Beispiel: Decken Sie mein Gebiet ab, was kostet es, kann ich Ihnen vertrauen?). Jede Frage erhält einen Abschnitt, in dieser Reihenfolge.
3. Wählen Sie das Muster aus der obigen Tabelle, das am besten passt.
4. Streichen Sie Abschnitte, die Sie nicht mit echtem Inhalt füllen können. Ein leerer „Ergebnisse"-Abschnitt oder Platzhalter-Bewertungen schaden mehr als eine kürzere Seite.
5. Prüfen Sie auf dem Smartphone. Nebeneinanderstehende Kästchen stapeln sich; stellen Sie sicher, dass der Hauptbutton noch früh erscheint (siehe Mobile-First-Design).

Wenn eine einzelne Seite zu lang wird, teilen Sie sie in mehrere Seiten auf. Website-Struktur zeigt, wie die obigen Abschnitte zu einer Sitemap werden.

Häufige Layout-Fehler

• Das Kontaktformular nur am Ende einer langen Seite platzieren, ohne Button im Header.
• Drei Textspalten bei einem mobilorientierten Publikum; verwenden Sie Karten, die sauber übereinanderstapeln.
• Template-Zahlen, Bewertungen oder Badges behalten, die Sie nicht belegen können.
• Eine Galerie platzieren, bevor der Besucher weiß, was Sie anbieten.

Eines dieser Layouts verwenden

Jedes Layout hier ist eine Vorlage in der We.Inc-Vorlagenbibliothek. Im kostenlosen Plan können Sie bis zu 3 Vorlagenseiten auf einer we.inc-Adresse nutzen (keine KI-Credits, keine eigene Domain). Starter für $20/Monat fügt KI-Erstellung hinzu, sodass Sie Änderungen wie „Bewertungen über Leistungen verschieben" anfordern können, sowie eigene Domains; siehe Preise. Entwerfen Sie Ihre Version zunächst mit dem Website-Mockup-Generator, prüfen Sie das Ergebnis dann mit dem Website-Grader.

Häufige Fragen

Was ist ein Website-Layout?

Die Reihenfolge und Anordnung der Abschnitte auf einer Seite: was zuerst erscheint, was nebeneinander steht und wo der Haupt-Call-to-Action ist.

Was ist das beste Layout für eine Kleinunternehmens-Website?

Für die meisten Dienstleistungsunternehmen: ein Hero mit einem klaren Button, Leistungen, Nachweise wie Bewertungen und ein Kontakt- oder Angebotsformular, mit dem Button im Header wiederholt.

Wie viele Abschnitte sollte eine Homepage haben?

So viele, wie nötig sind, um die wichtigsten Fragen des Besuchers zu beantworten – nicht mehr. Die Beispiele hier reichen von vier bis acht Abschnitten.

Sind das echte Unternehmens-Websites?

Nein. Alle 25 sind We.Inc-Vorlagendesigns, die zur Darstellung von Layout-Mustern verwendet werden.

Wie ändern sich Layouts auf dem Smartphone?

Nebeneinanderstehende Kästchen stapeln sich vertikal in derselben Reihenfolge; platzieren Sie also das Wichtigste links und halten Sie den Hauptbutton oben.

Was ist der Unterschied zwischen Layout und Struktur?

Das Layout ist die Anordnung einer einzelnen Seite. Die Struktur ist, wie Seiten über die gesamte Website verknüpft sind: die Hierarchie, URLs und internen Links.

Kostenlos starten · Keine Kreditkarte nötig

Product

• AI Website Builder: Describe a site in plain English; it's live in minutes
• White Label Platform: Your brand, your domain, your margin
• Enterprise: SSO, custom SLAs, and dedicated support
• Developer API: Embed site generation into your SaaS

Who It's For

• For Agencies: Resell under your brand
• For Freelancers: Your own branded builder
• For Hosting Providers: Add a builder to your stack
• For SaaS Platforms: Embed site creation via API
• For Startups
• For Financial Services
• For Healthcare

Features

• Drag & Drop Editor
• Built-in SEO Tools
• Custom Branding
• Client Dashboard
• Reseller Billing (Stripe Connect)

Resources

• Blog
• Help Center
• Free Business Tools
• Website Templates
• Glossary & Guides
• Integrations
• Developers
• Benchmark
• Windows App

Company

• About Us
• Pricing
• Apply to the Partner Program
• Contact
• Careers
• Security

View Sitemap