Block-Katalog
Alle 47 Blöcke aus dem Layout-Auswähler, einmal mit Beispielinhalt gerendert. Über jedem Element steht eine Zeile mit Nummer, internem Namen (blockType), Kategorie und Variante. Wo ein Block mehrere Varianten kennt, stehen sie direkt untereinander.
Zum Kommentieren: die Nummer aus der Label-Zeile nennen, dann ist eindeutig, welches Element gemeint ist. Alle Buttons und Links auf dieser Seite zeigen bewusst ins Leere. Die beiden Formular-Blöcke am Ende hängen am echten Formular „snipKI Kontakt“ – dort bitte nichts abschicken.
01 · snipStackHero
Kategorie hero · keine Varianten · Snip Stack Hero
Snip Stack Hero
Ein autoplayendes Hochformat-Reel rechts, Headline und Text links, die Aktion separat daneben. Pflichtfelder: Titel, Video-URL, Video-Titel. Maximal zwei Links.
02 · imageHero
Kategorie hero · imageFocus: center (auch left, right) · bottomAccent an · Image Hero
Image Hero
Der einfachste bildgeführte Einstieg: Headline, Text, bis zu zwei Aktionen, ein Bild. Das Bild kommt aus der Mediathek oder über externalMediaUrl. imageFocus steuert den Bildausschnitt, bottomAccent die Akzentkante unten.
03 · marketingHero
Kategorie hero · zwei Varianten: split und mural · beide stehen hier untereinander · Marketing Hero
Marketing Hero – Variante split
Der Standard-Hero für neue Marketingseiten, wenn Image Hero zu schlicht ist. In der Variante split stehen Text links, Medium rechts und die Proof-Karten daneben. Ein bis drei Karten sind erlaubt.
Karte 1cards[] ist hier ein Proof-Punkt neben dem Hero.
Karte 2Titel und Beschreibung sind beide Pflicht.
Karte 3Mehr als drei Karten nimmt der Block nicht an.
Marketing Hero – Variante mural
Gleicher Block, andere Variante: mural spielt das Bild vollflächig aus. Die Karten rutschen dabei als Partner-Nennung nach unten rechts. Genau derselbe Feldsatz, nur variant umstellen.
04 · marketingHeader
Kategorie hero · keine Varianten, aber vier zuschaltbare Panels · Marketing Header
Marketing Header
Der größte Hero: Route-Karten zum Selbst-Einsortieren, ein Lernpfad- und ein Governance-Panel, eine Pilot-Karte mit Fortschritt, eine Metrik-Karte und eine Proof-Reihe darunter. Nur für komplexe B2B-Angebote, die mehrere Wege über der Falz erklären müssen.
Panel learningPath
- 1Schritt im Zustand complete
- 2Schritt im Zustand currentLäuft
- 3Schritt im Zustand upcomingFolgt
Panel governance
- Eintrag im Zustand completeGeprüft
- Eintrag im Zustand currentIn Arbeit
- Eintrag im Zustand upcomingOffen
Karte pilotCard
Fortschritt
Feld goal
Feld statusLabel
Feld milestoneLabel
Feld milestone
Karte metricCard
42 %
dataPoints zeichnet den kleinen Verlauf, maximal sechs Werte.
Proof-Punkt, Icon shield
proofItems[] steht als Reihe unter dem Hero.
Proof-Punkt, Icon team
Ein bis vier Einträge, Beschreibung optional.
Proof-Punkt, Icon chart
Icon-Auswahl: clipboard, team, graduation, rocket, shield, chart.
05 · learningPlatformHero
Kategorie hero · keine Varianten · nur für die Lernplattform · Learning Platform Hero
Learning Platform Hero
Nur für Seiten, die die snipKI-Lernplattform verkaufen oder erklären. Zeigt einen hervorgehobenen Snip, die nächsten Lektionen, Proof-Punkte und einen Fortschrittsbalken.
- Proof-Punkt, Icon time
- Proof-Punkt, Icon check
- Proof-Punkt, Icon certificate
Dein täglicher Snip
Feld streakLabel
featuredSnip: der hervorgehobene Snip
4 Min.
Was du lernst
- outcomes[], maximal drei
- Zweites Ergebnis
- Drittes Ergebnis
Deine nächsten Snips
nextSnips[], Ton green
3 Min.
nextSnips[], Ton coral
5 Min.
nextSnips[], Ton mint
4 Min.
nextSnips[], Ton teal
6 Min.
06 · missionStatement
Kategorie story · keine Varianten · Mission Statement
Mission Statement: ein großer Satz, mehr nicht.
Drei Felder: eyebrow, statement (Pflicht), description. Gedacht als kurzer Marken-Break zwischen zwei Abschnitten, nicht für mehrteilige Inhalte.
07 · problemStatement
Kategorie story · keine Varianten · ein bis sechs Pain Points · Problem Statement
Problem Statement
Benennt das Problem der Besucherin, bevor die Lösung kommt. Titel und Beschreibung sind Pflicht, dazu ein bis sechs Pain Points mit je Titel und Beschreibung.
Pain Point 1
painPoints[] – Titel und Beschreibung sind beide Pflicht.
Pain Point 2
Gehört früh auf die Seite, direkt nach dem Hero.
Pain Point 3
Maximal sechs Einträge, sonst verliert der Abschnitt seine Schärfe.
08 · statementSplit
Kategorie story · background: white (auch offwhite) · Statement Split
Statement Split
Editorial-Statement mit ein bis vier Absätzen. Der Titel steht links, die Absätze laufen rechts – daher der Name.
Für Haltung, Positionierung oder Manifest-Text, der als klarer Erzählbruch gelesen werden soll.
background lässt sich auf white oder offwhite stellen. Dieser Abschnitt steht auf white.
callout ist optional und wird als hervorgehobener Schlusssatz gesetzt.
09 · numberedCards
Kategorie story · columns: four (auch three) · background: offwhite (auch white) · Numbered Card Section
Numbered Card Section
Karten mit sichtbarer Nummerierung, drei- oder vierspaltig. Für Prinzipien, Phasen oder Begriffe, bei denen die Reihenfolge Bedeutung trägt.
Karte mit Kicker
items[] – Titel und Beschreibung Pflicht, kicker optional.
Karte ohne Kicker
Die Nummer vergibt der Block automatisch nach Reihenfolge.
Dritte Karte
columns steuert drei- oder vierspaltig, background white oder offwhite.
Vierte Karte
Bis zu acht Einträge sind erlaubt, sie brechen dann um.
10 · processSteps
Kategorie story · keine Varianten · drei bis fünf Schritte · Process Steps
Process Steps
Linearer Ablauf mit drei bis fünf Schritten und genau einer Aktion am Ende. Für Onboarding, Lieferung oder Umsetzung.
Einzelne Aktion am AbschnittsendeSchritt 1
steps[] nimmt mindestens drei und höchstens fünf Einträge.
Schritt 2
Titel und Beschreibung sind jeweils Pflicht.
Schritt 3
Der Link unten ist eine Gruppe, kein Array – also genau eine Aktion.
11 · collaborationProcess
Kategorie story · background: offwhite (auch white) · Collaboration Process
Collaboration Process
Wie eine Zusammenarbeit abläuft: zwei bis sechs Schritte, jeder mit Icon. Die Icon-Auswahl ist fest: calendar, phone, video, target, users, workflow.
01Icon calendar
label ist optional und fällt sonst auf die Position zurück.
- 02
Icon phone
Titel und Beschreibung sind Pflicht.
03Icon video
background wählt zwischen white und offwhite.
04Icon target
Weitere Icons: users und workflow.
12 · iconStepList
Kategorie story · background: mint (auch white, offwhite) · Icon Step List
Icon Step List
Icon audience
Kompakte Liste, ein bis sechs Schritte. Nur diese vier Icons sind verfügbar.
Icon examples
Wenn kein Icon passt, ist processSteps oder numberedCards die bessere Wahl.
Icon stage
background: mint, white oder offwhite.
Icon followUp
Titel und Beschreibung sind Pflicht, es gibt keinen Link im Block.
13 · storyTimeline
Kategorie story · keine Varianten · zwei bis acht Einträge · Story Timeline
Story Timeline
Chronologie mit frei wählbarem Marker links. Zwei bis acht Einträge. Für Unternehmensgeschichte, Reifegrade oder jede Abfolge, bei der Zeit eine Rolle spielt.
- 2023
Feld meta
Eintrag mit Jahres-Marker
marker, title und description sind Pflicht.
- 2024
Zweiter Eintrag
meta ist optional und steht als kleine Zusatzzeile daneben.
- Phase 3
Beliebiger Text
Marker muss keine Jahreszahl sein
Auch Phasen, Stufen oder Quartale funktionieren.
14 · learningPathTimeline
Kategorie story · keine Varianten · vier bis sechs Schritte · Learning Path Timeline
Learning Path Timeline
Macht einen Lernplan konkret: vier bis sechs Schritte mit Zustand, optional eine Zertifikats-Karte am Ende.
Woche 1 · Feld snipLabel
Schritt im Zustand complete
dayLabel, title und description sind Pflicht.
20 Min.
Woche 2
Zweiter abgeschlossener Schritt
snipLabel und duration sind optional.
25 Min.
- 3
Woche 3
Schritt im Zustand current
Genau ein Schritt sollte current sein.
30 Min.
- 4
Woche 4
Schritt im Zustand upcoming
Alles danach bleibt upcoming.
30 Min.
Gruppe certificate
Optionale Abschluss-Karte unter der Timeline.
15 · journeyCards
Kategorie story · keine Varianten · Icons starter, expert, community · Journey Cards
Journey Cards
Zwei bis vier illustrierte Karten mit festem Vokabular: starter, expert, community. Akzentfarbe je Karte wählbar.
Icon starter, Akzent green
items[] – Titel, Beschreibung, Icon und Akzent sind Pflicht.
Icon expert, Akzent coral
Die Illustration ergibt sich aus dem Icon, sie lässt sich nicht frei setzen.
Icon community, Akzent teal
ctaLabel und ctaUrl steuern den Button unter den Karten.
16 · logoStrip
Kategorie proof · zwei Quellen: customerLogos und custom · beide stehen hier untereinander · Logo Strip
Logo Strip – Quelle customerLogos
- ENERTRAG
- Börse Stuttgart
- Volksbank Zollernalb
- Vanilla Steel
- PZ News
- BTU-Holding
- KAIFU-Nordland
Logo Strip – Quelle custom, hier mit eigenen Labels
- Eigenes Label 1
- Eigenes Label 2
- Eigenes Label 3
- Eigenes Label 4
- Eigenes Label 5
- Eigenes Label 6
17 · statsBand
Kategorie proof · background: darkTeal (auch offwhite, white) · Stats Band
Stats Band
Zwei bis sechs Kennzahlen, jede mit Wert, Label und optionalem Detailtext. Wenn Zahlen der Beweis sind und Kundenlogos nicht nötig.
- Einträge erlaubt
- 2–6
- Hintergründe
- 3
- Pflichtfelder je Eintrag
- 2
- Titel
- 1
detail ist optional und steht klein unter dem Label.
darkTeal, offwhite, white.
value und label.
title ist Pflicht, description optional.
18 · trustStatsBand
Kategorie proof · logoSource: customerLogos (auch custom) · Trust Stats Band
- ENERTRAG
- Börse Stuttgart
- Volksbank Zollernalb
- Vanilla Steel
- PZ News
- BTU-Holding
- KAIFU-Nordland
Trust Stats Band
Kundenlogos und Kennzahlen in einem Band. Zwei bis vier Kennzahlen, jede mit festem Icon.
- Icon
- users
- Icon
- briefcase
- Icon
- percent
- Icon
- star
19 · logoCloud
Kategorie proof · source: customers (auch custom) · monochrome an, paused aus · Logo Cloud
Logo Cloud
Große Logowand mit Wechsel-Animation. monochrome entsättigt die Logos und zeigt die Markenfarbe erst beim Hover, paused schaltet die Animation ab, intervalMs und itemsPerPage steuern Tempo und Gruppengröße.
- HUGO BOSS
- Carl Zeiss
- SCHOTT
- ENERTRAG
- DKB
- Snipes
- HubSpot
- Börse Stuttgart
- Melitta
- Storck
- Handelsblatt
- Volksbank Zollernalb
- freenet
- Swagelok
- evasys
- Vanilla Steel
- AEB
- Clockodo
- Device Insight
- PZ News
- Livesystems
- Social DNA
- congstar
- BTU-Holding
- Reformhaus
- A.S. Création
- botiss
- KAIFU-Nordland
- Aristo Pharma
- Planet A
- Mobility Minds
20 · pressBand
Kategorie proof · keine Varianten · logoUrl je Eintrag ist Pflicht · Press Band
21 · caseStudyHighlights
Kategorie proof · keine Varianten · eine bis vier Karten · Case Study Highlight
Case Study Highlight
Eine bis vier Fallstudien-Karten. Pro Karte: Unternehmen, Headline, Herausforderung, Ergebnis, bis zu drei Kennzahlen und ein optionaler Link.
Feld company
bis zu70 %metrics[], maximal drei
Feld headline – das Ergebnis in einem Satz.
Feld outcome: was danach anders war.
Fallstudie lesen
Zweite Karte
30Teilnehmende
Karten mit mehreren Kennzahlen.
8 Wochen · 2 Gruppen
Test22 · testimonialGrid
Kategorie proof · keine Varianten · Karten hier: ohne Bild, mit Bild, mit Kennzahl-Chip · Testimonial Grid
Testimonial Grid
Ein bis zwanzig Zitat-Karten. Pflicht sind Zitat, Name und Rolle – alles andere ist optional.
Name (Pflicht)
Rolle (Pflicht)
Mit Bild: imageUrl nimmt einen lokalen oder externen Pfad. storyUrl verlinkt auf die passende Erfolgsgeschichte.
Sebastian Berg
Vice President Business Operations Excellence, HUGO BOSS
Mit Kennzahl-Chip: metricValue und metricLabel setzen die harte Zahl neben das Zitat.
Mit Metrik
Zeigt metricValue und metricLabel
23 · wallOfLove
Kategorie proof · source: builtIn (auch custom) · Inhalt kommt hier aus dem hinterlegten Vorrat · Wall of Love
Wall of Love – Quelle builtIn
“Es war eine wirklich coole Lernerfahrung und ich bin ‚on fire' mit KI. Der KI-Führerschein hat uns geholfen, unsere Fähigkeiten und unsere Neugier zu stärken, um als Pioniere und Leader innerhalb von Hugo Boss das Thema voranzutreiben. AI wird nicht unsere Jobs übernehmen, sondern die schlechten Aufgaben und uns so viel mehr Möglichkeiten geben, Dinge zu tun, die wir vorher nicht konnten.”
Sebastian Berg
Vice President Business Operations Excellence, Hugo Boss
“Wir sind durch den KI-Führerschein viel offener gegenüber KI geworden. Es geht nicht nur darum, Texte zu verbessern - wir haben gelernt, wie viel mehr möglich ist, von kreativer Ideengenerierung bis zur Prozessoptimierung. Gleichzeitig wissen wir jetzt, wie wir Chancen und Risiken im Blick behalten können.”
Kevin Dieterichs
GT Holding
„Wie können wir KI im Vertrieb zur Unterstützung unserer Arbeit einsetzen? Diese Frage haben Moritz Heininger und Jens Polomski von snipKI in ihrem Workshop auf unserem globalen Sales Meeting bei SCHOTT beantwortet. Die Antwort: auf vielfältige Weise. Meetings vorbereiten, nach Unternehmen, potenziellen Kunden, neuen Technologien und Marktnachrichten suchen. Einfach anfangen, üben und durch Lernen besser werden. Aber niemals vergessen: Immer zuerst nachdenken! Das war die wichtigste Lektion. Danke, Moritz und Jens, für die tollen Sessions!“
Haike Frank
Business Development Medical & Director Marketing Lighting and Imaging, SCHOTT
„Es ist wichtig, trotz der schnellen Veränderungen mit den neuesten Technologien Schritt zu halten. snipKI sind absolute Profis im Bereich KI und vermittelten die Inhalte effizient, zielführend und praxisnah, sodass der Arbeitsalltag direkt optimiert werden konnte. Dabei wurden die Inhalte perfekt auf den aktuellen Stand sowie auf die Herausforderungen unseres Unternehmens abgestimmt."
Michael Jehli
Head of Marketing, Livesystems
“Ich finde es nach wie vor genial. Es hat genau das bewirkt, was wir wollten: Die Leute beschäftigen sich mit KI, es sit im Alltag angekommen - nicht mit erhobenem Zeigefinger, sondern so, dass man Lust bekommt, damit zu arbeiten.”
Marco Küchler
Head of Marketing Germany, WSA
“Der KI-Führerschein hat uns gezeigt, wie mächtig und praxisnah KI wirklich ist. Besonders beeindruckend war, wie schnell komplexe Aufgaben - von der Produktpräsentation bis zur Marktrecherche - mit den richtigen Tools gelöst werden können. Für uns ist KI jetzt kein Buzzword mehr, sondern ein echter Produktivitätsfaktor.”
Vincent Treike
Leitung Srategisches Marketing, Aristo Pharma
„Was mir besonders gefallen hat: Wir wurden gezwungen, dranzubleiben. Es gab ein klares Ziel, wir haben gemeinsam als Team daran gearbeitet – und am Ende hat jede:r von uns den eigenen Weg gefunden, KI produktiv einzusetzen.“
Angi Kaufmann
Agenturleitung, diff. Kommunikation AG
“Mein Team ist total im KI-Fieber, sie machen alles mit KI. Selbst unsere Pressemitteilung für eine große Partnerschaft kam aus Copilot. Der KI-Führerschein hat nicht nur Tools vermittelt, sondern auch die Denkweise verändert. Heute ist die erste Frage im Team oft "Kann man das nicht mit KI machen?”
Kathrin Merk
Marketing Director Central Europe, Össur
“Der KI-Führerschein hat uns nicht nur die Grundlagen vermittelt, sondern vor allem ins Handeln gebracht. Heute sprechen wir abteilungsübergreifend über KI, entwickeln gemeinsam Lösungen und wissen, wie wir sie skalierbar einsetzen können. Ohne snipKI wären wir nicht so schnell an diesem Punkt.”
Marcus Schulz
CEO, Giffits
“Die Kollegen waren alle sehr zufrieden und hatten eine steile Lernkurve. Jeder hat für seinen Fachbereich konkrete Anwendungen gefunden. Für uns war der größte Mehrwert, dass wir verstanden haben, wie KI praktisch funktioniert, wo die Grenzen liegen und wie wir damit unsere Prozesse Schritt für Schritt automatisieren können. Damit haben wir den Grundstein gelegt, unser Wachstum effizienter zu gestalten.”
Kathrin Barzantny
Director Finance & Operations, Swagelok Frankfurt
24 · expertSpotlightGrid
Kategorie proof · keine Varianten · imageUrl ist Pflicht, kein Mediathek-Upload · Expert Spotlight Grid
Expert Spotlight Grid
Zwei bis sechs Personen mit Name, Rolle, optionaler Kurzbio und Bild.
Name (Pflicht)
Rolle (Pflicht)
bio ist optional und steht unter der Rolle.
Zweite Person
Mindestens zwei Einträge
Ohne gültige imageUrl bleibt die Karte leer – der Block hat keinen Bild-Upload.
Dritte Person
Maximal sechs Einträge
25 · whySnipki
Kategorie proof · keine Varianten · Bild hier bewusst leer gelassen · Why snipKI Section
Why snipKI Section
01
Dunkler Abschnitt mit Gründen
reasons[] nimmt einen bis fünf Einträge, Titel und Beschreibung jeweils Pflicht.
02
Bild nur aus der Mediathek
image ist ein Upload-Feld ohne URL-Fallback. Hier ist es bewusst leer gelassen.
03
Genau ein Link
link ist eine Gruppe, also eine Aktion am Ende des Abschnitts.
26 · teamGrid
Kategorie proof · keine Varianten · Personen kommen aus den Payload-Users, nicht aus dem Block · Team Grid
Team Grid
Der Block hat nur vier Felder. Die Personen kommen automatisch aus den Payload-Users, die für die Team-Anzeige markiert sind – gepflegt wird das unter Users, nicht hier im Block.
Jens Polomski
Co-Founder & CEO
Moritz Heininger
Co-Founder & COO
Anne Flath
Content Creatorin & KI-Trainerin
Christof Schmid
AI Consultant
Huyen Nguyen
Creative Strategist
Jan Zaiser
Content Creator & Automatisierung
Janek Dohnhauser
Team snipKI
Manuel Maier
Content Creator
Ammar Kamran
Team snipKI
Ann-Katrin Maier
Team snipKI
Cara Seitz
Team snipKI
Clemens Pfefferkorn
Team snipKI
Daniel Deniega
Team snipKI
Lina Eichhof
Team snipKI
Mareike Heininger
Team snipKI
Martina Steckert
Team snipKI
Meik Stern
Team snipKI
Pascal Poredda
Team snipKI
27 · snipDiscovery
Kategorie content · keine Varianten · echte Snip-Videos · Snip Discovery
Snip Discovery
Themenauswahl mit abspielbaren Snip-Vorschauen auf Mint-Hintergrund. Pro Eintrag sind topic, title, description, posterUrl, videoUrl und url alle Pflicht.
28 · snipBenefits
Kategorie content · keine Varianten · genau drei Einträge, nicht zwei, nicht vier · Snip Benefits
Snip Benefits
Illustrierte Strecke durch genau drei Lernvorteile. Gehört direkt unter Snip Discovery.
Erster Vorteil
Titel und Beschreibung sind Pflicht.
Zweiter Vorteil
Die Illustrationen liefert der Block, sie lassen sich nicht austauschen.
Dritter Vorteil
Der Link unten kennt nur die Darstellung default.
29 · bentoShowcase
Kategorie content · background: offwhite (auch white, darkTeal) · Töne und Spannweiten je Karte · Bento Showcase
Bento Showcase
Dichtes Kachelraster aus Text- oder Kennzahl-Karten. Pro Karte steuern tone (default, green, coral, lavender) die Farbe und span (normal, wide, tall) die Größe.
Karte: tone default, span wide
Titel und Beschreibung sind Pflicht, alles andere optional.
Karte: tone green, span normal
Mit metric und label wird aus der Textkarte eine Kennzahl-Karte.
70 %
Feld label unter der Metrik
Karte: tone coral, span tall
span tall zieht die Karte über zwei Zeilen.
Karte: tone lavender, span normal
Zwei bis acht Karten sind erlaubt.
Karte: tone default, span normal
Das Raster ordnet sich responsiv neu, span ist ein Wunsch, keine Garantie.
30 · featureGrid
Kategorie content · zwei Varianten: cards und pills · beide stehen hier untereinander · Feature Grid
Feature Grid – Variante cards
Der flexible Allrounder für Features, Leistungen oder kurze Vorteile. Ein bis sechzehn Einträge. Nur der Titel ist Pflicht.
Karte mit Beschreibung
description, icon, imageUrl und imageAlt sind alle optional.
Karte mit Icon mic
Die Icon-Auswahl ist klein: mic, people, sparkles.
Karte mit Icon people
Passt kein Icon, lässt man das Feld leer.
Karte mit Icon sparkles
imageUrl setzt stattdessen ein Bild an den Kartenkopf.
Feature Grid – Variante pills auf darkTeal
Gleicher Block, Variante pills: die Einträge werden zu kompakten Chips. Gut für Aufzählungen ohne Beschreibungstext.
- Pill 1
- Pill 2
- Pill 3
- Pill 4
- Pill 5
- Pill 6
- Pill 7
- Pill 8
31 · solutions
Kategorie content · keine Varianten · bis zu vier Lösungskarten · Solutions Section
Solutions Section
Kommt nach dem Problem-Abschnitt: erklärt das Angebot und leitet auf bis zu vier Detailseiten weiter. Dazu eine optionale Checkliste mit maximal sechs Punkten.
- checklist[] – maximal sechs Punkte
- Jeder Punkt ist reiner Text
- Ohne Checkliste fällt der Bereich weg
Lösungskarte 1
Feld productNameTitel und Beschreibung sind Pflicht, productName und Link optional.
Zur Detailseite32 · businessPillars
Kategorie content · keine Varianten, keine Felder · Inhalt ist fest hinterlegt und lokalisiert · Business Pillars
Unsere drei Säulen
33 · faq
Kategorie content · keine Varianten · hier mit zwei eigenen Kategorien, ohne Angabe greift der Standardinhalt · FAQ
FAQ
Kein Feld ist Pflicht. Ohne eigene Kategorien greift der Block auf den hinterlegten, lokalisierten Standardinhalt zurück.
Kategorie mit Titel
Zweite Kategorie
34 · content
Kategorie content · Spaltenbreiten: oneThird, half, twoThirds, full · unten als half + half · alle Label-Zeilen auf dieser Seite sind ebenfalls content-Blöcke (size full) · Content
Content
Der generische Rich-Text-Block: ein bis vier Spalten, je Spalte size, freier Rich Text und optional ein Link. Nur nehmen, wenn kein zweckgebauter Marketing-Block passt.
Zweite Spalte, ebenfalls half. Die Spaltenbreiten addieren sich nicht automatisch – zwei half ergeben eine Zeile, drei oneThird ebenso.
Der Link pro Spalte erscheint nur, wenn enableLink gesetzt ist.
35 · externalEmbed
Kategorie content · keine Varianten · nur für das freigegebene Deals-Embed · Höhe hier 700 statt der üblichen 1500 · External Embed
36 · editorialSplit
Kategorie media · layout: textLeft und textRight · background: white, offwhite, darkTeal · zwei Kombinationen untereinander · Editorial Split
Editorial Split
Zweispaltiger Abschnitt aus Text und Bild. Das Arbeitspferd für die Seitenmitte: einmal Text links, einmal Text rechts, im Wechsel. layout, background und headingLevel sind Pflicht, links[] nimmt maximal einen Eintrag.
Genau eine Aktion
Editorial Split – gespiegelt auf darkTeal
Derselbe Block mit layout textRight und background darkTeal. So entsteht der Wechsel-Rhythmus durch die Seite. headingLevel h1 nur setzen, wenn der Abschnitt wirklich die Hauptüberschrift der Seite trägt.
37 · imageBento
Kategorie media · background: offwhite (auch white, darkTeal) · imageUrl je Karte ist Pflicht · Image Bento
Image Bento
Wie Bento Showcase, nur mit Bild je Karte. imageUrl ist Pflicht und erwartet einen öffentlichen Pfad – es gibt keine Mediathek-Auswahl. Wenn die Illustrationen fehlen, ist bentoShowcase die richtige Wahl.
Karte: span wide, tone default
Titel, Beschreibung und imageUrl sind Pflicht.
Karte: span normal, tone green
span kennt hier nur normal und wide, kein tall.
Karte: span normal, tone coral
Zwei bis acht Karten.
Karte: span normal, tone lavender
Töne: default, green, coral, lavender.
38 · mediaBlock
Kategorie media · keine Varianten · ein Feld: ein Element aus der Mediathek · Media Block
39 · rolePathGrid
Kategorie navigation · keine Varianten · hier alle sechs Icons und fünf Akzentfarben · Role Path Grid
Role Path Grid
Karten, mit denen Besucher sich selbst einsortieren. Drei bis sechs Rollen, jede mit festem Icon und Akzentfarbe. Für eigene Rollen das Icon custom nehmen.
Icon marketing, Akzent green
Titel, Beschreibung, Icon und Akzent sind Pflicht.
Icon hr, Akzent coral
href verlinkt auf die rollenspezifische Seite.
Icon sales, Akzent mint
imageUrl ersetzt die Illustration durch ein eigenes Bild.
Icon leadership, Akzent amber
Akzente: green, coral, mint, amber, teal.
Icon operations, Akzent teal
Icons: marketing, hr, sales, leadership, operations, custom.
Icon custom, Akzent green
custom nehmen, wenn keine der fünf Standardrollen passt.
40 · resourceShowcase
Kategorie navigation · vier Modi: newsletter, deals, tool, facts · hier newsletter und facts untereinander · Resource Showcase
Resource Showcase – Modus newsletter
Führt zu einem konkreten Angebot: Newsletter, Deals, Tool oder Faktenblatt. mode ändert die Darstellung, der Feldsatz bleibt gleich. Zwei bis acht Fakten, zwei bis sechs Karten.
- facts[].label
- facts[].value
- Mindestens
- 2 Fakten
- Höchstens
- 8 Fakten
snipKI Newsletter
Diese Woche wichtig
Karte 1
Titel und Beschreibung sind Pflicht, kicker optional.
Karte 2
Zwei bis sechs Karten.
Resource Showcase – Modus facts
Derselbe Block im Modus facts. Die weiteren Modi sind deals (siehe snipKI Deals) und tool.
- Modi
- 4
- newsletter
- deals
- tool
- facts
Berlin. Lernen. Strategie. Umsetzung.
Karte 1
Im Modus facts stehen die Fakten im Vordergrund.
Karte 2
Die Karten bleiben als Erläuterung darunter.
41 · archive
Kategorie navigation · populateBy: collection (auch selection) · zieht echte Beiträge aus Posts · Archive
Archive
Live-Liste aus der Posts-Collection. populateBy collection zieht über Kategorie und limit, populateBy selection lässt einzelne Beiträge auswählen. Hier: collection, limit 3, ohne Kategoriefilter.
42 · marketingCta
Kategorie conversion · zwei Varianten: gradientCard und darkBand · beide untereinander · Marketing CTA
Marketing CTA – Variante gradientCard
Der Standard-Abschluss einer Marketingseite. Titel und Beschreibung sind Pflicht, maximal zwei Aktionen.
Marketing CTA – Variante darkBand
Derselbe Block als durchgehendes dunkles Band statt als Karte mit Verlauf. Nur variant umstellen.
43 · cta
Kategorie conversion · keine Varianten · nur wenn Marketing CTA die Formatierung nicht hergibt · Call to Action
44 · stoerer
Kategorie conversion · acht Farbvarianten: coral, green, darkTeal, lavender, lime, orange, cream, offwhite · alle acht folgen untereinander · Störer
45 · pricingSection
Kategorie conversion · keine Varianten · hier alle drei Karten ohne Stripe-Anbindung, damit niemand versehentlich im Checkout landet · Pricing Section
Pricing Section
Eine bis drei Preiskarten. billingPlanKey verbindet eine Karte mit einem Stripe-Lernplan – dann kommen Preis und Checkout-Link live von Stripe. Karten ohne Plan bekommen none und einen eigenen priceLabel.
Karte ohne Stripe-Plan
billingPlanKey none, Preis über priceLabel gesetzt.
Feld ctaLabelIndividuelles Angebot
- features[] – mindestens ein Eintrag
- Jeder Eintrag ist reiner Text
- Feld badge
Karte mit featured
featured hebt genau eine Karte hervor, badge setzt das Label darauf.
Feld ctaLabel49 €
pro pro Monat
- amount ist eine Zahl, period der Text darunter
- priceSuffix steht direkt hinter dem Preis
- footerNote erscheint unter dem Button
Dritte Karte
Mehr als drei Karten nimmt der Block nicht an.
Feld ctaLabelAuf Anfrage
- Alle Links hier zeigen bewusst ins Leere
46 · inquiryBand
Kategorie conversion · keine Varianten · hängt am echten Formular „snipKI Kontakt“, bitte nichts abschicken · Inquiry Band
Inquiry Band
Das Lead-Formular mit Marketing-Kontext. form verweist auf ein Payload-Formular. Absendungen landen echt in Payload, also auf dieser Seite bitte nichts abschicken.
47 · formBlock
Kategorie conversion · keine Varianten · Intro zuschaltbar · ebenfalls am echten Formular, bitte nichts abschicken · Form Block
Form Block
Das nackte Payload-Formular mit optionalem Intro. Wenn das Formular Marketing-Kontext und Value Points braucht, ist Inquiry Band die bessere Wahl. Auch hier gilt: bitte nichts abschicken.