Patterns

Eine Liste von aufklappbaren Accordion-Elementen, jeweils mit Überschrift und Textinhalt.

Eine Liste aller Seiten, die dieser Kategorie, bzw. diesem Schlagwort oder der Taxonomie zugewiesen sind.

Intro für Archivseiten (Übersichtsseiten) von Kategorien, Tags und Taxonomien.

Eine Liste von Seiten, die der aktuellen Seite untergeordnet sind – jeweils mit dem Titel der Seite, einer optionalen Visualisierung und ggf. einem Einleitungstext.

Kommentarfunktion mit der Liste aller Kommentare und einem Formular zum Verfassen neuer Kommentare. Die Kommentare werden mit Kommentar-Text, Autor und Datum angezeigt und können in einer Tiefe beantwortet werden.

Ein Kontaktformular mit allen gängigen Eingabefeldern und Formularelementen.

Vorschau patterns/contact-information-image-static.php patterns/contact-info-static.php Adresse und Kontaktdaten sind in ein eigenes Pattern ausgelagert, da diese häufig auch an anderer Stelle benötigt werden – z.B. im Footer. Figma Hinweise

Allgemeine Kontaktinformationen sowie Informationen zu einer Ansprech- bzw Kontaktperson.

Eine Liste von Produkten, die ergänzend zu anderen Produkten gekauft werden können. (Querverkäufe)

Ein Sinnabschnitt mit Handlungaufforderung – bestehend aus Titel, ggf. Text, ggf. Bild oder Video und CTA-Button.

Ein Spendenformular eines Drittanbieters.

Eine Liste von Dateien, die zum Download zur Verfügung stehen.

Einleitungsbereich für Fehlerseiten.

Eine Liste von Terminen oder Veranstaltungen.

Eine Übersicht von Fakten oder Zahlen – jeweils mit Titel, kurzer Beschreibung und Icon.

Ein Sinnabschnitt, in dem ein wichtiger Inhalt visuell aufgewertet präsentiert wird.

Ausgewählte Beiträge (sticky, oben gehalten) mit Titel, Bild, Autorin und Verlinkung.

Eine Liste von Produkten verschiedener Auswahl, jeweils mit Bild, Preis, Beschreibung und Kontaktdaten.

Eine Liste von Inhalten, die anhand einer Gruppe von Filterkriterien reduziert werden kann.

Auf allen Unterseiten sichtbarer, globaler Website-Bereich mit Pflichtangaben.

Eine Bildergalerie mit mehreren Bildern, die per Klick in Vollbildansicht dargestellt werden können.

Eine verlinkte Übersicht aller Buchstaben des Alphabets mit Sprungmarken zu Segmenten, die detaillierte Inhalte zu diesem Buchstaben auflisten.

Auf alle Unterseiten sichtbarer, globaler Website-Bereich mit Logo, verschiedenen Navigationsbereichen unbegrenzter Tiefe und Suche.

Intro für die Blog-Startseite oder die Frontpage.

Eine Liste von Jobs, jeweils mit Berufsbezeichnung und Ort.

Ein Intro mit starkem Marketing-Kontext und CTA.

Die neuesten Beiträge mit Pagination zu älteren Beiträgen.

Eine Liste von Logos.

Anmeldeformular für einen externen Newsletter-Dienst mit Feldern für E-Mail und ggf. Name sowie Infos zum Datenschutz und Absenden-Button.

Eine Infobox mit wichtigen Hinweisen.

Einleitungsbereich für Seiten mit Überschrift (h1), Einleitungstext und ggf. Visualisierung.

Eine Liste von automatisch geladenen (dynamisch) oder redaktionell festgelegten (statisch) Page Teasern.

Einleitungsbereich für die Detailseite zu einer Person mit Foto und weiteren übergeordneten Informationen.

Eine Liste von Personen, jeweils mit Bild, Name, Beschreibung und Kontaktdaten.

Autorin bzw. Autor des Beitrags, mit Bild (Gravatar), Name, Beschreibung und Kontaktdaten.

Der Einleitungsbereich eines Beitrags mit Überschrift (h1), Bild, Datum, Autor, Kategorien, Tags usw.

Verlinkungen zum vorherigen bzw. nächsten Beitrag.

Eine Liste chronologische Liste aller Beiträge mit Pagination zu älteren Beiträgen.

Eine Darstellung verschiedener Preis- bzw. Tarifoptionen.

Eine Prozessdarstellung mit Meilensteinen in festgelegter Reihenfolge.

Eine Liste aller Produkten, die dieser Kategorie, Marke, Schlagwort oder Produkt-Taxonomie zugewiesen sind.

Sprungmarken zu den inhaltlichen Sektionen der selben Seite.

Eine Liste von thematisch passenden Beiträgen. Die Zuweisung erfolgt automatisch über eine Taxonomie oder händisch.

Freitextbereich mit allen gängigen Text-Elementen (Überschriften, Listen, Links etc.) und Formatierungen (fett, kursiv) sowie der Option Bilder einzufügen.

Einleitungsbereich für die Suchergebnisse mit Eingabefeld zum erneuten Suchen.

Ergebnisliste der gefundenen Seiten inkl. Pagination.

Eine Liste von Seiten der gleichen Strukturebene (Geschwister-Seiten) – jeweils mit dem Titel der Seite, einer optionalen Visualisierung und ggf. einem Einleitungstext.

Die inhaltlichen Sektionen der selben Unterseite können per Tab angesteuert werden. Es kann immer nur ein inhaltlicher Abschnitt gleichzeitig angezeigt werden.

Eine Liste manuell ausgewählter Kundenstimmen.

Eine Liste von höherwertigeren Produkten, die alternativ zu einem anderen Produkt gekauft werden sollen. (Mehrverkauf)

Eine Video-Sektion mit optionalem Transkript.