Feature

This content is for v1.0. Switch to the latest version for up-to-date documentation.

Übersicht

Der Feature ermöglicht es Ihnen, Ihre wichtigsten Features, Vorteile oder Dienstleistungen in einem organisierten, visuell ansprechenden Format zu präsentieren. Jedes Feature kann ein Icon, eine Überschrift, eine Unterüberschrift, eine Beschreibung und einen optionalen Call-to-Action-Button enthalten – perfekt, um hervorzuheben, was Ihr Angebot einzigartig macht.

Felder

Aktiv

Typ: Boolean
Erforderlich: Nein
Standardwert: true (Standard: aktiv)
Zweck: Steuert, ob der Feature-Bereich auf der Website angezeigt wird
Hinweis: Deaktivieren Sie dieses Feld, wenn der Bereich vorübergehend nicht sichtbar sein soll, ohne die Konfiguration zu löschen

Überschrift

Typ: String
Erforderlich: Nein
Zweck: Hauptüberschrift für den gesamten Feature
Beispiele:
Unsere Vorteile, Warum uns wählen

Beschreibung

Typ: Text
Erforderlich: Nein
Zweck: Beschreibung für den Feature
Beispiel:
Warum Sie uns wählen sollten

Features

Typ: Array von Feature-Objekten
Erforderlich: Nein
Zweck: Liste der anzuzeigenden Features

Feature-Objekt-Felder

Überschrift

Typ: String
Erforderlich: Nein
Zweck: Der Haupttitel für dieses Feature
Beispiel:
Expertenteam

Unterüberschrift

Typ: String
Erforderlich: Nein
Zweck: Ein sekundärer Titel oder Slogan
Beispiel:
Branchenführende Expertise

Beschreibung

Typ: Text
Erforderlich: Nein
Zweck: Detaillierte Beschreibung des Features
Beispiel:
Unser Team bringt jahrelange Expertise und Wissen mit...

Icon

Typ: Icon-Referenz (Lucide)
Erforderlich: Nein
Zweck: Ein Lucide-Icon, das mit dem Feature angezeigt wird
Beispiele:
UserCheck, Zap, Calendar

Button anzeigen

Typ: Boolean
Erforderlich: Nein
Standardwert: false
Zweck: Flag zum Anzeigen oder Ausblenden des Call-to-Action-Buttons für dieses Feature

CTA-Button (Call to Action Button)

Typ: Referenz (ctaButtonItem)
Erforderlich: Nein
Zweck: Call-to-Action-Button-Konfiguration für dieses Feature (Label, Link, Rolle)
Hinweis: Nur sichtbar, wenn „Button anzeigen“ auf true gesetzt ist

Hintergrundfarbe

Typ: Referenz (backgroundColor)
Erforderlich: Nein
Zweck: Legt die Hintergrundfarbe für den gesamten Feature fest

Verwendungsbeispiel

Typische Konfiguration

Überschrift: Unsere Vorteile
Beschreibung: Warum Sie uns wählen sollten
Features:
1. “Expertenteam” (UserCheck-Icon)
  - Unterüberschrift: Branchenführende Expertise
  - Beschreibung: Unser Team bringt jahrelange Expertise und Wissen mit...
  - Button anzeigen: true
  - CTA-Button: { label: "Mehr erfahren", link: "/about-us" }
2. “Moderne Technologie” (Zap-Icon)
  - Unterüberschrift: Innovative Lösungen
  - Beschreibung: Gebaut mit neuester Technologie und Innovation...
  - Button anzeigen: true
  - CTA-Button: { label: "Produkte ansehen", link: "/products" }
3. “Flexible Optionen” (Calendar-Icon)
  - Unterüberschrift: Verfügbar 24/7
  - Beschreibung: Wir bieten flexible Lösungen, die sich an Ihre Bedürfnisse anpassen...
  - Button anzeigen: true
  - CTA-Button: { label: "Loslegen", link: "/get-started" }

Best Practices

Konsistenz: Verwenden Sie ähnliche Strukturen für alle Features, um visuelle Harmonie zu schaffen.
Icons: Verwenden Sie Icons konsistent und angemessen – sie sollten Klarheit schaffen, nicht nur Dekoration sein.
Klarheit: Halten Sie Überschriften und Unterüberschriften kurz und wirkungsvoll.
Anzahl: 3-6 Features funktionieren am besten für optimale Benutzererfahrung.
Buttons: Verwenden Sie CTA-Buttons sparsam, nur wenn sie einen Mehrwert bieten.
Fokus: Jedes Feature sollte einen einzigen, klaren Vorteil kommunizieren.

Hauptmerkmale

Visuelle Organisation: Features werden in einem sauberen, organisierten Layout angezeigt
Icon-Unterstützung: Lucide-Icons fügen visuelles Interesse und Klarheit hinzu
Flexibler Inhalt: Überschriften, Unterüberschriften und Beschreibungen für umfassende Informationen
Call-to-Action: Optionale Buttons für jedes Feature, um Engagement zu fördern
Anpassbar: Hintergrundfarbe und Layout-Optionen für Markenkonsistenz

Wo es verwendet wird

Seiten (page)
Allgemeine Inhaltsseiten, insbesondere Startseiten und Serviceseiten

Technische Hinweise

Icons stammen aus der Lucide Icon-Bibliothek
CTA-Buttons verwenden das globale ctaButtonItem-Schema (Label, Link, Rolle)
Hintergrundfarbe verweist auf das globale backgroundColor-Schema
Features werden typischerweise in einem Grid-Layout angezeigt, das sich an die Bildschirmgröße anpasst
Jedes Feature hat ein _key-Feld (interne Sanity-Kennung)