Komponenten

Überschrift

Strukturierte Schlagzeilen, die mehr bewirken.

Die Komponente Überschrift gibt Ihnen die vollständige Kontrolle über semantische, gestylte Überschriften in Ihrem Projekt, egal ob Sie einen Seitentitel, einen Inhaltsabschnitt oder eine Überschrift mit visuellen Verbesserungen markieren wollen. Sie wurde mit Blick auf Barrierefreiheit und Suchmaschinenoptimierung entwickelt und ermöglicht es Ihnen, Überschriftenebenen (H1-H6) auszuwählen, Inhalte mit semantischen Tags zu umbrechen und optional visuelle Elemente wie Symbole oder Inline-Komponenten einzubinden.

Mit ihrem flexiblen Layout und den umfangreichen Formatierungsoptionen stellt die Komponente Überschrift sicher, dass jeder Abschnitt Ihres Inhalts einen klaren, optimierten und gestalteten Anker hat, der sowohl für Menschen als auch für Suchmaschinen geeignet ist.

Ordentliche Semantik, klare Hierarchie

  1. Verbesst Sie SEO und Benutzerführung.
    Wählen Sie H1 bis H6 je nach Struktur.

  2. Verwenden Sie Inline-Formatierung und Links.
    Gestalten Sie Überschriften visuell ohne Code.

  3. Barrierefreie semantische Struktur.
    Ideal für Benutzer und Hilfsmittel.

Mehr als Text, machen Sie es visuell

  1. Fügen Before-/After-Elemente hinzu.
    Perfekt für weitere visuelle Elemente.

  2. Überschriften an Markendesign anpassen.
    Größe, Farbe, Abstände - ganz wie Sie wollen.

  3. Überschriften einzeln oder inline.
    Passen Sie sie an jedes Inhaltslayout an.

Anwendungsfälle

Die Überschriftenkomponente ist für die Strukturierung des Inhalts, die SEO-Klarheit und die visuelle Kommunikation unerlässlich. Sie hilft bei der Definition der Dokumenthierarchie und gibt den Inhaltsteams die Flexibilität, Titel mit Persönlichkeit zu präsentieren.

Anwendungsfälle umfassen:

  • Seitentitel und Zwischenüberschriften

  • Abschnittstrennungen innerhalb von Landing Pages oder Artikeln

  • Visuelle Beschriftungen mit begleitenden Symbolen

  • Thematische oder markenfarbene Überschriften unter Verwendung von Komponententhemen

  • Zugängliche Überschriften mit Screenreader-freundlichem Markup

  • Mit Ankern verknüpfte Abschnitte zur Verbesserung der Navigation und UX

Durch die Trennung von Semantik (Überschriftenebene) und Styling sorgt Vertex Forge dafür, dass Ihre Überschriften gut aussehen und in Bezug auf SEO und Barrierefreiheit noch besser funktionieren.

Configuration Options & Features

Die Überschriftenkomponente bringt Struktur, Zugänglichkeit und visuellen Glanz in jeden Abschnitt Ihrer Website. Mit semantischer Flexibilität, Inhaltsschlitzen und Thematisierungsunterstützung ist sie mehr als nur ein Titel, sie ist ein zentrales Werkzeug zur Organisation und Bereicherung Ihrer Inhalte.

Überschriften, die sich abheben, besser ranken und überall besser gelesen werden.

Typ

Wählen Sie den semantischen HTML-Überschriftstag von H1 bis H6 aus.

  • H1: Primärer Seitentitel (nur einer pro Seite empfohlen)

  • H2-H6: Verwendung für verschachtelte Zwischenüberschriften und die Inhaltsstruktur

Die korrekte Verwendung hilft bei der Indizierung durch Suchmaschinen und der Zugänglichkeit von Seiten.

Before & After

Optionale Komponenten-Slots zur Darstellung zusätzlicher Inline-Inhalte:

  • Before: Erscheint direkt vor dem Inhalt der Richtextüberschrift

  • After: Erscheint direkt nach der Überschrift

Verwenden Sie diese, um Icons, Abzeichen, Inline-SVGs oder stilisierte Komponenten wie Beschriftungen oder Hochkommata einzufügen

Beide Slots akzeptieren verschachtelbare, inline-kompatible Komponenten.

Richtext

Das Hauptinhaltsfeld für Ihre Überschrift, unterstützt durch einen WYSIWYG-Editor mit Formatierungsoptionen wie:

  • Fett, kursiv, unterstrichen

  • Inline-Links

  • Zeilenumbrüche und Abstände

  • Hervorgehobener Text oder Markenbetonung

Überschriften sind oft der Ausgangspunkt für die SEO-Optimierung. Achten Sie also darauf, dass Ihre Überschriften informativ, lesbar und visuell ansprechend sind.

Komponenten Theme

Wenden Sie mit den Einstellungen des Komponententhemas Gestaltungsoptionen auf den Überschrifts-Komponenten an. Damit können Sie das Erscheinungsbild, die Abstände und das Layoutverhalten visuell anpassen.

Sie können auch Styles von Theme Presets die verknüpft sind erben oder überschreiben, um die vollständige Kontrolle zu behalten.