Eine Bibliothek von dem was möglich ist · klicken Sie sich durch · jedes Element ist nummeriert · sagen Sie mir welche Sie für Ihre Webseite wollen
Termin vereinbaren

Modul-Bibliothek

26 Layout-Bausteine in 8 Kategorien · jeder mit eindeutiger Nummer · sagen Sie mir welche zu Ihrer Webseite passen.

Hero

01 / 08 · 4 Module

Editorial Magazine

M-001

Großzügige Display-Italic-Headline mit kuratiertem Foto rechts · perfekt für Premium-Brands die Zeitlosigkeit ausstrahlen wollen.

BoutiqueHotelGalerie
Seit 2018

Wir machen Keramik lebendig.

Atelier in Schwabing für selbst-bemalte Stücke.

Tech Modern Bento

M-002

Bento-Grid-Hero mit großer Headline + 3 Stat-Cards · für moderne SaaS/Tech-Marken die Zahlen kommunizieren wollen.

SaaSTechStartup

Mehr Effizienz. Weniger Aufwand.

98%
Auto
3min
Setup
24/7
Live

Photo-Forward Cinematic

M-003

Vollbild-Foto im Hintergrund mit overlayed Headline + minimaler CTA · maximaler emotionaler Impact für Hospitality/Lifestyle.

RestaurantHotelSpa
Münchner Trattoria

Cucina della Nonna.

Split-Layout Service-First

M-004

Linke Hälfte Headline + Service-Liste · rechte Hälfte ein Hero-Foto · ideal für Dienstleister die direkt zur Sache kommen.

FriseurPraxisCoach

Schnitt. Farbe. Ihr Glanz.

  • Damen-Schnitt · ab 65€
  • Strähnen · ab 90€
  • Balayage · ab 130€

About

02 / 08 · 3 Module

Story-First Manifesto

M-010

Lange erzählende About-Section mit Display-Italic-Quote · für Brands die ihre Mission/Werte in den Vordergrund stellen.

CoachFounder-BrandHeritage
02 / Manifest

Wir glauben dass jeder Schnitt mehr ist als Haare.

15 Jahre Münchner Friseurhandwerk · Werkstatt-Atmosphäre · Zeit für Sie · und ein Espresso während Sie warten.

Numbers-Grid Trust

M-011

4 große Zahlen mit Counter-Animation · "Seit · Kunden · Bewertungen · Stunden" · sofortiges Trust-Signal.

PraxisHandwerkLawyer
15+
Jahre
2400
Patienten
4.9
Bewertung
24/7
Stunden

Founder-Quote Editorial

M-012

Großes Italic-Zitat mit Foto vom Gründer · persönlicher Ton · funktioniert besonders gut für solo-geführte Geschäfte.

IndieCoachAtelier

"Ich wollte einen Ort schaffen wo Zeit nicht durchrast."

Maria Brunner · Inhaberin

Services

03 / 08 · 4 Module

Bento-Grid Hover-Reveal

M-020

Asymmetrisches Grid mit Hover-Expand · jede Tile zeigt erst Titel, beim Hovern erscheint Beschreibung · modern + spielerisch.

SaaSAgencyMulti-Service
Brand
Logo · Visual-Identity
Web
Auto
Print

Card-Stack Vertical

M-021

Vertikale Karten · jede mit Icon, Titel, Preis · sticky-stack-Effekt beim Scroll · klassisch für Service-Listen mit Preisen.

FriseurPraxisWerkstatt
Schnitt
65€
🎨
Farbe
90€
💎
Balayage
130€

Menu-Cards Bilder-Forward

M-022

Pro Item ein eigenes Bild · ideal für Restaurants/Cafés · jedes Gericht bekommt sein eigenes generiertes Foto (Phase I).

RestaurantCaféBäckerei
Pasta al Tartufo
24€
Risotto Funghi
22€
Tiramisù
9€

Compare-Slider Vorher/Nachher

M-023

Drag-Handle zwischen Vorher- und Nachher-Bild · perfekt für Friseure, Maler, Renovierungen, alles wo "Verwandlung" verkauft.

FriseurMalerKFZ
vorher
nachher

Process

04 / 08 · 3 Module

Sticky-Stack 3-Steps

M-030

Karten stapeln sich beim Scrollen aufeinander · ideal für 3-4 Steps · funktioniert für alle "So-läufts-bei-uns"-Sections.

CoachWerkstattOnboarding
01
Termin
Online buchen oder anrufen
02
Beratung
15 Min vor dem Schnitt
03
Umsetzung
Mit Espresso + Zeit

