Design-System · Dokumentation
Elements & Dokumentation
Alles an einem Ort: die Architektur der Website, die komplette Baustein-Bibliothek (per Klick einsetzbar), der verbindliche Styleguide und die Anleitung für ABM-Landingpages. Jeder Baustein ist ein editierbarer Gutenberg-Block – einfügen, Texte und Bilder austauschen, fertig.
Dynamische & funktionale Bausteine (Countdown, Veranstaltungen, Glossar, Logo-Band, Video, Formular) werden per Shortcode eingefügt – sie stehen auf Sonstige Elemente.
Verzeichnis
Was ist wofür – und wie nutzt du es?
Die Dokumentation besteht aus drei Bereichen. Diese Seite ist die Bibliothek & Referenz; daneben gibt es die funktionalen Bausteine und die bebilderten Anleitungen.
Bibliothek & Referenz
Elements (diese Seite)
Was: Seitenarchitektur, 50 editierbare Bausteine, Styleguide und ABM-Anleitung.
Wofür: Seiten bauen und das Design-System nachschlagen.
Wie genutzt: Bausteine im Editor über + → Patterns → „Umantis …» einfügen.
Dynamisch & funktional
Sonstige Elemente
Was: Countdown, Veranstaltungen, Glossar, Logo-Band, Video, Formular.
Wofür: Inhalte mit Live-Daten oder Logik.
Wie genutzt: Per Shortcode: Code kopieren, einsetzen, Werte anpassen.
Academy & How-to
Page-Anleitungen
Was: 8 bebilderte Schritt-für-Schritt-Lektionen + Asset-Spezifikationen.
Wofür: Lernen, wie man Seiten bedient, editiert und erweitert.
Wie genutzt: Passende Lektion öffnen und nachmachen.
Auf dieser Seite
Inhaltsverzeichnis
Vier Kapitel. Springe direkt zum gewünschten Abschnitt – die Navigationsleiste oben bleibt beim Scrollen sichtbar.
Kapitel 2
Element-Bibliothek
Kapitel 3
Styleguide
Kapitel 1
Seitenarchitektur
Wie die Website aufgebaut ist – alle Seiten nach Bereich gruppiert, mit Zweck. Die Navigation folgt dem Mega-Menü (inc/mega-menu-data.php). Darunter der typische Weg eines Besuchers vom Einstieg bis zur Kontaktaufnahme.
Sitemap & Bereiche
Startseite
Hero, Social Proof, Module-Grid, Final-CTA (front-page.php)
Produkte · HR-Suite
Übersicht: 16 Module, 2 Pakete
Vorkonfiguriert · 6 Module · 100–500 MA
16 Module, frei kombinierbar, ab 300 MA
Produkte · Recruiting
KI-Screening, Multiposting
Stellenanzeigen, Reichweite
Produkte · People
Preboarding, Aufgabenworkflows
Ziele, 360°-Feedback
Lohnrunden, Salary Bands
Interne Kommunikation
Produkte · Operations
Stammdaten, Organisation, Self-Service
DSGVO-konforme Aktenführung
Mobile Erfassung, CH/DE-konform
DeepSign · EES/FES/QES
1.800+ Textbausteine, KI
Drag-and-Drop Dienstpläne
OCR, Smartphone
CH & DE, autom. Meldungen
Full-Service Deutschland
Produkte · Insights
HR-Kennzahlen in Echtzeit
KI- & Automatisierung
Lösungen
Methodik, Senior-Consultants
HR-Transformation als U-Bahn-Netz
Workshop-Methode
Unternehmen
Firmenprofil
Jobs @ Abacus Umantis
Thesis-Awards
PUR HR, Fosway, SIQT
Technologie- & Vertriebspartner
API · SAP · DATEV · 800+ Jobportale
News & Resources
Custom Landing, Filter-Pills, Query Loop
Blog-Übersicht, Themen-Hub
Downloads, Formular-Gates
Live + On-Demand
Konferenzen, Trade Shows, Countdown
Screencasts, Demos
Fact Sheet, Logos, Pressekontakt
Signup-Page
Kontakt & Konversion
Formular, Demo-Booking
Personalisierte Account-Seiten
Rechtliches
AGB-konform CH+DE
Verweis auf Abacus-Gruppe
Accessibility-Statement
User-Flow · vom Einstieg zur Konversion
Der idealtypische Pfad durch die Seitenbereiche. Jede Stufe verweist auf die passenden Seitentypen.
Schritt 1
Einstieg
Start / Kampagne / Anzeige
/home/, Landingpages, ABM
→
Schritt 2
Orientierung
Welche Lösung passt?
HR-Suite, Lösungen, News
→
Schritt 3
Vertiefung
Modul-Details prüfen
Produktseiten, Videos, Whitepaper
→
Schritt 4
Vertrauen
Belege sammeln
Referenzen, Auszeichnungen, Events
→
Schritt 5
Konversion
Kontakt aufnehmen
Demo buchen, Kontakt, Formular
Kapitel 2
Element-Bibliothek
Fertige, markenkonforme Bausteine. Jeder Block unten ist genau so im Editor einfügbar über + → Patterns → „Umantis …“. Hier stehen sie als lebende, editierbare Vorschau – Texte, Bilder und Links direkt anklicken und ersetzen. Das Styling bleibt automatisch on-brand.
Modul finden
Im Editor auf + klicken und den Reiter Patterns öffnen.
Einfügen
Kategorie Umantis … wählen und das Modul anklicken.
Anpassen
Texte, Bilder und Links ersetzen. Reihenfolge per Drag & Drop.
Layout & Struktur
Bausteine zum Anordnen: Abstände, Spalten, Trennlinien, Container und Sektionen.
Abstand klein (32px) umantis/el-spacer-sm
Vertikaler Leerraum – kleiner Abstand zwischen Blöcken.
Gut für: Kleinen vertikalen Abstand zwischen zwei Blöcken schaffen. · Wo: Überall – zur Feinjustierung von Abständen.
Abstand mittel (64px) umantis/el-spacer-md
Vertikaler Leerraum – Standard-Abstand zwischen Sektionen.
Gut für: Standard-Abstand zwischen Sektionen setzen. · Wo: Zwischen den Sektionen auf allen Seiten.
Abstand gross (96px) umantis/el-spacer-lg
Vertikaler Leerraum – grosser Abstand für klare Trennung.
Gut für: Grossen Abstand für klare optische Trennung. · Wo: Vor neuen Kapiteln auf langen Seiten.
Trennlinie umantis/el-separator
Dezente horizontale Linie zwischen zwei Inhalten.
Gut für: Zwei Themen mit einer dezenten Linie trennen. · Wo: Lange Inhalts- und Blogseiten.
2 Spalten (leer) umantis/el-columns-2
Zwei gleich breite Spalten zum freien Befüllen.
Gut für: Zwei Inhalte gleichwertig nebeneinander stellen. · Wo: Produkt-, Lösungs- und Landingpages.
Spalte 1 …
Spalte 2 …
3 Spalten (leer) umantis/el-columns-3
Drei gleich breite Spalten zum freien Befüllen.
Gut für: Drei Inhalte in einer Reihe anordnen. · Wo: Übersichts- und Feature-Seiten.
Spalte 1 …
Spalte 2 …
Spalte 3 …
4 Spalten (leer) umantis/el-columns-4
Vier gleich breite Spalten zum freien Befüllen.
Gut für: Vier kompakte Inhalte nebeneinander. · Wo: Logo-Reihen, kleine Feature-Raster.
Spalte 1 …
Spalte 2 …
Spalte 3 …
Spalte 4 …
2 Spalten (breit + schmal) umantis/el-columns-sidebar
Hauptspalte links, schmale Seitenspalte rechts (66 / 33).
Gut für: Hauptinhalt mit schmaler Begleitspalte. · Wo: Artikel- und Detailseiten.
Hauptinhalt …
Seiteninhalt …
Container (zentriert) umantis/el-container
Zentrierter Inhaltsblock mit Innenabstand – fasst Inhalte zusammen.
Gut für: Inhalte gebündelt, zentriert und lesbar halten. · Wo: Textlastige Seiten, Rechtstexte.
Inhalt im Container …
Vollbreite Sektion (heller Hintergrund) umantis/el-section
Volle Breite mit Hintergrundfarbe – Rahmen für eine ganze Sektion.
Gut für: Eine ganze Sektion mit Hintergrund absetzen. · Wo: Startseite, Landingpages.
Sektions-Titel
Inhalt der Sektion …
Reihe (nebeneinander) umantis/el-row
Elemente nebeneinander in einer Zeile – bricht auf Mobil um.
Gut für: Kleine Elemente flexibel in einer Zeile anordnen. · Wo: Hero-Bereiche, Button- und Logo-Zeilen.
Element 1
Element 2
Element 3
Buttons & Labels
Buttons, Badges und Text-Links zum Einbauen in jede Sektion.
Buttons (Primär + Text-Link) umantis/el-buttons
Marken-Button plus dezenter Pfeil-Link als Zweitaktion.
Gut für: Haupt- und Zweitaktion klar anbieten. · Wo: Heroes, CTA-Banner, Seitenenden.
Badge / Eyebrow-Label umantis/el-badge
Kleines Grossbuchstaben-Label mit Markenlinie davor.
Gut für: Eine Sektion mit einem kurzen Label einleiten. · Wo: Über fast jeder Sektion (Eyebrow).
Kicker-Text hier
Pfeil-Link (Text-CTA) umantis/el-arrow-link
Dezenter Inline-Link mit Pfeil in Markenrot.
Gut für: Dezent auf eine weiterführende Seite verlinken. · Wo: Feature-Sektionen, Karten, Teaser.
Hero & Kopf
Grosse Kopfbereiche und Sektions-Ueberschriften.
Hero mit CTA (dunkel) umantis/el-hero
Vollbreiter Kopfbereich auf dunklem Gradient. Über die Block-Optionen lässt sich ein Hintergrundbild ergänzen.
Gut für: Seiteneinstieg mit klarer Botschaft und CTA. · Wo: Startseite, Kampagnen-Landingpages.
Für HR-Entscheider im DACH-Mittelstand
Alles für HR. An einem Ort.
Methode, HR-Software und Beratung aus einer Hand – für Mittelständler mit gewachsenen Strukturen.
Hero zweispaltig (Text + Bild) umantis/el-hero-split
Kopfbereich mit Text links und Bild rechts.
Gut für: Einstieg mit Text links und Produktbild rechts. · Wo: Produkt- und Lösungsseiten.
Eyebrow-Text
Überschrift, die den Kern auf den Punkt bringt
Ein bis zwei Sätze Begleittext, die das Versprechen erklären.
Sektions-Überschrift (zentriert) umantis/el-section-header
Eyebrow, H2 und Begleitsatz – mittig, als Auftakt für eine Sektion.
Gut für: Eine Sektion mittig und klar einleiten. · Wo: Alle längeren Inhaltsseiten.
Bereich
Die Sektions-Überschrift mit Akzent
Optionaler Begleitsatz, der die Überschrift einordnet.
Produkt-Hero (dunkel, mit Bullets) umantis/el-hero-product
Dunkler Modul-Hero: Eyebrow, Titel, Lead, Vorteils-Bullets und zwei Buttons – Bild rechts.
Gut für: Produkt-/Modulseiten kraftvoll eröffnen. · Wo: Alle Modul- und Produktseiten.
Modul-Kategorie
Modul-Titel, der den Nutzen zeigt
Ein bis zwei Sätze, die das Modul und seinen Mehrwert einordnen.
- Wichtigster Vorteil
- Zweiter Vorteil
- Dritter Vorteil
Feature & Inhalt
Zweispaltige Inhalte, Feature-Karten und Vergleiche.
Bild + Text (zweispaltig) umantis/el-split-image-text
Bild links, Textblock mit Link rechts. Spalten per Drag tauschbar.
Gut für: Ein einzelnes Feature mit Bild erklären. · Wo: Produkt- und Lösungsseiten.
Feature-Überschrift
Beschreiben Sie das Feature oder den Vorteil. Kompakt und auf den Nutzen fokussiert.
Nummerierte Vorteils-Karten (3er) umantis/el-numbered-cards
Drei Karten mit grosser Nummer, Titel, Text und Punkteliste.
Gut für: Vorgehen oder Leistungen in drei Schritten zeigen. · Wo: Startseite (Consulting), Leistungsseiten.
01
Erster Baustein
Kurze Beschreibung des ersten Bausteins und seines Nutzens.
- Leistung A
- Leistung B
- Leistung C
02
Zweiter Baustein
Kurze Beschreibung des zweiten Bausteins und seines Nutzens.
- Leistung A
- Leistung B
- Leistung C
03
Dritter Baustein
Kurze Beschreibung des dritten Bausteins und seines Nutzens.
- Leistung A
- Leistung B
- Leistung C
Vorher / Nachher Vergleich umantis/el-before-after
Zwei gegenübergestellte Listen – Problem links, Lösung rechts.
Gut für: Problem und Lösung gegenüberstellen. · Wo: Startseite, Argumentations-Seiten.
Klassisches Vorgehen
- Erster Schmerzpunkt
- Zweiter Schmerzpunkt
- Dritter Schmerzpunkt
Mit Abacus Umantis
- Erster Vorteil
- Zweiter Vorteil
- Dritter Vorteil
Feature-Karten-Grid (Icon + Text) umantis/el-feature-grid
Drei Feature-Karten mit Icon-Fläche, Titel und Kurztext.
Gut für: Mehrere Funktionen kompakt nebeneinander zeigen. · Wo: Produktseiten, Modulübersichten.
◆
Feature eins
Kurzer Nutzen-Text zum ersten Feature.
◆
Feature zwei
Kurzer Nutzen-Text zum zweiten Feature.
◆
Feature drei
Kurzer Nutzen-Text zum dritten Feature.
Produkt-Feature mit Screenshot umantis/el-product-feature
Screenshot links, Feature-Text mit Nutzen-Highlight und Checkliste rechts.
Gut für: Eine Funktion mit Screenshot und Nutzen erklären. · Wo: Produkt- und Modulseiten.
Funktion, die ein Problem löst
Beschreiben Sie die Funktion und wie sie den Arbeitsalltag konkret erleichtert.
Konkreter Nutzen, z. B. „spart vier Stunden pro Woche».
- Detail eins
- Detail zwei
Karten & Grids
Einzelne Karten und Karten-Raster.
Einzelne Karte umantis/el-card
Weisse Karte mit Rand, Titel und Text – Grundbaustein.
Gut für: Einen einzelnen Inhalt als Karte hervorheben. · Wo: Übersichts- und Einstiegsseiten.
Karten-Titel
Kurzer, prägnanter Beschreibungstext für diese Karte.
3er Karten-Grid umantis/el-card-grid-3
Drei weisse Karten nebeneinander auf hellem Hintergrund.
Gut für: Drei gleichwertige Inhalte als Karten zeigen. · Wo: Lösungs- und Übersichtsseiten.
Karte 1
Beschreibung der ersten Karte.
Karte 2
Beschreibung der zweiten Karte.
Karte 3
Beschreibung der dritten Karte.
Modul-Karten (Linkkarten) umantis/el-module-cards
Kompakte, klickbare Karten – ideal für Modul- oder Themenübersichten.
Gut für: Themen oder Module zum Weiterklicken anbieten. · Wo: Modul- und Themen-Hubs.
Paket-Karten (3 Pakete) umantis/el-pricing-cards
Drei Preis-/Paket-Karten mit Leistungs-Checkliste und CTA; mittlere hervorgehoben.
Gut für: Pakete oder Tarife vergleichbar nebeneinander zeigen. · Wo: HR-Suite, Paket- und Preisseiten.
SmartKMU
6 Module
Vorkonfiguriert · 100–500 MA
- Schnell startklar
- Best-Practice-Setup
- Fixer Funktionsumfang
Empfohlen
Flex
16 Module
Frei kombinierbar · ab 300 MA
- Alle Module wählbar
- Individuell konfiguriert
- Mitwachsend
Enterprise
Individuell
Für Konzern-Anforderungen
- Custom-Integrationen
- Dedizierter Support
- SLA nach Bedarf
Ansprechpartner-Karten umantis/el-contact-cards
Personen-Karten mit rundem Foto, Name, Rolle und Kontakt.
Gut für: Ansprechpartner mit Foto und Kontakt vorstellen. · Wo: Kontakt, ABM-Seiten, Über uns.
Zahlen & Prozess
Kennzahlen, KPIs, Prozess-Schritte und Fahrplaene.
Zahlen-Leiste (dunkel, 4 Werte) umantis/el-stats-bar
Dunkle Sektion mit vier Kennzahlen.
Gut für: Vertrauen mit harten Kennzahlen aufbauen. · Wo: Startseite, Über-uns-Seite.
1985
Gegründet
65.000
Kunden
1.200
Fachpartner
Nr. 1
in der Schweiz
KPI-Grid (Gradient) umantis/el-kpi-grid
Kennzahlen-Raster auf Marken-Gradient.
Gut für: Ergebnisse plakativ und farbig zeigen. · Wo: Referenzen, Landingpages.
85 %+
Adoption
12 Wo.
Time-to-Live
3,2×
schneller
Prozess-Schritte (3er) umantis/el-process-steps
Drei nummerierte Schritte nebeneinander.
Gut für: Einen Ablauf in klaren Schritten erklären. · Wo: „So funktioniert es»-Seiten.
Schritt 1
Kick-off
Ziele, Scope und Rollen klären.
Schritt 2
Aufbau
Konfiguration und Daten übernehmen.
Schritt 3
Go-Live
Schulung, Start und Begleitung.
Fahrplan / Timeline umantis/el-timeline
Vertikaler Fahrplan: Datum/Phase links, Beschreibung rechts.
Gut für: Einen zeitlichen Fahrplan oder eine Agenda zeigen. · Wo: Event-, Webinar- und Projektseiten.
Phase 1
Beschreibung des ersten Schritts im Fahrplan.
Phase 2
Beschreibung des zweiten Schritts im Fahrplan.
Phase 3
Beschreibung des dritten Schritts im Fahrplan.
Social Proof
Zitate, Testimonials, Logos und Auszeichnungen.
Zitat + Kennzahlen umantis/el-quote-metrics
Kundenzitat links, drei Ergebnis-Kennzahlen rechts.
Gut für: Ein Zitat mit Ergebnis-Zahlen kombinieren. · Wo: Startseite, Referenzen.
„Wir sind nach 12 Wochen live gegangen – das war vorher unvorstellbar.»
Sandra Keller, Leiterin HR · Swiss Mittelstand AG
12 Wo.
Time-to-Live (Projektstart bis Go-Live)
87 %
Adoption in den ersten 90 Tagen
3,2×
Schneller als vergleichbare Rollouts
Testimonial-Karte (Bild + Zitat) umantis/el-testimonial-card
Karte mit Bildfläche, Zitat, Name und Rolle.
Gut für: Eine Kundenstimme mit Bild zeigen. · Wo: Referenzen, Produktseiten.
„Ein authentisches Kundenzitat mit konkretem Ergebnis.»
Vorname Nachname
Rolle · Unternehmen
Grosses Zitat (Pull-Quote) umantis/el-pullquote
Zentriertes, grosses Zitat mit Quellenangabe.
Gut für: Eine starke Aussage gross hervorheben. · Wo: Blog- und Story-Seiten.
„Hier steht eine starke, konkrete Aussage – idealerweise mit messbarem Ergebnis.»
Vorname Nachname, Rolle · Unternehmen
Logo- / Trust-Leiste umantis/el-logo-trust
Vertrauenszeile mit Label und Logo-Platzhaltern.
Gut für: Bekannte Kunden oder Partner zeigen. · Wo: Startseite, ABM-Landingpages.
1.200+ HR-Teams im DACH-Raum vertrauen uns
Logo
Logo
Logo
Logo
Auszeichnungen (3er) umantis/el-awards-grid
Drei Award-Karten mit Badge-Bild, Jahr und Beschreibung.
Gut für: Auszeichnungen und Analystenurteile zeigen. · Wo: Startseite, Auszeichnungen-Seite.
2025
Auszeichnung eins
Analyst · Organisation
Kurze Einordnung der Auszeichnung.
2026
Auszeichnung zwei
Analyst · Organisation
Kurze Einordnung der Auszeichnung.
2025
Auszeichnung drei
Analyst · Organisation
Kurze Einordnung der Auszeichnung.
Trust-Leiste dunkel (Logos) umantis/el-logo-trust-dark
Dunkles Vertrauensband mit Label und Logo-Platzhaltern.
Gut für: Kundenvertrauen auf dunklem Grund zeigen. · Wo: Dunkle Sektionen, ABM-Landingpages.
Über 65.000 Kunden vertrauen uns
Logo
Logo
Logo
Logo
Logo
Trust-Strip (Argumente mit Haken) umantis/el-trust-strip
Horizontale Leiste mit kurzen Vertrauens-Argumenten und Haken.
Gut für: Kurze Vertrauens-Argumente kompakt zeigen. · Wo: Unter Heroes, zwischen Sektionen.
✓ Schweizer Software
✓ DSG/DSGVO-konform
✓ Support im DACH-Raum
✓ Seit 1985 etabliert
CTA & Banner
Call-to-Action-Banner in hell, dunkel und Gradient.
CTA-Banner (hell) umantis/el-cta-banner
Zentrierter Call-to-Action auf hellem Hintergrund.
Gut für: Sanften Handlungsaufruf auf hellem Grund. · Wo: Seitenenden, zwischen Sektionen.
Bereit für HR, das funktioniert?
Lassen Sie uns gemeinsam herausfinden, wie die Abacus HR-Suite Ihre Realität abbildet.
CTA dunkel (Inline) umantis/el-cta-dark
Dunkler Conversion-Block für mitten in der Seite.
Gut für: Auffälligen Aufruf mitten im Text platzieren. · Wo: Lange Landingpages.
Ein klarer Handlungsaufruf
Ein Satz, der den nächsten Schritt begründet und greifbar macht.
CTA-Streifen (Violett) umantis/el-cta-stripe
Farbiger Streifen: Text links, Button rechts.
Gut für: Kompakten Aufruf als Farbstreifen setzen. · Wo: Zwischen zwei Sektionen.
Warum das zusammengehört
Eine prägnante Begründung in ein bis zwei Sätzen.
Finale CTA (dunkel, gross) umantis/el-cta-final
Grosser Abschluss-Call-to-Action, zentriert.
Gut für: Starken Abschluss-Aufruf am Seitenende. · Wo: Ende fast jeder Seite.
Sprechen wir über Ihr HR.
In 30 Minuten zeigen wir, ob und wie es für Ihre Organisation passt.
Listen & FAQ
Checklisten, FAQ und Vergleichstabellen.
Checkliste (grüne Haken) umantis/el-checklist
Liste mit automatischen Marken-Haken.
Gut für: Vorteile oder Leistungen klar auflisten. · Wo: Produkt-, Angebots-, Checkliste-Seiten.
- Erster Vorteil oder Leistung
- Zweiter Vorteil oder Leistung
- Dritter Vorteil oder Leistung
- Vierter Vorteil oder Leistung
Checkliste (2-spaltig) umantis/el-checklist-2col
Zwei Checklisten-Spalten nebeneinander.
Gut für: Viele Punkte platzsparend in zwei Spalten. · Wo: Leistungsübersichten.
- Punkt eins
- Punkt zwei
- Punkt drei
- Punkt vier
- Punkt fünf
- Punkt sechs
FAQ (Frage / Antwort) umantis/el-faq
Editierbare Frage-Antwort-Liste mit Trennlinien.
Gut für: Häufige Fragen verständlich beantworten. · Wo: Produkt-, Preis- und Event-Seiten.
Erste häufige Frage?
Klare, kurze Antwort auf die erste Frage.
Zweite häufige Frage?
Klare, kurze Antwort auf die zweite Frage.
Dritte häufige Frage?
Klare, kurze Antwort auf die dritte Frage.
Vergleichstabelle (2 Spalten) umantis/el-comparison
Gegenüberstellung zweier Optionen mit Haken/Kreuz.
Gut für: Zwei Optionen direkt gegenüberstellen. · Wo: Cloud-vs-On-Premise, Tarif-Seiten.
Cloud / SaaS
- ✓ Immer aktuell
- ✓ Planbare Kosten
- ✓ Kein eigener Betrieb
On-Premise
- ✕ Eigene Wartung nötig
- ✕ Hardware-Investition
- ✕ Updates manuell
Medien
Bilder, Videos, Screenshots und Downloads.
Bild mit Bildunterschrift umantis/el-image
Gerundetes Bild mit optionaler Unterschrift.
Gut für: Ein Einzelbild mit Bildunterschrift zeigen. · Wo: Blog- und Inhaltsseiten.
Video-Einbettung (16:9) umantis/el-video
YouTube-Einbettung. Im Block einfach die Video-URL einfügen.
Gut für: Ein YouTube-Video sauber einbetten. · Wo: Produkt-, Event- und Videoseiten.
Download- / Factsheet-Grid umantis/el-download-grid
Karten-Raster mit Download-Links (PDF, Factsheets).
Gut für: PDFs und Factsheets zum Download anbieten. · Wo: Ressourcen- und ABM-Seiten.
Kapitel 3
Styleguide
Das verbindliche Design-System: Typografie, Farben, Abstände, Komponenten und Betriebs-Konventionen. Alle Werte als CSS-Variablen in :root – nie hardcoden.
Typografie
Headings = Ubuntu (–um-font-heading). Body/UI/Buttons = Outfit (–um-font-body). H3 ist Violett.
H1 · Page Hero
Ubuntu 700 · clamp(2–3rem) · -0.02em
H2 · Section Title
Ubuntu 700 · clamp(1.6–2.25rem)
H3 · Subsection
Ubuntu 500 · Violett #781e5f
H4 · Card Title
Ubuntu 500 · ~1.1rem
Body / UI
Outfit 400–800 · 1rem
Farbsystem
Primär (CTA)
#de323c · –um-color-primary
Sekundär
#781e5f · –um-color-secondary
Success
#73b736 · –um-color-success
Dark Surface
#2a2a2a · –um-color-dark
Text
#000000 · –um-color-text
Muted
#878787 · –um-color-muted
Border
#dadada · –um-color-border
Offwhite
#ededed · –um-offwhite
CI-Gradient · –um-gradient · linear-gradient(135deg,#de323c,#781e5f)
Spacing, Radii & Shadows
| Token | Wert |
|---|---|
| Spacing (8px-Grid) | –um-space-xs…4xl = 4/8/16/24/32/48/64/96px |
| Section-Spacing | clamp(4rem, 8vw, 7rem) |
| Radii | sm/md/lg/xl/pill = 4/8/12/16/999px |
| Container | max 1200px · narrow 860px · wide 1400px |
| Gutter | clamp(1rem, 3vw, 2rem) |
Komponenten
Beispiele direkt aus der Bibliothek (editierbar): Buttons, Eyebrow-Badge und Checkliste.
Kicker-Text hier
- Erster Vorteil oder Leistung
- Zweiter Vorteil oder Leistung
- Dritter Vorteil oder Leistung
- Vierter Vorteil oder Leistung
Betriebs-Konventionen
- Bilder immer lokal in die Mediathek – nie von umantis.com hotlinken (Hotlink-Schutz inkonsistent).
- Button-Hover nie violett – globale Regel ist auf Nicht-Button-Links beschränkt.
- Footer = umantis.com-Struktur: ein Kontaktblock, eine Adresse St. Gallen, vier Link-Spalten.
- Modulseiten-Pattern: dunkler Hero (#2a2a2a) → alternierende Sektionen → Trust-Strip → CTA-Footer.
- Wording: kein „revisionssicher/rechtssicher/garantiert gesetzeskonform“ → „nachvollziehbar dokumentiert“, „gesetzeskonform konfigurierbar“. Region-neutral CH+DE.
- Deploy & Cache: Nach PHP-/Template-Edits zusätzlich
wp cache flushUNDopcache_reset()– sonst serviert OPcache die alte Datei. CSS nutzt filemtime-Busting (sofort live).
SEO & AI-GEO
SEO ohne Plugin (inc/seo.php, liest Yoast-Postmeta, JSON-LD-Graph). Pro Page: Title, Meta-Description, Canonical, OG/Twitter, JSON-LD. Für AI-GEO optimiert: klare H-Struktur, FAQ-Schema, prägnante Einsätze.
Kapitel 4
ABM-Anleitung
Personalisierte Account-Based-Marketing-Landingpages: Rollen, Prozess und Spezifikationen. Eine Master-Vorlage, pro Account dupliziert und befüllt.
Rollen
Sales
Liefert Account-Briefing und alle Inhalte/Assets, entscheidet (mit Marketing) über die Module, gibt frei, versendet die Seite an den Account.
Marketing
Prüft Inhalte und Tonalität, entscheidet gemeinsam mit Sales über sinnvolle Module, stellt Vorlagen/Brand-Material bereit.
Umsetzung
Dupliziert die Master-Vorlage, setzt Inhalte/Assets ein, schaltet Module, hinterlegt den Formular-Empfänger, veröffentlicht.
Prozess in 7 Schritten
| Schritt | Wer | Was |
|---|---|---|
| 1. Account auswählen & briefen | Sales | Account mit bestehendem Verkaufskontakt wählen (ABM ist kein Erstakquise-Format). Ziel, Buying Center und Kernbotschaft festhalten. |
| 2. Inhalte & Assets sammeln | Sales | Alle nötigen Inhalte zusammenstellen: Kundenlogo, Hero-Bild, Trust-/Referenzlogos, Zitate, Video, Dokumente, Ansprechpartner inkl. Unterschrift, Formular-Empfänger. |
| 3. Module festlegen | Sales + Marketing | Gemeinsam entscheiden, welche optionalen Module sinnvoll sind (Testimonial, Vergleich, Referenzvideo, Dokumente, FAQ, KPI, Referenzen). |
| 4. Seite konfigurieren | Umsetzung | Master-Vorlage duplizieren, Account-Daten und Assets einsetzen, Module über die Schalter (cfg) an-/ausschalten, Empfänger serverseitig hinterlegen. |
| 5. Review & Freigabe | Sales + Marketing | Inhalte, Reihenfolge, Zahlen-Konsistenz und Assets prüfen. Erst nach Freigabe veröffentlichen. |
| 6. Veröffentlichen & versenden | Sales | Seite live schalten (noindex/nofollow bleibt) und den personalisierten Link an den Account senden. |
| 7. Anfragen betreuen | Sales | Eingehende Fragen landen unter „ABM-Anfragen“ im Backend (mit CSV-Export) und werden persönlich beantwortet. |
Seitenstruktur (15 Module)
Feste Reihenfolge. „Optional (…)“ nennt den zugehörigen Modul-Schalter.
| # | Modul | Inhalt | Status |
|---|---|---|---|
| 1 | Hero | Kundenlogo (Negativ) + Titel + Lead + Hero-Bild rechts. | Pflicht |
| 2 | Trust-Bar | „X Kunden vertrauen uns“ + 6 Kundenlogos (dunkel). | Pflicht |
| 3 | Persönliche Ansprache | „Liebes Team von …“ – persönlicher Einstieg. | Pflicht |
| 4 | Persönliches Video | Kurze Videobotschaft. | Optional |
| 5 | Pain · 4 Drehkacheln | Front: Icon + Titel + Teaser. Rückseite: Detail. | Pflicht |
| 6 | Nächste Schritte | Dunkles Band, 5 klickbare Schritt-Boxen + Inhaltspanel. | Pflicht |
| 7 | KPI / Proof | Gradient-Band mit 4 Kennzahlen. | Optional (kpi) |
| 8 | Testimonial | Zitatmodul, mehrere Zitate durchblätterbar. | Optional (testimonial) |
| 9 | Vergleich | SaaS vs. On-Premise. | Optional (comparison) |
| 10 | Referenzen-Grid | Dunkles Logo-/Text-Grid. | Optional (references) |
| 11 | Referenzkunden-Video | Direkt nach den Referenzen. | Optional (ref_video) |
| 12 | Dokumente | Download-Karten. | Optional (documents) |
| 13 | FAQ | Akkordeon, vor den Ansprechpartnern. | Optional (faq) |
| 14 | Ansprechpartner | Karten mit Foto, Kontakt und Sales-Unterschrift. | Pflicht |
| 15 | Final-CTA · Fragen-Formular | „Haben Sie noch Fragen?“ + Formular. Kein automatischer E-Mail-Versand. | Pflicht |
Asset-Spezifikationen
| Element | Was Sales liefert | Format | Dimension | Pflicht |
|---|---|---|---|---|
| Kundenlogo (Hero) | Logo in Negativ/Weiss | SVG · sonst PNG transparent | Höhe ≥ 60px · PNG ≥ 480×240 | Pflicht |
| Hero-Bild | Foto: Gebäude/Standort | JPG | min. 1600×1100 · ~16:10 | Optional |
| Trust-Bar-Logos (6×) | 6 Kundenlogos weiss/negativ | PNG transparent | ~240×80 (@2x) | Pflicht |
| Referenz-Logos (≤6) | Referenzkunden weiss/negativ | PNG transparent | ~320×136 (@2x) | Optional |
| Ansprechpartner-Foto | Porträt je Person | JPG | 400×400 quadratisch | Pflicht je Person |
| Sales-Unterschrift | Unterschrift freigestellt | PNG transparent | ~150×46 einfarbig | Optional |
| Dokumente | PDF + Linktitel | – | Optional | |
| Formular-Empfänger | E-Mail-Adresse | Text | serverseitig hinterlegt | Pflicht |
Hinter den Kulissen
Template & Master-Vorlage
Läuft über ein eigenes Template (page-abm-smn-ideal-v2.php) im .abm-Designsystem. Pro Account eine Kopie mit eigenen Daten/Assets – gleiches Look & Feel.
Modul-Schalter (cfg)
Optionale Module pro Landingpage an-/ausschalten: testimonial, comparison, ref_video, documents, faq, kpi, references. Aus = keine Layout-Lücke.
Formular & Anfragen
Eingaben werden in wp_um_abm_questions gespeichert, im Backend unter „ABM-Anfragen“ inkl. CSV-Export. Keine automatischen E-Mails – Anfragen werden persönlich beantwortet.
Sichtbarkeit & CTA
ABM-Seiten sind noindex,nofollow. Der globale „Gespräch vereinbaren“-Banner wird unterdrückt; einziger CTA ist das finale Fragen-Formular.
Events & Webinare
Bausteine für Event- und Webinar-Beiträge. Im Editor unter Einfügen → Vorlagen → Umantis · Events & Webinare per Klick einfügbar. Termine, Ort und Anmelde-URLs pflegt weiterhin die Meta-Box „Event-Details» unter dem Beitrag.
Event-Sektion (Eyebrow + Titel + Lead)
Story-Sektion für Event-/Webinar-Beiträge: Eyebrow-Label mit Strich, Überschrift (Akzent via kursiv), Lead-Absatz.
Gut für: Jede inhaltliche Sektion eines Event-/Webinar-Beitrags. · Wo: Event- und Webinar-Beiträge.
Eyebrow-Label
Sektions-Überschrift mit Akzent
Lead-Absatz: 1–2 Sätze, die die Sektion einleiten.
Webinar-Fakten
Fakten-Leiste im Kartenformat: Plattform, Dauer, Sprache – beliebig erweiterbar (Fakten-Gruppe duplizieren).
Gut für: Die wichtigsten Webinar-Daten auf einen Blick. · Wo: Webinar-Beiträge, nach dem Intro.
Plattform
Zoom Events
Dauer
45 Min.
Sprache
Deutsch
Speaker-Karten
Speaker mit Foto (normaler Bild-Block – per Klick über die Mediathek tauschbar), Name, Rolle, Firma und Kurzbio. Für weitere Speaker die Karte duplizieren.
Gut für: Referent:innen vorstellen. · Wo: Event- und Webinar-Beiträge.
Vorname Nachname
Rolle / Funktion · Firma
1–2 Sätze zur Person und ihrem Fachgebiet.
ZP
Zweite Person
Rolle / Funktion
Kurzbio der zweiten Person (ohne Foto: Initialen-Kreis).
Event-Highlights (Haken-Liste)
Highlights als Listen-Karten mit grünen Haken. Listenpunkte normal editieren/ergänzen.
Gut für: „Das nehmen Sie mit» / Programm-Highlights. · Wo: Event- und Webinar-Beiträge.
- Erster Highlight-Punkt
- Zweiter Highlight-Punkt
- Dritter Highlight-Punkt
Zielgruppen-Box
Hervorgehobene Box mit rotem Rand: für wen das Event/Webinar gedacht ist.
Gut für: Zielgruppen-Absatz. · Wo: Event- und Webinar-Beiträge, vor dem CTA.
Für wen dieses Webinar ist
Beschreibung der Zielgruppe: HR-Leitung, People & Culture, Recruiting-Verantwortliche …
Anmelde-CTA (Buttons)
Button-Zeile: Anmeldung (rot, primär) und optional Aufzeichnung (sekundär). Link im Button anpassen.
Gut für: Anmeldung/Registrierung. · Wo: Ende des Webinar-Beitrags.