Horizontal-Scroll Pinned

M-031

Page bleibt gepinnt · Cards scrollen horizontal vorbei · cinematic bei vielen Steps · funktioniert für Manufakturen, Galerien.

ManufakturGalerieMulti-Step
01
Schritt
02
Schritt
03
Schritt
04
Schritt
05
Schritt
→ horizontal scrollen

Numbered-Stages Editorial

M-032

Vertikale Liste mit großen italic Zahlen links · Steps rechts · ruhig + premium · für Wellness, Praxen, Heritage-Brands.

PraxisSpaAtelier
I
Anamnese
Ihre Geschichte verstehen
II
Untersuchung
Sorgfalt vor Schnelligkeit
III
Behandlung
Mit Zeit und Empathie

Gallery

05 / 08 · 3 Module

Masonry Editorial

M-040

Pinterest-artiges Masonry-Grid · gemischte Aspect-Ratios · jedes Bild bekommt subtilen Reveal-Mask beim Scrollen.

FriseurGaleriePhotography

Editorial-Spread Asymmetrisch

M-041

Magazin-artiger Layout · 1 großes Bild + Caption · 2-3 Support-Shots versetzt · maximaler "Premium-Editorial"-Look.

BoutiqueHotelRestaurant
Atelier-Atmosphäre · Schwabing

Reveal-Mask Scroll

M-042

Bilder werden beim Scrollen mit Clip-Path-Mask freigelegt · subtil-cinematic · funktioniert für minimal-luxury Brands.

LuxuryStudioMinimal

Testimonials

06 / 08 · 3 Module

Quote-Editorial Single

M-050

1 großes Italic-Zitat zentriert · Stern-Bewertung darunter · Autor mit Rolle · maximal-Trust mit minimaler Visual-Last.

PraxisCoachBoutique
★★★★★

"Ein Ort an dem ich endlich durchatmen kann."

Sabine M. · Stammkundin seit 2022

Card-Carousel 3-Spalten

M-051

3 nebeneinander · jede Card mit Foto, Name, Rolle, Quote · klassisch + bewährt · funktioniert für jede Branche.

PraxisAgencyService
Anna L.

"Wieder ein Stück Zuhause."

Maria B.

"Detail-Verliebt."

Tom S.

"Genau richtig."

Stats-Trust Numbers

M-052

Statt Zitate: harte Zahlen ("5000+ Patienten · 4.9 Bewertung · 15 Jahre") · für skeptische Owner-Branchen ideal.

MedicalLawyerHandwerk
5000+
Behandelte Patienten
4.9
Google-Bewertung
15
Jahre Erfahrung
100%
Empfehlungsrate

CTA

07 / 08 · 3 Module

Magnetic-Button Editorial

M-060

Großer zentraler Magnetic-Button · folgt der Maus · in einem ruhigen Negative-Space-Block · für Premium-Brands.

BoutiqueHotelStudio

Bereit für ein Gespräch?

Termin vereinbaren →

Form-Inline Direct

M-061

Direktes Kontakt-Formular auf der Page · Name + Email + Nachricht · keine Page-Wechsel · maximaler Conversion-Rate.

ServiceCoachLead-Gen

Schreiben Sie mir.

Ihr Name
Ihre Email
Nachricht…

Multi-Path 3-Routen

M-062

3 CTAs nebeneinander: "Buchen" · "Anrufen" · "Vorbeikommen" · für lokale Geschäfte mit verschiedenen Owner-Präferenzen.

LokalRestaurantFriseur
📅
Online buchen
In 60 Sekunden
📞
Anrufen
089 / 234 567
📍
Vorbeikommen
Türkenstr. 12

Footer

08 / 08 · 3 Module

Editorial Multi-Column

M-070

Großer Pitch-Block oben (italic) · Address + Hours + Social rechts · klassisch-premium · pro-typografisch.

BoutiquePremiumEditorial
Bis bald in unserem Atelier.
Adresse
Türkenstr. 12
80799 München
Öffnung
Di–Sa
10–19 Uhr

Minimal Centered

M-071

Nur Logo · 1 CTA · Mini-Address-Zeile · maximales Negative-Space · für Brands die alles im Hauptteil sagen.

PremiumMinimalStudio
atelier brunner
München · Türkenstr. 12

Map-Forward Local

M-072

Großer Map-Embed links · Address + Hours rechts · für lokale Geschäfte die "Komm vorbei" verkaufen.

LokalRestaurantCafé
[ Map ]
Adresse
Türkenstr. 12
München
Öffnung
Di–Sa · 10–19 Uhr